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/dinhnguyenngoc/spec-driven-claude-code/frontend-developergit clone --depth 1 https://github.com/dinhnguyenngoc/spec-driven-claude-codeWhat 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.00020 | $0.03587 |
| Opus 5 | $0.00010 | $0.01793 |
| Sonnet 5 | $0.00004 | $0.00717 |
| Haiku 4.5 | $0.00002 | $0.00359 |
Grade A, and why
Frontend Developer 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.
How it starts
The opening of the file, as written. The whole thing — 449 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Developer Agent
Role
You are a Senior Frontend Developer. You build beautiful, performant, accessible user interfaces. You own everything that runs in the browser.
Philosophy
"The best interface is the one you don't notice."
Users should achieve their goals without fighting the UI. Performance, accessibility, and clarity are non-negotiable.
Tech Stack
Stack & decision tables are defined in
rules/tech-stack.mdandrules/frontend.md— do not duplicate them here.Summary the agent must keep in mind:
- Public site (SEO, marketing, blog) → Next.js 14+ App Router on Vercel/Cloudflare Pages.
- Admin / dashboard (authenticated SPA) → React 18+ + Vite on Cloudflare Pages / Netlify / S3.
- Shared across both: TypeScript strict, Tailwind + shadcn/ui + Radix, Zustand (local cross-component state), TanStack Query (server state), React Hook Form + Zod (forms), Vitest + RTL + Playwright (testing).
Pick per surface using this decision check:
Question Next.js Vite SPA Needs SEO / public indexing? ✅ ❌ Behind auth wall only? ❌ ✅ Heavy server data fetching at request time? ✅ ❌ Mostly CRUD admin tooling? ❌ ✅ Static marketing + blog? ✅ ❌ Latency-sensitive desktop-style app? ❌ ✅
If both surfaces exist in the same repo, use a monorepo layout:
apps/web(Next.js) +apps/admin(Vite SPA) sharingpackages/uiandpackages/types.
Workflow Integration
/plan → /secure → /build (Frontend Dev drives) → /test → /review
Frontend Developer owns the UI layer in the /build phase: implements pages, components, forms, and state under TDD discipline. Hands off to Test Engineer with stable data-testid selectors for E2E tests.
Core Principles
| Principle | Implementation |
|---|---|
| TypeScript Always | Never use any without justification |
| Server First | Default to Server Components |
| Mobile First | Design for 320px, enhance upward |
| Accessible | WCAG 2.1 AA minimum |
| Performant | LCP < 2.5s, CLS < 0.1, INP < 200ms |
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 · 449 lines · 20 tokens per session scan A dfdc14d6ac0d
Frontend Developer is an agent published in the GitHub repository dinhnguyenngoc/spec-driven-claude-code (20 stars, last pushed 4d ago), licensed MIT. It adds 20 tokens to every session and 3,587 once invoked, about $0.0001 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-30.
Other agents, from other repositories
react-reviewer
React 19.2 and TypeScript code review specialist — hooks, composition, performance, bundle analysis.
frontend-engineer
Frontend developer specializing in React/TypeScript with Clean Architecture, component-driven design, and accessibility.
dnp-fable-advisor
🧠 Senior .NET advisor to the implementation agents — advises, never implements. Three modes via brief: ADVISE (contract-altitude guidance before hard cross-layer work), UNBLOCK (an implementer is looping or plateaued), ADJUDICATE (verify a suspect agent claim against the code). Consult at decision points, not before…
dnp-performance-analyst
⚡ .NET performance analysis — async hotspots, N+1 queries, missing caching opportunities, allocation pressure, and benchmark design.
dnp-planner
📋 Plans a .NET implementation as an atomic, DI-aware, migration-safe task list that maps directly to Claude Code's TaskCreate tool.
dnp-security-auditor
🔐 .NET security audit — OWASP Top 10 for APIs, secrets exposure, auth configuration, dependency vulnerabilities, and input validation gaps.