kitchen-sink-design-system

Kitchen Sink Design System

すべてのコンポーネントを実際に構築し、単一のシンクページに組み込んで、そのページでデザインシステムが機能することを示します。

このワークフローではスクリプト優先のアプローチを採用します。監査スクリプトがコードベースをクロールして差異を特定する「作業」を担い、エージェントはコンポーネントの修正とシンクの組み立てという「判断」に専念します。

使用方法

Kitchen Sink ページ、デザインシステム監査、またはコンポーネント一覧を求められた場合：

1. 監査スクリプトを実行します：

   python3 ~/.agents/skills/kitchen-sink-design-system/scripts/audit_design_system.py \
     --root "." \
     --out "design_audit.json"
   

2. レポートを読みます： design_audit.json を読み込み、以下を確認します：

   • 検出されたフレームワーク（Next.js、Astro など）。
   • 既存コンポーネントの一覧。
   • デザインの差異レポート： コンポーネントファイル内で見つかったハードコードされた16進数値と任意の Tailwind 値（-[...]）。
   • チェックリストの不足項目： コードベースに存在しない Tier 1 プリミティブ（Button、Card など）。

3. 確立／採用します：

   • ガイドがある場合：検出したトークンをガイドに対応付けます。
   • ガイドがない場合：差異レポートで見つかった事実上のトークンを基に、design-tokens.md を提案します。

フェーズ 1：コンポーネントの構築と修正

MISSING の項目、または DRIFT のあるファイルごとに：

• セマンティックデザイントークンを使うようにリファクタリングします。
• 基本形＋バリアントパターンを適用します（React では CVA、Astro では Props）。
• すぐにシンクページに組み込みます。

フェーズ 2：シンクページの組み立て

標準的なセクション順に従って、シンクのルート（例：app/sink/page.tsx または src/pages/sink.astro）を作成します：

1. ヘッダーとフランチャイズの宣言
2. デザイントークンの可視化
3. ボイス＆トーン
4. イラストギャラリー（omni-image を使用）
5. コンポーネントのカテゴリ（タイポグラフィ、ボタン、フォームなど）

フェーズ 3：検証

pnpm build
pnpm lint
pnpm dlx @axe-core/cli http://localhost:3000/sink

アンチパターン（「大胆な見解」リスト）

• エージェントの作業： 16進数コードを手作業で grep しないでください。スクリプトを使います。
• 仮のプレースホルダー： 実際のコンポーネントを構築するか、何も作らないでください。
• 任意の値： w-[37px] はデザインシステムの欠陥です。
• 数のずれ： 数は文字列をハードコードせず、コレクションから導出します。