21st-design-sync

Installation
SKILL.md

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)

  1. Auth needs a real API key. publish-theme is a management endpoint: it accepts a 21st_sk_… key only, not a 21st login session token. Get one at https://21st.dev/mcp (or https://21st.dev/settings/api-keys) and pass it via --api-key 21st_sk_… or the TWENTYFIRST_TOKEN / API_KEY_21ST env var. If the user has no key, point them there — don't try to mint one.
  2. The CLI is the unified @21st-dev/cli (bin 21st). Use npx @21st-dev/cli if it isn't installed.
  3. Publishing is public and outward-facing. A published theme is immediately is_public in the community library (there is no unlisted/private option for themes). Confirm with the user before publishing.
Installs
7
GitHub Stars
5
First Seen
Jul 8, 2026
21st-design-sync — 21st-dev/codex-plugin