Skill828 estrellas del repoactualizado 14d ago

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.

Ver fuente Repositorio: claude-code-engineering

Instalar en Claude Code

Copiar

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-

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

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           # 类型定义
```

Del mismo repositorio

code-reviewerSubagent

Review code changes for quality, security, and best practices. Proactively use this after code modifications.

test-runnerSubagent

Run tests and report results concisely. Use this after code changes to verify everything works.

log-analyzerSubagent

Analyze log files and extract actionable insights. Use when troubleshooting issues or investigating incidents.

api-explorerSubagent

Explore and analyze API-related code. Use when investigating endpoints, routing, or HTTP handling.

auth-explorerSubagent

Explore and analyze authentication-related code. Use when investigating auth flows, session management, or security.

db-explorerSubagent

Explore and analyze database-related code. Use when investigating data models, queries, or persistence.

bug-analyzerSubagent

Analyze root cause of bugs after location is identified. Second step in bug investigation.

bug-fixerSubagent

Implement bug fixes after analysis is complete. Third step in bug fix pipeline.