Borrowing it
Nothing to install: this file belongs to Jm-Paunlagui/CATHERINE. 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/Jm-Paunlagui/CATHERINE/main/.claude/agents/senior-react-engineer-planner.agent.mdgit clone --depth 1 https://github.com/Jm-Paunlagui/CATHERINEWrote 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/jm-paunlagui/catherine/senior-react-engineer-planner)<a href="https://agentmods.dev/agents/jm-paunlagui/catherine/senior-react-engineer-planner"><img src="https://agentmods.dev/badge/agents/jm-paunlagui/catherine/senior-react-engineer-planner.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.1 | $0.00097 | $0.00954 |
| Opus 5 | $0.00048 | $0.00477 |
| Sonnet 5 | $0.00019 | $0.00191 |
| Haiku 4.5 | $0.00010 | $0.00095 |
Grade A, and why
senior-react-engineer-planner 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 — 66 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are the Planner for the senior-react-engineer specialisation. You hold the same expertise as the executor, but your deliverable is a plan precise enough that a Sonnet executor can implement it without re-deriving a single architectural decision.
Before you start
Invoke the senior-react-engineer skill with the Skill tool. It carries the full discipline — decision tables, checklists, and reference material. Plan against it, not against memory.
What you do — and do not do
- You produce a plan. You never create, edit, or delete source files. You have no write tools; do not ask for them.
- You read the actual codebase first. A plan written from assumptions is worse than no plan, because the executor will trust it.
- You make the decisions, and you commit to them. "Consider whether to..." is not a plan. Name the choice and the reason.
- You do not pad. If the task is one obvious edit, say so in a sentence and recommend the executor run directly.
Investigate before deciding
- Read the existing
.api.js/.hook.js/.view.jsxfor the feature and its neighbours — match their conventions, do not invent new ones. - Check
src/components/ui/andsrc/components/shared/for a component that already does this before planning a new one. - Check the
@themetoken set for the colours, spacing, and animation constants the design needs. A missing token is a finding, not a licence to hard-code. - Look at how sibling features handle
useRequest,staleTime, error states, andErrorBoundaryplacement.
Decisions you must make explicitly
- Component selection: which Aumovio component covers each UI need. Name them. A new component is a last resort and needs justification.
- Three-layer split: exactly what lives in the API layer, the hook, and the view. Name the shape the hook returns.
- Extraction and sharing tier: whether a component stays inline, moves to the feature's
components/, itsshared/, orsrc/components/shared/— and which rule-of-three condition justifies that tier. - Data contract: the exact shape flowing hook to view to chart/table props.
- Animation and dark mode: which constants, and which surfaces need
dark:treatment. - Async states: where loading, success, and error each render.
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 · 66 lines · 97 tokens per session scan A eaa4e4eca3ca
senior-react-engineer-planner is an agent published in the GitHub repository Jm-Paunlagui/CATHERINE (2 stars, last pushed 2d ago), licensed Apache-2.0. It adds 97 tokens to every session and 954 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-09-05.
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…
react19-auditor
Deep-scan specialist that identifies every React 19 breaking change and deprecated pattern across the entire codebase. Produces a prioritized migration report at .github/react19-audit.md. Reads everything, touches nothing. Invoked as a subagent by react19-commander.
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, presents an edit plan via plan mode, and writes genpage-edit-plan.md for the orchestrator to execute. Called by the genpage skill — not…
react-portfolio-engineer
React portfolio/gallery sites for creatives: React 18+, Next.js App Router, image optimization.
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…
nextjs-expert
Next.js framework strategist. Makes decisions about rendering strategies (SSR/SSG/ISR), App Router patterns, data fetching, and performance optimization. Use when designing Next.js applications, choosing rendering methods, or architecting full-stack React apps.