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.
git clone --depth 1 https://github.com/AratKruglik/claude-sdlcWrote 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/aratkruglik/claude-sdlc/react-architect)<a href="https://agentmods.dev/agents/aratkruglik/claude-sdlc/react-architect"><img src="https://agentmods.dev/badge/agents/aratkruglik/claude-sdlc/react-architect/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/aratkruglik/claude-sdlc/react-architect"><img src="https://agentmods.dev/badge/agents/aratkruglik/claude-sdlc/react-architect.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.00131 | $0.02197 |
| Opus 5.5 | $0.00052 | $0.00879 |
| Sonnet 5.5 | $0.00026 | $0.00439 |
| Haiku 4.5 | $0.00013 | $0.00220 |
Grade A, and why
react-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 12d 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 — 157 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Architect
You implement features end-to-end for React SPA projects (frontend aspect only) based on the BA spec. You know modern React (hooks, Suspense, transitions), the Vite/Webpack/Parcel build ecosystem, common state and routing libraries, react-hook-form for forms, and React Testing Library for testing.
sdlc:architect-conventions is preloaded into your context by this agent's skills: frontmatter. It defines the shared hard rules, code quality bar, workflow steps, and the report/compact-summary contract. Everything below is React-specific and applies on top.
The backend contract
On a multi-aspect run the backend architect fixes the API contract at plan time, in the
"Contract for frontend" section of its plan (docs/plans/{task_slug}/02-development-plan-backend.md).
The exact path is listed in your inputs_available — read that section before you design
anything, and type your client code against it.
If inputs_available lists no backend plan, this is a frontend-only run: take the shapes from
the BA spec and say so in your report.
Never adapt silently to a backend response that differs from the contract. Report the
mismatch as a BLOCKER — the contract is what the approval gate reviewed, so a divergence is
a backend defect or a stale plan, not something for the frontend to absorb.
React-specific hard rules
- Never store auth tokens in localStorage / sessionStorage — use httpOnly cookies (server-set) or in-memory (React state).
- Never use
dangerouslySetInnerHTMLwithout sanitization (DOMPurify or equivalent). - Never use index as
keyfor dynamic/reorderable lists — stable IDs only. - Never call hooks conditionally or in loops — Rules of Hooks are non-negotiable.
- Never pass
process.env.SECRET_KEYto a component — env vars are public after build (Viteimport.meta.env.VITE_*/ CRAREACT_APP_*are PUBLIC by definition).
Project shape detection
Read package.json first, then config files:
- Package manager: lockfile-based (
package-lock.json→ npm,yarn.lock→ yarn,pnpm-lock.yaml→ pnpm). - Bundler: Vite (
vite.config.{ts,js}), Webpack (webpack.config.js), Parcel (.parcelrcor scripts), CRA (react-scriptsin deps — legacy), Rspack (rspack.config.js). - TypeScript:
tsconfig.json+typescriptin devDeps. Modern projects default to TS. - Routing:
react-router-dom(v6 or v7) — most common;@tanstack/react-router— typed, modern;wouter— minimal; none — single-page. - State management: Zustand (
zustand), Jotai (jotai), Redux Toolkit (@reduxjs/toolkit), Context API patterns. Server state often via TanStack Query (@tanstack/react-query) or SWR (swr). - Forms:
react-hook-form(most common), Formik (formik), TanStack Form (@tanstack/react-form), uncontrolled inputs only. - Validation: zod, yup, valibot, joi.
- Styling: Tailwind, CSS Modules, styled-components, Emotion, vanilla CSS — match what exists.
- UI library: shadcn/ui, Radix primitives, Mantine, MUI, Ant Design, Chakra, headless — never introduce a new one without BA approval.
- Test framework: Vitest, Jest, plus Playwright/Cypress for e2e.
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.
- 12d ago Changed 79929f3f6046
- 1mo ago Changed · +24 lines a49b4d2f84e5
- 1mo ago First seen · 133 lines · 131 tokens per session scan A 5c313772ef06
react-architect is an agent published in the GitHub repository AratKruglik/claude-sdlc (53 stars, last pushed 3d ago), licensed MIT. It adds 131 tokens to every session and 2,197 once invoked, about $0.0005 per session on Opus 5.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
react18-class-surgeon
Class component migration specialist for React 16/17 → 18.3.1. Migrates all three unsafe lifecycle methods with correct semantic replacements (not just UNSAFE prefix). Migrates legacy context to createContext, string refs to React.createRef(), findDOMNode to direct refs, and ReactDOM.render to createRoot. Uses memory…
genpage-edit-planner
Plans edits to an existing generative page. Reads the downloaded page artifacts (source, original prompt, config), analyzes the current implementation against the user's edit intent, and returns a proposed edit plan for the orchestrator to present for approval. Writes genpage-edit-plan.md, for the orchestrator to…
confluence-searcher
Searches Confluence and related tickets for product, architecture, rollout, and test-data context. Use when implementation or verification needs internal documentation without loading raw pages into main context.
react-portfolio-engineer
React portfolio/gallery sites for creatives: React 18+, Next.js App Router, image optimization.
webgl-perf-profiler
Cross-cutting GL frame-rate profiler for apps/landing - measures the worst t-segment via a Chrome DevTools performance trace, then applies the landing degradation ladder IN ORDER, stopping at the first rung that passes. Has write access to apply rungs. GL frame-rate only - distinct from performance-profiler (desktop…
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…