| name | style-review |
| version | 1.1.0 |
| description | CSS/UI スタイルを WCAG 2.2 の数値基準（コントラスト比・フォーカス・モーション）で技術検証し、Light/Dark 両モードをレビューして報告する。検証のみで修正はしない。主観的な使用感（色のキツさ・隣接色の被り）のレビューは ux-visibility-review を使う |
Style Review
CSS/UI のアクセシビリティとスタイル品質を一括検証するスキル。
ガードレール
- このスキルは 検証と報告のみ を行う。コードの修正は行わない（修正はレポートの「修正推奨」を見たユーザーの指示で別途実施する）
Quick Start
/style-review [対象ファイル/ディレクトリ]
例:
/style-review styles/ - styles ディレクトリ内の CSS を検証/style-review src/components/Button.css - 特定ファイルを検証/style-review - カレントディレクトリの CSS/SCSS を検証
検証項目
1. WCAG コントラスト比（WCAG 2.2 準拠）
| テキストタイプ | AA 最小 | AAA 推奨 | 該当 SC |
|---|
| 通常テキスト (< 24px / < 18.67px bold) | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| 大きいテキスト (≥ 24px / ≥ 18.67px bold) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| UI コンポーネント・グラフィック | 3:1 | -- | 1.4.11 |
| フォーカスインジケーター（状態変化） | -- | 3:1 (+ 2px solid) | 2.4.13 |
注意: 大きいテキストは 18pt (24px) 以上、または 14pt (18.67px) 以上かつ bold。18px と 18pt は異なる値。
2. Light/Dark モード検証
両モードでの可読性を確認：
- テキストコントラスト
- ボーダー視認性
- シャドウ効果
- アイコン/SVG の視認性
3. インタラクション状態
:hover 状態のコントラスト:focus 状態の視認性（2px+ solid outline、破線の場合は 4px+）:focus 要素が他の要素に隠されない（SC 2.4.11）:active 状態:disabled 状態の区別（3:1 以上推奨）
4. モーション設定
prefers-reduced-motion 対応- アニメーション時間の適切性
- 点滅コンテンツの有無
実行フロー
0. 引数パース
├── 対象パス（デフォルト: カレントディレクトリ）
├── --wcag-level AA|AAA（デフォルト: AA）
├── --only contrast|focus|motion（デフォルト: 全検証）
└── --json（デフォルト: Markdown 出力）
1. 対象ファイル特定
├── Glob で *.css, *.scss, *.module.css を検索
└── 0 件の場合 → エラー: "対象 CSS ファイルが見つかりません"
2. css-expert エージェント起動（Task ツール使用）
├── 下記の指示テンプレートで起動
└── 応答なし/失敗 → リトライ 1 回（「エラーハンドリング」表に従う）
3. 結果統合
├── 重要度順にソート（High → Medium → Low）
└── Pass/Fail 判定
4. レポート出力
├── デフォルト: Markdown テーブル形式
└── --json: JSON 形式
css-expert 指示テンプレート
css-expert を Task ツールで起動する際、以下のプロンプトを使用する：
以下の CSS ファイルを WCAG 2.2 基準で検証してください。
対象ファイル: [ファイルパス一覧]
WCAG レベル: [AA|AAA]
検証カテゴリ: [contrast|focus|motion|all]
【検証項目】
1. コントラスト比（WCAG SC 1.4.3 / 1.4.6 / 1.4.11）
- テキスト色と背景色のペアを抽出
- CSS 変数は :root での定義値を解決して計算
- prefers-color-scheme: dark ブロック内の値も検証
- AA 基準: 通常テキスト 4.5:1、大きいテキスト 3:1
[AAA の場合: AAA 基準: 通常テキスト 7:1、大きいテキスト 4.5:1]
2. フォーカス状態（WCAG SC 2.4.7 / 2.4.11 / 2.4.13）
- :focus, :focus-visible スタイルの有無
- outline: none の検出（代替スタイルなしは NG）
- フォーカスインジケーターの視認性
3. モーション設定（WCAG SC 2.3.1）
- prefers-reduced-motion メディアクエリの有無
- animation/transition を使用するセレクターの列挙
【出力形式】JSON で出力してください:
{
"agent": "css-expert",
"file": "ファイルパス",
"issues": [
{
"line": 行番号,
"severity": "high" | "medium" | "low",
"category": "accessibility",
"description": "問題の説明",
"suggestion": "修正案",
"wcag": "該当 SC 番号"
}
],
"wcag_check": {
"contrast_pass": true/false,
"light_mode_tested": true/false,
"dark_mode_tested": true/false,
"focus_visible": true/false,
"reduced_motion": true/false
}
}
CSS 変数の解決方法
CSS 変数（var(--color)）を含む色定義の検証手順:
1. :root ブロックから変数定義を抽出
2. @media (prefers-color-scheme: dark) 内の再定義も抽出
3. Light/Dark それぞれのコンテキストで変数値を解決
4. 解決後の実際の色値でコントラスト比を計算
解決不能な場合（外部ファイル参照等）:
→ "解決不能" としてマークし、手動確認を推奨
Pass/Fail 基準
合格条件
| レベル | 条件 |
|---|
| Pass | High: 0 件、かつ wcag_check の全項目が true |
| Conditional Pass | High: 0 件、Medium: 5 件以下（Pass 条件を満たさない場合） |
| Fail | High: 1 件以上、または Medium: 6 件以上 |
severity 判定基準
| severity | 基準 |
|---|
| high | WCAG AA 違反（コントラスト比未達、outline:none 代替なし） |
| medium | ベストプラクティス逸脱（AAA 未達、prefers-reduced-motion 未対応） |
| low | 改善推奨（disabled 状態のコントラスト、タッチターゲットサイズ） |
出力形式
標準出力（デフォルト: Markdown）
## Style Review 結果
### 概要
- 検証ファイル数: N
- 問題検出数: X (High: H, Medium: M, Low: L)
- 判定: Pass | Conditional Pass | Fail
### WCAG コントラスト
| ファイル | 行 | 要素 | 現在比率 | 必要比率 | 状態 |
|---------|---|-----|---------|---------|------|
| button.css | 42 | .btn-text | 2.8:1 | 4.5:1 | ❌ |
| card.css | 15 | .card-title | 5.2:1 | 4.5:1 | ✅ |
### Light/Dark モード
| ファイル | 問題 | Light | Dark |
|---------|-----|-------|------|
| theme.css | --text-secondary | ✅ | ❌ 2.1:1 |
### フォーカス状態
| ファイル | セレクター | フォーカス表示 |
|---------|----------|--------------|
| button.css | .btn | ❌ outline: none |
### 修正推奨
1. **High**: button.css:42 - コントラスト比を 4.5:1 以上に
2. **Medium**: theme.css:78 - ダークモードの --text-secondary を調整
JSON 出力（--json フラグ）
{
"agent": "style-review",
"summary": "3 files, 2 issues",
"verdict": "fail",
"issues": [
{
"file": "button.css",
"line": 42,
"severity": "high",
"category": "accessibility",
"description": "コントラスト比 2.8:1 は WCAG AA 基準 4.5:1 未満",
"suggestion": "color: #374151 に変更（5.9:1）",
"wcag": "1.4.3"
}
],
"wcag_check": {
"contrast_pass": false,
"light_mode_tested": true,
"dark_mode_tested": true,
"focus_visible": false,
"reduced_motion": true
}
}
エラーハンドリング
| 状況 | 対応 | 出力例 |
|---|
| 対象ファイル 0 件 | 即時終了、メッセージ表示 | "対象 CSS ファイルが見つかりません。パスを確認してください" |
| CSS パースエラー | 該当ファイルをスキップ、他を続行 | {"file": "broken.css", "error": "CSS parse error at line 42"} |
| CSS 変数解決不能 | "解決不能" としてマーク | "description": "var(--external-color) は解決不能。手動確認推奨" |
| エージェント起動失敗 | リトライ 1 回、失敗時は手動レビューを推奨 | "css-expert エージェント起動失敗。手動レビューを実施してください" |
連携エージェント
| Agent | 役割 | 起動条件 |
|---|
css-expert | CSS 分析、WCAG 検証 | 常時（Task ツールで起動） |
nodejs-expert | ビルドツール設定 | PostCSS/Sass 設定ファイルが存在する場合 |
カスタマイズ
WCAG レベル変更
/style-review --wcag-level AAA
AAA 基準（より厳格）:
- 通常テキスト: 7:1
- 大きいテキスト: 4.5:1
特定カテゴリのみ検証
/style-review --only contrast
/style-review --only focus
/style-review --only motion
関連リソース
