コンポーネント & UI デザインスキル（component-design）

コンポーネント & UI デザインスキル (component-design)

ウェブコンポーネント、セクション、ページを設計するための構造化されたUX/UI発見・仕様化ワークフローです。stitch-design などの視覚的プロトタイピングツールやコード実装ワークフローで利用可能な、プロダクション対応の設計仕様書 (design-spec.md) を生成します。

---

ガードレールと基本原則

[!IMPORTANT] 1. コード生成禁止ガードレール（純粋設計範囲）: このスキルは、UX、UI、レイアウトアーキテクチャ、タイポグラフィ、ビジュアルトークンに厳密に関与します。React コンポーネント、Next.js ディレクティブ、TypeScript の props インターフェース、パッケージインストールコマンド（shadcn/Radix CLI コマンドを含む）を出力してはいけません。コード実装は下流の開発ワークフローで行われます。

[!CAUTION] 2. デザイントークン事前確認ゲート（トークン優先ルール）: 検証済みの正規デザイントークンが docs/project.json に存在しない限り、コンポーネントを設計することはできません。不足しているトークンは、コンポーネント設計の草案を作成する前に、ユーザーに確認して永続化する必要があります。詳細は token-verification-matrix.md を参照してください。

[!TIP] 3. トークン保存ルール（スキル内での直接画像生成禁止）: generate_image を直接呼び出さないでください。ユーザーがプロジェクトディレクトリに画像を生成して配置できるように、構造化された画像生成プロンプトを作成します。

[!NOTE] 4. 選択的パターン検索（トークン保存のため）: references/component-design-patterns.md のルーティングテーブルを確認し、該当するコンポーネントファイル（例： hero.md）のみを references/patterns/ から読み込みます。一致した場合、適応的インタビュー中にユーザーにそのパターンを実装するかどうかを確認します。

---

ワークフロー概要

flowchart TD
    Start["起動: /component-design<br/>(ページ + コンポーネント名)"] --> Step1["ステップ1: 動的コンテキスト & トークンゲート<br/>(docs/**、CONTEXT.md、トークン、対象パターンをスキャン)"]
    Step1 --> CheckTokens{"デザイントークンは<br/>docs/project.json で<br/>完了していますか？"}
    CheckTokens -- "トークン不足" --> GrillTokens["不足トークンを確認<br/>(3つのコンテキスト駆動選択肢)"]
    GrillTokens --> SaveTokens["docs/project.json に永続化"]
    SaveTokens --> Step2
    CheckTokens -- "確認済み" --> Step2["ステップ2: 多段階適応的インタビュー<br/>(ラウンド1～3 + 対象パターン確認)"]
    Step2 --> Step3["ステップ3: ビジュアルアセットプロンプト作成<br/>(すぐに使える画像プロンプトを提供)"]
    Step3 --> Step4["ステップ4: design-spec.md のスキャフォールド & 作成<br/>(docs/design/components/[ページ]/[コンポーネント]/)"]
    Step4 --> Step5["ステップ5: サブエージェント監査 & 自動修復<br/>(invoke_subagent でガードレール & トークンをチェック)"]
    Step5 --> Finish["下流処理への引き渡し準備完了<br/>(視覚的プロトタイピング / 実装)"]

---

実行手順書

ステップ1: 動的コンテキスト発見 & デザイントークン検証ゲート

1. プロジェクトコンテキストのスキャン: docs/ 内の全ファイルとルートの CONTEXT.md を動的に検査し、対象ペルソナ、ビジネス目標、既存のデザインブックマークを抽出します。
2. サポート対象ロケールのスキャン: docs/project.json の project_context_and_metadata.supported_languages を読み取ります。
3. デザイントークンの検証: docs/project.json の "design_system" を token-verification-matrix.md と照合して監査します。
4. 不足トークンの確認: トークンがない場合、プロジェクトに合わせた3つの選択肢（1つは (推奨) とマーク）を作成し、ユーザーに確認して "design_system" に永続化します。
5. 対象デザインパターンの検索: references/component-design-patterns.md のルーティングテーブルをスキャンし、設計中のコンポーネントに一致するパターンがある場合、references/patterns/ 下の該当ファイルのみを表示します。

