river-review-frontend

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

Frontend Review（フロントエンドレビュー）

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つは独立して動作し、互いを呼び出さない。

When to Use / いつ使うか

• UI コンポーネント・スタイリングの変更時
• アクセシビリティ（a11y）に関わる変更時
• デザインシステム・デザイントークンの準拠確認が必要なとき
• Tailwind クラスの衛生確認が必要なとき
• Next.js App Router / React Router のフレームワーク境界チェックが必要なとき
• 他の専門エージェント（architecture, security, performance, testing, code）に該当しない UI 固有の懸念があるとき

Routing / ルーティング

キーワード	スキル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