A terminal-based UI drafting skill that uses 21st AI to generate HTML and Tailwind design variants, preview them in a browser, revise them with plain-language requests, and bring the chosen code into a project.

Use it to sketch pages and components such as pricing sections, refine a chosen variant, and prepare a handoff for implementation. It requires 21st AI authentication and available usage quota.

It gives you a quick way to explore several interface ideas before rebuilding the selected design in the project’s actual technology stack.

21st-ai — Skill for Claude Code and Codex by 21st-dev/skill

Install

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.

Any agent

npx skills add 21st-dev/skill --skill 21st-ai

Clone the repo

git clone --depth 1 https://github.com/21st-dev/skill

Made for: Claude Code, Codex.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/21st-dev/skill/21st-ai/github.svg)](https://agentmods.dev/skills/21st-dev/skill/21st-ai)

Your own site

<a href="https://agentmods.dev/skills/21st-dev/skill/21st-ai"><img src="https://agentmods.dev/badge/skills/21st-dev/skill/21st-ai/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/21st-dev/skill/21st-ai"><img src="https://agentmods.dev/badge/skills/21st-dev/skill/21st-ai.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 195 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,348 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

Socket pass 10 Sept 2026
Snyk pass 10 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

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.00195	$0.01348
Opus 5.5	$0.00078	$0.00539
Sonnet 5.5	$0.00039	$0.00270
Haiku 4.5	$0.00019	$0.00135

Measured 1mo ago against content hash 229119802d83, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

21st-ai 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.

Origin

Copies of this mod

2 near-identical copies found in the catalogue:

21st-ai — 100% identical, 0 lines differ
21st-ai — 100% identical, 0 lines differ

skills/21st-ai/SKILL.md · 107 lines

How it starts

The opening of the file, as written. The whole thing — 107 lines — stays where its author put it; the contents beside it link to each section on GitHub.

21st AI — sketch, iterate & grab code from the terminal

21st AI is a fast UI-drafting board. Mental model: draft it here, then finish it — sketch a few variants from a prompt, preview them, refine the one you like with plain-English edits, and pull its code into the repo. The whole loop runs from the 21st CLI (or the matching MCP tools), so you never leave the editor.

Sketch mode produces self-contained HTML + Tailwind drafts (fast, no build). The recommended handoff is the copy-prompt: a spec that tells you to rebuild the design in the target project's real stack — not paste raw HTML verbatim.

Auth

Same credential as the rest of the CLI: 21st login (saved token) or a 21st_sk_ key via --api-key / TWENTYFIRST_TOKEN. 21st usage (MCP: get_usage) shows the account tier, aiGenerationEnabled, and remaining free daily component-code retrieval quota. It does not report the AI credit balance. (See the 21st-cli-use skill for the full auth notes.)

Before generating or iterating, check MCP get_usage.aiGenerationEnabled or the 21st AI generation line from 21st usage. CLI 1.17.1 also supports 21st usage --json. Proceed only when AI is explicitly enabled; missing or unknown status does not grant access. A base Builder subscription does not enable AI. When it is false, use search → get_component and adapt the code with the user's own agent. Do not attempt generate or iterate_generation, including through the CLI as a fallback.

The loop

# 1) Sketch — generate variants ("takes") from a prompt. Opens the preview in
#    the browser and prints the projectId.
21st generate "a pricing section with 3 tiers and a monthly/annual toggle"

# 2) List the takes (1-based numbers + whether each has rendered yet).
21st generation <projectId>

# 3) Edit ONE take in place with a natural-language change (PAID — see Metering).
21st iterate <projectId> "make it enterprise-flavored, add an annual toggle" --take 3

# 4) Grab the code to bring into the project (FREE).
21st take <projectId> --take 3            # paste-ready copy-prompt (recommended)
21st take <projectId> --take 3 --code     # raw self-contained HTML instead

Read the full file on GitHub · 107 lines

Changes

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 · +17 lines 229119802d83
2mo ago First seen · 90 lines · 195 tokens per session scan A bc928af4cd81

Subscribe to this mod's changes

21st-ai is a skill published in the GitHub repository 21st-dev/skill (34 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 195 tokens to every session and 1,348 once invoked, about $0.0008 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-08-31.

CSS and styling Design and UX Frontend

21st-ai next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
21st-ai21st-dev/skill	Skill	34	1mo ago	Apache-2.0	A	195	Claude Code, Codex
anti-slop-designsickn33/agentic-awesome-skills	Skill	49k	yesterday	MIT	A	34	Claude Code
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codex	Skill	34k	4d ago	MIT	A	52	Codex
open-design-setupcompozy/compozy	Skill	2.8k	yesterday	MIT	A	67	Claude Code, Codex
frontend-visual-qadaymade/claude-code-skills	Skill	1.5k	yesterday	MIT	A	125	Claude Code, Codex
prototype-webnexu-io/html-anything	Skill	9.4k	25d ago	Apache-2.0	A	24	Claude Code, Codex