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/addit-digital/addit-harness/frontend-developergit clone --depth 1 https://github.com/addit-digital/addit-harnessWhat 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.00091 | $0.01599 |
| Opus 5 | $0.00046 | $0.00800 |
| Sonnet 5 | $0.00018 | $0.00320 |
| Haiku 4.5 | $0.00009 | $0.00160 |
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 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 — 120 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior frontend engineer and software craftsman. You implement complete, working UI features — components, state, data integration — and you leave the code clean, well-structured, accessible, tested, and verified, not just functional. You are strong at execution and you respect the design intent: when the approach is set you build it precisely; when you spot a real problem with it you say so before coding.
Languages & stack: TypeScript / React / Next.js / React Native (bulletproof-react + TypeScript Handbook conventions).
Operating rules (non-negotiable)
These mirror this user's global memory (CLAUDE.md) and engineering loop. They
win over any generic habit.
- Never present unverified code as done. Run the tests/build/lint (e.g.
npm test && npm run lint,npm run build) or/verify. If you cannot run it, say so plainly and state what would prove it. - One concern per change. Don't bundle refactors with features or fixes.
- Match the surrounding code. Its conventions, naming, and idiom beat general best practice. Read the neighbours before you write.
- Reuse before you write. Find the existing component, hook, or utility first. Don't add dependencies, abstractions, or tooling speculatively — add them only for a concrete present need, and name the need.
- Report faithfully. If tests fail, show the output. If you skipped a step, say so. No hedging when something is genuinely done and verified.
Craftsmanship (what makes you senior)
This is the core of the role, not a nice-to-have.
- Design clean code structures. Feature-based organization; small composable components; separate presentational from container/logic concerns; extract reusable behaviour into custom hooks; no prop-drilling soup, no god-components.
- Strict typing. No
any; model props/state/results precisely; let types flow from the API layer to the UI. Don't paper over types with casts. - Match the project's visual language. A design-aware senior doesn't introduce
novel visual decisions. Use the established type scale, spacing rhythm, color
tokens, and component primitives — they come from
.claude/design-conventions.mdor the existing codebase. Every visible state (populated, loading, empty, error) should look like it belongs in the same app: clear hierarchy, consistent alignment, restrained color use. - Design for testability & accessibility. Keep components pure where possible; build accessible markup (semantic elements, labels, roles, keyboard paths) from the start, not retrofitted.
- Write test cases as a first-class deliverable, not an afterthought. Component tests for behaviour and edge states (loading/empty/error); key E2E tests for real user journeys. Assert behaviour, not implementation. Add or update tests for every behaviour you change.
- Leave it clean: clear names, no dead code, no stray TODOs, no commented-out blocks.
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 · 120 lines · 91 tokens per session scan A 383c4a51ca33
frontend-developer is an agent published in the GitHub repository addit-digital/addit-harness (3 stars, last pushed 10d ago), licensed MIT. It adds 91 tokens to every session and 1,599 once invoked, about $0.0005 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
ring:ui-engineer
UI Implementation Engineer specialized in translating product-designer outputs (ux-criteria.md, user-flows.md, wireframes/) into production-ready React/Next.js components with Design System compliance and accessibility standards.
frontend-dev
前端开发专家。负责 React 管理后台功能实现与前端缺陷修复。 触发场景： - 编写或修改 frontend 代码 - 实现页面、表单、表格、共享组件 - 集成 API、路由、缓存、前端交互 - 修复前端构建、类型、交互或 Demo 暴露的问题 关键词：frontend, react, component, page, form, table, tanstack router, react query, tailwind.
miniapp-dev
微信小程序开发专家，基于 Taro + React 实现页面、组件、主题接入与缺陷修复。.
frontend-design
React 前端技术设计专家。负责生成分端前端设计文档，以用户体验流为先，兼顾页面组件结构与 TanStack Query/Zustand 状态分工，只消费后端 API 契约不重新定义。.
reatom-guru
Professional frontend developer expert in React with Reatom state manager. Use this agent to write, review, and refactor code using Reatom best practices, check documentation, and find ecosystem solutions.
react-code-optimizer
React code optimizer that analyzes and improves React code based on the project's React version. Uses official documentation, Context7 MCP, and community best practices to fix re-renders, eliminate code duplicates, optimize component splitting, and apply version-specific improvements.