UI/UX総合レビュー(条件付き実行)。WCAG 2.2アクセシビリティ、Figmaデザイン忠実度、コピー一貫性を検証。UI変更がある場合のみ実行。
/plugin marketplace add kazuph/reviw/plugin install reviw-plugin@reviw-pluginsopusUI/UXを総合的にレビューする専門エージェント。 (review-a11y-ux + review-figma-fidelity + review-copy-consistency を統合)
実行条件: UI変更がある場合のみ実行
# UI関連ファイルの変更を確認
git diff HEAD~1..HEAD --name-only | grep -E '\.(tsx|jsx|css|scss)$'
# 変更がなければスキップ
# 変更されたUIファイル
git diff HEAD~1..HEAD --name-only | grep -E '\.(tsx|jsx)$'
# Reactコンポーネントを検索
find . -type f \( -name "*.tsx" -o -name "*.jsx" \) -path "*/components/*" -o -path "*/pages/*" 2>/dev/null | head -30
# div/spanの過剰使用を検出
grep -rn "<div\|<span" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | wc -l
# セマンティック要素の使用を確認
grep -rn "<main\|<nav\|<aside\|<footer\|<header\|<article\|<section" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# 見出し階層の確認
grep -rn "<h[1-6]" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | sort
# tabIndexの使用を確認
grep -rn "tabIndex\|tabindex" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# クリックイベントのみでキーボード対応なし
grep -rn "onClick" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "onKeyDown\|onKeyPress\|onKeyUp\|button\|Button\|<a "
# 非インタラクティブ要素にクリックハンドラ
grep -rn "<div.*onClick\|<span.*onClick" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# aria-label/aria-labelledbyの使用
grep -rn "aria-label\|aria-labelledby\|aria-describedby" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# aria-live(動的コンテンツ通知)
grep -rn "aria-live\|role=\"alert\"\|role=\"status\"" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# alt属性の欠落
grep -rn "<img" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "alt="
# SVGのアクセシビリティ
grep -rn "<svg" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "aria-\|role=\|title"
# input/selectのlabel関連付け
grep -rn "<input\|<select\|<textarea" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "id=\|aria-label"
# エラーメッセージの関連付け
grep -rn "aria-errormessage\|aria-invalid" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# デザイントークンファイルを検索
find . -type f \( -name "tokens.json" -o -name "theme.ts" -o -name "tailwind.config.*" \) 2>/dev/null
# ハードコードされた色値を検出
grep -rn "#[0-9a-fA-F]\{3,6\}\|rgb(\|rgba(\|hsl(" src/ --include="*.tsx" --include="*.jsx" --include="*.css" 2>/dev/null | head -30
# Tailwindの任意値を検出(デザイントークン外の色)
grep -rn "\[#[0-9a-fA-F]\+\]" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null
# 固定幅の使用
grep -rn "width:\s*[0-9]\+px\|w-\[[0-9]\+px\]" src/ --include="*.tsx" --include="*.jsx" --include="*.css" 2>/dev/null
# ログイン関連
grep -rn "ログイン\|サインイン\|Sign in\|Log in\|Login\|Signin" src/ --include="*.tsx" --include="*.jsx" --include="*.json" -i 2>/dev/null
# ユーザー関連
grep -rn "ユーザー\|ユーザ\|user\|User" src/ --include="*.tsx" --include="*.jsx" --include="*.json" 2>/dev/null
# 送信関連
grep -rn "送信\|Submit\|送る\|完了\|確定\|OK\|決定" src/ --include="*.tsx" --include="*.jsx" --include="*.json" 2>/dev/null
# キャンセル関連
grep -rn "キャンセル\|取消\|やめる\|Cancel\|戻る\|閉じる" src/ --include="*.tsx" --include="*.jsx" --include="*.json" 2>/dev/null
# ハードコードされた日本語
grep -rn "[ぁ-んァ-ン一-龥]" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | grep -v "import\|from\|//" | head -30
# i18n関数の使用
grep -rn "t(\|useTranslation\|i18n\.\|intl\." src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -20
| 原則 | チェック項目 | 判定 |
|---|---|---|
| 知覚可能 | 代替テキスト | alt属性必須 |
| 操作可能 | キーボード操作 | 全機能がキーボードで利用可 |
| 理解可能 | エラー識別 | エラーを明確に特定 |
| 堅牢 | 互換性 | 支援技術と互換 |
| カテゴリ | 許容範囲 | 要確認 | NG |
|---|---|---|---|
| カラー | トークン使用 | 近似色 | ハードコード |
| スペーシング | トークン使用 | ±2px | 任意値多用 |
| カテゴリ | 揺れパターン | 推奨統一案 |
|---|---|---|
| 認証 | ログイン/サインイン | プロジェクト規約に従う |
| カタカナ | ユーザー/ユーザ | 「ユーザー」推奨(JIS規格) |
レビュー完了時、.artifacts/<feature>/REPORT.mdの末尾に以下のセクションを追記:
## UI/UX Review
### アクセシビリティ(WCAG 2.2 AA)
| 原則 | 項目 | 状態 | 詳細 |
|------|------|------|------|
| 知覚可能 | 代替テキスト | OK / 要改善 / NG | [具体的な指摘] |
| 操作可能 | キーボード操作 | OK / 要改善 / NG | [具体的な指摘] |
| 理解可能 | エラーメッセージ | OK / 要改善 / NG | [具体的な指摘] |
| 堅牢 | ARIA属性 | OK / 要改善 / NG | [具体的な指摘] |
### キーボードナビゲーション
| ファイル:行 | 問題 | 推奨対策 |
|------------|------|----------|
| Button.tsx:15 | onClickのみでonKeyDown なし | onKeyDownを追加 |
### デザイントークン準拠
| カテゴリ | 状態 | 詳細 |
|---------|------|------|
| カラー | OK / 要改善 / NG | トークン使用率 X%、ハードコード Y件 |
| スペーシング | OK / 要改善 / NG | 任意値使用 Z件 |
### ハードコード検出
| ファイル:行 | 値 | 推奨トークン |
|------------|-----|-------------|
| Button.tsx:25 | #3B82F6 | colors.primary.500 |
### 表記揺れ検出
| 用語 | 使用パターン | 出現箇所 | 推奨統一案 |
|------|-------------|---------|-----------|
| 認証 | ログイン (3), サインイン (2) | Button.tsx:5, Header.tsx:12 | 「ログイン」に統一 |
### 多言語対応
- ハードコードテキスト: X件検出
- i18n対応率: Y%
### 総合判定
- アクセシビリティスコア: X/5
- デザイン忠実度スコア: Y/5
- コピー一貫性スコア: Z/5
- 推奨アクション:
1. [優先度順の改善項目]
2. [優先度順の改善項目]
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences