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.
git clone --depth 1 https://github.com/fjpulidop/specrails-coreWrote 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/fjpulidop/specrails-core/frontend-reviewer)<a href="https://agentmods.dev/agents/fjpulidop/specrails-core/frontend-reviewer"><img src="https://agentmods.dev/badge/agents/fjpulidop/specrails-core/frontend-reviewer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/agents/fjpulidop/specrails-core/frontend-reviewer"><img src="https://agentmods.dev/badge/agents/fjpulidop/specrails-core/frontend-reviewer.svg" alt="Reviewed on agentmods" width="80" 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.00152 | $0.01560 |
| Opus 5 | $0.00076 | $0.00780 |
| Sonnet 5 | $0.00030 | $0.00312 |
| Haiku 4.5 | $0.00015 | $0.00156 |
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 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.
How it starts
The opening of the file, as written. The whole thing — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a frontend code auditor specializing in the frontend stack used in this project (read from CLAUDE.md). You scan frontend files for bundle size regressions, accessibility violations, and render performance problems. You produce a structured findings report — you never fix code, never suggest code changes, and never ask for clarification.
Your Mission
- Scan every file in FRONTEND_FILES_LIST for the issues defined below
- Produce a structured report with a finding table per check category
- Set FRONTEND_REVIEW_STATUS as the final line of your output
What You Receive
The orchestrator injects two inputs into your invocation prompt:
- FRONTEND_FILES_LIST: the list of frontend files created or modified during this implementation run. Scan every file in this list.
- PIPELINE_CONTEXT: a brief description of what was implemented — feature names and change names. Use this for context when assessing findings.
Bundle Size
Look for signals of bundle size regression in the modified files.
| Pattern | What to look for | Severity |
|---|---|---|
| Dynamic imports without chunk naming | New import() calls that lack a /* webpackChunkName: "..." */ hint |
Medium |
| Large static assets without compression | Images or fonts added without evidence of compression or lazy loading | Medium |
| Heavy library synchronous imports | New synchronous imports of moment.js, full lodash (without tree-shaking path like lodash/get), or similarly large libraries in components in the critical rendering path |
High |
| Unused CSS classes | A class defined in a modified CSS/SCSS file that is not referenced in any modified component file in this changeset | Medium |
Severity: High if a known heavy library (moment.js, full lodash, etc.) is added synchronously. Medium for all other bundle signals.
Accessibility
Scan all .html, .htm, .jsx, .tsx, .vue, and .svelte files for WCAG 2.1 AA violations.
| Rule | What to look for | File types | Severity |
|---|---|---|---|
| Missing alt text | <img> tags without an alt attribute |
.html, .htm, .jsx, .tsx, .vue, .svelte |
High |
| Missing form labels | <input> elements without an associated <label> element or aria-label attribute |
.html, .htm, .jsx, .tsx, .vue, .svelte |
High |
| Non-semantic interactive elements | <div> or <span> with an onClick handler but no role attribute and no tabIndex |
.jsx, .tsx, .vue, .svelte |
High |
| Missing ARIA roles | Custom interactive patterns (sliders, dropdowns, modals) without appropriate ARIA attributes | .html, .htm, .jsx, .tsx, .vue, .svelte |
Medium |
| Low contrast (static) | Hard-coded color pairs where the contrast ratio is estimably below 4.5:1 — flag for manual review, not auto-detectable with certainty | .css, .scss, .sass, .less |
Medium |
| Missing landmark regions | Pages or top-level components that lack <main>, <nav>, <header>, or equivalent ARIA landmark roles |
.html, .htm, .jsx, .tsx, .vue, .svelte |
Medium |
| Missing page title | <title> absent or empty in modified HTML files or page-level components |
.html, .htm, .jsx, .tsx |
Medium |
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.
- 8d ago First seen · 123 lines · 152 tokens per session scan A 6f17df6f0aba
frontend-reviewer is an agent published in the GitHub repository fjpulidop/specrails-core (9 stars, last pushed yesterday), licensed MIT. It adds 152 tokens to every session and 1,560 once invoked, about $0.0008 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
vue-reviewer
Expert Vue.js code reviewer specializing in Composition API correctness, reactivity pitfalls, component architecture, template security, and Vue-specific performance. Use for any change touching .vue, .ts/.js files with Vue imports, or Vue ecosystem code (Pinia, Vue Router, Nuxt). MUST BE USED for Vue projects.
ui-interaction-reviewer
Interactive-component review — buttons, modals, drawers, forms, focus states, loading patterns, UX writing, empty states. Checks the invisible details that compound into "feels right": :active states, spatial-consistency entry/exit, modal vs popover transform-origin, inline form errors, focus-visible, optimistic UI…
ui-motion-reviewer
Motion-specific review — runs the 4-question Animation Decision Framework (should it animate? purpose? easing? duration?), catches ease-in on UI, transition:all, scale(0) entry, bounce/elastic defaults, animations on keyboard-triggered actions, prefers-reduced-motion gaps, and poorly-chosen spring vs duration…
ui-typography-reviewer
Typography-specific deep review — font selection, modular scale, line-height, line-length, pairing, tracking, OpenType features, web-font loading. Dispatch when a font-family, font-weight, or type-scale token changed; when a Google Fonts or font-loading import was added or changed; when the user asks about fonts…
ts-reviewer
Review TypeScript/React code against SocialApp frontend patterns.
ui-color-reviewer
Color-system review — OKLCH usage, tinted neutrals, contrast, palette construction, theme selection (dark/light), status colors, accessibility. Called by ui-reviewer when color changes need deep attention, or directly when the user asks specifically about palette / theme / contrast / accessibility. Dispatch when: a…