huangjia2019/claude-code-engineering/react-patterns

Claude Code and agent skill by huangjia2019/claude-code-engineering

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

React 组件设计模式、Hooks 使用指南、性能优化技巧

Install

npx vskill@latest install huangjia2019/claude-code-engineering/react-patterns

SKILL.md

React 最佳实践

本技能包含 React 开发的最佳实践，帮助你编写高质量的 React 代码。

目录

当用户需要特定主题时，加载对应章节：

只在用户明确需要时加载完整内容，避免浪费上下文窗口。

核心原则

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

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
783
Repository forks
290
7-day trend score
33

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/huangjia2019/claude-code-engineering/react-patterns/badge)](https://verified-skill.com/skills/huangjia2019/claude-code-engineering/react-patterns)

Something wrong with this skill or its page? Tell us.