---
name: bugfix-guard
description: バグ修正・機能追加の対応時にプロジェクトオーバービュースキルを自動参照し、デグレ防止・修正箇所の上書き防止を徹底するガードスキル。対応完了後はオーバービュースキルへの追記まで一貫して行う。「修正して」「直して」「機能追加」「バグ修正」「fix」「対応して」「変更して」「改修」「追加して」「実装して」「〜してほしい」「〜を追加」「〜を修正」「デグレ防止」「上書き注意」「regression」「guard」「safe fix」などで発火。
---

# Bugfix Guard Skill — デグレ防止付きバグ修正・機能追加

## スキル読み込み通知

このスキルが読み込まれたら、必ず以下の通知をユーザーに表示してください：

> 🛡️ **Bugfix Guard スキルを読み込みました**  
> プロジェクトオーバービューを参照してデグレ防止を徹底しながら対応を進めます。

## When to Use

- コードの修正・機能追加を依頼されたとき
- 「〜を直して」「〜を追加して」「〜を修正して」と言われたとき
- バグ修正・不具合対応で既存コードに変更を加えるとき
- 新機能の実装でプロジェクト全体への影響を考慮する必要があるとき
- デグレや過去の修正の上書きを防止しながら安全に変更したいとき
- 「〜してほしい」「〜に対応して」などコード変更を伴う依頼を受けたとき

## 概要

バグ修正や機能追加の対応において、**対応前のプロジェクト状況の把握** → **デグレ防止を意識した実装** → **対応後のオーバービュー更新** までを一貫して行うスキルです。

ワークスペース内のプロジェクトオーバービュースキル（`*-overview`）と連動し、過去の対応履歴・実装パターン・注意点を必ず確認してから作業を開始します。

---

## 手順

### Step 1: オーバービュースキルの読み込み・参照

**最初に必ず実施する。この手順を飛ばしてはならない。**

1. ワークスペース内の `.github/skills/` にあるオーバービュースキル（`*-overview` の名前パターン）を検索する
2. 該当するオーバービュースキルの **SKILL.md** を読み込む
3. SKILL.md 内で参照されているリファレンスファイルをすべて読み込む：
   - `references/project-details.md`（技術スタック・機能一覧・ディレクトリ構成）
   - `references/implementation-patterns.md`（実装パターン・注意点・過去の対応履歴）
   - その他 SKILL.md で参照されているリファレンスすべて

> 🛡️ **必読**: 実装パターン・注意点リファレンスには、過去に対応した修正内容やワークアラウンドが蓄積されている。**これを読まずに修正を開始すると、過去の修正を上書きするリスクがある。**

4. 読み込んだ内容から以下を把握する：
   - プロジェクトの技術スタックとアーキテクチャ
   - 主要な機能一覧と対応するファイル
   - 今回の修正に**関係する既存の実装パターン・注意点**
   - 今回の修正が**既存の対応と競合しないか**

5. 把握した情報をユーザーに簡潔に報告する：

> 📋 **プロジェクト状況を確認しました**  
> - 関連する既存の実装パターン: {該当するパターン名のリスト}
> - 競合リスク: {あり/なし — ある場合は具体的に}
> - 注意すべき点: {今回の修正に関連する注意点}

### Step 2: 影響範囲の特定

ユーザーの依頼内容を分析し、影響範囲を特定する。

1. **変更対象ファイル**の特定
2. **関連するストア・フック・コンポーネント**の洗い出し
3. Step 1 で読み込んだ実装パターンと照合し、以下を確認する：

📄 **[references/degre-checklist.md](references/degre-checklist.md)**

重要なチェックポイント（抜粋）：
- 変更箇所が既存のワークアラウンドや対策コードと重複していないか
- 変更により既存の防御パターン（ブラックアウト対策、メモリ管理等）が無効化されないか
- Ref + State 並行管理のパターンが維持されるか
- `React.memo` の適用が必要か

### Step 3: 修正の実装

影響範囲を把握した上で、安全に修正を実装する。

**守るべき原則**：

| # | 原則 | 説明 |
|---|------|------|
| 1 | **既存パターンの尊重** | 実装パターンリファレンスに記載された対策・ワークアラウンドを壊さない |
| 2 | **最小限の変更** | 影響範囲を最小に抑え、関係のないコードは変更しない |
| 3 | **既存コードスタイルの踏襲** | 命名規則、コーディング規約、ファイル構成の一貫性を維持 |
| 4 | **防御的な実装** | null チェック、try-catch、フォールバック処理を適切に追加 |
| 5 | **ObjectURL の管理** | 新たに `URL.createObjectURL` を使用する場合、必ず解放処理を含める |
| 6 | **新規コンポーネントの memo 化** | 新しいコンポーネントには `React.memo` の適用を検討 |

### Step 4: テストとビルド確認

修正完了後、以下を実行してデグレがないことを確認する：

1. **既存テストの実行**: `npm run test:run` を実行し、全テストが合格することを確認
2. **ビルド確認**: `npm run build` を実行し、TypeScript コンパイルと Vite ビルドが成功することを確認
3. **型エラーチェック**: IDE のエラー表示を確認し、新たな型エラーがないことを確認

> ⚠️ テストまたはビルドが失敗した場合は、修正内容を見直し、デグレが発生していないか再確認する。

### Step 5: オーバービュースキルへの追記

**対応が完了したら、必ずオーバービュースキルのリファレンスを更新する。この手順を飛ばしてはならない。**

Step 1 で読み込んだオーバービュースキルのリファレンスに、今回の対応内容を追記する。

#### 追記先の判断基準

| 対応内容 | 追記先 |
|---------|--------|
| 新機能の追加 | `references/project-details.md` の該当する機能セクション |
| 実装パターン・ワークアラウンドの追加 | `references/implementation-patterns.md` の該当セクション |
| 新しいカテゴリの対策 | `references/implementation-patterns.md` に新セクションを追加 |
| 横断的な注意点 | `references/implementation-patterns.md` の横断的注意点テーブル |

#### 追記フォーマット

既存のリファレンスのフォーマット・記述スタイルに合わせる。

**implementation-patterns.md への追記例**：
```markdown
### X-N. {対策のタイトル}

- **ファイル**: `{変更したファイルパス}`
- **問題**: {問題の内容}
- **対策**: {実施した対策の内容}
- **注意**: {将来の変更時に注意すべきポイント}
```

**project-details.md への追記例**（機能追加の場合）：
```markdown
### N. {機能名}
- {機能の説明1}
- {機能の説明2}
```

**横断的注意点テーブルへの追記例**：
```markdown
| **{カテゴリ}** | {注意点の要約} |
```

#### 追記時の注意事項

- 既存の記述を**上書き・削除しない**。必ず**追記**する
- 既存のセクション番号と連番を確認し、適切な番号を割り振る
- 既存の記述スタイル（見出しレベル、箇条書きの形式、テーブルの列）に合わせる
- 追記内容が既存の記述と矛盾する場合は、既存の記述を更新する理由をコメントする

### Step 6: 完了報告

ユーザーに以下のフォーマットで対応結果を報告する：

```
## 対応サマリー

### 変更ファイル一覧
| ファイル | 変更内容 |
|---------|---------|
| {ファイルパス} | {変更内容の要約} |

### デグレ確認
- テスト: {全N件合格}
- ビルド: {成功}

### オーバービュー更新
- {追記先リファレンス}: {追記した内容の要約}
```

---

## 参照ドキュメント

- [references/degre-checklist.md](references/degre-checklist.md) — デグレ防止チェックリスト