---

name: error-report description: | エラー発生時の状況をユーザにヒアリングし、一時的なドキュメントとして整理するスキル。 開発中の予期せぬエラーに対して、状況の記録、原因分析、解決策の整理を支援。 ブログ記事化への橋渡しとなるレポートを生成。 allowed-tools: Read, Grep, Glob, Bash, Write, AskUserQuestion, WebSearch, WebFetch

error-report Skill

使用例

Copy/error-report
/error-report next-image-error
/error-report lambda-timeout

対象

開発中に発生した予期せぬエラーの状況整理とドキュメント化

スキル構成

Copy.claude/skills/error-report/
└── SKILL.md                          # このファイル

.claude/templates/learning/
└── report.md                         # エラーレポートテンプレート

出力先

Copytmp/learning/<feature_name>/
├── report.md                         # エラーレポート（必須）
├── draw/                             # Draw.io ソースファイル（オプション）
│   └── 01_<name>.drawio
├── mmd/                              # Mermaid ソースファイル（オプション）
│   └── 01_<name>.mmd
├── puml/                             # PlantUML ソースファイル（オプション）
│   └── 01_<name>.puml
└── images/                           # 画像ファイル（オプション）
    └── 01_<name>.png

実行手順

Step 1: ヒアリング開始

「エラーレポートを作成します。以下の情報を教えてください：

1. 対象機能/コンポーネント名: （例: next-image, lambda-function, api-gateway）

2. エラー発生の状況:

• いつ、どのような操作を行った際にエラーが発生しましたか？
• エラーの再現性はありますか？（常に発生/時々発生/一度だけ）

番号で選択、または具体的に記述してください。」

Step 2: エラー詳細の収集

「次に、エラーの詳細を教えてください：

3. エラーメッセージ:

Copyエラーメッセージをそのまま貼り付けてください

4. スタックトレース（ある場合）:

Copyスタックトレースがあれば貼り付けてください

5. 環境情報:

• OS:
• 言語/ランタイムバージョン:
• フレームワークバージョン:
• その他関連ツール:」

Step 3: 変更履歴と解決策の収集

「続いて、関連する変更と解決策について教えてください：

6. 直前の変更:

• 設定変更があれば教えてください
• コード変更があれば教えてください

7. 試みた解決策:

8. 最終的な解決策（解決した場合）: どのように解決しましたか？」

Step 4: 参考資料の検索・収集

「関連する公開ドキュメントや類似事例を検索します。

検索対象:

収集する URL 例:

• 公式ドキュメント: https://nextjs.org/docs/...
• GitHub Issue: https://github.com/xxx/issues/123
• Stack Overflow: https://stackoverflow.com/questions/xxx
• 技術ブログ: https://zenn.dev/xxx, https://qiita.com/xxx

参考になりそうな URL があれば追加で教えてください。」

注意: Web 検索を行い、関連性の高い情報を自動収集します。

Step 5: 図表生成の確認

「複雑な事象の場合、以下の図表を生成できます：

生成可能な図表:

図表の生成を希望しますか？（y/N）

注意: 図表生成を行う場合、現状の構成やエラー内容を正確に解析するため、数分程度かかる場合があります。」

Step 6: レポート生成

テンプレート .claude/templates/learning/report.md を使用し、ヒアリング内容を反映したレポートを生成

出力先: tmp/learning/<feature_name>/report.md

Step 7: blog-outline 連携確認

「エラーレポートを作成しました：

出力ファイル: tmp/learning/<feature_name>/report.md

このレポートをブログ記事として整理しますか？

1. はい - /blog-outline スキルを実行してブログ構成案を生成
2. いいえ - レポートのみで完了

番号で選択してください。」

ヒアリング項目一覧

図表生成オプション

複雑な事象の場合、以下の図表を生成可能

図表命名規則:

• Draw.io: {連番}_{内容}.drawio （例: 01_infrastructure.drawio）
• Mermaid: {連番}_{内容}.mmd （例: 01_error_flow.mmd）
• PlantUML: {連番}_{内容}.puml （例: 01_component.puml）
• 画像: {連番}_{内容}.png （例: 01_error_flow.png）

重要: 図表内のテキストは英語で記載

出力フォーマット例

Copy# エラーレポート: next-image-sizing

## 概要

| 項目                    | 値                           |
| ----------------------- | ---------------------------- |
| 発生日時                | 2026-01-11                   |
| 対象機能/コンポーネント | Next.js Image コンポーネント |
| 発生環境                | ローカル開発環境             |
| 再現性                  | 常に発生                     |
| 解決状況                | 解決済み                     |

## エラー発生の状況

### 発生条件

Markdown コンテンツ内の画像が記事詳細ページで表示される際に発生

### 実行した操作

1. 記事詳細ページにアクセス
2. 画像を含む Markdown コンテンツをレンダリング
3. 画像サイズが意図通りに表示されない

## エラー詳細

### エラーメッセージ

```
Image with src "/blog/xxx.png" has either width or height modified,
but not the other. If you use CSS to change the size of your image,
also include the styles 'width: "auto"' or 'height: "auto"' to
maintain the aspect ratio.
```

## 参考資料

- [Next.js Image Component - 公式ドキュメント](https://nextjs.org/docs/app/api-reference/components/image)
- [Stack Overflow - 類似事例](https://stackoverflow.com/questions/xxx)

...

注意事項

• ヒアリング内容は正確に記録し、推測で補完しない
• 機密情報（パスワード、API キー等）は記録しない
• 解決策が不明な場合は「調査中」として記録
• 図表は必要に応じて生成（常に生成する必要はない）
• テンプレートの各セクションに該当情報がない場合は「N/A」と記載