Agent skill

River Review Frontend

by hashgraph-online in hashgraph-online/awesome-codex-plugins

フロントエンド観点のレビューエージェント. An agent skill from hashgraph-online/awesome-codex-plugins.

MITAuto-check passedFrontend & Design

Install River Review Frontend

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill river-review-frontend -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins river-review-frontend --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/s977043/river-review/skills/agent-skills/river-review-frontend .claude/skills/river-review-frontend && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
river-review-frontend
GitHub stars
1.3k
Token cost
~2.2k tokens
SKILL.md length
316 words
Files
2 (incl. references)
Skills in repo
716
Repo updated
First seen
Licence
MIT

At a glance

フロントエンド観点のレビューエージェント. An agent skill from hashgraph-online/awesome-codex-plugins.

  • Tasks that involve CSS and styling
  • SKILL.md covers When to Use / いつ使うか, Routing / ルーティング, Execution Flow / 実行フロー and Checklist / チェックリスト, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

River Review Frontend is an agent skill from hashgraph-online/awesome-codex-plugins. フロントエンド観点のレビューエージェント。 アクセシビリティ、デザインシステム準拠、Tailwind クラス衛生、UI 状態設計、 Next.js / React Router のフレームワーク境界を個別スキルへルーティングする。

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/ROUTING.md`).

It sits in Frontend & Design, covering CSS and styling. It works with Next.js, React Router and Tailwind CSS. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is MIT.

When your agent uses it

  • Tasks that involve CSS and styling

Example prompts

  • “/river-review-frontend”

What it can do on your machine

Read from SKILL.md and the folder at commit 3e1456a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

River Review Frontend loads about 2.2k tokens when it runs, and up to ~4k if it reads all its reference files. Until then it costs about 34 tokens; SKILL.md has 316 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 3e1456a, republished under its MIT licence (© hashgraph-online). 316 words, ~2,173 tokens.

Download SKILL.mdSave it as .claude/skills/river-review-frontend/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
river-review-frontend
description
フロントエンド観点のレビューエージェント。 アクセシビリティ、デザインシステム準拠、Tailwind クラス衛生、UI 状態設計、 Next.js / React Router のフレームワーク境界を個別スキルへルーティングする。
id
river-review-frontend
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}…
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-labela11y-accessible-nameアクセシビリティ基本
キーボード操作, フォーカス管理, ARIA rolemodern-web-a11y-interactiveインタラクティブ UI アクセシビリティ
セマンティック, div クリック, ネイティブ要素modern-web-semanticセマンティック HTML・プラットフォームネイティブ
ブラウザ互換, Baseline, feature detectionmodern-web-browser-compatブラウザ互換性・Baseline
デザインシステム, コンポーネント再利用, Buttondesign-system-component-reuseデザインシステム コンポーネント再利用
デザイントークン, 色の直書き, 余白, 角丸design-token-enforcementデザイントークン
DESIGN.md, デザイン定義準拠, スケール逸脱design-source-conformanceデザイン Source-of-Truth 準拠
Tailwind, 任意値, クラス衛生tailwind-class-hygieneTailwind クラス衛生
ローディング, 空状態, スピナー, 状態欠落loading-stateローディング状態遷移
コンポーネントバリアント, hover, focus, disabledcomponent-variants-statesコンポーネント状態の文書化
Next.js, App Router, use clientnextjs-app-router-boundaryNext.js App Router 境界
React Router, loader, useEffect データ取得react-router-loader-boundaryReact Router loader 境界
React Router, action, ErrorBoundaryreact-router-action-contractReact Router action 契約
Core Web Vitals, LCP, INP, CLSmodern-web-performance参照のみ。実行は river-review-performance(理由)
デフォルト動作
  • キーワード指定なし → 以下のヒューリスティクスで判定:
    • React/Vue/Svelte コンポーネントファイル → a11y-accessible-name + modern-web-a11y-interactive
    • app/ ディレクトリ(Next.js App Router)→ nextjs-app-router-boundary
    • routes/ ディレクトリ(React Router)→ react-router-loader-boundary + react-router-action-contract
    • CSS/Tailwind ファイル → design-token-enforcement + tailwind-class-hygiene
modern-web-performance の帰属について

14 候補スキルのうち modern-web-performance(Core Web Vitals / LCP / INP / CLS)は UI 起因の懸念だが、ドメイン一貫性を優先し実行は owner skill river-review-performance に据え置く。詳細判断が必要な場合だけ skill ID で owner を解決し、その owner-local routing contract に従う。owner を解決できない場合は performance の詳細判断を推測で再構築しない。本表には到達性のための参照行として掲載するのみで、frontend 側に重複するアクティブなキーワードルートは追加しない(同一キーワードが2ルーターで競合発火するリスクを避けるため)。

Execution Flow / 実行フロー

text
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 品質チェックの補完

Checklist / チェックリスト

フロントエンドレビューでは以下を確認する:

アクセシビリティ
  • alt / aria-label / label 関連付けが欠けていないか
  • キーボード操作・フォーカス管理・ライブリージョンが機能するか
  • セマンティックでない要素(div onClick 等)を native 要素に置き換えられないか
デザインシステム / トークン
  • 既存コンポーネント(Button / Input / Modal / Card 等)の再実装がないか
  • 色・余白・フォントサイズ・角丸・シャドウがデザイントークン / DESIGN.md のスケールに準拠しているか
  • Tailwind の任意値(arbitrary value)がテーマスケールを迂回していないか
UI 状態設計
  • loading / error / empty state の表示が欠けていないか
  • コンポーネントの variants・インタラクティブ状態(hover / focus / disabled)が定義・文書化されているか
フレームワーク境界
  • Next.js App Router のサーバー/クライアントコンポーネント境界(use client)が適切か
  • React Router の loader/action 契約(データ取得は loader、useEffect フェッチの誤用、action のエラー表現と ErrorBoundary)を満たすか

Output Format / 出力形式

text
<file>:<line>: <message>
  • Finding: 何が問題か(1文)
  • Impact: 何が困るか(短く)
  • Fix: 次の一手(最小の修正案)

他スキルとの関係

スキル関係棲み分け
river-review-code補完frontend は「UI 固有の懸念」、code は「一般コード品質」。UI 系ルートは frontend に一元化済み(二重発火なし)
river-review-performance補完frontend は「UI 表現」、performance は「実行効率」。modern-web-performance は performance に据置
river-review-architecture補完frontend は「コンポーネント単位」、architecture は「マクロ設計」

References

  • ROUTING.md: 詳細なルーティングルール
  • UX-SAFEGUARD(report-only): 破壊的操作の確認・取り消し / エラー回復支援が論点のときだけ owner skill river-review-code を skill ID で解決し、その owner-local UX-SAFEGUARD.md を読む(#1460)。owner を解決できない場合はこの補助観点を推測で再構築せずスキップする。loading-state / component-variants-states / react-router-action-contract の委譲判断も owner 側を正本とする

© hashgraph-online, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/s977043/river-review/skills/agent-skills/river-review-frontend of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/ROUTING.md

Open the folder on GitHubat commit 3e1456a

Compare with similar skills

River Review Frontend next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

River Review Frontend compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
River Review Frontend this skillhashgraph-online/awesome-codex-plugins1.3k—~2.2kAutomated safety check: PassMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Opensource UIbidyut10/opensourceui720—~1.1kAutomated safety check: PassMIT
UI UX Pro Maxsundial-org/awesome-openclaw-skills6632 repos~657Automated safety check: PassNone
Bmm Iconify IconsY80/bmm344—~810Automated safety check: PassMIT

Similar skills

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed
  • Opensource UI

    bidyut10/opensourceui

    Use Opensource UI patterns and copy-paste React/Next.js components from opensourceui.in.

    720 GitHub stars~1.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    sundial-org/awesome-openclaw-skills

    UI/UX design intelligence and implementation guidance for building polished interfaces.

    663 GitHub starsUsed in 2 repos~657 tokens
    Frontend & DesignAuto-check passed
  • Guide for updating Iconify icons and IconNames conventions in BMM.

    344 GitHub stars~810 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    shobcoder/shob

    UI/UX design intelligence expert for web and mobile applications.

    576 GitHub stars~3.7k tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 715 skills in this repo
  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.3k GitHub stars~922 tokensUpdated today
    Auto-check passed
  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.3k GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.3k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.3k GitHub stars~2.5k tokensUpdated today
    Auto-check passed
  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.3k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.3k GitHub stars~618 tokensUpdated today
    Auto-check passed

Questions about River Review Frontend

What does River Review Frontend do?

フロントエンド観点のレビューエージェント. An agent skill from hashgraph-online/awesome-codex-plugins. River Review Frontend is an agent skill from hashgraph-online/awesome-codex-plugins.

When should I use River Review Frontend?

River Review Frontend fits situations like: tasks that involve CSS and styling.

How do I install River Review Frontend in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill river-review-frontend -a claude-code`. Or copy the skill folder (plugins/s977043/river-review/skills/agent-skills/river-review-frontend in hashgraph-online/awesome-codex-plugins) into .claude/skills/river-review-frontend in your project. Claude Code loads it when a task matches its description.

