troubleshoot

# Troubleshoot Skill

問題発生時の診断と解決をガイドするスキル。
VibeCoder が技術的な知識なしで問題を解決できるよう支援します。

---

## トリガーフレーズ

このスキルは以下のフレーズで自動起動します：

- 「動かない」「エラーが出た」「壊れた」
- 「うまくいかない」「失敗した」
- 「なぜ？」「原因は？」
- "it's broken", "doesn't work", "error", "why?"

---

## 概要

問題が発生したとき、VibeCoder は技術的な詳細を理解する必要はありません。
このスキルが自動的に診断し、解決策を提示します。

---

## 診断フロー

### Step 1: 症状の確認

> 🔍 **何が起きましたか？**
>
> 簡単に教えてください：
> - 「画面が真っ白」
> - 「ボタンが動かない」
> - 「データが保存されない」

### Step 2: 自動診断

```bash
# 環境チェック
node -v
npm -v
git status -sb

# エラーログ確認
npm run build 2>&1 | tail -20
npm test 2>&1 | tail -20

# 依存関係チェック
npm ls --depth=0
```

### Step 3: 問題カテゴリの特定

| カテゴリ | 症状 | 自動対応 |
|---------|------|----------|
| 依存関係 | `Cannot find module` | `npm install` |
| 型エラー | `Type error` | error-recovery agent |
| ビルドエラー | `Build failed` | error-recovery agent |
| ランタイム | 画面が表示されない | ログ分析 |
| 環境設定 | 接続エラー | 環境変数確認 |

---

## 問題別対応

### 「ボタンが動かない / フォームが送信されない / UIが崩れる」

UIの不具合は、**画面で再現して観測→修正→再検証**するのが最短です。

1. **agent-browser を最優先で使う**（インストール: `npm install -g agent-browser`）
   ```bash
   # ページを開いてスナップショット取得
   agent-browser open https://example.com/target-page
   agent-browser snapshot -i -c

   # 要素参照でクリック・入力
   agent-browser click @e1
   agent-browser fill @e2 "test"
   ```
   - 対象URLで再現 → スナップショット/コンソールを根拠に原因を絞る
   - ソースコード（UI/状態管理/API/バリデーション）を確認して修正
   - 同じ手順で再現しないことを確認
   - 参考: `docs/OPTIONAL_PLUGINS.md`
2. **agent-browser が使えない場合のフォールバック**
   - MCP ブラウザツール（chrome-devtools, playwright）
   - 再現手順（URL/手順/期待値/実際）
   - スクリーンショット/動画
   - コンソールログ/ネットワークログ

### 「画面が真っ白」

```
🔍 診断中...

考えられる原因:
1. ビルドエラー
2. JavaScript エラー
3. ルーティング問題

🔧 自動チェック:
- ビルドログを確認... ✅ エラーなし
- コンソールエラーを確認... ❌ エラー発見

💡 解決策:
「直して」と言ってください。自動修正を試みます。
```

### 「npm install が失敗」

```
🔍 診断中...

エラー: `ERESOLVE unable to resolve dependency tree`

🔧 解決策:
1. キャッシュをクリア
2. node_modules を再インストール

実行してもいいですか？（はい/いいえ）
```

### 「Git がおかしい」

```
🔍 診断中...

検出: マージコンフリクト発生

🔧 解決策:
1. コンフリクト箇所を表示
2. 解決方法を提案

「解決して」と言えば自動マージを試みます。
```

---

## VibeCoder向け応答パターン

### パター