react-specialist by 404kidwiz/claude-supercode-skills
npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill react-specialist提供专业的 React 开发专业知识,专注于 React 18+、Next.js 生态系统和现代 React 模式。使用 Hooks、并发特性、Zustand 等状态管理解决方案以及 TanStack Query 进行数据获取,构建高性能、可扩展的 React 应用程序。
在以下情况下调用此技能:
在以下情况下请勿调用:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
从这里开始: 需要什么类型的状态?
├─ 服务器状态(API 数据)?
│ ├─ 使用 TanStack Query (React Query)
│ │ 优点:缓存、自动重新获取、乐观更新
│ │ 成本:13KB gzipped
│ │ 适用场景:从 API 获取数据
│ │
│ └─ 或者 SWR (Vercel)
│ 优点:更轻量(4KB),功能相似
│ 缺点:功能完整性不如 React Query
│ 适用场景:包体积至关重要
│
├─ 客户端状态(UI 状态)?
│ ├─ 简单(1-2 个组件) → useState/useReducer
│ │ 优点:内置,无依赖
│ │ 缺点:深层组件树需要属性透传
│ │
│ ├─ 全局(应用范围) → Zustand
│ │ 优点:API 简单,1KB,无样板代码
│ │ 缺点:无时间旅行调试
│ │ 适用场景:简单的全局状态需求
│ │
│ ├─ 复杂(嵌套、计算) → Jotai 或 Valtio
│ │ Jotai:原子状态(类似 Recoil 但更轻量)
│ │ Valtio:基于代理(类似可变 API)
│ │
│ └─ 企业级(DevTools、中间件) → Redux Toolkit
│ 优点:DevTools、中间件、成熟模式
│ 缺点:冗长,包含中间件 >40KB
│ 适用场景:需要审计日志、时间旅行调试
│
└─ 表单状态?
├─ 简单(<5 个字段) → useState + 验证
├─ 复杂 → React Hook Form
│ 优点:性能(非受控),25KB
│ 缺点:学习曲线
│
└─ 需要模式验证 → React Hook Form + Zod
完整的类型安全 + 运行时验证
| 问题 | 症状 | 解决方案 | 预期改进 |
|---|---|---|---|
| 初始加载慢 | FCP >2s, LCP >2.5s | 代码分割 (React.lazy) | 提速 40-60% |
| 重复渲染风暴 | 组件每秒渲染 10+ 次 | React.memo, useMemo | 减少 80%+ |
| 包体积过大 | JS 包 >500KB | 摇树优化、动态导入 | 缩小 30-50% |
| 列表渲染慢 | 列表 >1000 项卡顿 | react-window/react-virtualized | 提速 90%+ |
| 计算开销大 | 交互时 CPU 飙升 | useMemo, web workers | 提速 50-70% |
| 属性透传 | 属性传递超过 5 层 | Context API 或状态库 | 代码更清晰 |
| 使用场景 | 模式 | 复杂度 | 灵活性 | 示例 |
|---|---|---|---|---|
| 简单 UI | Props + children | 低 | 低 | <Button>点击</Button> |
| 配置 | Props 对象 | 低 | 中 | <Button config={{...}} /> |
| 复杂组合 | 复合组件 | 中 | 高 | <Tabs><Tab /></Tabs> |
| 渲染灵活性 | Render props | 中 | 非常高 | <List render={...} /> |
| 无头 UI | 自定义 Hooks | 高 | 最大 | useSelect() |
| 多态 | as 属性 | 中 | 高 | <Text as="h1" /> |
遇到以下情况请立即停止并升级:
每周安装数
75
代码仓库
GitHub 星标数
42
首次出现
2026年1月24日
安全审计
安装于
opencode61
gemini-cli56
codex54
cursor53
claude-code50
github-copilot48
Provides expert React development expertise specializing in React 18+, Next.js ecosystem, and modern React patterns. Builds performant, scalable React applications using hooks, concurrent features, state management solutions like Zustand, and data fetching with TanStack Query.
Invoke this skill when:
Do NOT invoke when:
Start here: What type of state?
├─ Server state (API data)?
│ ├─ Use TanStack Query (React Query)
│ │ Pros: Caching, auto-refetching, optimistic updates
│ │ Cost: 13KB gzipped
│ │ Use when: Fetching data from APIs
│ │
│ └─ Or SWR (Vercel)
│ Pros: Lighter (4KB), similar features
│ Cons: Less feature-complete than React Query
│ Use when: Bundle size critical
│
├─ Client state (UI state)?
│ ├─ Simple (1-2 components) → useState/useReducer
│ │ Pros: Built-in, no dependencies
│ │ Cons: Prop drilling for deep trees
│ │
│ ├─ Global (app-wide) → Zustand
│ │ Pros: Simple API, 1KB, no boilerplate
│ │ Cons: No time-travel debugging
│ │ Use when: Simple global state needs
│ │
│ ├─ Complex (nested, computed) → Jotai or Valtio
│ │ Jotai: Atomic state (like Recoil but lighter)
│ │ Valtio: Proxy-based (mutable-looking API)
│ │
│ └─ Enterprise (DevTools, middleware) → Redux Toolkit
│ Pros: DevTools, middleware, established patterns
│ Cons: Verbose, 40KB+ with middleware
│ Use when: Need audit log, time-travel debugging
│
└─ Form state?
├─ Simple (<5 fields) → useState + validation
├─ Complex → React Hook Form
│ Pros: Performance (uncontrolled), 25KB
│ Cons: Learning curve
│
└─ With schema validation → React Hook Form + Zod
Full type safety + runtime validation
| Issue | Symptom | Solution | Expected Improvement |
|---|---|---|---|
| Slow initial load | FCP >2s, LCP >2.5s | Code splitting (React.lazy) | 40-60% faster |
| Re-render storm | Component renders 10+ times/sec | React.memo, useMemo | 80%+ reduction |
| Large bundle | JS bundle >500KB | Tree shaking, dynamic imports | 30-50% smaller |
| Slow list rendering | List >1000 items laggy | react-window/react-virtualized | 90%+ faster |
| Expensive computation | CPU spikes on interaction | useMemo, web workers | 50-70% faster |
| Prop drilling | 5+ levels of props |
| Use Case | Pattern | Complexity | Flexibility | Example |
|---|---|---|---|---|
| Simple UI | Props + children | Low | Low | <Button>Click</Button> |
| Configuration | Props object | Low | Medium | <Button config={{...}} /> |
| Complex composition | Compound components | Medium | High | <Tabs><Tab /></Tabs> |
STOP and escalate if:
Weekly Installs
75
Repository
GitHub Stars
42
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode61
gemini-cli56
codex54
cursor53
claude-code50
github-copilot48
GSAP 框架集成指南:Vue、Svelte 等框架中 GSAP 动画最佳实践
3,000 周安装
| Context API or state library |
| Cleaner code |
| Render props |
| Medium |
| Very High |
<List render={...} /> |
| Headless UI | Custom hooks | High | Maximum | useSelect() |
| Polymorphic | as prop | Medium | High | <Text as="h1" /> |