Menu
フロントエンドのコードベースを解析し、アクセシビリティ（WCAG 2.2準拠）とUXの改善案を提案するレビュースキル。HTML/CSS/JavaScriptベースのプロジェクトをフレームワーク非依存で分析する。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
TerraformプロジェクトのAWSインフラにおけるネットワーク接続性と権限設定を分析します。セキュリティグループ、IAMポリシー、NACLなどを解析し、リソース間の通信可否、不要な接続、権限の過不足を検出します。Terraformファイルやtfstateがあるプロジェクトで、インフラのセキュリティレビューやネットワーク接続の検証が必要な場合に使用します。
要求定義書のレビューを行うスキル。品質チェック・矛盾検出・抜け漏れ検出・曖昧性分析を実施し、 構造化レポートを出力する。以下の場合に使用: (1) 要求定義書・要件定義書をレビューしたい時、 (2) 要求の品質や完全性を確認したい時、 (3) 矛盾・抜け漏れ・曖昧な表現を検出したい時
言語非依存のプログラミングベストプラクティスとガイドライン。コードを書く・関数/クラス/モジュールを実装する・プログラムを新規作成するあらゆる場面でPROACTIVELYに使用すること。コーディング開始前に必ずこのスキルを読み込む。コードレビュー・設計レビューにも使用する。
言語非依存の単体テストベストプラクティスとガイドライン。テストコードを書く・テストケースを追加する・テストスイートを作成するあらゆる場面でPROACTIVELYに使用すること。テストコーディング開始前に必ずこのスキルを読み込む。既存テストのレビューにも使用する。
仕様からテストケースを体系的に生成するスキル。状態機械・自然言語・Mermaid・シーケンス図など多様な入力形式に対応し、CSP安定失敗モデルに基づいて受理テストケース（トレース集合内）と拒否テストケース（トレース集合外）を網羅的に導出する。活性・到達可能性・安全性の3性質を検証するテストスイートを生成する。要求定義・仕様記述・設計成果物からのテストケース生成、テスト設計レビュー、テストカバレッジ分析に使用する。
CSPの安定失敗モデルに基づく状態機械ベースの形式仕様書を作成するスキル。 機能要求（活性・到達可能性・安全性）を入力として、 状態変数・遷移（イベント[ガード]/事後条件）・失敗集合を定義する トップレベル仕様およびコンポーネント仕様を生成する。 画面表示を持つシステムでは画面表示関数も定義する。
| name | frontend-ux-a11y-reviewer |
| description | フロントエンドのコードベースを解析し、アクセシビリティ（WCAG 2.2準拠）とUXの改善案を提案するレビュースキル。HTML/CSS/JavaScriptベースのプロジェクトをフレームワーク非依存で分析する。 |
| disable-model-invocation | true |
フロントエンドのコードベースを静的解析し、アクセシビリティとUXの改善案を優先度付きMarkdownレポートとして提案する。
レビューは以下の5ステップで実施する。
references/wcag-checklist.md のチェックリストに基づき、以下の4原則で分析する:
カスタムウィジェットを発見した場合は references/aria-patterns.md と照合して正しいパターンになっているか確認する。
references/ux-heuristics.md のチェックリストに基づき、コードから検出可能なUX問題を洗い出す:
技術スタックに応じた追加チェックを行う:
React/Next.js:
keyプロパティの適切な使用useEffectの依存配列の妥当性dangerouslySetInnerHTMLのXSSリスクReact.Fragmentでの不要なDOM要素削減next/imageの使用（Next.jsの場合）Vue/Nuxt:
v-forのkey属性v-htmlのXSSリスク共通:
aria-*, role等）分析結果を以下のフォーマットでMarkdownレポートとして出力する。
# フロントエンド UX・アクセシビリティ レビューレポート
**対象**: [プロジェクト名/パス]
**分析日**: [日付]
**技術スタック**: [検出されたスタック]
**分析ファイル数**: [N]件
## サマリー
| カテゴリ | Critical | Major | Minor | 合計 |
|---------|----------|-------|-------|------|
| アクセシビリティ | N | N | N | N |
| UX | N | N | N | N |
| **合計** | **N** | **N** | **N** | **N** |
## Critical（即座に対応すべき）
### [ID] [問題タイトル]
- **カテゴリ**: アクセシビリティ / UX
- **WCAG基準**: [該当する場合]
- **該当ファイル**: `path/to/file.tsx:行番号`
- **問題**: [具体的な問題の説明]
- **修正案**:
[修正前後のコード例]
## Major（早期に対応すべき）
（同じ形式で列挙）
## Minor（改善推奨）
（同じ形式で列挙）
## 良い実践（Good Practices）
既に適切に実装されている点を挙げる（モチベーション維持のため）:
- [良い点1]
- [良い点2]