brandkit

スキル：ブランドキット

ステップ 0：キットはここにありますか？ このスキルはキット内のファイルを読み込みます。一度確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーだけです。これは npx skills add の動作によるものです。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測してはいけません。

画面を作る前に、基盤（すべての描画で使う単一のトークンシステム）を整えます。ここを正しく仕上げれば、すべてのページで一元的に一貫性とテーマを保てます。

手順

1. ブリーフの推定（必須）：業界、対象ユーザー、ムードを表す形容詞を 1 つ、モーションの深さを明記します（${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference）。${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md から基準となるアーキタイプを選びます。
2. プリミティブ：ブランドカラーランプを OKLCH（11 段階、彩度一定）で生成し、ニュートラルランプも作成します。${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md → Color Generation に従い、500 シェードが白地で 4.5:1 以上（テキスト）、600 が 3:1 以上（UI）であることを検証します。
3. セマンティックレイヤー：役割をプリミティブに割り当てます（action.primary／-hover／destructive、text.{primary,secondary,on-action,link}、surface.{page,card,raised}、border.{default,strong}、feedback.{success,warning,error,info}）。また、反転ではなくデザインされた ダークテーマ用のオーバーライドも設定します。
4. スケール：Major Third のタイポグラフィスケールと複合テキストスタイル、4px のスペーシングスケール、角丸の段階、エレベーション、${CLAUDE_SKILL_DIR}/../../../tokens/motion.json 形式の時間とイージングを設定します。
5. 出力：DTCG の ${CLAUDE_SKILL_DIR}/../../../tokens/*.json（3 層）と単一の theme.css（共通のソース。[data-theme="dark"] でオーバーライド）を出力します。必要に応じて、他のプラットフォーム向けにトークンビルドパイプライン（token-build スキル）を利用します。

検証（完了の定義）

• python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py：JSON が有効で、すべてのエイリアスが解決されること。
• python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py：テキスト／アクション／ボーダーの必須ペアが、ライトとダークの両方で WCAG AA に合格すること。border.strong は 3:1 以上であること。
• python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py：すべてのコンポーネントの var(--…) がテーマ内で解決されること。
• テーマは 1 つのみとし、ページごとのパレットは作成しません。destructive には danger トークンを使い（primary は使わない）、ハードコードされた値はゼロにします。

出力は検証済みのトークン基盤です。測定可能な部分は証明できます（npm run verify を実行してください）。ブランドの「雰囲気」については、${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md と照らし合わせて人が確認することをおすすめします。