⚛️ 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
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 (7)
- frontend-design (Skill, anthropics/skills, ★ 176,6k · oficial) — Guía a Claude para crear interfaces web con diseño distintivo e intencional, evitando la estética genérica de la IA. GitHub
- 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
- web-artifacts-builder (Skill, anthropics/skills, ★ 176,6k · oficial) — Suite para construir artefactos HTML complejos con React, Tailwind y shadcn/ui: apps multi-componente con estado. 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
Versiones por herramienta
Packs relacionados
Preguntas frecuentes
¿Qué es el pack Frontend React?
UIs modernas con componentes generados con criterio Incluye 7 recursos.
¿Para quién es?
Para profesionales y equipos que trabajan en Frontend React y buscan recursos probados para su asistente de IA.
¿Qué incluye y cuánto cuesta?
Incluye 7 recursos (Agente (1), Guía (1), Servidor MCP (3), Skill (2)) y se desbloquea con el Plan Pro ($30). Los planes son acumulativos.