React Best Practices
0xbigboss/claude-codeWriting React code can be tricky. This guide shows you the right way to build components with TypeScript. You will learn when to use effects and when to avoid them. Strong patterns help you keep your code simple and fast.
Use event handlers for user actions. Calculate values during render instead of effects. For expensive work, use useMemo. When you need to work with browser APIs or non-React libraries, use an Effect with cleanup. Refs are for values that do not affect rendering.
Custom hooks let you share logic, not state. Prefer composition over prop drilling. Break large components into smaller parts. This skill helps anyone who writes React code every day.
Add React Best Practices skill to your workflow
Global
mkdir -p ~/.claude/skills/react-best-practicesProject
mkdir -p .claude/skills/react-best-practicesSource Repository
More Frontend Development Claude Code Skills
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density