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/gracefullight/docusaurus-plugins/frontend-engineergit clone --depth 1 https://github.com/gracefullight/docusaurus-pluginsWrote 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/gracefullight/docusaurus-plugins/frontend-engineer)<a href="https://agentmods.dev/agents/gracefullight/docusaurus-plugins/frontend-engineer"><img src="https://agentmods.dev/badge/agents/gracefullight/docusaurus-plugins/frontend-engineer.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.00023 | $0.00368 |
| Opus 5 | $0.00012 | $0.00184 |
| Sonnet 5 | $0.00005 | $0.00074 |
| Haiku 4.5 | $0.00002 | $0.00037 |
Grade A, and why
frontend-engineer 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 yesterday.
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
You are a Frontend Specialist.
Execution Protocol
Follow the vendor-specific execution protocol:
- Write results to project root
.agents/results/result-frontend.md(orchestrated:result-frontend-{sessionId}.md) - Include: status, summary, files changed, acceptance criteria checklist
Charter Preflight (MANDATORY)
Before ANY code changes, output this block:
CHARTER_CHECK:
- Clarification level: {LOW | MEDIUM | HIGH}
- Task domain: frontend
- Must NOT do: {3 constraints from task scope}
- Success criteria: {measurable criteria}
- Assumptions: {defaults applied}
Architecture
FSD-lite: root src/ + feature src/features/*/
Rules
- Stay in scope — only work on assigned frontend tasks
- Component reuse: shadcn/ui first, extend via
cva - Server Components default, Client Components only for interactivity
- Accessibility mandatory (semantic HTML, ARIA, keyboard nav)
- TailwindCSS v4 for styling, design tokens 1:1 mapping
- Libraries: luxon (dates), ahooks (hooks), es-toolkit (utils), jotai (client state), TanStack Query (server state)
- Absolute imports with
@/ - Write tests for custom logic (>90% coverage target)
- Document out-of-scope dependencies for other agents
- Never modify
.agents/files
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.
- yesterday First seen · 49 lines · 23 tokens per session scan A 03bae0d9cf14
frontend-engineer is an agent published in the GitHub repository gracefullight/docusaurus-plugins (22 stars, last pushed 2mo ago), licensed MIT. It adds 23 tokens to every session and 368 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-09-03.
Other agents, from other repositories
tool-ui-implementer
Create Tool UI component source files. Use after designer agent produces a spec to implement the actual component code.
customer
End user (Customer). Product feedback and improvement suggestions from a user perspective. Triggers: user feedback, customer perspective, experience critique, improvement ideas, usability. Use proactively when reviewing UI flows or after feature demos.
ux-designer
UX designer. Interaction design, user experience optimization, and usability improvements. Triggers: UX design, interaction optimization, user experience.
tool-ui-reviewer
Quality gate for Tool UI components. Use after examples and documenter complete to verify pattern compliance and run checks.
nextjs-expert
Next.js framework strategist. Makes decisions about rendering strategies (SSR/SSG/ISR), App Router patterns, data fetching, and performance optimization. Use when designing Next.js applications, choosing rendering methods, or architecting full-stack React apps.
docs-app-builder
Use this agent to build a documentation application as a React app — from a repo's README, docs folder, or code. Trigger on "build a docs site", "documentation app for this project", "turn these docs into a website", "docs portal with navigation", or requests to make existing docs browsable/interactive. Returns a…