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/d-padmanabhan/agent-engineering-handbookWrote 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/rules/d-padmanabhan/agent-engineering-handbook/815-reactflow-diagrams)<a href="https://agentmods.dev/rules/d-padmanabhan/agent-engineering-handbook/815-reactflow-diagrams"><img src="https://agentmods.dev/badge/rules/d-padmanabhan/agent-engineering-handbook/815-reactflow-diagrams/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/rules/d-padmanabhan/agent-engineering-handbook/815-reactflow-diagrams"><img src="https://agentmods.dev/badge/rules/d-padmanabhan/agent-engineering-handbook/815-reactflow-diagrams.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.00038 | $0.01113 |
| Opus 5.5 | $0.00015 | $0.00445 |
| Sonnet 5.5 | $0.00008 | $0.00223 |
| Haiku 4.5 | $0.00004 | $0.00111 |
Grade A, and why
815-reactflow-diagrams 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 1mo 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 — 79 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Interactive architecture diagrams (React Flow)
Goal: Ship readable, consistent narrative diagrams in a React SPA using @xyflow/react (React Flow): fixed layout, animated edges where they help, and prose on a sibling page that explains scope (what is in-band vs out-of-band).
This rule complements 800-markdown.mdc (Mermaid in Markdown). Use 800 for static docs diagrams; use 815 when the diagram is TypeScript + React Flow.
When this rule applies
Use for interactive canvases (not image-only figures). Typical stack: React, TypeScript, Vite, Tailwind, optional React Router. Package manager may be Bun or npm per project.
File and route layout (SPA)
Adapt paths to your repo, but keep separation of concerns:
- Diagram:
**/components/diagrams/<Name>Diagram.tsx(or your agreed folder) exporting<Name>Diagram. - Page: route-level view that wraps copy +
<Name />(figure, legend, diagram). - Router and index: register the path and add a card or link from the app home so deep links are discoverable.
- README: document new routes and any
public/reference assets.
React Flow defaults (narrative mode)
- Outer container: bordered, dark background, bounded height (for example
min(88dvh, …)). fitViewwith tunedfitViewOptions(padding,maxZoom) and sensibleminZoom/maxZoomfor the graph size.proOptions={{ hideAttribution: true }}where license allows.- Read-only story:
nodesDraggable={false},nodesConnectable={false}unless the product is an editor. - Canvas chrome:
react-flow darkbase,!bg-slate-950,[&_.react-flow__node]:overflow-visiblewhen handles or labels extend past node boxes. - Dots
Backgroundand Controls styled to match the app (slate theme is common). - Wrap custom node and edge components in
memo(); pass stablenodeTypes/edgeTypesobjects (module scope), not new literals each render. - Prefer
buildNodesAndEdges()returning{ nodes, edges }at module scope for static graphs so types and data stay stable.
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.
- 1mo ago First seen · 79 lines · 38 tokens per session scan A a665a644c064
815-reactflow-diagrams is a cursor rule published in the GitHub repository d-padmanabhan/agent-engineering-handbook (19 stars, last pushed 9d ago), licensed MIT. It adds 38 tokens to every session and 1,113 once invoked, about $0.0002 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 cursor rules, from other repositories
general
Wonder Blocks design system conventions, component patterns, and coding standards.
react-chakra-ui-cursorrules-prompt-file
Cursor rules for React development with Chakra UI integration.
react-styled-components-cursorrules-prompt-file
Cursor rules for React development with Styled Components integration.
react-chakra-ui---folder-structure
A standard folder layout for React and Chakra UI projects, including separate locations for components, pages, themes, hooks, utilities, and assets. It also defines how Chakra UI theme files are grouped.
ant-design
Definitive guidelines for building consistent, performant, and maintainable UIs with Ant Design v6.x, focusing on design tokens, layout, and component usage.
ui-design-system
UI, design tokens and mobile-first rules.