21st-design-sync
Look at the current project's design (its shadcn / Tailwind CSS variables and color tokens) and publish it to the 21st.dev community as a shareable theme, using 21st publish-theme. Use when the user says "publish my theme", "share our design as a 21st theme", "sync my design to 21st", "turn my globals.css into a theme", "залей наш дизайн темой", "опубликуй тему". This is the 21st equivalent of design-sync: it reads the project's design tokens and syncs them into the public theme library.
- Installs
- 1.8K
- Last 24h
- +22
- Trending rank
- #5558
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/21st-dev/skill --skill 21st-design-sync- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads 21st-design-sync automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
21st Design Sync — publish your project's design as a theme
Take the design a project already ships (its light + dark CSS variables) and
publish it to the public 21st.dev theme library so anyone can preview,
bookmark, and apply it. Under the hood this is one CLI call:
21st publish-theme <file.css> --name "…".
Pre-flight (always)
- Auth needs a real API key.
publish-themeis a management endpoint: it accepts a21st_sk_…key only, not a21st loginsession token. Get one at https://21st.dev/mcp (or https://21st.dev/settings/api-keys) and pass it via--api-key 21st_sk_…or theTWENTYFIRST_TOKEN/API_KEY_21STenv var. If the user has no key, point them there — don't try to mint one. - The CLI is the unified
@21st-dev/cli(bin21st). Usenpx @21st-dev/cliif it isn't installed. - Publishing is public and outward-facing. A published theme is immediately
is_publicin the community library (there is no unlisted/private option for themes). Confirm with the user before publishing.
Step 1 — Find the project's design tokens
Locate the file that defines the shadcn/Tailwind theme variables. Check, in order:
app/globals.css,src/app/globals.csssrc/index.css,styles/globals.css,app/styles/globals.css
You're looking for a :root { … } block of CSS custom properties
(--background, --foreground, --card, --primary, --secondary,
--muted, --accent, --destructive, --border, --input, --ring, the
--chart-* / --sidebar-* tokens, --radius) and a matching .dark { … }
block. Values may be hsl(...), oklch(...), hex, or raw channels — keep them
exactly as the project wrote them.
Tailwind v4 projects usually keep the same :root / .dark blocks plus an
@theme inline mapping; you only need the :root and .dark token values,
not the @theme mapping.
Step 2 — Assemble a valid theme CSS file
The publish endpoint parses --name: value; pairs out of a :root { … } block
and a .dark { … } block, and requires both to be non-empty. So the file
you publish must contain both.
- Copy the project's
:rootand.darkblocks into a standalone file (e.g.project-theme.css). Nothing else is required. - If the project has only a light
:rootand no.dark(or an empty one), generate a dark variant before publishing — don't ship a theme with an empty dark mode. Reuse theadd-dark-mode/oklch-skillapproach: invert lightness while preserving hue/chroma so the dark set stays on-brand. Keep the same token names. - Keep the token names shadcn-standard so the theme previews correctly on the card and applies cleanly for others.
Minimal shape:
:root {
--background: 0 0% 100%;
--foreground: 240 10% 4%;
--primary: 240 6% 10%;
/* …the rest of the project's light tokens… */
--radius: 0.5rem;
}
.dark {
--background: 240 10% 4%;
--foreground: 0 0% 98%;
--primary: 0 0% 98%;
/* …the rest of the project's dark tokens… */
}
Step 3 — Name & tag it
- Name (required, ≤ 50 chars): infer from the project — the product/brand
name from
package.json, the repo, or the site title. Ask the user if it's ambiguous. - Tags (optional): a few descriptors that match how people browse themes,
e.g.
dark,minimal,neutral,vibrant,saas. Pass comma-separated.
Step 4 — Publish
21st publish-theme ./project-theme.css \
--name "Acme" \
--tags dark,minimal \
--api-key 21st_sk_… # or set TWENTYFIRST_TOKEN
The command prints the live theme URL (https://21st.dev/community/themes/<slug>).
Share it with the user.
Updating vs re-publishing
- Each
publish-themecreates a NEW theme (there's no upsert-by-slug like components have). Running it twice = two themes in the library. - To change name/tags/visibility on an existing theme, edit it in place:
21st edit <theme-id> --type theme [--name "…"] [--tags a,b]. - To change the colors, publish a fresh file and remove the old one:
21st delete <theme-id> --type theme --yes(soft-unpublish, reversible).
When NOT to use this
- Syncing a component library to a Claude Design project → that's the
built-in
/design-syncskill, a different destination. - Publishing a component (not a color theme) → use
21st-registry.
FAQ
What does the 21st-design-sync skill do?
Look at the current project's design (its shadcn / Tailwind CSS variables and color tokens) and publish it to the 21st.dev community as a shareable theme, using 21st publish-theme. Use when the user says "publish my theme", "share our design as a 21st theme", "sync my design to 21st", "turn my globals.css into a theme", "залей наш дизайн темой", "опубликуй тему". This is the 21st equivalent of design-sync: it reads the project's design tokens and syncs them into the public theme library.
How do I install 21st-design-sync?
Run npx skills add https://github.com/21st-dev/skill --skill 21st-design-sync in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/21st-design-sync/ (personal) or .claude/skills/21st-design-sync/ (project).
Which AI agents can use 21st-design-sync?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is 21st-design-sync safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains 21st-design-sync?
It is published by 21st-dev in 21st-dev/skill. It has 1,780 recorded installs.
More from 21st-dev/skill
21st-cli-use
21st-dev/skill
Search, install and pull code from the 21st.dev catalog with the 21st CLI (@21st-dev/cli): find React/shadcn components, themes and templates, print a component's code or a theme's CSS, install an item into the project, or generate a new component with 21st AI. Use whenever the user says "search/find a component/theme on 21st", "install our team's Button", "add @user/slug", "pull that component's code", "найди компонент на 21st", "поставь наш компонент", or wants to script catalog access from the shell/CI. Auto-activate when a project has a components.json — search 21st before hand-writing UI.
21st-ai
21st-dev/skill
Generate and iterate on UI with 21st AI from the terminal via the 21st CLI (@21st-dev/cli): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of a draft ("pull that variant's code", "сгенери UI на 21st", "поправь третий вариант", "забери код того наброска"). For finding/installing existing components use the 21st-cli-use skill; to publish your own, 21st-registry.
21st-registry
21st-dev/skill
Publish your own work to 21st.dev and manage it from the terminal with the 21st CLI (@21st-dev/cli): publish a React component to a team library, publish a CSS theme or a template listing, edit / unpublish / delete your published items, list and reopen existing component work, and read/replace your public profile page (bento board). Triggers when the user says "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент/тему/темплейт", "share with team", "make this reusable", "unpublish/edit/delete my component", "change its visibility", "find/open my old component or draft", "найди/открой мой старый компонент или драфт", "add this to my 21st profile/bento", "update my profile page", "обнови мой профиль на 21st", "добавь блок в бенто", "add controls/knobs to my demo", "сделай демо с контролами". For finding and installing existing items use 21st-cli-use; for turning a project's design tokens into a theme use 21st-design-sync.
21st-ui-build
21st-dev/skill
Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.
21st-ui-explore
21st-dev/skill
Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.
21st-ui-review
21st-dev/skill
Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects. Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems". Use 21st-ui-build when the request is primarily to create new UI.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.