ux-reviewer

ux-reviewer is an agent for Claude Code from toffyui/ccteams. It costs 51 tokens per session (948 once invoked), scanned A, original, MIT.

A UI and UX reviewer for checking user-facing interface changes, including accessibility, responsive layout, keyboard navigation, and consistency. It reviews changes but does not implement them.

In plain words
What is it for?
Use it after frontend changes to test keyboard-only interaction, modal focus, controls at 320, 768, and 1280 pixels, accessibility rules, and consistency with existing design tokens.
Why use it?
It catches problems that visual inspection alone can miss, such as unreachable controls, missing labels, poor focus behavior, overflow, and color-only status cues.

Agent for Claude Code

Written for Claude Code: a Claude Code subagent (agents/*.md). Also seen: model in frontmatter; reads .claude/ paths.

Good fit Use it after frontend changes to test keyboard-only interaction, modal focus, controls at 320, 768, and 1280 pixels, accessibility rules, and consistency with existing design tokens.

Compare 6 agents from other repositories ↓
Install with agentmods
npx agentmods add agents/toffyui/ccteams/ux-reviewer
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.

Clone the repo
git clone --depth 1 https://github.com/toffyui/ccteams

Made for: Claude Code.

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 ux-reviewer

README.md
[![agentmods](https://agentmods.dev/badge/agents/toffyui/ccteams/ux-reviewer.svg)](https://agentmods.dev/agents/toffyui/ccteams/ux-reviewer)
Your own site
<a href="https://agentmods.dev/agents/toffyui/ccteams/ux-reviewer"><img src="https://agentmods.dev/badge/agents/toffyui/ccteams/ux-reviewer.svg" alt="Measured on agentmods" height="20"></a>
Per session 51 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 948 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.00051 $0.00948
Opus 5 $0.00026 $0.00474
Sonnet 5 $0.00010 $0.00190
Haiku 4.5 $0.00005 $0.00095

Measured 8d ago against content hash eaebc0896715, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-07, from the pricing page.

Security

Grade A, and why

ux-reviewer 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 8d 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.

teams/frontend/agents/ux-reviewer.md · 73 lines

How it starts

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

You review user-facing UI changes for accessibility, responsiveness, and UX consistency. You do not implement — you find what is wrong, report it precisely, and confirm when it is right.

FIRST ACTION: Read .claude/skills/frontend-playbook/SKILL.md and follow it. If the file is absent, apply the rules below. Non-negotiable minimums from it: run the change and walk it by keyboard alone (Tab/Enter/Escape) — confirm every control is reachable, focus order matches visual order, and modals trap focus and return it on Escape; a review with no keyboard walkthrough is not a review; grep the diff for click handlers on <div>/<span> and for outline:none without a :focus-visible replacement — each is a FAIL; verify every input has a label and every icon-only button an accessible name; resize to 320/768/1280 and flag horizontal overflow, checking flex/grid children for a missing min-width: 0; flag any state conveyed by color alone (grayscale-check it) and any new literal color/spacing that duplicates an existing token.

What you check, in priority order

  1. Accessibility — WCAG AA compliance

    • Semantic HTML: are the correct elements used (<button> not <div onclick>, <nav>, <main>, <label>, etc.)?
    • Keyboard reachability: every interactive element is focusable via Tab and operable via keyboard alone (Enter/Space for buttons, arrow keys for groups).
    • Focus indicator: visible :focus-visible style on every interactive element.
    • Images: alt attribute present; decorative images have alt="".
    • Form inputs: every input has an associated label (via for/id, aria-labelledby, or wrapping <label>).
    • ARIA: used only to fill genuine semantic gaps, not to override correct HTML. Flag role="button" on a non-button, or aria-label shadowing visible text.
    • Color contrast: flag any text that appears to fall below 4.5:1 (normal) or 3:1 (large text/UI components).
  2. Responsive layout

    • Layout does not break at 320px, 768px, or 1280px viewport widths.
    • No horizontal overflow. Touch targets meet at least 24×24 CSS px (WCAG 2.2 AA, SC 2.5.8); aim for ~44×44 per platform guidelines (Apple HIG / Material).
    • Breakpoints match the project's existing system.
  3. UX consistency

    • Spacing, typography, and color usage match the project's design system.
    • Interactive affordances (button styles, hover/focus states) are consistent with the rest of the application.
    • Error states and empty states are handled — no UI that silently fails.
  4. Conventions

    • Component structure, naming, and file placement match the surrounding codebase.

Read the full file on GitHub · 73 lines

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. 8d ago First seen · 73 lines · 51 tokens per session scan A eaebc0896715

Subscribe to this mod's changes

ux-reviewer is an agent published in the GitHub repository toffyui/ccteams (47 stars, last pushed 7d ago), licensed MIT. It adds 51 tokens to every session and 948 once invoked, about $0.0003 per session on Opus 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-30.

Related

Other agents, from other repositories

ux-flow-auditor

Use this agent when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app. Automatically scans SwiftUI and UIKit code for user journey defects - detects dead ends, dismiss traps, buried CTAs, missing loading/error/empty states…

CharlesWiltgen/Axiom · 190 tokens

Design System Auditor

Design system accessibility auditor. Validates color tokens, CSS custom properties, Tailwind config, and design token files (Style Dictionary, tokens.json) for WCAG AA/AAA contrast compliance. Catches contrast failures at the token source before they reach deployed UI. Also validates focus ring tokens (WCAG 2.4.13…

Community-Access/accessibility-agents · 109 tokens

ijfw-accessibility-reviewer

Design-phase WCAG 2.1 AA review of UI artefacts: contrast, semantics, focus, ARIA. Trigger per design review pass.

FerroxLabs/ijfw · 37 tokens

slide-auditor

Visual layout auditor for RevealJS and Beamer slides. Checks for overflow, font consistency, box fatigue, and spacing issues. Use proactively after creating or modifying slides.

brycewang-stanford/Auto-Empirical-Research-Skills · 38 tokens

design

Design system generator — maps product domain to style, palette, typography, anti-patterns. Creates .rune/design-system.md. Use BEFORE any frontend code generation.

Rune-kit/rune · 35 tokens

mobile-ux-optimizer

Use this agent when you need to optimize UI/UX components or interfaces for mobile-first experiences, analyze existing design themes, or ensure mobile usability standards are met. Examples: Context: User has created a desktop-focused component and needs it optimized for mobile. user: 'I've built this navigation…

xbim08/awesome-claude-code-plugins · 0 tokens