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 skills/programmeranthony/expert-coding-harness/react-best-practicesnpx skills add ProgrammerAnthony/Expert-Coding-Harness --skill react-best-practicesgit clone --depth 1 https://github.com/ProgrammerAnthony/Expert-Coding-HarnessWhat 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.00065 | $0.01525 |
| Opus 5 | $0.00032 | $0.00763 |
| Sonnet 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 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 — 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.
- 2d 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 (235 stars, last pushed 3mo ago), licensed MIT. It adds 65 tokens to every session and 1,525 once invoked, about $0.0003 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-30.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
babysit-pr
Babysit a GitHub pull request after creation by continuously polling review comments, CI checks/workflow runs, and mergeability state until the PR is merged/closed or user help is required. Diagnose failures, retry likely flaky failures up to 3 times, auto-fix/push branch-related issues when appropriate, and keep…
imagegen
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output…
agent-host-chat-contributions
Build and review cross-cutting agent-host chat behavior through lifecycle contributions. Use when adding turn lifecycle side effects, prompt or context injection, restored-history transformation, protocol-action observation, or when reviewing changes that add code to AgentSideEffects or AgentService.