メニュー
Generate premium React+TS+Tailwind UI components from natural language via 21st.dev Magic MCP server
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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/
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.