ステップ2: 段階的多段階コンポーネントインタビュー

ask_question（またはインタラクティブチャット）を使用して適応的な3ラウンドのインタビューを実行します。各ラウンド間でユーザーの回答を取り込むために一時停止します。完全な質問内容は adaptive-grilling-rounds.md を参照してください。

• references/patterns/ で一致するパターンが見つかった場合、その質問票をラウンド1またはラウンド2に組み込み、ユーザーにそのパターンを実装するかどうかを明示的に確認します。
• ラウンド1（意図とストーリー）: コンポーネントの目的、ユーザーのジョブ・トゥ・ビー・ダン、感情的なトーンを明確にします。
• ラウンド2（空間階層とグリッド）: ラウンド1の回答に基づいて、マルチカラムレイアウト、密度スケール、視線の流れを調整します。
• ラウンド3（インタラクションとアクセント）: ラウンド1と2に基づいて、ホバー/フォーカス状態のダイナミクス、メディアアセット、BiDi/RTL のニュアンスを確立します。

ステップ3: プロアクティブなビジュアルアセットプロンプト作成

コンポーネントに特注のグラフィック、背景、アイコンが必要な場合、generate_image を呼び出さずに、ユーザー向けの構造化された生成プロンプトを作成します。プロンプトブロックの形式は adaptive-grilling-rounds.md を参照してください。

ステップ4: コンポーネントフォルダと design-spec.md のスキャフォールド

1. ディレクトリを作成: docs/design/components/[ページ名]/[コンポーネント名]/
2. design-spec.template.md の正規の9セクションレイアウトを使用して design-spec.md をスキャフォールドします:
   • §1 エグゼクティブサマリー & ストーリー
   • §2 視覚的階層 & 空間フロー
   • §3 レイアウトグリッド & レスポンシブブレークポイント（モバイル、タブレット、デスクトップ）
   • §4 デザイントークン & カラーマッピング（ライト & ダーク）
   • §5 タイポグラフィスケール（サポート対象ロケールごと）
   • §6 インタラクション状態マトリクス（デフォルト、ホバー、アクティブ、フォーカス、無効、スケルトン）
   • §7 双方向（RTL）対応
   • §8 アクセシビリティ & 人間工学（WCAG AA/AAA、タッチターゲット $≥ 44 ext{px}$）
   • §9 推奨ビジュアルアセット & プロンプト

ステップ5: 独立サブエージェント品質監査 (invoke_subagent)

偏りのない品質を保証するために、結果をユーザーに提示する前に独立したレビューサブエージェントを起動します。

1. 監査サブエージェントを生成（TypeName: "self", Role: "Independent Design & UX Auditor", Model: "inherit"）。
2. subagent-audit-protocol.md の構造化監査プロンプトを使用します。
3. ISSUES_FOUND が返された場合、作業を完了する前に design-spec.md 内の指摘された問題をすべて直ちに解決します。

---

下流処理への引き渡し

design-spec.md が承認され検証されたら:

1. 視覚的プロトタイピング: stitch-design を起動して、Google Stitch で UI 画面とレイアウトバリエーションを生成します。
2. コード実装: design-spec.md をコンポーネント実装スキル（例：nextjs-component-dev / nextjs-create-component）に提供します。

---

実行検証チェックリスト

実行を完了する前に、以下を確認してください:

• 成果物にコードやライブラリインストールコマンド（React、Next.js、shadcn CLI など）が含まれていないこと。
• docs/project.json の正規デザイントークンが検証され、完全であること。
• 出力ディレクトリが docs/design/components/[ページ]/[コンポーネント]/ に構造化されていること。
• インタビューの選択肢が動的に合成され、ハードコードされたリポジトリの前提がないこと。
• コンポーネントインタビューが段階的な適応ラウンドに従っていること。
• generate_image が直接呼び出されておらず、代わりにアセットプロンプトがユーザーに提供されていること。
• design-spec.md に必要な9セクションすべてが含まれていること。
• invoke_subagent 経由で独立サブエージェント監査が実行され、すべての問題が解決されていること。