⚛️ 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 Claude: las skills, los servidores MCP, los prompts y las guías de este pack se usan en la conversación con Claude, que los consulta mientras trabaja con tus archivos y servicios conectados. Vista para Claude: solo se muestran los tipos de recurso compatibles con Claude (Skill, Servidor MCP, 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 (6)
- 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