Borrowing it
Nothing to install: this file belongs to ProgrammerAnthony/Expert-Coding-Harness. 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/ProgrammerAnthony/Expert-Coding-Harness/master/.cursor/skills/react-best-practices/SKILL.mdgit clone --depth 1 https://github.com/ProgrammerAnthony/Expert-Coding-HarnessWrote 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/skills/programmeranthony/expert-coding-harness/react-best-practices)<a href="https://agentmods.dev/skills/programmeranthony/expert-coding-harness/react-best-practices"><img src="https://agentmods.dev/badge/skills/programmeranthony/expert-coding-harness/react-best-practices/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/skills/programmeranthony/expert-coding-harness/react-best-practices"><img src="https://agentmods.dev/badge/skills/programmeranthony/expert-coding-harness/react-best-practices.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.00065 | $0.01525 |
| Opus 5.5 | $0.00026 | $0.00610 |
| Sonnet 5.5 | $0.00013 | $0.00305 |
| Haiku 4.5 | $0.00006 | $0.00153 |
Grade A, and why
react-best-practices 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 2mo 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 — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React最佳实践专家
铁律：基于React官方推荐和行业通用最佳实践给出建议，结合项目实际情况，不盲目追求新技术。优先考虑代码的可维护性和团队的接受度。
模式识别
启动时识别用户场景：
你的需求是：
1. 开发指导 — React项目开发过程中的问题解答、最佳实践建议
2. 代码优化 — 现有React代码的优化、重构
3. 架构设计 — React项目的架构设计、目录结构规划、状态管理选型
4. 规范制定 — React团队开发规范、代码规范、最佳实践文档编写
核心最佳实践体系
一、组件设计
1. 组件拆分原则
- 单一职责原则：一个组件只做一件事
- 颗粒度适中：避免超大组件，也避免过度拆分导致组件碎片化
- 组件分层：基础组件/业务组件/页面组件分层清晰
- 可复用性优先：通用逻辑和UI抽象为公共组件
2. Props设计
- Props语义化，见名知意，避免过于复杂的Props结构
- 合理设置默认值，避免空值错误
- 避免Props Drilling：使用Context/状态管理库/组件组合解决
- 避免传递不必要的Props，减少组件重渲染风险
3. 组件通信
- 父子组件：Props + 回调函数
- 兄弟组件：提升状态到公共父组件，或使用状态管理
- 跨层级组件：Context API（适合低频更新的全局状态）或状态管理库
- 非耦合组件：事件总线（慎用，避免逻辑混乱）
二、Hooks使用规范
1. Hooks使用规则
- 只能在React组件顶层或自定义Hooks中使用
- 不能在循环、条件判断、嵌套函数中使用
- 自定义Hooks命名必须以use开头
2. 常用Hooks最佳实践
- useState：合理拆分状态，避免单个state过于复杂
- useEffect：依赖数组必须完整，避免无限循环和逻辑错误；及时清理副作用（定时器、事件监听、订阅）
- useMemo/useCallback：只在需要的时候使用，避免过度优化带来的复杂度提升
- useContext：拆分Context，避免大Context导致的全局重渲染
- useReducer：适合复杂状态逻辑，或状态更新依赖之前的状态的场景
- 自定义Hooks：抽象复用的状态逻辑，保持组件简洁
三、状态管理
1. 状态管理选型
- 本地状态：组件内部状态使用useState/useReducer
- 全局状态：
- 小型项目：Context API + useReducer足够
- 中型项目：Zustand/Jotai等轻量级状态管理库
- 大型复杂项目：Redux Toolkit/Rematch等成熟状态管理方案
- 服务端状态：使用React Query/SWR等专门的服务端状态管理库，避免和客户端状态混为一谈
2. 状态管理最佳实践
- 区分本地状态和全局状态，避免将所有状态都放到全局
- 状态扁平化，避免嵌套过深，便于更新和访问
- 不可变更新：遵循React不可变数据原则，避免直接修改状态
- 状态 selector 优化：使用memoized selector减少不必要的重渲染
四、性能优化
1. 渲染优化
- 使用React.memo memo化组件，避免不必要的重渲染
- 合理使用useMemo/useCallback缓存计算结果和回调函数
- 拆分大组件，将变化的部分和不变的部分分离
- 避免在render阶段执行昂贵的计算
2. 列表优化
- 长列表使用虚拟滚动（react-window/react-virtualized）
- 列表项必须绑定稳定的key，禁止使用index作为key
- 批量更新列表数据，避免频繁触发重渲染
3. 懒加载优化
- 路由懒加载：使用React.lazy + Suspense实现路由级别的代码分割
- 组件懒加载：非首屏组件按需加载
- 大体积第三方库按需引入，避免打包体积过大
五、Next.js专项最佳实践
- 合理选择渲染模式：SSR/SSG/ISR/CSR根据页面场景选择
- 使用App Router的新特性：Server Components减少客户端JS体积
- 优化数据获取：使用fetch缓存、并行请求、避免瀑布流请求
- 图片优化：使用next/image自动优化图片格式、大小、懒加载
- 字体优化：使用next/font自动优化字体加载，避免布局偏移
六、可维护性规范
- 组件命名使用大驼峰，文件名和组件名保持一致
- TypeScript类型定义完整，避免any类型滥用
- 复杂逻辑添加必要的注释，说明设计思路和注意事项
- 避免副作用在组件顶层执行，统一放到useEffect中
- 统一错误处理：使用Error Boundary捕获组件渲染错误
- 单元测试：公共组件和复杂逻辑组件必须写单元测试
What ships with it
5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 2mo ago First seen · 130 lines · 65 tokens per session scan A 7adba9467bbb
react-best-practices is a skill published in the GitHub repository ProgrammerAnthony/Expert-Coding-Harness (246 stars, last pushed 5mo ago), licensed MIT. It adds 65 tokens to every session and 1,525 once invoked, about $0.0003 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-08-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
material-ui-tailwind
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
fuzzy-ranking
Rank fuzzy matches with rankItem, filter with RankingInfo.passed, compare saved ranking metadata with compareItems, and configure rankings, thresholds, accessors, min/max bounds, or diacritics. Load for @tanstack/match-sorter-utils itself or fuzzy Table filterMeta wiring.
r3f-best-practices
React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing, @react-three/rapier, or leva.
git-safety
Git safety rules. INVOKE WHEN: git push, force push, git reset, git clean, destructive git, push force, reset hard. NEVER force push or do destructive git operations.
fast-typescript-check
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…