React 最佳实践
This React best practices skill provides guidance on component design patterns, React Hooks usage, and performance optimization techniques for writing high-quality React code. Use it when developing React applications and needing specific instruction on Hooks fundamentals, Context implementation, performance optimization, component architecture, or custom Hook patterns.
git clone --depth 1 https://github.com/huangjia2019/claude-code-engineering /tmp/react- && cp -r /tmp/react-/10-Plugins/projects/03-team-toolkit/skills/react-patterns ~/.claude/skills/react-SKILL.md
# React 最佳实践 本技能包含 React 开发的最佳实践，帮助你编写高质量的 React 代码。 ## 目录 当用户需要特定主题时，加载对应章节： - **Hooks 基础** → 加载 [chapters/hooks.md](./chapters/hooks.md) - **Context 使用** → 加载 [chapters/context.md](./chapters/context.md) - **性能优化** → 加载 [chapters/performance.md](./chapters/performance.md) 只在用户明确需要时加载完整内容，避免浪费上下文窗口。 ## 核心原则 1. **组件单一职责**：一个组件做一件事 2. **状态提升最小化**：状态放在需要它的最近公共祖先 3. **避免过早优化**：先让它工作，再让它快 4. **优先组合而非继承**：使用 children 和 render props ## 快速参考 ### 自定义 Hook 命名 ```javascript // 好的命名 useUser() useLocalStorage() useDebounce() // 不好的命名 fetchUser() // 不是 use 开头 useData() // 太模糊 ``` ### 组件文件结构 ``` ComponentName/ ├── index.ts # 导出 ├── ComponentName.tsx # 组件实现 ├── ComponentName.test.tsx ├── ComponentName.styles.ts └── types.ts # 类型定义 ```
Deep analysis of code against project standards
API design patterns and conventions for this project. Covers RESTful URL naming, response format standards, error handling, and authentication requirements. Use when writing or reviewing API endpoints, designing new APIs, or making decisions about request/response formats.
Generate comprehensive API documentation by scanning Express route files.
Generate API documentation from code. Use when the user wants to document APIs, create API reference, generate endpoint documentation, or needs help with OpenAPI/Swagger specs.
Explore and analyze API-related code. Use when investigating endpoints, routing, or HTTP handling.
Generate API endpoint documentation from Express route files. Use when the user asks to generate, update, or review API docs for Express.js routes.
Explore and analyze authentication-related code. Use when investigating auth flows, session management, or security.
Analyze root cause of bugs after location is identified. Second step in bug investigation.