---
name: h10o-review
description: フロントエンド全体を1回で網羅レビューする統合スキル。HTML/A11Y/SEO、CSS設計/Tailwind/トークン、JavaScript設計/エラー処理/性能を横断的に確認したいときに使う。複合依頼（ページ全体レビュー、実装品質の総点検、改修前の棚卸し）で利用する。
---

# h10o-review

## 目的

1回の呼び出しで、フロントエンドを **HTML → CSS → JavaScript** の順に網羅レビューする。
実害のある論点を優先し、修正可能な最小差分を提案する。

## 使い方

- `/h10o-review`
  - 変更対象が明確な場合は、差分または対象ファイルを受け取りレビューする。
- `/h10o-review <path-or-file>`
  - 指定範囲のみをレビューする。

## 想定入力

- Git差分（推奨）
- 対象ファイル一覧
- 画面URLまたはスクリーンショット（UI崩れ確認時）
- 変更意図（例: CLSを減らしたい、バンドルを軽くしたい）

## 入力要件

- 可能なら「対象ファイル」または「差分」を先に受け取る。
- 変更意図（何を改善したいか）がある場合は優先して評価軸に反映する。
- 情報不足時は、推測を最小化して追加情報を短く確認する。

### 情報不足時の最小確認

- 対象範囲: 「全体 / 特定ディレクトリ / 単一ファイル」
- 優先論点: 「A11Y / パフォーマンス / 保守性 / SEO」
- 制約: 「既存設計維持 / Tailwindのみ / 期限優先」

## 実行フロー

1. まず `references/markup.md` を読み、構造・A11Y・SEOの重大項目を確認する。
2. 次に `references/css.md` を読み、設計・責務・再利用性を確認する。
3. プロジェクトが Tailwind CSS を使用している場合は `references/tailwind.md` を読み、Tailwind固有の詳細チェック（クラス順序・トークン・バリアント管理・レスポンシブ設計・アンチパターン）を適用する。
4. 最後に `references/javascript.md` を読み、実行時リスクと性能を確認する。
5. 各指摘に `確度`（確定 / 推定 / 判定保留）を付ける。
6. 出力は「重大 / 中 / 軽微」で要点のみ返す。

### 各領域の最低レビュー件数（目安）

- Markup: 最低3観点（見出し構造、操作性、メタ情報）
- CSS: 最低3観点（責務分離、重複、スケール管理）
- Tailwind（該当時）: 最低3観点（トークン使用、バリアント管理、レスポンシブ設計）
- JavaScript: 最低3観点（例外処理、高頻度イベント、依存/責務）

※ 問題が見つからない場合も「確認済み観点」を簡潔に明示する。

## 重要ポリシー

- **細かいコードスタイル（インデント、空白、改行、クォート等）はレビューしない。**
- フォーマット系は Formatter/Linter（Prettier, ESLint, Stylelint, EditorConfig 等）へ委譲する。
- 指摘は実害のある論点（壊れる・遅い・読めない・直しづらい）を優先する。
- 推測ベースの断定を避け、根拠が弱い場合は「判定保留」にする。
- 可能な限り「なぜ問題か」をユーザー影響（UX/SEO/運用）で示す。

## 重大度の定義

- 重大: 本番障害、アクセシビリティ重大欠陥、セキュリティ/性能の高リスク
- 中: 不具合化しやすい設計・保守性低下・UX低下が明確
- 軽微: 改善余地はあるが直近の実害は小さい

### 重大度の判定補助

- 重大に寄せる条件
  - 実行停止、操作不能、到達不能、著しい表示崩れ
  - CLS/LCP悪化が明確、または回避策なしで高負荷イベント多発
- 中に寄せる条件
  - 今は動くが変更時に壊れやすい設計
  - 再利用阻害・重複増殖・責務混在
- 軽微に寄せる条件
  - 体系化・統一で改善可能だが影響範囲が限定的

## 出力ルール

- `file:line`（分かる範囲）を添えて指摘する。
- 各領域で `現状 / 問題 / 修正案` を短く示す。
- 最小差分で直せる提案を優先する。
- 代替案は必要時のみ示す。
- 最後に件数サマリー（重大X件 / 中Y件 / 軽微Z件）を示す。

### 出力フォーマット（必須）

1. 全体要約（3行以内）
2. 重大
3. 中
4. 軽微
5. 判定保留
6. 対象外
7. 件数サマリー

各指摘は次の形を使う:

- 位置: `file:line`
- 重要度: 重大 / 中 / 軽微
- 確度: 確定 / 推定 / 判定保留
- 現状:
- 問題:
- 修正案:
- 期待効果:（任意、1行）

## 対象外・判定保留

- 対象範囲外の項目は「対象外」と明記する。
- 根拠不足で断定できない項目は「判定保留」として、確認すべき情報を1行で示す。

## レビューしない項目（再掲）

- 整形のみの差分（インデント、改行、空白、クォート）
- プロジェクト方針が未共有の命名流儀論争
- 実害説明のない主観的リファクタ提案

## 参照

- HTML/A11Y/SEO: `references/markup.md`
- CSS設計: `references/css.md`
- Tailwind CSS詳細チェック: `references/tailwind.md`（Tailwind利用プロジェクトの場合）
- JavaScript設計/性能: `references/javascript.md`