メニュー
フロントエンド観点のレビューエージェント。 アクセシビリティ、デザインシステム準拠、Tailwind クラス衛生、UI 状態設計、 Next.js / React Router のフレームワーク境界を個別スキルへルーティングする。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/s977043/river-review --skill river-review-frontendコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
6つの専門レビュアーロールを並列実行し、consensusLevel（複数ロールの合意度）と Tech Lead レポート（top3指摘・blindSpots・consensusSummary）で結果を統合する マルチエージェントレビュー entry skill。 Parallel multi-role review with consensus scoring (consensusLevel) and Tech Lead report. Use when a major release needs exhaustive multi-angle review, or when a single-perspective review is not enough and you want confidence that no reviewer angle was missed（重要リリース前の網羅レビュー・多視点の確証が 欲しいとき）。
検査器（linter / ガード / CI ゲート / バリデータ / フィルタ）そのものの検出力が差分で静かに落ちていないか、また新設した検査が実際に検出できることが実証されているかを diff-time で検出する。Check 1 unverified detection reduction（検査器の検出ロジック（正規表現・除外パターン・解決集合・allowlist・baseline）を変更して検出件数が減ったのに、減った 1 件ずつが誤検出であった根拠が示されないまま「誤検出を潰した」「N → M 件に減少」と改善として主張している）、Check 2 unproven guard detection power（新しい検査ロジック・CI ゲート・バリデーションを追加・変更したのに、検出すべき入力を注入して検出されること／検出すべきでない入力で黙ることを示す変異注入の証跡が無く、「追加した」「CI が緑」を検出力の証拠として扱っている）、の 2 Check を対象とする report-only。テスト自身のアサーションが実質何も検証していない構造は test-assertion-effectiveness、レビュー基準・品質ゲートの明示的な弱体化（ルールの削除・閾値の引き下げ・suppression entry 追加・lint ルールの無効化）は review-criteria-integrity、リファクタ完了主張一般の検証は refactor-claim-audit、workflow の permissions と action pin は gha-workflow-security、設定ファイルの構文・型の妥当性は config-json へ委譲する
pbi-input, plan, todo, test-cases 間の整合性をチェックし、実装着手前の仕様漏れを検知する
| id | river-review-frontend |
| name | river-review-frontend |
| description | フロントエンド観点のレビューエージェント。 アクセシビリティ、デザインシステム準拠、Tailwind クラス衛生、UI 状態設計、 Next.js / React Router のフレームワーク境界を個別スキルへルーティングする。 |
| category | midstream |
| phase | ["midstream"] |
| severity | minor |
| applyTo | ["src/**/*.{tsx,jsx,vue,svelte}","src/routes/**/*.{ts,tsx,js,jsx}","app/**/*.{ts,tsx,js,jsx}","components/**/*.{ts,tsx,js,jsx}","**/*.{css,scss,less}","pages/**/*.{ts,tsx,js,jsx}","lib/**/*.{ts,tsx,js,jsx}","packages/**/*.{ts,tsx,js,jsx}"] |
| applyToExemptions | [{"skill":"modern-web-performance","reason":"参照のみ。Core Web Vitals の実行は river-review-performance に据置く（ROUTING.md「modern-web-performance の帰属について」）。本エントリの applyTo には含めない。"}] |
| inputContext | ["diff","fullFile"] |
| outputKind | ["findings","actions"] |
| tags | ["frontend","ui","accessibility","design-system","entry","routing"] |
| version | 0.1.0 |
| license | MIT |
UI/コンポーネント変更に影響するアクセシビリティ、デザインシステム準拠、フレームワーク境界を検出し、適切な個別スキルで検証する。
frontend-reviewer（review-team perspective ロール）とは別物:src/lib/reviewer-orchestrator.mjsのfrontend-reviewerは review-team のマルチエージェントレビューで Claude/Codex が演じる perspective ロール（UI/component/styling ファイル検知時に自動追加）。本スキルは agent-skills ルーター群の一員で、キーワードから個別 registry skill へルーティングする別サーフェス。2つは独立して動作し、互いを呼び出さない。
| キーワード | スキルID | 説明 |
|---|---|---|
| a11y, アクセシビリティ, alt属性, aria-label | a11y-accessible-name | アクセシビリティ基本 |
| キーボード操作, フォーカス管理, ARIA role | modern-web-a11y-interactive | インタラクティブ UI アクセシビリティ |
| セマンティック, div クリック, ネイティブ要素 | modern-web-semantic | セマンティック HTML・プラットフォームネイティブ |
| ブラウザ互換, Baseline, feature detection | modern-web-browser-compat | ブラウザ互換性・Baseline |
| デザインシステム, コンポーネント再利用, Button | design-system-component-reuse | デザインシステム コンポーネント再利用 |
| デザイントークン, 色の直書き, 余白, 角丸 | design-token-enforcement | デザイントークン |
| DESIGN.md, デザイン定義準拠, スケール逸脱 | design-source-conformance | デザイン Source-of-Truth 準拠 |
| Tailwind, 任意値, クラス衛生 | tailwind-class-hygiene | Tailwind クラス衛生 |
| ローディング, 空状態, スピナー, 状態欠落 | loading-state | ローディング状態遷移 |
| コンポーネントバリアント, hover, focus, disabled | component-variants-states | コンポーネント状態の文書化 |
| Next.js, App Router, use client | nextjs-app-router-boundary |
| Next.js App Router 境界 |
| React Router, loader, useEffect データ取得 | react-router-loader-boundary | React Router loader 境界 |
| React Router, action, ErrorBoundary | react-router-action-contract | React Router action 契約 |
| Core Web Vitals, LCP, INP, CLS | modern-web-performance | 参照のみ。実行は river-review-performance（理由） |
a11y-accessible-name + modern-web-a11y-interactiveapp/ ディレクトリ（Next.js App Router）→ nextjs-app-router-boundaryroutes/ ディレクトリ（React Router）→ react-router-loader-boundary + react-router-action-contractdesign-token-enforcement + tailwind-class-hygienemodern-web-performance の帰属について14 候補スキルのうち modern-web-performance（Core Web Vitals / LCP / INP / CLS）は UI 起因の懸念だが、ドメイン一貫性を優先し実行は river-review-performance に据え置く（river-review-performance/references/ROUTING.md の「Core Web Vitals・Modern Web パフォーマンス」節）。本表には到達性のための参照行として掲載するのみで、frontend 側に重複するアクティブなキーワードルートは追加しない（同一キーワードが2ルーターで競合発火するリスクを避けるため）。
1. 変更内容の分類
├─ キーワード指定あり → 該当スキルを直接選択
├─ コンポーネントファイル → a11y-accessible-name + modern-web-a11y-interactive を優先
├─ app/ ディレクトリ → nextjs-app-router-boundary を追加
├─ routes/ ディレクトリ → react-router-loader-boundary + react-router-action-contract を追加
└─ CSS/Tailwind ファイル → design-token-enforcement + tailwind-class-hygiene を追加
2. スキルの実行
├─ a11y-accessible-name: アクセシビリティ基本
├─ modern-web-a11y-interactive: インタラクティブ UI アクセシビリティ
├─ modern-web-semantic: セマンティック HTML・プラットフォームネイティブ
├─ modern-web-browser-compat: ブラウザ互換性・Baseline
├─ design-system-component-reuse: デザインシステム コンポーネント再利用
├─ design-token-enforcement: デザイントークン
├─ design-source-conformance: デザイン Source-of-Truth 準拠
├─ tailwind-class-hygiene: Tailwind クラス衛生
├─ loading-state: ローディング状態遷移
├─ component-variants-states: コンポーネント状態の文書化
├─ nextjs-app-router-boundary: Next.js App Router 境界
├─ react-router-loader-boundary: React Router loader 境界
└─ react-router-action-contract: React Router action 契約
3. 統合
├─ 重複する指摘の除去
└─ Checklistに基づく UI 品質チェックの補完
フロントエンドレビューでは以下を確認する:
use client）が適切かuseEffect フェッチの誤用、action のエラー表現と ErrorBoundary）を満たすか<file>:<line>: <message>
| スキル | 関係 | 棲み分け |
|---|---|---|
river-review-code | 補完 | frontend は「UI 固有の懸念」、code は「一般コード品質」。UI 系ルートは frontend に一元化済み（二重発火なし） |
river-review-performance | 補完 | frontend は「UI 表現」、performance は「実行効率」。modern-web-performance は performance に据置 |
river-review-architecture | 補完 | frontend は「コンポーネント単位」、architecture は「マクロ設計」 |
river-review-code に据置、#1460）。loading-state / component-variants-states / react-router-action-contract の委譲表を含む