⚛️ PackIA: Frontend React
UIs modernas con componentes generados con criterio
Respuesta directa: UIs modernas con componentes generados con criterio Este pack reúne 7 recursos para Claude, Claude Code, ChatGPT Codex.
Componentes accesibles y responsive con Tailwind y shadcn/ui, generados por agentes que respetan tu design system, con skills de frontend design y MCP de Figma para fidelidad visual.
Incluido en el Plan Pro — $30
Los planes son acumulativos: el Plan Pro incluye todos los packs del Plan Esencial, y el Plan Completo incluye todos los packs (Esencial + Pro). Este pack se desbloquea con el Plan Pro ($30).
Comprar con el Plan Pro ($30) O arma tu plan a medida
Para ChatGPT Codex: este pack se usa desde la terminal de Codex, donde servidores MCP, subagentes, prompts y guías apoyan tareas de código y consulta. Vista para ChatGPT Codex: solo se muestran los tipos de recurso compatibles con ChatGPT Codex (Servidor MCP, Agente, Colección de prompts, Guía). El pack completo tiene 7 recursos.
Casos de uso
- De captura de Figma a componentes React fieles y accesibles
- Design system documentado + tokens generados automáticamente
- Refactor de CSS heredado a Tailwind sin romper el diseño
Prompt maestro: Frontend Architect
Eres frontend architect experto en React + Tailwind. Proyecto: {proyecto}. 1) Define la estructura de componentes con responsabilidad única, 2) genera el componente {componente} con: variantes, estados (loading/error/empty), accesibilidad AA, responsive mobile-first y dark mode, 3) escribe los tests con Testing Library cubriendo los flujos críticos, 4) documenta las props con ejemplos de uso.
Recursos incluidos (5)
- figma-context (Servidor MCP, GLips/Figma-Context-MCP, ★ 15,9k) — Framelink Figma MCP: da a los agentes de código información de layout y diseño de Figma para implementar UI fiel. GitHub
- magic (21st.dev) (Servidor MCP, 21st-dev/magic-mcp, ★ 5,9k · oficial) — Genera componentes UI modernos (React/Tailwind) y busca entre 10.000+ componentes de la comunidad. GitHub
- context7 (Servidor MCP, upstash/context7, ★ 62,1k · oficial) — Inyecta documentación de código actualizada en LLMs y editores, evitando APIs obsoletas o alucinadas. GitHub
- awesome-claude-code (Guía, hesreallyhim/awesome-claude-code, ★ 54,1k) — Lista de los mejores recursos para Claude Code: slash commands, CLAUDE.md, skills, hooks y workflows. GitHub
- awesome-claude-code-subagents (Agente, VoltAgent/awesome-claude-code-subagents, ★ 25,1k) — 161+ subagentes de Claude Code en 10 categorías: frontend, backend, arquitectura, seguridad, datos, QA y DevOps. GitHub