6.1 — 実装前に instruction setup を保存する
実装プロンプトを送る前に、ここまで作った土台をいったん保存しておきます。これにより、Copilot が instruction file とフロントエンドルールをリポジトリ内の前提として確実に参照できます：
git add .
git commit -m "setup primitives"
git pushこれで、Copilot が計画や編集を始める前の安全なチェックポイントを作れます。
6.2 — モデルを Claude Opus 4.6 以上に切り替える
Copilot Chat 画面下部のモデルセレクターをクリックし、Claude Opus 4.6 以上（例：Opus 4.6 / 4.8）を選択します。「サイト全体を一気に組み立てる」ような複雑な作業では、Opus 系の上位モデルを使うと品質が安定します。
あわせて、画面下の 「Default Approvals」 を 「Bypass Approvals」 に切り替えてください。今回はサンドボックスである Codespace で作業しているので、ツール実行のたびに承認ダイアログを挟まずに進めた方が圧倒的に速いです。
6.3 — Plan モードに切り替える
Copilot Chat のモード切替えから 「Plan」 を選択してください。
6.4 — 実装計画を依頼する
以下のプロンプトをそのままコピーして Copilot Chat に貼り付けてください：
日本語のみの Playbook 一覧ページを作成してください（新しいブランチ `feature/playbook-landing-page` で作業してください）。
要件:
* `src/content/playbook/ja/*.md` をソースとして使う。
* `/playbook` を作成し、カードを `category` ごとにグループ化する（カードは 2 カラム）。
* カテゴリのラベル、担当者名、アバター、説明、色などは `src/lib/playbook-categories.ts` を使う。
* 各カードには `icon`、`title`、`summary` を表示し、色には frontmatter の `color` を使う（`cyan`、`magenta`、`amber`、`green`）。
* 対応する SDLC カテゴリの近くに装飾用の惑星画像を配置する（幅は約 450px）:
* introduction → `public/planet-introduction.webp`
* plan → `public/planet-plan.webp`
* develop → `public/planet-develop.webp`
* review → `public/planet-review.webp`
* secure → `public/planet-secure.webp`
* operate → `public/planet-operate.webp`
* administration → `public/planet-administration.webp`
* 惑星画像には、控えめな小さい動きを付ける。
* カードをクリックすると、Markdown 全文をレンダリングする詳細ページを開く。
* 詳細ページには「Playbook に戻る」ボタンを置く。
introduction セクションの上に「SDLC ナビゲーション」を追加する:
Plan → Develop → Review → Test & Secure → Operate
各項目は、対応するカテゴリカラーを使った枠線付きのピクセル風ボタンにする。項目間には矢印を置き、各ボタンはカテゴリのアンカーにリンクする。
`npm run dev` で動作確認できたら、変更をコミット / プッシュし、"Playbook site foundations" というタイトルでプルリクエストを作成する。Copilot がいくつか質問してくる場合があります（例：パッケージマネージャー、UI フレームワーク、デプロイ先など）。copilot-instructions.md を読んでいるはずなので Astro / Tailwind / npm を前提に答えてくれるはずですが、不足があれば回答してあげましょう。
⏱ 約3分
6.5 — Autopilot で実装する
Plan に納得したら 「Start with Autopilot」 をクリックして実装を開始します。
⏱ 約15分
実装が完了したら開発サーバーを起動して確認しましょう：
npm run devポートフォワーディングの通知から 「ブラウザで開く」 をクリックして動作確認してください。
6.6 — 改善点を Issue 化する
ここで重要なポイント — Copilot Chat に直接「ここを直して」と頼むのではなく、それぞれを GitHub Issue として登録します。Step 11（CODE: Cloud Agent）で一部の Issue を Cloud Agent に まとめて並列に 実装してもらい、残りは Step 13（CODE: Copilot CLI）で /fleet を使って並列実装するためです。
Copilot Chat に以下のプロンプトを投げて、改善点を 8 件 Issue 化してください（github-issues skill が自動で構造化してくれます）：
github-issues skill を使って、以下の改善点をこのリポジトリの Issue として個別に作成してください。種別が指定されている Issue（例: Bug）は、GitHub の Issue タイプも合わせて設定してください（指定が無いものは Feature 扱い）。
1. タイトル: 現在の Playbook 一覧ページを土台に、目次サイドバーとカテゴリ別背景画像付きのプレゼンモードを追加する
詳細: 既存の `/playbook` 一覧ページと Markdown 詳細ページは残したまま、各カードからプレゼンモードに入れる導線を追加する（例: `?present=1`）。プレゼンモードでは Markdown の各 `##` 見出しを 1 スライドにし、frontmatter からタイトル / カバースライドを生成する。`←` / `→` で移動、`Esc` で `/playbook` に戻る。現在のエントリとスライドが URL で分かるようにする。あわせて左側に固定の目次サイドバーを表示し、全 Playbook エントリをカテゴリごとに分類して一覧表示する（ラベル・色・アイコン・表示順は `src/lib/playbook-categories.ts` を使う）。現在のエントリをハイライトし、別エントリをクリックするとプレゼンモードを維持したまま切り替わる。クリックしても目次のスクロール位置が勝手に動かないようにする。スライドの文字は、プロジェクターや大きな画面に投影しても読めるよう、十分大きいフォントサイズにする。さらに、各プレゼンデッキにカテゴリごとの背景画像を適用する。使用する画像は `slide-bg-introduction.webp`、`slide-bg-plan.webp`、`slide-bg-develop.webp`、`slide-bg-review.webp`、`slide-bg-secure.webp`、`slide-bg-operate.webp`、`slide-bg-administration.webp`。文字が読めるように暗いオーバーレイを入れる。カバー / ヒーロースライドでは背景を少し強めに見せ、本文スライドでは控えめにする。
2. タイトル: Octocat の「In a nutshell / 一言で」ヒーロースライドを追加する
詳細: 各エントリの最初の “In a nutshell” / “一言で” セクションをヒーロースライドとして表示する。`src/lib/playbook-categories.ts` のカテゴリ担当者 / アバター（例: Introduction は Mona）を使い、本文をレトロな吹き出しとして表示する。そのセクションが無い場合は frontmatter の `summary` を使う。
3. タイトル: 各プレゼンデッキの最後にリンク集スライドを追加する
詳細: Playbook エントリの frontmatter に `links` がある場合、最後のスライドとして `group` ごとにリンク一覧を表示する。各 `group` に小見出しを付け、クリック可能なリンクとして表示する。`links` が無いエントリではこのスライドを省略する。
4. タイトル: プレゼンスライド内で Mermaid 図をレンダリングする
詳細: スライド内に ` ```mermaid ` コードブロックがある場合、通常のコードブロックではなく Mermaid 図として描画する。1 枚目以外のスライドでも、スライド移動時に正しく描画されるようにする。
種別: Bug
5. タイトル: プレゼンスライドのレイアウトと文字組みを改善する
詳細: スライド本文が左上に寄らないよう、中央寄せで意図のあるレイアウトにする。レトロテーマのトークン、カテゴリカラー、読みやすいテーブル / コード表示、適切な余白を使う。テーブルや長いコードブロックは画面からはみ出さず、スライド内でスクロールできるようにする。
6. タイトル: プレゼンモードのモバイル向けフォールバックを追加する
詳細: 狭い画面でプレゼンモードが崩れないようにする。モバイルではプレゼンモードを無効化して通常の Markdown 詳細ページに戻す、またはシンプルな縦スクロールのスライド一覧として表示する。カードと詳細ページはモバイルでも操作できること。
7. タイトル: 目次サイドバー（TOC）の新デザイン案を 10 種類、1 つの HTML ファイルで試作する
詳細: 既存のレトロ JRPG テーマ（ネオン配色・ピクセルフォント・CRT グロー、`frontend.instructions.md` 準拠）を踏まえ、プレゼンモードの目次サイドバーのデザイン案を 10 種類作る。すべて `public/toc-prototypes.html` という単一の自己完結 HTML ファイルに収め、ブラウザで開いて並べて比較できるようにする。各セクション（企画・開発 など）内ではアクセントカラーを単色で統一し、番号・アイコン・タイトル・New バッジ・現在地ハイライトは維持する。
8. タイトル: プレゼンモードで別エントリに切り替えるときに通常ページが一瞬表示される不具合を直す
詳細: プレゼンモード中に目次サイドバーで別のエントリをクリックすると、プレゼンモードが再適用される前に通常の Markdown 詳細ページが一瞬チラッと表示される。エントリ切り替え時もプレゼンモードを維持し、非プレゼンモードのコンテンツがフラッシュ表示されないようにする。
種別: Bug作成された Issue のリストはリポジトリの Issues タブで確認できます。次の章以降で Cloud Agent / Copilot CLI に実装させます。
⏱ 約3分