How do I install River Review Frontend in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill river-review-frontend -a codex`. Or copy the skill folder (plugins/s977043/river-review/skills/agent-skills/river-review-frontend in hashgraph-online/awesome-codex-plugins) into .agents/skills/river-review-frontend in your project. Codex loads it when a task matches its description.

Can I use River Review Frontend in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill river-review-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/river-review-frontend, .gemini/skills/river-review-frontend, .github/skills/river-review-frontend and .opencode/skills/river-review-frontend in your project.

What does River Review Frontend need to run?

SKILL.md names no scripts, command-line tools or credentials: River Review Frontend is instructions for the agent only.

Does River Review Frontend access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is River Review Frontend safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does River Review Frontend use?

River Review Frontend is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does River Review Frontend use?

About 2.2k tokens (SKILL.md is roughly 8.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.8k tokens, read only when the agent opens those files.

What are the alternatives to River Review Frontend?

Skills that share tags, products or a category with River Review Frontend: Coss (crafter-station/petdex, 4.2k stars), Design Style (Castor6/tactus, 376 stars), Opensource UI (bidyut10/opensourceui, 720 stars) and UI UX Pro Max (sundial-org/awesome-openclaw-skills, 663 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains River Review Frontend?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,267 GitHub stars. The repository holds 716 skills in this directory. The repository was last updated on October 10, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.