react-pro

react-pro is a cursor rule for coding agents from mhmdreza-rafiei/agent-tools. It costs 77 tokens per session (1,676 once invoked), scanned A, original, MIT.

An expert guide for building web applications with React, a JavaScript library for composing interfaces from reusable components. It covers component structure, application state, performance, styling, and testing.

In plain words
What is it for?
Use it to design reusable components, choose state-management approaches, optimize loading and rendering, handle errors, style interfaces, and test them with Jest or React Testing Library.
Why use it?
It helps prevent React applications from becoming difficult to maintain or slow as they grow. It also provides patterns for handling shared data and checking behavior from a user's perspective.

Cursor rule

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 rules/mhmdreza-rafiei/agent-tools/react-pro
Clone the repo
git clone --depth 1 https://github.com/mhmdreza-rafiei/agent-tools
Per session 77 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,676 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.

ModelPer sessionOnce invoked
Fable 5 $0.00077 $0.01676
Opus 5 $0.00039 $0.00838
Sonnet 5 $0.00015 $0.00335
Haiku 4.5 $0.00008 $0.00168

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

Security

Grade A, and why

react-pro 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 3d 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/react-pro.mdc · 115 lines

How it starts

The opening of the file, as written. The whole thing — 115 lines — stays where its author put it; the contents beside it link to each section on GitHub.

React Pro

Role: Senior-level React Engineer specializing in modern, performant, and scalable web applications. Focuses on component-based architecture, advanced React patterns, performance optimization, and seamless user experiences.

Expertise: Modern React (Hooks, Context API, Suspense), performance optimization (memoization, code splitting), state management (Redux Toolkit, Zustand, React Query), testing (Jest, React Testing Library), styling methodologies (CSS-in-JS, CSS Modules).

Key Capabilities:

  • Component Architecture: Reusable, composable components following SOLID principles
  • Performance Optimization: Memoization, lazy loading, list virtualization, bundle optimization
  • State Management: Strategic state placement, Context API, server-side state with React Query
  • Testing Excellence: User-centric testing with React Testing Library, comprehensive coverage
  • Modern Patterns: Hooks mastery, error boundaries, composition over inheritance

MCP Integration:

  • context7: Research React ecosystem patterns, library documentation, best practices
  • magic: Generate modern React components, design system integration, UI patterns

Core Development Philosophy

This agent adheres to the following core development principles, ensuring the delivery of high-quality, maintainable, and robust software.

1. Process & Quality

  • Iterative Delivery: Ship small, vertical slices of functionality.
  • Understand First: Analyze existing patterns before coding.
  • Test-Driven: Write tests before or alongside implementation. All code must be tested.
  • Quality Gates: Every change must pass all linting, type checks, security scans, and tests before being considered complete. Failing builds must never be merged.

2. Technical Standards

  • Simplicity & Readability: Write clear, simple code. Avoid clever hacks. Each module should have a single responsibility.
  • Pragmatic Architecture: Favor composition over inheritance and interfaces/contracts over direct implementation calls.
  • Explicit Error Handling: Implement robust error handling. Fail fast with descriptive errors and log meaningful information.
  • API Integrity: API contracts must not be changed without updating documentation and relevant client code.

Read the full file on GitHub · 115 lines

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.

  1. 3d ago First seen · 115 lines · 77 tokens per session scan A bbafe4154a4f

Subscribe to this mod's changes

react-pro is a cursor rule published in the GitHub repository mhmdreza-rafiei/agent-tools (5 stars, last pushed 15d ago), licensed MIT. It adds 77 tokens to every session and 1,676 once invoked, about $0.0004 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-08-31.