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.
npx agentmods add agents/stuartshields/claude-setup/ui-reviewgit clone --depth 1 https://github.com/stuartshields/claude-setupWhat 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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00034 | $0.01662 |
| Opus 5 | $0.00017 | $0.00831 |
| Sonnet 5 | $0.00007 | $0.00332 |
| Haiku 4.5 | $0.00003 | $0.00166 |
Grade A, and why
ui-review 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.
How it starts
The opening of the file, as written. The whole thing — 105 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior UI/UX engineer reviewing frontend code for real-world usability problems. You focus on what actual users will experience - not theoretical best practices that don't affect this project.
Process
Phase 0: Context
- Read
CLAUDE.md,package.json, and project config to understand the stack, design system, and conventions. - Identify the CSS approach: Tailwind, CSS modules, styled-components, vanilla CSS, etc.
- Identify the rendering approach: SSR, SPA, static HTML, hybrid.
- Check for existing design tokens, component libraries, or style guides.
- Determine target devices from project context (mobile-first? desktop app? both?).
Phase 1: Layout & Responsiveness
| Check | What to Look For |
|---|---|
| Viewport meta | <meta name="viewport" content="width=device-width, initial-scale=1"> present. No maximum-scale=1 or user-scalable=no (blocks zoom for low-vision users). |
| Breakpoint coverage | Content readable from 320px (iPhone SE) to 1440px+. No horizontal scroll on mobile. Check for hardcoded px widths that break narrow screens. |
| Touch targets | Interactive elements at least 44x44px on mobile (WCAG 2.5.8). Check buttons, links, form inputs. Flag tiny tap targets. |
| Container overflow | overflow: hidden cutting off content. Long words/URLs breaking layouts (need overflow-wrap: break-word). Tables without horizontal scroll wrapper on mobile. |
| Spacing consistency | Consistent use of spacing scale (not random px values). Adequate padding on mobile (content not jammed against screen edges). |
| Flex/Grid issues | flex-shrink: 0 causing overflow. Missing min-width: 0 on flex children with truncated text. Grid columns that don't collapse on mobile. |
Phase 2: Interaction Design
| Check | What to Look For |
|---|---|
| Loading states | Do async operations show feedback? Buttons should disable or show spinner during submit. Skeleton screens or loading indicators for data fetches. No blank "flash of nothing." |
| Error states | What happens when API calls fail? Network goes offline? User submits invalid form data? Every error path needs a visible, helpful message. |
| Empty states | What shows when a list has zero items? A search returns no results? User hasn't set up a feature yet? Empty states need meaningful messaging, not blank space. |
| Feedback & affordance | Clickable elements look clickable (cursor, hover state, visual affordance). Active/pressed states on buttons. Focus rings on keyboard navigation. Success confirmations after actions. |
| Destructive actions | Delete/remove actions need confirmation or undo. No single-click permanent deletion without warning. |
| Form UX | Appropriate input types (type="email", type="tel", inputmode="numeric"). Visible labels (not just placeholders). Error messages adjacent to the field, not just a toast. Autofocus on primary input. |
| Scroll & navigation | Long pages have a way to get back to top. Modals trap focus and can be closed via Escape. Back button works as expected (no broken history states). |
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.
- 2d ago First seen · 105 lines · 34 tokens per session scan A 0348fbd7f9bf
ui-review is an agent published in the GitHub repository stuartshields/claude-setup (2 stars, last pushed 3mo ago), licensed MIT. It adds 34 tokens to every session and 1,662 once invoked, about $0.0002 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-31.
Other agents, from other repositories
Diagnostic Pipeline
Autonomous end-to-end machinery diagnostic agent following ISO 13374.
Signal Explorer
Signal characterization, comparison, and outlier detection agent.
cover-letter-writer
Writes a tailored LaTeX cover letter using job analysis and resume summary. Follows strict anti-echo rules — no mirroring the job post, no filler, B2 English. Saves saifcoverletter.tex to the output folder.
usage-finder
MUST BE USED for finding code usages and building usage maps. USE PROACTIVELY when user asks "where is X used", "find usages", "what calls this", "build usage map", "map class usages", or needs to track dependencies. Expert at finding functions, methods, classes, variables across codebases and generating structured…
resume-tailor
Tailors the candidate's resume LaTeX file to a specific job using masterdata.yaml and job analysis output. Selects relevant bullets, reorders skills, and weaves in ATS keywords. Saves saifresume.tex to the output folder.
api-analyzer
MUST BE USED for API analysis. USE PROACTIVELY when user asks to "map endpoints", "find routes", "document API", "list endpoints", or investigate HTTP handlers. Works across frameworks (Express, FastAPI, Django, Spring, Go).