user-invocable: true description: "[デザイン] 3. 静的UI骨格 → Layout/Component を抽出して分離"

[デザイン] 3. 静的UI骨格 → Layout/Component を抽出して分離

コマンド: /design-components

いつ使う？（位置づけ）

• /design-ui で静的UI骨格（見た目のみ）を生成したあと
• 「ページ固有レイアウト」と「再利用コンポーネント」を分離して、後続の /design-assemble をやりやすくしたいとき

次に何をする？

• variants（size/tone/state等）を型付きprops/属性に落として結合 → /design-assemble

入力: $ARGUMENTS（任意）

• 対象ディレクトリ（例: src/ や app/ など）

🎯 目的

• /design-ui で生成した 静的UI骨格（見た目のみ） から、
  • Layout（ページ枠/セクション/グリッド）
  • Component（ボタン/カード/フォーム等の再利用部品） を抽出して分離し、保守しやすくする

共通前提（参照）

• 口調・出力規約は CLAUDE.md に従う。
• プロジェクト固有の事実は doc/input/rdd.md（先頭のAI用事実ブロック）を参照する。
• 判断軸は .claude/skills/* を適用する（例: ui-designer / tailwind / creative-coder / usability-psychologist）。
• 詳細運用（差分/サンプル運用等）は doc/guide/ai_guidelines.md を参照。

抽出の判断基準（最小）

• Layout にする
  • ページ固有の枠組み（ヘッダー+本文+フッターなど）
  • セクションの並び（Hero/Features/Pricingなど）
  • グリッド/レイアウトの責務が主で、見た目の部品が複数集まっているもの
• Component にする
  • 同じ構造が3回以上出現する（同一の見た目/役割）
  • variants（size/tone/state）に落とせる
  • 画面を跨いで再利用したい意図がある
• まだ抽出しない
  • 1回しか出現しない、ページ固有の塊
  • 名前が付けられない（責務が曖昧）

ルール

• ロジック/状態/データ取得は入れない（見た目の責務分離のみ）
• 既存のディレクトリ規約・命名規約を尊重する（新規規約を持ち込まない）
• 変更は差分最小で、レビュー可能な単位に分割する

出力（差分のみ）

• スタック別の標準配置に合わせて、コンポーネント/レイアウトを分割して反映

ゲート

• 見た目が維持されている（主要ページ/主要コンポーネント）
• 重複UIが減っている（同じ構造が3回以上なら抽出を検討）
• ここで停止