📋 Plan STEP 04 / 15 ⏱ 15分 ⏳ 残り165分

PLAN: Instruction

では、2 種類の Instruction ファイルを作成しましょう：

  • .github/copilot-instructions.md — リポジトリ全体に常時適用 (言語・Stack・規約)
  • .github/instructions/frontend.instructions.md — フロントエンド系ファイルにのみ適用される Path Instruction（デザイントークン）

4.1 — リポジトリ共通の Instruction を作成する

リポジトリのルートに .github/copilot-instructions.md を新規作成し、以下の内容をそのまま貼り付けてください（.github フォルダが無ければ先に作成してください）：

# Copilot Instructions

## 言語

- すべての応答・コメント・コミットメッセージ・PR 説明は **日本語** で書く。

## Stack

- **Astro** のみ。Next.js・React Router・SvelteKit は使わない。
- ページ・レイアウトは Astro コンポーネント (.astro) を使う。
- マークダウンコンテンツは Astro の **content collections** (src/content/) を使う。
- スタイルは Tailwind CSS。必要に応じてスコープ付き <style> ブロック。
- TypeScript をすべての場所で使う (.ts, .astro frontmatter)。

## 規約

- ページは src/pages/。
- 再利用 UI は src/components/。
- マークダウンは src/content/<collection>/*.md。スキーマは src/content.config.ts。
- パッケージマネージャは **npm**。

## コードレビュー

- 変更を提出する前に **セルフレビュー** を行い、既存ファイルの規約・命名・テンプレートに揃える。
- PR 説明には **何を / なぜ / どう確認するか** の 3 点を必ず含める。
- 破壊的変更（frontmatter スキーマ、ルーティング、ビルド設定）は理由と影響範囲を明記する。
- 大きな変更は小さく分割し、レビュー負荷を下げる。

## ドキュメント参照（必ず守る）

**Astro** のコードを書く前に、**必ず Context7 MCP の以下のツールを呼び出してから実装する**：

1. `resolve-library-id` でライブラリ ID を解決する。
2. `get-library-docs` で最新ドキュメントを取得する。
3. 取得したドキュメントに基づいて実装する。

⏱ 約2分

4.2 — フロントエンド専用の Path Instruction を作成する

特定のファイルパターンにだけ適用される Path Instruction を作成します。VS Code は applyTo の glob にマッチするファイルを触るときだけ、このルールを Copilot に渡します。

.github/instructions/frontend.instructions.md を新規作成し、以下の内容をそのまま貼り付けてください（.github/instructions/ フォルダが無ければ先に作成してください）：

---
applyTo: "**/*.{astro,css,tsx,html}"
description: "フロントエンドのデザイントークン（レトロ JRPG テーマ）"
---

# フロントエンド設計ルール

スタイル・コンポーネント・レイアウトを触るときは、以下のトークンを必ず適用する。

## テーマ

レトロ JRPG / サイバーパンクのアーケード。深紫 → 濃紺 → 漆黒のラジアル背景にネオンのアクセント、ピクセル系タイポグラフィ。

## カラー

| 役割              | Hex       | Tailwind            |
| ----------------- | --------- | ------------------- |
| 漆黒 (ベース)     | `#05060f` | `bg-shadow-ink`     |
| 濃紺 (パネル)     | `#0a0e27` | `bg-midnight`       |
| 深紫 (背景上端)   | `#1a0b2e` | `bg-deep-purple`    |
| ネオンマゼンタ    | `#ff2e88` | `text-neon-magenta` |
| ネオンシアン      | `#00f0ff` | `text-neon-cyan`    |
| アンバー          | `#ffb000` | `text-crt-amber`    |
| フォスファ緑      | `#9bbc0f` | `text-gb-green`     |
| 本文テキスト      | `#e8f4ff` | `text-phosphor`     |

`body` 背景は深紫 → 濃紺 → 漆黒のラジアルグラデで作る。

## フォント

| 用途                                    | フォント            | Tailwind        |
| --------------------------------------- | ------------------- | --------------- |
| ブランド見出し (H1・ロゴ・大型ラベル)   | `'Press Start 2P'`  | `font-pixel`    |
| 本文・見出し (日 + 英、既定)            | `'DotGothic16'`     | `font-pixel-jp` |
| プレゼンモードの装飾 (slide counter 等) | `'VT323'`           | `font-terminal` |
| コードブロック                          | `'IBM Plex Mono'`   | `font-mono`     |

`'Press Start 2P'` は小文字グリフを持たない（全部大文字になる）ので、ブランドロゴと最上位の見出しに限定。本文・節見出し・TOC・リンク・カードの説明など、**プロースは原則すべて `font-pixel-jp` (DotGothic16)** を使う — 日本語とラテン文字を一つのピクセルグリッドで揃えられる。すべて `monospace` / `sans-serif` を fallback に。

## エフェクト

- 控えめな CRT スキャンライン (`.crt-lines`) を全画面オーバーレイに。
- ネオングロー: `shadow-neon-magenta` / `-cyan` / `-amber` / `-green` (= `0 0 8px <color>, 0 0 24px <rgba>`)。
- ボーダー: `1px dashed` または `2px solid` のネオンカラー。コントラストは高めに、淡いパステルグラデは禁止。

## してはいけないこと

- 明るい / 白の背景。
- pill 形状 / 4px 超の角丸。
- 灰色のソフトドロップシャドウ（グローのみ使う）。

⏱ 約2分