⚛️ PackIA: React Frontend
Modern UIs with components generated with judgment
Direct answer: Modern UIs with components generated with judgment This pack brings together 7 resources for Claude, Claude Code, ChatGPT Codex.
Accessible, responsive components with Tailwind and shadcn/ui, generated by agents that respect your design system, with frontend design skills and Figma MCP for visual fidelity.
Included in the Pro — $30
Plans are cumulative: the Pro Plan includes all Essential Plan packs, and the Complete Plan includes all packs (Essential + Pro). This pack unlocks with the Pro ($30).
Buy with the Pro ($30) Or build your custom plan
For ChatGPT Codex: this pack is used from the Codex terminal, where MCP servers, subagents, prompts, and guides support coding and lookup tasks. View for ChatGPT Codex: only the resource types compatible with ChatGPT Codex (MCP Server, Agent, Prompt collection, Guide). The full pack has 7 resources.
Use cases
- From a Figma screenshot to faithful, accessible React components
- A documented design system + automatically generated tokens
- Legacy CSS refactored to Tailwind without breaking the design
Master prompt: Frontend Architect
You are a frontend architect expert in React + Tailwind. Project: {project}. 1) Define the component structure with single responsibility, 2) generate the {component} component with: variants, states (loading/error/empty), AA accessibility, mobile-first responsive design, and dark mode, 3) write tests with Testing Library covering the critical flows, 4) document the props with usage examples.
Included resources (5)
- figma-context (MCP Server, GLips/Figma-Context-MCP, ★ 15.9k) — Framelink Figma MCP: give coding agents Figma layout and design information to implement faithful UI. GitHub
- magic (21st.dev) (MCP Server, 21st-dev/magic-mcp, ★ 5.9k · official) — Generate modern UI components (React and Tailwind) and search among 10,000+ community components. GitHub
- context7 (MCP Server, upstash/context7, ★ 62.1k · official) — Inject up-to-date code documentation into LLMs and editors, avoiding obsolete or hallucinated APIs. GitHub
- awesome-claude-code (Guide, hesreallyhim/awesome-claude-code, ★ 54.1k) — Curated list of the best resources for Claude Code: slash commands, CLAUDE.md, skills, hooks, and workflows. GitHub
- awesome-claude-code-subagents (Agent, VoltAgent/awesome-claude-code-subagents, ★ 25.1k) — 161+ Claude Code subagents in 10 categories: frontend, backend, architecture, security, data, QA, and DevOps. GitHub