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.
npx agentmods add rules/wangtingyeye/llm-agent-study/reactgit clone --depth 1 https://github.com/WangTingYeYe/llm-agent-studyWhat 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.00639 |
| Opus 5 | $0.00000 | $0.00319 |
| Sonnet 5 | $0.00000 | $0.00128 |
| Haiku 4.5 | $0.00000 | $0.00064 |
Grade A, and why
react 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 yesterday.
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.
What it actually says
description: 该规则解释了 React 组件模式、hooks 使用方法和最佳实践。 globs: /*.jsx,/*.tsx alwaysApply: false
React 规则
组件结构
- 优先使用函数组件而非类组件
- 保持组件小巧且专注
- 将可复用逻辑提取到自定义 hook 中
- 使用组合而非继承
- 使用 TypeScript 实现适当的 prop 类型
- 将大型组件拆分为更小、更专注的组件
Hooks
- 遵循 Hooks 的规则
- 使用自定义 hooks 实现可复用逻辑
- 保持 hooks 专注且简单
- 在 useEffect 中使用适当的依赖数组
- 在需要时在 useEffect 中实现清理功能
- 避免嵌套 hooks
状态管理
- 使用 useState 管理组件本地状态
- 使用 useReducer 处理复杂状态逻辑
- 使用 Context API 共享状态
- 将状态尽可能靠近使用它的地方
- 通过适当的状态管理避免 prop drilling
- 仅在必要时使用状态管理库
性能
- 实现适当的记忆化(useMemo, useCallback)
- 对开销大的组件使用 React.memo
- 避免不必要的重新渲染
- 实现适当的懒加载
- 在列表中使用适当的 key 属性
- 分析并优化渲染性能
表单
- 对表单输入使用受控组件
- 实现适当的表单验证
- 正确处理表单提交状态
- 显示适当的加载和错误状态
- 对复杂表单使用表单库
- 为表单实现适当的可访问性
错误处理
- 实现 Error Boundaries
- 正确处理异步错误
- 显示用户友好的错误信息
- 实现适当的备用 UI
- 适当记录错误
- 优雅处理边缘情况
测试
- 为组件编写单元测试
- 为复杂流程实现集成测试
- 使用 React Testing Library
- 测试用户交互
- 测试错误场景
- 实现适当的模拟数据
可访问性
- 使用语义化 HTML 元素
- 实现适当的 ARIA 属性
- 确保键盘导航
- 使用屏幕阅读器测试
- 管理焦点
- 为图片提供适当的 alt 文本
代码组织
- 将相关组件组织在一起
- 使用适当的文件命名约定
- 实现适当的目录结构
- 保持样式靠近组件
- 使用适当的导入/导出
- 记录复杂的组件逻辑
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.
- yesterday First seen · 85 lines · 0 tokens per session scan A 9f7de91c5e04
react is a cursor rule published in the GitHub repository WangTingYeYe/llm-agent-study (4 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 639 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-31.
Other cursor rules, from other repositories
angular-20
This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
dev-standard
Apache Superset development standards and guidelines for Cursor IDE.
typescript
Changes to these high-fan-out internals can affect every message, delta, element, or rerun. Keep work in them minimal, and benchmark changes with representative stress-test apps.
coolify-ai-docs
Master reference to all Coolify AI documentation in .ai/ directory.
python_lib
Tips and guidelines specific to the development of the Streamlit Python library, not applicable to scripts and e2e tests.
specs
This directory contains product and tech specs for Streamlit features.