shape

コンテキスト： このサブスキルは、より広範な ui-craft スキルを構成する観点のひとつです。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の個別の観点を適用してください。

コードを書く前に、$ARGUMENTS の UI の形を整えてください。ui-craft スキルを読み込んでください。

このコマンドが生成するのは JSX ではなく、形状アーティファクトです。目的は、コンポーネントを書く前に、コンテンツの一覧、レイアウト領域、状態の網羅性、未解決の質問といったロー・ファイデリティの検討を強制することです。この手順を省くと、汎用的な AI UI が作られてしまいます。発見のプロセスもなく、いきなりハイ・ファイデリティに進むため、どの画面も同じように見えてしまいます。

Step 1 — 明確化（3～5問）。 形を決める前にユーザーに質問してください。推測してはいけません。最低限、以下を尋ねます。

• この画面での主なユーザー操作は何ですか？（動詞ひとつ、対象ひとつ。）
• どのデータをデフォルトで表示し、どのデータをクリックまたはタブ操作で表示しますか？
• 成功とはどのような状態ですか？状態の変化、リダイレクト、トーストのどれですか？
• 主なユーザーは誰ですか？初めて使う人、パワーユーザー、モバイル優先のユーザーのどれですか？

Step 2 — コンテンツ一覧。 表示されるコンテンツをすべて箇条書きにします。それぞれに優先度を付けます。

• P0 — 初回表示時に必ず見えている必要があります。これを削ると画面が成り立ちません。
• P1 — 1クリックで表示できます（タブ、アコーディオン、ドロワー）。
• P2 — 設定レベルの項目です。アクセスされる頻度は低いです。

例：

- P0  Headline (one line, the value prop)
- P0  Primary CTA
- P0  Hero chart / metric
- P1  Secondary nav tabs
- P1  Recent activity list
- P2  Export / integrations menu

Step 3 — ASCII レイアウト。 領域を示すロー・ファイデリティのスケッチを作成します。具体的な文言、色、フォントサイズは含めません。デスクトップ版とモバイル版をそれぞれひとつ作成します。ボックス文字を使用します。

Desktop
┌──────────────────────────────────────────────┐
│ [logo]                 [nav]         [user]  │
├──────────────────────────────────────────────┤
│  ┌────────────────┐   ┌───────────────────┐  │
│  │ Headline + sub │   │                   │  │
│  │                │   │   Hero visual     │  │
│  │ [Primary CTA]  │   │                   │  │
│  └────────────────┘   └───────────────────┘  │
│                                              │
│  ── Social proof row ──                      │
│                                              │
│  ┌─── Feature 1 ───┐   ┌─── Feature 2 ───┐   │
│  └─────────────────┘   └─────────────────┘   │
└──────────────────────────────────────────────┘

Mobile
┌──────────────────┐
│ [logo]     [☰]   │
├──────────────────┤
│  Headline + sub  │
│                  │
│  [Primary CTA]   │
│                  │
│  ┌── Hero ──┐    │
│  └──────────┘    │
│                  │
│  Social proof    │
│                  │
│  Feature 1       │
│  Feature 2       │
└──────────────────┘

非対称でも問題ありません。むしろ、そのほうがよい場合もあります。すべてを中央に配置しようとしないでください。

Step 4 — 状態一覧。 この画面で対応する必要がある状態を列挙します。各状態の要件については、references/state-design.md を参照してください。

• idle — データが存在するデフォルト状態。
• loading — 最終レイアウトに沿ったスケルトンを表示します。表示前に200msの遅延を設けます。
• empty — 初回起動時またはデータがない状態です。オンボーディングも兼ねます。
• error — 具体的な原因、復旧操作、サポート ID を示します。
• partial — 一部のデータは読み込まれたものの、一部は失敗した状態です（例：ひとつのウィジェットでエラーが発生）。
• conflict — ユーザーの編集が衝突した状態です（まれですが、共同作業画面では重要です）。
• offline — 書き込みをキューに入れ、再接続時に調整します。
• success — 主な操作の完了後に表示する確認状態です。

各状態を required／optional（理由）／N/A のいずれかに指定します。

Step 5 — 未解決の質問。 これらに回答が得られるまで、コーディングを始めてはいけません。デフォルトの質問は以下のとおりです。

• アクセントカラー — ブランドで定義されていますか？それとも選定が必要ですか？（SKILL.md の Discovery を参照してください。）
• タイポグラフィ — 既存のトークンを使いますか？それとも新しいシステムを使いますか？（typography.md を参照してください。）
• レスポンシブのブレークポイント — 対応する最小幅はいくつですか？
• スタック — CSS のみですか？それとも Motion／GSAP／Three.js を使いますか？（ユーザーが希望した場合に限り、stack.md を読み込みます。）
• データソース — 実際の API は準備できていますか？それとも形を作るためにモックを使いますか？
• キーボード／アクセシビリティの要件 — accessibility.md の基本要件を超えるものはありますか？

ノブの認識。

• CRAFT_LEVEL ≥ 7 の場合、以下のセクションを2つ追加します。
  • モーションの形 — どの要素がどの順番で、どの程度の間隔を空けて表示されるかを指定します。references/motion.md の持続時間スケールから選択します。
  • タイポグラフィ階層の計画 — コードを書く前に、ディスプレイ／見出し／本文／ラベルのサイズとウェイトを決めます。
• CRAFT_LEVEL ≤ 4 の場合、Step 4 を idle / loading / error のみにします。モーションの形は省略します。

Step 6 — .ui-craft/spec.md への保存を提案する（任意）。

5つのステップをすべて出力した後、その内容を仕様セクションとして書き込むかユーザーに確認します。

「この形を .ui-craft/spec.md に ## Surface: <name> として書き込みますか？（構成の選択、レイアウト、ビルド段階の受け入れ基準を保存します。）」

• ユーザーが承諾した場合 → ../skills/ui-craft/references/spec.md のテンプレートに従って、出力を ## Surface: <name> セクションとして整形し、.ui-craft/spec.md に新規作成または追記します。次の1行で確認します：「.ui-craft/spec.md に書き込みました → ## Surface: <name>。」
• ユーザーが断った場合 → ファイルには何も書き込みません。出力内容はそのまま残します。次のように伝えます：「spec.md は書き込まれていません。受け入れ基準を保存せずにパイプラインを続行します。」 /shape を単独で実行した場合、デフォルトでは出力のみを行います。ステップ 6 は提案であり、ユーザーが明示的に確認しない限り実行されません。

出力の要件。

• 5 つのステップすべてを順番に含む、単一の Markdown ブロックを出力してください。ステップ 6 は、その後に続く任意の提案です。
• このコマンドでは、JSX、CSS、コンポーネントコードを絶対に記述しないでください。
• 出力の最後は、次の文にしてください。"構築を始めますか？形状を確認し、未解決の質問を整理したら、コードができた段階で /ui-craft:audit を実行するか、ビルドモードを使用してください。"

次のステップ： /craft — 今ワイヤーフレームを作成した画面を構築します（段階 1）。