21st-dev/magic-mcp is a compatibility proxy that lets coding agents access the 21st MCP, a server for finding and generating React and Tailwind UI components. It is intended for users of older Magic MCP configurations that need to keep working with the unified 21st MCP service. The catalogue entry is an MCP integration for that workflow.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add 21st-dev/magic-mcp --skill 21st-uigit clone --depth 1 https://github.com/21st-dev/magic-mcpWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/21st-dev/magic-mcp/21st-ui)<a href="https://agentmods.dev/skills/21st-dev/magic-mcp/21st-ui"><img src="https://agentmods.dev/badge/skills/21st-dev/magic-mcp/21st-ui/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/21st-dev/magic-mcp/21st-ui"><img src="https://agentmods.dev/badge/skills/21st-dev/magic-mcp/21st-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00063 | $0.00775 |
| Opus 5.5 | $0.00025 | $0.00310 |
| Sonnet 5.5 | $0.00013 | $0.00155 |
| Haiku 4.5 | $0.00006 | $0.00077 |
Grade A, and why
21st-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 50 lines — stays where its author put it; the contents beside it link to each section on GitHub.
21st.dev UI Skill
21st.dev is a marketplace of 10,000+ production-ready React/Tailwind (shadcn-compatible) components, plus AI UI generation. This skill drives the 21st MCP server.
When to reach for it
- The user asks to add/build a UI element: "add a pricing section", "I need a nice navbar", "make a testimonials block".
- The user wants options or inspiration before committing to a design.
- The user needs a company logo in JSX/TSX (
search_logo). - The user wants brand-new UI generated from a description (
generate).
Workflow: install an existing component (default path)
Prefer real catalog components over writing UI from scratch — they ship with dependencies, demos, and responsive/dark-mode support.
searchwith a short natural query (e.g. "pricing table", "animated hero"). Results include names, descriptions, previews, and install ids.- Pick the best match for the user's stack and style; show the user 1–3 top candidates if the choice isn't obvious.
get_componentto fetch the full code and metadata for the chosen item.- Install into the project the way the result instructs (shadcn-style registry add or by writing the returned files), then wire it into the page and adapt tokens/props to the project's design system.
Notes:
- Free tier allows catalog search and 2 component installs per day; paid components return code only after unlock.
- Match the project's existing conventions (Tailwind config, cn helper, component folder layout) when integrating.
Workflow: generate new UI
When nothing in the catalog fits or the user explicitly wants custom UI:
- Check
get_usage.aiGenerationEnabledand the currenttools/list. Paid component access alone does not enable hosted AI. Missing or unknown status is not permission to generate. - With AI off, use
searchandget_component, then implement or adapt the UI with your own coding agent. Do not call generation tools, legacy builder/refiner aliases, or the CLI as a workaround. - When AI is enabled and
generateis listed, call it with the purpose, layout, content, style, and stack constraints. It consumes AI credits and returns a preview URL; open that URL to view the generation. - For existing sketch drafts, use
get_generationandget_taketo read their code. These reads remain available with AI off.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed · +1 lines 851d43ba67c1
- 1mo ago First seen · 49 lines · 63 tokens per session scan A d9bc36522fe2
21st-ui is a skill published in the GitHub repository 21st-dev/magic-mcp (6,123 stars, last pushed 1mo ago), licensed ISC. It adds 63 tokens to every session and 775 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-02.
Other skills, from other repositories
cometchat-react-v7-customization
Theme and brand the React v7 UI Kit — light/dark mode, CSS custom-property design tokens, per-component style overrides. Triggers: 'change chat colors', 'dark mode chat', 'match my brand', 'customize cometchat theme', 'override message list styles'.
shadcn
Current best-practices guide for shadcn/ui applications. Before applying primitive-specific guidance, inspect whether the checked-in components use Radix UI or Base UI; current shadcn supports both (Base UI is the default for new projects) and their composition APIs differ. Component installs and upgrades go through…
lov-kill-emoji
A UI cleanup tool that replaces unsuitable emoji in visible interface elements with matching icons or short text. It checks the surrounding meaning before changing anything.
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
shadcnui
Expert shadcn/ui assistance covering Radix UI primitives, Tailwind CSS styling, copy-paste architecture, and accessibility. Use when building modern React component systems and accessible design systems.
anthropic-web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.