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/codex-plugin/21st-ui-buildnpx skills add 21st-dev/codex-plugin --skill 21st-ui-buildgit clone --depth 1 https://github.com/21st-dev/codex-pluginWhat 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.00111 | $0.00536 |
| Opus 5 | $0.00056 | $0.00268 |
| Sonnet 5 | $0.00022 | $0.00107 |
| Haiku 4.5 | $0.00011 | $0.00054 |
Grade A, and why
21st-ui-build 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 2d 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.
This is a copy
100% identical to 21st-ui-build — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
What it actually says
Build project-aware UI
Preserve the product's identity while using 21st supply to accelerate implementation.
Workflow
-
Read
.21st/design.jsonand.21st/DESIGN.md. If neither exists, run21st init --design-context. -
Inspect the target route, its closest components, project instructions, and existing tokens. Treat explicit project facts as stronger than generic taste.
-
Search before generating:
21st search "<specific UI need>" --context auto -
Reuse installed project primitives first. Retrieve or install a 21st result only when it reduces duplication or materially improves the result.
-
If no result fits, generate project-aware alternatives:
21st generate "<goal and constraints>" --context auto --variants 3 -
Implement the selected direction in the project's real framework. Do not paste sketch HTML when the project expects React components, tokens, or established APIs.
-
Preserve responsive behavior, keyboard interaction, visible focus, semantics, reduced motion, loading states, empty states, and error states.
-
Run the project's checks and
21st review <changed paths>. Apply only safe, deterministic fixes automatically.
Design rules
- Prefer project tokens over new arbitrary values.
- Prefer existing components over parallel lookalikes.
- Preserve established density, radii, typography, iconography, and layout rhythm unless the user explicitly requests a redesign.
- Use real product copy and states when available.
- Avoid decorative gradients, excessive cards, glass effects, huge headlines, and animation unless supported by the project or requested.
- Never claim a component, token, or capability exists without inspecting it.
Handoff
Report the direction used, reused 21st/project components, files changed, and
verification performed. Record a durable visual choice in
.21st/design.json under decisions when the user selects a new direction.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 2d ago First seen · 54 lines · 111 tokens per session scan A 746095b0c07e
21st-ui-build is a skill published in the GitHub repository 21st-dev/codex-plugin (5 stars, last pushed 6d ago), licensed Apache-2.0. It adds 111 tokens to every session and 536 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to 21st-ui-build, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
agent-host-chat-contributions
Build and review cross-cutting agent-host chat behavior through lifecycle contributions. Use when adding turn lifecycle side effects, prompt or context injection, restored-history transformation, protocol-action observation, or when reviewing changes that add code to AgentSideEffects or AgentService.
auto-perf-optimize
Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.