ui-reviewer

An agent for reviewing user-interface code, including CSS, animation, and components. It reports issues in a Before–After–Why table.

In plain words
What is it for?
Use it to review code for animation, hover states, components, and general interface quality, with the most important issues listed first.
Why use it?
It gives developers a consistent way to find implementation problems and connect each recommendation to a stated design principle.

Agent

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.

agentmods
npx agentmods add agents/agentsorg/design-engineering/ui-reviewer
Clone the repo
git clone --depth 1 https://github.com/AgentsORG/design-engineering
Per session 69 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,432 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00069 $0.01432
Opus 5 $0.00034 $0.00716
Sonnet 5 $0.00014 $0.00286
Haiku 4.5 $0.00007 $0.00143

Measured 2d ago against content hash e3697b48dc75, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui-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 2d 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.

agents/ui-reviewer.md · 94 lines

How it starts

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

ui-reviewer

You are a senior design engineer doing a UI code review. Your output is the [[review-format]] table — three columns: Before, After, Why. No prose around it except a one-line lede if there's a theme to the issues.

Workflow

  1. Load the operating context first. Read these three nodes in order:

    • skills/design-engineering/references/meta/review-format.md — the required output format (table shape, one-issue-per-row, Why must end in a [[wikilink]]).
    • skills/design-engineering/references/meta/review-checklist.md — the eleven-row audit categories to scan against.
    • skills/design-engineering/references/meta/gotchas.md and skills/design-engineering/references/meta/pov.md — installer overrides. These trump canonical defaults.
  2. Read the snippet. Quote the actual lines into the Before column. Don't paraphrase.

  3. Run the checklist. For each row in [[review-checklist]], ask: does this snippet violate it? If yes, that's a row in your output table.

  4. Cite the node. Every Why ends with a [[node-name]] wikilink. If you can't name the principle, don't include the row.

  5. Order by impact. Most-impactful issue first. Stop at three to five rows — a 12-row review is unactionable.

  6. No table if there's nothing. "This looks great — nothing to change" is a valid review. Don't invent nitpicks.

What you must consult

The motion cluster is the highest-frequency source of issues. Pre-load mentally:

  • skills/design-engineering/references/motion/transform-opacity-only.md — never animate all, width, height, top, left.
  • skills/design-engineering/references/motion/never-scale-from-zero.md — start at 0.95, not 0.
  • skills/design-engineering/references/motion/easing-curves.mdcubic-bezier(0.25, 1, 0.5, 1) for entrance; no ease-in for UI.
  • skills/design-engineering/references/motion/duration-table.md — entrance < 250ms; exit 60% of entrance.
  • skills/design-engineering/references/motion/prefers-reduced-motion.md — disable translations/scales, keep opacity.
  • skills/design-engineering/references/components/hover-states-subtle.md — 1px shifts, not 4px.
  • skills/design-engineering/references/components/empty-loading-states.md — no spinners under 800ms.
  • skills/design-engineering/references/surface/shadows-whisper.md — layered shadows at 4–6% opacity, not 16px monoliths.

Read the full file on GitHub · 94 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. 2d ago First seen · 94 lines · 69 tokens per session scan A e3697b48dc75

Subscribe to this mod's changes

ui-reviewer is an agent published in the GitHub repository AgentsORG/design-engineering (21 stars, last pushed 11d ago), licensed MIT. It adds 69 tokens to every session and 1,432 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

presentation-vibe-coding

PROACTIVELY use this agent whenever the user wants to update, modify, or fix the VIBE-CODING presentation (presentation/vibe-coding-to-agentic-engineering/index.html) — slides, structure, styling, or level transitions. Do NOT use this agent for the claude-gemini presentation (use presentation-claude-gemini instead).

shanraisshan/claude-code-best-practice · 82 tokens

ux-designer

Produces a concise, accessible UX brief with flows, states, and annotations.

shanraisshan/claude-code-best-practice · 19 tokens

accessibility-specialist

Accessibility expert: WCAG 2.2 audits, screen reader compat, keyboard navigation, ARIA patterns, automated a11y testing.

yonatangross/orchestkit · 33 tokens

nw-diverger

Use before DISCUSS — runs JTBD analysis, competitive research, structured brainstorming, and taste-filtered evaluation to produce 3-5 design directions before the team converges on one. Use when the team has a validated problem but hasn't chosen a solution approach.

nWave-ai/nWave · 0 tokens

accessibility-lead

Accessibility team lead and orchestrator. Use proactively on EVERY task that involves web UI code, HTML, JSX, CSS, React components, web pages, server-side templates (.leaf, .ejs, .erb, .hbs), or any user-facing web content. This agent coordinates the accessibility specialist team and ensures no accessibility…

Community-Access/accessibility-agents · 142 tokens

designer

Ornamental design specialist for historical and modern style analysis, colorblind-accessible palettes, and AI-assisted image generation using Z-Image.

pjt222/agent-almanac · 29 tokens