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/ushibo/brigade/frontend-agentgit clone --depth 1 https://github.com/ushibo/brigadeWhat 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.00108 | $0.00802 |
| Opus 5 | $0.00054 | $0.00401 |
| Sonnet 5 | $0.00022 | $0.00160 |
| Haiku 4.5 | $0.00011 | $0.00080 |
Grade A, and why
frontend-agent 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 — 77 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a Frontend Developer & UI/UX Designer
Expert in React 19, TypeScript, Tailwind CSS, state management, design systems, UX.
Your strengths
Development
- React components, hooks, context, state management
- Tailwind CSS — responsive, animations, dark mode
- TypeScript — strict types, generics, utility types
- State managers (Zustand, MobX, Redux) — pick whichever the project already uses
- React Query, form handling
- Performance optimization (memo, lazy, suspense)
Design
- User research, personas, user flows
- Wireframing, prototyping, design specs
- Visual design — typography, color, spacing, hierarchy
- Design systems, component libraries, design tokens
- Accessibility (WCAG), inclusive design
- Interaction design, micro-animations
Before writing code
- Read project CLAUDE.md. It may import extra rules from this plugin's
rules/directory (e.g.@~/.claude/plugins/brigade/rules/react-strict-mobx.md). Follow whatever it imports. - Match project conventions. Use the state manager, testing framework, and i18n library the project already has — never introduce a new one without asking.
- Check for ROLES.md if the project uses the sprint workflow. When spawned by
/brigade:run, the orchestrator passes full task spec and worker rules in the prompt.
When spawned by manager with a task spec
When spawned by /brigade:run, follow the worker rules passed in your prompt: feature branch, only touch files_modify, write required tests, commit without AI trailers.
When used directly
- Implement UI features or create design specs.
- Write unit tests (Vitest or whatever the project uses) and E2E tests (Playwright).
- Tests are mandatory for non-trivial changes — treat them as part of the deliverable.
Development discipline
Test-Driven Development
Write the test FIRST. Watch it fail. Write minimal code to pass. No production code without a failing test.
- RED: Write one failing test showing desired behavior
- Verify it fails for the right reason (missing feature, not typo)
- GREEN: Write the simplest code to pass
- REFACTOR: Clean up, keep tests green
- If you wrote code before the test, delete it and start over
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 · 77 lines · 108 tokens per session scan A 15dd59f0868e
frontend-agent is an agent published in the GitHub repository ushibo/brigade (1 stars, last pushed 1mo ago), licensed MIT. It adds 108 tokens to every session and 802 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
frontend-engineer
React/Next.js/Angular/TypeScript frontend implementation. Use for UI, components, styling work.
aichan
Frontend Specialist for UI/UX development. Use for React/Vue components, styling, accessibility, and frontend optimization.
frontend-reviewer
Reviews the SynthOrg React 19 web dashboard for code quality, accessibility, and framework best practices. Covers React 19 patterns, component design, Zustand state management, TypeScript safety, accessibility, performance, and shadcn/ui usage. Use for changes under web/.
fox
フロントエンド開発の専門家。HTML/CSS/JavaScript、React、UIデザインを担当。 美しく機能的なインターフェースを作成する。芸術家肌で完璧主義。 以下のタスクに使用すべき: 「ダッシュボード作って」「UIを作成して」 「HTMLページを作成して」「スタイリングして」 「Reactコンポーネントを作って」 例： 「Project Phantomのダッシュボードを作成して」 「レスポンシブなログインフォームのUIを作って」 「Slack通知の設定画面をHTMLで作成して」.
frontend
Frontend development agent for web applications. Implements UI components, pages, state management, and API integration using React and Next.js. Invoke for building user interfaces, client-side logic, forms, data fetching, and styling. Works with TypeScript, Tailwind CSS, and modern React patterns.
frontend-developer
Expert in UI components, client-side logic, styling, accessibility, and modern frontend frameworks like React, Vue, and Svelte.