21st-design-sync

21st Design Sync — プロジェクトのデザインをテーマとして公開する

プロジェクトですでに使用しているデザイン（ライトモードとダークモードの CSS 変数）を 公開 21st.dev テーマライブラリに公開すると、誰でもプレビュー、ブックマーク、適用できるようになります。内部では、1 回の CLI 呼び出しで実行します。 21st publish-theme <file.css> --name "…".

事前確認（必ず実施）

1. 認証には実際の API キーが必要です。 publish-theme は管理用エンドポイントで、21st_sk_… キー のみ を受け付けます。21st login のセッショントークンは使用できません。**https://21st.dev/mcp**（または **https://21st.dev/settings/api-keys**）でキーを取得し、`--api-key 21st_sk_…またはTWENTYFIRST_TOKEN/API_KEY_21ST` 環境変数で渡してください。ユーザーがキーを持っていない場合は、取得先を案内してください。キーを生成しようとしてはいけません。
2. CLI は統合版の @21st-dev/cli（バイナリ 21st）です。インストールされていない場合は、npx @21st-dev/cli を使用してください。
3. 公開すると、テーマは一般に公開され、外部から閲覧できるようになります。 公開されたテーマはコミュニティライブラリですぐに is_public になります（テーマに限定公開や非公開のオプションはありません）。公開する前にユーザーの確認を取ってください。

---

ステップ 1 — プロジェクトのデザイントークンを探す

shadcn/Tailwind のテーマ変数を定義しているファイルを探します。次の順に確認してください。

• app/globals.css、src/app/globals.css
• src/index.css、styles/globals.css、app/styles/globals.css

:root { … } ブロック内の CSS カスタムプロパティ（--background、--foreground、--card、--primary、--secondary、--muted、--accent、--destructive、--border、--input、--ring、--chart-* / --sidebar-* トークン、--radius）と、それに対応する .dark { … } ブロックを探してください。値は hsl(...)、oklch(...)、16 進数、または生のチャンネル値の場合があります。プロジェクトで記述されている値をそのまま保持してください。

Tailwind v4 のプロジェクトでは通常、同じ :root / .dark ブロックと @theme inline マッピングを使用します。必要なのは :root と .dark のトークン値のみで、@theme マッピングは不要です。

ステップ 2 — 有効なテーマ CSS ファイルを用意する

公開エンドポイントは、:root { … } ブロックと .dark { … } ブロックから --name: value; のペアを解析し、両方に値が含まれていることを必須とします。そのため、公開するファイルには両方のブロックが含まれている必要があります。

• プロジェクトの :root と .dark ブロックをスタンドアロンのファイル（例：project-theme.css）にコピーします。それ以外は必要ありません。
• プロジェクトにライトモードの :root しかなく、.dark がない場合（または空の場合）、公開前にダークモード用のバリエーションを生成してください。ダークモードが空のテーマを公開してはいけません。add-dark-mode / oklch-skill のアプローチを再利用し、色相と彩度を保ちながら明度を反転させて、ダークモードのセットにもブランドらしさを残します。トークン名は同じにしてください。
• テーマをカード上で正しくプレビューし、ほかのユーザーが問題なく適用できるよう、トークン名は shadcn 標準に合わせてください。

最小限の構成：

: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… */
}

ステップ 3 — 名前とタグを設定する

• 名前（必須、50 文字以内）：package.json、リポジトリ、またはサイトタイトルから、プロジェクトの製品名やブランド名を推測します。判別できない場合は、ユーザーに確認してください。
• タグ（任意）：ユーザーがテーマを探す際に使う、テーマに合った説明をいくつか指定します。例：dark、minimal、neutral、vibrant、saas。カンマ区切りで渡します。

ステップ 4 — 公開する

21st publish-theme ./project-theme.css \
  --name "Acme" \
  --tags dark,minimal \
  --api-key 21st_sk_…            # or set TWENTYFIRST_TOKEN

コマンドは公開中のテーマ URL（https://21st.dev/community/themes/<slug>）を出力します。ユーザーに共有してください。

更新と再公開について

• publish-theme を実行するたびに、新しいテーマが作成されます（コンポーネントのようにスラッグを基準にした upsert はありません）。2 回実行すると、ライブラリに 2 つのテーマが作成されます。
• 既存テーマの名前、タグ、公開設定を変更するには、そのテーマを直接編集します。 21st edit <theme-id> --type theme [--name "…"] [--tags a,b]。
• 色を変更するには、新しいファイルを公開してから古いテーマを削除します。 21st delete <theme-id> --type theme --yes（公開停止は論理削除のため、元に戻せます）。

これを使用しない場合

• コンポーネントライブラリを Claude Design プロジェクトに同期する場合 → 組み込みの /design-sync スキルを使用します。同期先が異なります。
• コンポーネント（カラーテーマではないもの）を公開する場合 → 21st-registry を使用します。