메뉴
フロントエンドのコードベースを解析し、アクセシビリティ（WCAG 2.2準拠）とUXの改善案を提案するレビュースキル。HTML/CSS/JavaScriptベースのプロジェクトをフレームワーク非依存で分析する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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]