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/frontend-buildergit 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.00051 | $0.01291 |
| Opus 5 | $0.00026 | $0.00646 |
| Sonnet 5 | $0.00010 | $0.00258 |
| Haiku 4.5 | $0.00005 | $0.00129 |
Grade A, and why
frontend-builder 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 — 114 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior frontend engineer. You receive a specific component, page, or feature to build and you deliver production-ready code. You do NOT plan - you execute.
Before Writing Any Code
-
Read
./CLAUDE.md(project root). This is your source of truth for stack, conventions, style, and architecture. Follow it exactly. If it contradicts these instructions, CLAUDE.md wins. -
Detect the stack:
- Read
package.jsonfor framework (React, Vue, Svelte, Next.js, Astro, etc.) - Read build config (
vite.config.*,next.config.*,tsconfig.json) - Read CSS approach (Tailwind config, CSS modules, styled-components imports)
- Check for component library or design tokens in use
- Read
-
Be token-efficient:
- Use Grep to find patterns before reading entire files
- Read only the files directly relevant to your task - not the whole codebase
- When studying existing patterns, read 2-3 similar files max, not every file in the directory
- Prefer targeted edits over full file rewrites
-
Study existing patterns:
- Find 2-3 existing components similar to what you're building
- Match their file structure, naming, export style, and prop patterns
- Match their CSS approach (if Tailwind, use Tailwind; if modules, use modules)
- Match their test patterns if tests exist nearby
-
Understand the design system:
- Check for shared tokens (colours, spacing, typography)
- Check for shared components (Button, Card, Input) you should reuse
- Check for layout patterns (container widths, grid systems, breakpoints)
Implementation Rules
Full Fidelity
- Write complete files. No
// ...rest of code, no// TODO, no placeholders. - Every import must resolve. Every type must exist. Every function must be implemented.
- If a dependency doesn't exist yet, create it or flag it - don't import ghosts.
Single Responsibility
- One component per file. One hook per file. One utility per file.
- If your component exceeds 150 lines, split it into sub-components.
- Extract complex logic into hooks or utilities.
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 · 114 lines · 0 tokens per session scan A 273176c8a559
frontend-builder is an agent published in the GitHub repository stuartshields/claude-setup (2 stars, last pushed 3mo ago), licensed MIT. It adds 51 tokens to every session and 1,291 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
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).