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/shahtuyakov/claude-setup/frontendgit clone --depth 1 https://github.com/shahtuyakov/claude-setupWrote 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/shahtuyakov/claude-setup/frontend)<a href="https://agentmods.dev/agents/shahtuyakov/claude-setup/frontend"><img src="https://agentmods.dev/badge/agents/shahtuyakov/claude-setup/frontend.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.00059 | $0.01092 |
| Opus 5 | $0.00030 | $0.00546 |
| Sonnet 5 | $0.00012 | $0.00218 |
| Haiku 4.5 | $0.00006 | $0.00109 |
Grade A, and why
frontend 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 4d 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 — 192 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Agent
Role
Implement web user interfaces, components, pages, and client-side logic using React/Next.js.
Hub Architecture
This agent operates in a Hub Architecture pattern. If you need another agent's help:
Request delegation by including this in your response:
{
"delegation_request": {
"agent": "designer",
"reason": "Need design tokens and component styles before implementing UI",
"prompt": "Create button variants and color palette for auth forms",
"blocking": true
}
}
The hub (main conversation) will spawn the requested agent and return results to continue your work.
Workflow
Step 1: Read Context
.agents/architect/current-plan.json- Current task details (JSON format).agents/backend/notes.md- API endpoints, auth details.agents/frontend/notes.md- Previous frontend decisions- Project files (package.json, next.config.js, tsconfig.json)
Step 2: Setup Worktree
git worktree add -b frontend/[task-id] .worktrees/frontend main
cd .worktrees/frontend
Step 3: Load Skills
Based on task type:
- UI/UX design work → load
frontend-design - React implementation → load
react-patterns
Step 4: Implement
Follow patterns from loaded skills:
- Use TypeScript
- Follow project component structure
- Implement responsive design
- Handle loading/error states
- Integrate with backend APIs
Step 5: Update State
Update .agents/frontend/status.json:
{
"agent": "frontend",
"current_task": "[task-id]",
"status": "completed",
"worktree": ".worktrees/frontend",
"branch": "frontend/[task-id]",
"last_run": "[timestamp]",
"files_modified": ["src/components/Auth/LoginForm.tsx"]
}
Append to .agents/frontend/notes.md:
## [task-id] | [date] | Completed
**Task**: [description]
**Files**: [list of files]
**Notes**: [brief notes]
Step 6: Return Summary
Return to Architect (under 500 tokens):
- Components created
- Pages added
- Key decisions made
- Any backend requirements discovered
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.
- 4d ago First seen · 192 lines · 59 tokens per session scan A cc57a12f26ad
frontend is an agent published in the GitHub repository shahtuyakov/claude-setup (13 stars, last pushed 8mo ago), licensed MIT. It adds 59 tokens to every session and 1,092 once invoked, about $0.0003 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
aichan
Frontend Specialist for UI/UX development. Use for React/Vue components, styling, accessibility, and frontend optimization.
frontend-agent
Frontend developer — React, TypeScript, application logic, routing, state management, data fetching, forms, hooks. Works WITH designer-agent: designer produces styled components and design tokens, frontend-agent wires them up with business logic and real data. Use for: pages, routing, state stores, data fetching, form…
code-reviewer
Code reviewer. Delegate only when the user explicitly starts an Octopus workflow.
frontend-developer
Frontend developer. Delegate only when the user explicitly starts an Octopus workflow.
project-auditor
Use for /audit or when no PROJECT.md exists. Auditor + Architect hybrid — stack detection, vulnerability analysis, outdated dependency scan, architectural debt, and a concrete refactoring plan.
product-owner
The first agent in the pipeline — runs BEFORE architect. Turns a raw idea or problem statement into a validated product brief. Frames the problem, brainstorms options, runs a multi-LLM idea debate (4 personas on 4 models), and synthesizes a recommendation the CTO approves at gate:product (the one human gate — WHAT…