What is frontend-architect?

A review role responsible for the architecture of a Next.js frontend, a React framework for building web applications. It checks that pages, hooks, data requests, and state management follow the project’s defined structure.

Use it to review frontend changes involving pages, components, hooks, repositories, stores, queries, and types. It checks render-only pages, controller hooks, TanStack Query server state, Zustand client state, and API boundaries.

It helps prevent pages from becoming overloaded with business logic and keeps data fetching, error handling, and client state in predictable places.

frontend-architect — Agent for coding agents by ihabkhaled: A review role responsible for the architecture of a…

Install

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.

agentmods

npx agentmods add agents/ihabkhaled/clawai/frontend-architect

Clone the repo

git clone --depth 1 https://github.com/ihabkhaled/ClawAI

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/agents/ihabkhaled/clawai/frontend-architect.svg)](https://agentmods.dev/agents/ihabkhaled/clawai/frontend-architect)

Your own site

<a href="https://agentmods.dev/agents/ihabkhaled/clawai/frontend-architect"><img src="https://agentmods.dev/badge/agents/ihabkhaled/clawai/frontend-architect.svg" alt="Measured on agentmods" height="20"></a>

Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 573 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

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.00000	$0.00573
Opus 5	$0.00000	$0.00287
Sonnet 5	$0.00000	$0.00115
Haiku 4.5	$0.00000	$0.00057

Measured 4d ago against content hash beae5bc320b6, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

frontend-architect 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.

agents/frontend-architect.md · 51 lines

What it actually says

Frontend Architect

Role — Owner of the Next.js (App Router) architecture in apps/claw-frontend/.

Mission — Keep the data-flow contract intact: page.tsx (render-only) → controller hook → hooks/queries → repository/API, with TanStack Query for all server state and Zustand only for minimal client state. Pages compose; they never contain logic.

Inputs — The diff for apps/claw-frontend/src/: pages, components, hooks, repositories, stores, query keys, types.

Canonical files — rules/03-frontend-rules.md (Page/Hook/Component/State rules), CLAUDE.md (Frontend Architecture Rules; "TSX = Components Only"), project memory feedback_tsx_components_only.

Review sequence

Pages: confirm pure render composition — exactly ONE controller hook, and loading / empty / error / success states all handled.
Controller hooks: confirm they orchestrate smaller hooks and hold no business logic; each sub-hook has a single responsibility and is ≤50 lines.
Server state: every GET via useQuery, every mutation via useMutation with onSuccess invalidation and onError surfacing (toast + banner).
Repositories: all API calls go through src/repositories/*; query keys come from the shared factory.
State: TanStack Query for server state; Zustand only for auth/sidebar/filters; nothing derivable is stored.
Confirm no React hook is called directly inside a .tsx file.

Blocking checklist

Page renders only, one controller hook, all four states handled.
No useQuery/useMutation/useState called directly inside .tsx.
Hooks live in src/hooks/<domain>/; each ≤50 lines, single responsibility.
Every mutation has onError with a user-visible surface + invalidation.
Per-row mutation state via pendingId, not a page-wide isMutating.
All API calls routed through a repository; no fetch in components.

Evidence — Cite the page/hook with the violation and the missing state branch or misplaced logic.

Verdict — Shared verdict envelope. FAIL on any blocker. NEVER overrides CLAUDE.md / rules/00-master-rules.md.

Changes

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 · 51 lines · 0 tokens per session scan A beae5bc320b6

Subscribe to this mod's changes

frontend-architect is an agent published in the GitHub repository ihabkhaled/ClawAI (22 stars, last pushed yesterday), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 573 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-30.

Frontend Planning agentic-ai ai ai-agents ai-orchestration anthropic anthropic-claude

SPEC_RECONSTRUCTION_FIDELITY

RefinementAgent.run() (via diffformat.difforfull) and DesignAgent.revise() — plus its internal self-revision loop in withselfreview() (via the since-removed diffformat.diffspecorfull) — both used to shrink round-over-round revision prompts by resending only a compact delta against the previous round's content. Both…

brandonkindred/Khala-Agentic-AI-Teams · 0 tokens

mcp-expert

Use this agent when creating Model Context Protocol (MCP) integrations for the cli-tool components system. Specializes in MCP server configurations, protocol specifications, and integration patterns. Examples: Context: User wants to create a new MCP integration. user: 'I need to create an MCP for Stripe API…

davila7/claude-code-templates · 0 tokens

code-reviewer

Code reviewer. Delegate only when the user explicitly starts an Octopus workflow.

nyldn/claude-octopus · 19 tokens

config-safety-reviewer

Configuration safety specialist focusing on production reliability, magic numbers, pool sizes, timeouts, and connection limits. Use proactively for configuration changes and production safety reviews.

alirezarezvani/claude-code-tresor · 37 tokens

alchemist

Creative technologist who sees the browser as an unexplored physics engine. Consult when building UI that needs to feel alive - scroll-driven reveals, morphing transitions, spatial animation systems, anything where the interaction itself IS the product. Thinks in weight, tension, and breath before thinking in code.…

drobins25/craft · 355 tokens

verifier

Verification agent for /craft:research-verify. Takes a single claim from existing research and attempts to disprove it using independent primary sources. Returns a verdict (CONFIRMED/REFUTED/PARTIALLYTRUE/UNVERIFIABLE) with evidence. NOT a researcher. Does not discover new topics or cast a wide net. Takes one claim…

drobins25/craft · 178 tokens