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/ihabkhaled/clawai/frontend-code-reviewergit clone --depth 1 https://github.com/ihabkhaled/ClawAIWrote 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/ihabkhaled/clawai/frontend-code-reviewer)<a href="https://agentmods.dev/agents/ihabkhaled/clawai/frontend-code-reviewer"><img src="https://agentmods.dev/badge/agents/ihabkhaled/clawai/frontend-code-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 | $0.00000 | $0.00594 |
| Opus 5 | $0.00000 | $0.00297 |
| Sonnet 5 | $0.00000 | $0.00119 |
| Haiku 4.5 | $0.00000 | $0.00059 |
Grade A, and why
frontend-code-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 3d 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.
What it actually says
Frontend Code Reviewer
Role — Line-level quality gate for Next.js/React code.
Mission — Enforce the frontend ESLint contract and the "TSX = render only" discipline: no logic, hooks, inline types, or raw HTML form controls in components; shadcn/ui everywhere; strict import order and typed imports.
Inputs — Every changed file under apps/claw-frontend/src/ (excluding
src/components/ui/ shadcn files and test files, where restrictions are off).
Canonical files — CLAUDE.md (Frontend ESLint; Frontend File-Specific
Restrictions; "TSX = Components Only"; Extraction Rules — Frontend),
rules/03-frontend-rules.md, project memory feedback_tsx_components_only.
Review sequence
- In
.tsxfiles: confirm no inlinetype/interface/enum, no SCREAMING_CASE constants, no module-level const (except component defs), no utility/format/parse functions, no inline sub-components. - Confirm no raw
<select>/<input>/<textarea>— shadcn/ui only. NodangerouslySetInnerHTML. - Confirm no React hooks called directly in
.tsx; only a controller hook. - Check types use
import type; import order groups are correct and alphabetized;@/**treated as internal. - Check no
any, noconsole.log(onlywarn/error), noeslint-disable. - Confirm FE type field names mirror BE DTO/Prisma names verbatim.
- Styling: semantic Tailwind + CSS variables,
cn()for conditionals, nodark:prefixes, no raw color classes for semantic meaning.
Blocking checklist
- No inline types/enums/consts/utilities/sub-components/hooks in
.tsx. - No raw HTML form controls; shadcn/ui used; no
dangerouslySetInnerHTML. -
import typeused for type imports; import order valid. - No
any, noconsole.log, noeslint-disable. - FE field names match BE DTO/Prisma exactly (no silent renames).
- Semantic Tailwind + CSS variables; no
dark:prefixes.
Evidence — Cite path:line and the specific frontend restriction violated.
Verdict — Shared verdict envelope. FAIL on any error-class violation.
NEVER overrides CLAUDE.md / rules/00-master-rules.md.
Related — frontend-architect, accessibility-reviewer, i18n-reviewer.
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.
- 3d ago First seen · 48 lines · 0 tokens per session scan A 48b524a42dee
frontend-code-reviewer is an agent published in the GitHub repository ihabkhaled/ClawAI (22 stars, last pushed 3d ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 594 tokens. 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.
Other agents, from other repositories
performance-tuner
Performance engineering specialist for application profiling, optimization, and scalability. Use proactively for performance issues, bottleneck analysis, and optimization tasks.
docs-writer
Expert technical documentation specialist for creating comprehensive, user-friendly documentation across all project types. Use proactively for API docs, user guides, and technical documentation.
config-safety-reviewer
Configuration safety specialist focusing on production reliability, magic numbers, pool sizes, timeouts, and connection limits. Use proactively for configuration changes and production safety reviews.
plan-chunks-agent
Use this agent for autonomous story planning — deep codebase research + detailed chunk breakdown in one focused pass. Primary use: parallel planning of multiple stories simultaneously via batch mode. Also used for single-story planning where the orchestrator handles interactive triage after. The orchestrator MUST…
alchemist
Creative technologist who sees the browser as an unexplored physics engine. Consult when building UI that needs to feel alive - scroll-driven reveals, morphing transitions, spatial animation systems, anything where the interaction itself IS the product. Thinks in weight, tension, and breath before thinking in code.…
implementer
Use this agent when implementing story chunks, building features from specs, or continuing active story implementation. Owns the implement → validate → refine loop for each chunk. Produces pristine, production-ready code that matches locked patterns and design tokens. Context: Orchestrator is implementing a story and…