river-review-frontend

river-review-frontend is a skill for Claude Code from s977043/river-review. It costs 72 tokens per session (3,048 once invoked), scanned A, original, MIT.

A frontend review skill that checks user-interface changes for accessibility, design-system consistency, styling issues, UI states, and framework boundaries in React and Next.js.

In plain words
What is it for?
Use it when changing UI components, styling, accessibility behavior, design tokens, Tailwind classes, or Next.js App Router and React Router code.
Why use it?
It helps catch interface problems that general code reviews may miss, such as poor keyboard support, inconsistent components, or misplaced framework-specific code.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: mentions Codex.

Part of the river-review plugin — 139 skills, 18 commands, 5 agents, 3 hooks shipped together

Good fit Use it when changing UI components, styling, accessibility behavior, design tokens, Tailwind classes, or Next.js App Router and React Router code.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/s977043/river-review/river-review-frontend
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add s977043/river-review --skill river-review-frontend
Clone the repo
git clone --depth 1 https://github.com/s977043/river-review

Made for: Claude Code.

Or install river-review, the plugin that ships this one along with the rest of its 139 skills, 18 commands, 5 agents, 3 hooks.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for river-review-frontend

README.md
[![agentmods](https://agentmods.dev/badge/skills/s977043/river-review/river-review-frontend/github.svg)](https://agentmods.dev/skills/s977043/river-review/river-review-frontend)
Your own site
<a href="https://agentmods.dev/skills/s977043/river-review/river-review-frontend"><img src="https://agentmods.dev/badge/skills/s977043/river-review/river-review-frontend/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for river-review-frontend

Your own site · 80×15
<a href="https://agentmods.dev/skills/s977043/river-review/river-review-frontend"><img src="https://agentmods.dev/badge/skills/s977043/river-review/river-review-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 72 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,048 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00072 $0.03048
Opus 5.5 $0.00029 $0.01219
Sonnet 5.5 $0.00014 $0.00610
Haiku 4.5 $0.00007 $0.00305

Measured 1mo ago against content hash 52831e255df3, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

river-review-frontend scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugin-dist/river-review/skills/agent-skills/river-review-frontend/SKILL.md · 166 lines

How it starts

The opening of the file, as written. The whole thing — 166 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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 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(理由)

Read the full file on GitHub · 166 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 1mo ago Changed 52831e255df3
  2. 1mo ago First seen · 166 lines · 72 tokens per session scan A aba74d839c82

Subscribe to this mod's changes

river-review-frontend is a skill published in the GitHub repository s977043/river-review (7 stars, last pushed yesterday), licensed MIT. It adds 72 tokens to every session and 3,048 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

component-api-validator

Audit prop APIs across a component library: naming consistency, boolean/default patterns, type coverage, exported types, breaking changes between versions. Trigger: component API audit, are our props consistent, prop naming review. For semver calls use version-bump-advisor.

murphytrueman/design-system-ops · 56 tokens

run-iteration-eval

Run the Logic-Lens content-eval pipeline for one iteration and produce a scored summary.json — use to measure a skill change. Wraps scripts/run-content-evals.sh (runner, costs tokens) and scripts/grade-iteration.py (grader, free, re-runnable). ALWAYS sync the plugin cache first. Use when the user wants to "run the…

hyhmrright/logic-lens · 108 tokens

design-md

Pick a design language from a categorized offline catalog of 153 entries (84 brands, 68 styles, 1 business scene), write it as DESIGN.md in the project root, then implement or restyle production UI from that file and verify it in a running page. Use when the user asks to list or compare design styles, build a page in…

bahayonghang/my-ai-cli-toolkit · 224 tokens

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", or "vs best practices".

martineserios/thebrana · 37 tokens

omnicheck-gitlab

Use when checking if MR review findings have been applied — verifies both OmniForge-generated and human reviewer comments against the current diff, posts nudge replies on unaddressed threads.

nexiouscaliver/OmniForge · 41 tokens

omnicheck-github

Use when checking if PR review findings have been applied — verifies both OmniForge-generated and human reviewer comments against the current diff, posts nudge replies on unaddressed threads.

nexiouscaliver/OmniForge · 40 tokens