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 agentmods add skills/21st-dev/magic-mcp/21st-uinpx 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.svg" alt="Measured on agentmods" height="20"></a>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 | $0.00063 | $0.00648 |
| Opus 5 | $0.00032 | $0.00324 |
| Sonnet 5 | $0.00013 | $0.00130 |
| Haiku 4.5 | $0.00006 | $0.00065 |
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 yesterday.
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 — 49 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:
generatewith a precise prompt: purpose, layout, content, style references, and stack constraints.- It returns variant(s); present them and let the user pick before integrating.
get_inspirationis the lighter option when the user wants references/direction rather than final code.
AI generation consumes 21st.dev credits.
Logos
search_logo returns brand logos as ready-to-paste JSX/TSX — one brand per call.
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.
- yesterday 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 (5,772 stars, last pushed yesterday), licensed ISC. It adds 63 tokens to every session and 648 once invoked, about $0.0003 per session on Opus 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
repo-context
Use repo-context-mcp tools to map, search, and pack repository context before large edits or PR review.
webmcp-nexus
当接入 webmcp-nexus-sdk 的项目中需要新增 WebMCP 工具函数、将现有业务方法改造为 WebMCP 工具函数，或配置 vite-plugin-webmcp-nexus / webpack-plugin-webmcp-nexus 时使用本技能。本技能约束工具函数的签名、JSDoc、TS 类型写法，并提供零风险的改造流程（仅改签名与注释，不动原方法业务逻辑）。触发示例："新增一个 WebMCP 工具"、"把这个函数改造成能被 AI Agent 调用的工具"、"让 xxx 函数接入 WebMCP"、"配置 webmcp 构建插件"。.
MCP Integration Assistant
Helps design and implement Model Context Protocol (MCP) server integrations for AI agents.
MCP Server Builder
Step-by-step guidance for creating a new MCP server with FastMCP or the TypeScript SDK — tool definitions, resource handlers, error responses, and usage examples.
papi-verify
Use when the user says "verify", "health check", "check papi", "verify cycle", or after completing all cycle tasks before release. Runs a structured health check on the current PAPI cycle state: plan validity, build state, review coverage, branch hygiene, and data consistency.
run-user-interviews
Run real user interviews (voice or text) through Usercall and return themes with verbatim quotes. Use when the user wants qualitative feedback, onboarding research, usability tests, prototype review, or to talk to real users instead of guessing.