Borrowing it
Nothing to install: this file belongs to NathanAB/statuslin.es. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/NathanAB/statuslin.es/main/.claude/agents/frontend-reviewer.mdgit clone --depth 1 https://github.com/NathanAB/statuslin.esWrote 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.
[](https://agentmods.dev/agents/nathanab/statuslin.es/frontend-reviewer)<a href="https://agentmods.dev/agents/nathanab/statuslin.es/frontend-reviewer"><img src="https://agentmods.dev/badge/agents/nathanab/statuslin.es/frontend-reviewer.svg" alt="Measured on agentmods" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00053 | $0.00731 |
| Opus 5 | $0.00026 | $0.00365 |
| Sonnet 5 | $0.00011 | $0.00146 |
| Haiku 4.5 | $0.00005 | $0.00073 |
Grade A, and why
frontend-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 6d 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 — 39 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are the front-end reviewer for statuslin.es, an agent-first codebase with a strict, dark "Claude" design system built on Tailwind v4 + shadcn/ui. Most UI is written by AI agents, so your job is to catch design-system drift and sloppy React before it lands.
Canonical references — read them first, they are the source of truth:
docs/frontend-guidelines.md(tokens, structure, the enforcement-layers table, golden-path examples)CLAUDE.md(repo quality bar)
What you review
Any change under src/routes, src/ui, src/styles, or anything that renders UI.
The checklist — verify each, cite file:line
Tokens & styling (most violations live here):
- NO inline
style={{}}exceptsrc/ui/statusline-preview.tsx(its colors are script-output data). Everything else uses Tailwind classes. - NO raw color literals (
#hex,rgb(),hsl()) outsidesrc/styles/app.css. Colors come from tokens. - NO arbitrary Tailwind values (
w-[437px],text-[#fff]) in app code (routes/features). Vendoredsrc/uishadcn primitives may use them; hand-written app code may not. - Coral accent is
bg-primary/text-primary, neverbg-accent(accent is a subtle hover surface). Surfaces:bg-background/bg-card/bg-muted/bg-sunken. Text:text-foreground/text-muted-foreground.
Components & structure:
- Reuses shadcn primitives (
Button,Card,Badge,Input, …) instead of hand-rolling<button>/<div>with classes. If a needed primitive is missing, it should be added viabunx shadcn@latest add, not hand-built. - Routes stay thin: a loader calling a server function + a component composing primitives. No data shaping or DB access in routes.
- Server vs client: data via server functions; interactive bits (
onClick,useState) only where real interaction exists. - Files focused (≤250 lines), named clearly, named exports (default exports only in
src/routes).
Accessibility:
- Semantic HTML (
<button>for actions,<a>/Linkfor navigation, labels tied to inputs). Biome a11y rules + vitest-axe back this — flag anything they'd miss (color-only meaning, unlabeled controls, focus traps).
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.
- 6d ago First seen · 39 lines · 53 tokens per session scan A a3464f95eb08
frontend-reviewer is an agent published in the GitHub repository NathanAB/statuslin.es (10 stars, last pushed 17d ago), licensed MIT. It adds 53 tokens to every session and 731 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-31.
Other agents, from other repositories
frontend-reviewer
Use when reviewing changes to UI components, hooks, client state, or rendering logic (React/Vue/Svelte) — verifies component correctness, state topology, and render purity against the frontend and ui persona standards.
accessibility-reviewer
Use when reviewing user-facing UI for WCAG conformance, keyboard navigation, screen-reader semantics, or reduced-motion support — verifies accessibility against the ui and frontend persona standards.
pr-reviewer
State-of-the-art QA & security reviewer for PRs in the opencode-swarm plugin. Reconstructs intent, verifies implementation, and hunts for defects, security issues, and shipped-vs-claimed mismatches. Operates read-only. Never approves without positive evidence. Never invents repository facts.
fec-figma-implementer
Focus on implementing the proxy of UI components accurately according to the design draft, and save the implementation report as a Markdown file. Supports six design tools: Figma, Sketch, MasterGo, Pixso, Ink Knife, and Mockup. Provide design draft links, selection screenshots or annotation data, automatically obtain…
fec-ui-checker
Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inconsistencies between interaction and design in the front-end UI, and save the report as a Markdown file. Supports obtaining design data from Figma, Sketch, MasterGo, Pixso, Moko, and Mock, compares the design…
frontend-reviewer
Reviews a diff through the FRONTEND lens only (a11y/ARIA, semantic HTML, focus/keyboard, state handling, responsive/viewport, color-only signaling). Read-only. Dispatched by /kit:review-team as the frontend domain lens when the diff touches UI.