Borrowing it
Nothing to install: this file belongs to dinhnguyenngoc/spec-driven-claude-code. 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/dinhnguyenngoc/spec-driven-claude-code/main/.claude/agents/frontend-developer.mdgit clone --depth 1 https://github.com/dinhnguyenngoc/spec-driven-claude-codeWrote 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/dinhnguyenngoc/spec-driven-claude-code/frontend-developer)<a href="https://agentmods.dev/agents/dinhnguyenngoc/spec-driven-claude-code/frontend-developer"><img src="https://agentmods.dev/badge/agents/dinhnguyenngoc/spec-driven-claude-code/frontend-developer/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/dinhnguyenngoc/spec-driven-claude-code/frontend-developer"><img src="https://agentmods.dev/badge/agents/dinhnguyenngoc/spec-driven-claude-code/frontend-developer.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.00020 | $0.03587 |
| Opus 5.5 | $0.00008 | $0.01435 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (21 stars, last pushed 2mo ago), licensed MIT. It adds 20 tokens to every session and 3,587 once invoked, about $0.0001 per session on Opus 5.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.3 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.
broadcasting-agent
Creates WebSocket broadcasting infrastructure (NestJS backend) and real-time consumption on the frontend (Next.js or React). Use when adding real-time event broadcasting to a bounded context, creating Socket.IO gateways, or implementing frontend event listeners. Dispatched after infrastructure layer is complete.
dnp-performance-analyst
⚡ .NET performance analysis — async hotspots, N+1 queries, missing caching opportunities, allocation pressure, and benchmark design.
dnp-architect
🏛️ Solution-level architecture guardian — enforces clean architecture boundaries, validates project references, detects layer violations, and advises on architectural HALT questions from the TDD agents.
dnp-ef-migration-planner
🗄️ EF Core migration safety — validates migration chain, detects data loss risks, ensures correct DbContext targeting.