デザインシステム概要

デザインシステムは @repo/ui を単一の実装ソースとし、Storybook をカタログ、 本ドキュメントを規約の置き場とします。

レイヤ構成

デザイントークン (packages/ui/src/tokens.ts)   ← 単一ソース
        │
        ├─▶ Tailwind プリセット (tailwind-preset.ts)  ← アプリの色/余白
        ├─▶ UI コンポーネント (@repo/ui, shadcn/ui ベース)
        └─▶ ドキュメント (このサイト)

実装ルール（人間・AI 共通）

1. 生の値を書かない。 色は bg-brand-600 のようにトークン由来の Tailwind クラスで指定する。#4f46e5 や style={{ color: ... }} の直書きは禁止。
2. 既存プリミティブを再利用する。 ボタン・入力などは @repo/ui の コンポーネントを使う。無ければ @repo/ui に追加してから使う。
3. 新規/変更コンポーネントには Storybook ストーリーを必須。 *.stories.tsx が無い公開コンポーネントは CI で検出される。
4. shadcn/ui の追加は CLI で。 packages/ui の components.json に従い pnpm dlx shadcn@latest add <component> で追加し、トークンに合わせて調整する。
5. アクセシビリティ。 Storybook の a11y アドオンと test-runner で検証する。

トークン一覧

デザイントークン を参照。