/react-patterns
React 组件设计模式、Hooks 使用指南、性能优化技巧
$ npx -y skills add huangjia2019/claude-code-engineering --skill react-patterns --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/react-patterns
Context preview
The summary Claude sees to decide when to auto-load this skill.
React 组件设计模式、Hooks 使用指南、性能优化技巧
SKILL.md
react-patterns.SKILL.mdname: React 最佳实践 description: React 组件设计模式、Hooks 使用指南、性能优化技巧
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 命名
// 好的命名 useUser() useLocalStorage() useDebounce() // 不好的命名 fetchUser() // 不是 use 开头 useData() // 太模糊
组件文件结构
ComponentName/ ├── index.ts # 导出 ├── ComponentName.tsx # 组件实现 ├── ComponentName.test.tsx ├── ComponentName.styles.ts └── types.ts # 类型定义
This repository demonstrates how to use Claude Code to do real engineering work, not just writing code. 本项目是极客时间专栏 《Claude Code 工程化实战》 的官方配套示例仓库，目标就是： 👉 把 Claude Code 从“对话式编码工具”，变成 可设计、可复用、可治理的工程系统。
Repo: huangjia2019/claude-code-engineering
Other skills on claude-code-engineering.
- /code-reviewing
Review code for quality, security, and best practices. Use when the user asks for code review, wants feedback on their code, mentions reviewing changes, or asks about code quality.
Open skill - /api-conventions
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.
Open skill - /api-documenting
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.
Open skill - /financial-analyzing
Analyze financial data, calculate financial ratios, and generate analysis reports. Use when the user asks about revenue, costs, profits, margins, ROI, financial metrics, or needs financial analysis of a company or project.
Open skill - /codebase-visualizer
Generate an interactive tree visualization of your codebase. Use when exploring a new repo or understanding project structure.
Open skill - /api-generating
Generate API endpoint code and documentation from specifications. Use when the user wants to create new API endpoints, generate route handlers, scaffold REST APIs, or produce OpenAPI/Swagger specs from code.
Open skill