Menu
Generate premium React+TS+Tailwind UI components from natural language via 21st.dev Magic MCP server
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Auto-review planning pipeline - runs CEO then design then eng reviews sequentially with auto-decisions. CARL TRIGGERS: autoplan, run the planning pipeline, full plan review, auto plan, plan everything. SOURCE: garrytan/gstack/autoplan, integrated as gs-autoplan on 2026-05-29.
Performance regression detection - baseline page load, Core Web Vitals, resource sizes. CARL TRIGGERS: benchmark, performance check, page speed, core web vitals, perf baseline. SOURCE: garrytan/gstack/benchmark, integrated as gs-benchmark on 2026-05-29.
Post-deploy canary monitoring - watches console errors, perf regressions, page failures. CARL TRIGGERS: canary monitor, post-deploy watch, after deploy check, monitor production, watch the deploy. SOURCE: garrytan/gstack/canary, integrated as gs-canary on 2026-05-29.
Safety guardrails - warns before destructive commands (rm -rf, DROP TABLE, force-push). CARL TRIGGERS: be careful, careful mode, destructive command warning, safety warning. SOURCE: garrytan/gstack/careful, integrated as gs-careful on 2026-05-29.
Chief Security Officer security audit - OWASP Top 10 plus STRIDE threat modeling. CARL TRIGGERS: security audit, OWASP audit, STRIDE, vulnerability check, security review, threat model, pen test mindset. SOURCE: garrytan/gstack/cso, integrated as gs-cso on 2026-05-29.
Generate missing documentation from scratch using the Diataxis framework. CARL TRIGGERS: generate docs, create documentation, draft docs, diataxis, write missing docs. SOURCE: garrytan/gstack/document-generate, integrated as gs-doc-generate on 2026-05-29.
| name | 21st.dev Magic MCP |
| description | Generate premium React+TS+Tailwind UI components from natural language via 21st.dev Magic MCP server |
| recall_keywords | ["21st","magic component","generate component","ui component","component library","design system","/ui","generate ui","create component","magic mcp","svgl","brand logo"] |
21st.dev Magic is an MCP server that generates modern, production-ready UI components from natural language descriptions. It accesses 21st.dev's curated component library and outputs React + TypeScript + Tailwind CSS code directly into your project.
Describe the component you need naturally. The MCP server tools will be available when the server is running. Common invocation patterns:
"Generate a hero section with animated text reveal and gradient background"
"Create a responsive navigation bar with transparent-to-solid scroll effect"
"Build a pricing card grid with hover animations"
"Design a testimonial carousel with star ratings"
#C9A035 as accent, #0D1B3E for text"Generated components land as .tsx files. To integrate:
src/components/ui/)| Use 21st.dev Magic | Hand-Code Instead |
|---|---|
| Standard UI components (cards, navbars, forms) | Highly custom animations with GSAP timelines |
| Quick prototyping | Components tightly coupled to app state |
| Starting point that you'll customize | Complex multi-step forms with validation logic |
| Design inspiration and patterns | Performance-critical components |
| Brand logos via SVGL | Components with heavy business logic |
MCP server configured in ~/.claude/settings.json:
{
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${TWENTY_FIRST_DEV_API_KEY}"
}
}
}
API key stored in ~/.claude/.env as TWENTY_FIRST_DEV_API_KEY. Get a key at https://21st.dev/