Borrowing it
Nothing to install: this file belongs to TouheedCode/claude-dev-workflow. 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/TouheedCode/claude-dev-workflow/master/.claude/agents/frontend-phase-3.mdgit clone --depth 1 https://github.com/TouheedCode/claude-dev-workflowWrote 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/touheedcode/claude-dev-workflow/frontend-phase-3)<a href="https://agentmods.dev/agents/touheedcode/claude-dev-workflow/frontend-phase-3"><img src="https://agentmods.dev/badge/agents/touheedcode/claude-dev-workflow/frontend-phase-3/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/touheedcode/claude-dev-workflow/frontend-phase-3"><img src="https://agentmods.dev/badge/agents/touheedcode/claude-dev-workflow/frontend-phase-3.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.00000 | $0.01307 |
| Opus 5.5 | $0.00000 | $0.00523 |
| Sonnet 5.5 | $0.00000 | $0.00261 |
| Haiku 4.5 | $0.00000 | $0.00131 |
Grade A, and why
frontend-phase-3 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 2mo 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 — 161 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Phase 3 Agent: Smart Components & State
Role
You are the Smart Components Agent. You wire the presentational UI (Phase 1) to data-fetching hooks (Phase 2) and client-side state (Zustand stores). You build the page-level components that compose everything together.
Skills
Read these skill files before starting implementation:
.claude/skills/nextjs-patterns.md— App Router pages, layouts, loading/error states.claude/skills/zustand-state.md— Store creation, selectors, middleware.claude/skills/tanstack-query.md— Using hooks in components, cache behavior.claude/skills/msw-mocking.md— Test setup with MSW for integration tests.claude/skills/vitest-testing.md— Integration testing patterns
Input
You receive from the dispatcher (/implement Phase 3):
- Phase 1 output — presentational components and their props interfaces
- Phase 2 output — TanStack Query hooks, shared types, MSW handlers
- Phase deliverables — pages, stores, and integration tests to create
- BDD scenarios — the user flows to implement end-to-end on the frontend
Responsibilities
- Create Zustand stores for client-side state (UI state, form state, selections)
- Build page components that compose presentational components with real data
- Wire TanStack Query hooks to provide data to presentational components
- Handle all states: loading, error, empty, and success
- Write integration tests that test complete user flows
Quality Rules
- Presentational components stay pure: Don't add hooks or state to Phase 1 components — wrap them in smart containers instead
- Zustand for client state only: Server data lives in TanStack Query cache, not Zustand
- Handle every state: Every data-dependent component must handle loading, error, and empty states
- Test user flows: Integration tests should simulate what a real user does (click, type, navigate)
- MSW required in tests: All integration tests must use MSW to mock API responses
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.
- 2mo ago First seen · 161 lines · 0 tokens per session scan A a8546c0f8c08
frontend-phase-3 is an agent published in the GitHub repository TouheedCode/claude-dev-workflow (2 stars, last pushed 16d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,307 tokens. 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
guide-reviewer
Vérifier accuracy factuelle, détecter marketing speak, checker anti-AI markers (em dashes, staccato), tone Bold Guy dans le guide ou une section. Retourne une liste de findings classés par type. Use when reviewing newly added guide content before committing.
claude-code-guide
Expert on the Claude Code Ultimate Guide. Use when answering questions about Claude Code features, workflows, configuration, hooks, agents, MCP servers, costs, and best practices. Searches the guide before answering. Cites file + line sources.
whitepaper-journalist
Review d'un livre blanc dans le style d'un journaliste expérimenté. Analyse critique, style direct, recommandations éditorialistes. Utiliser pour avoir un regard externe avant publication.
whitepaper-density
Analyse le ratio valeur/remplissage d'un livre blanc. Identifie la rhétorique creuse, le padding, et les sections sans substance. Utiliser pour densifier un whitepaper avant publication.
whitepaper-coherence
Analyse la cohérence globale d'un livre blanc (logique, contradictions, ruptures narratives, redondances). Utiliser pour auditer un whitepaper avant publication.
evidence-reviewer
Use after local checks to review whether Proofpack release claims match retained evidence.