React Best Practices
Ensures modern React patterns — hooks, composition, proper state management, and performance optimization.
Quick Info
.cursorrulesWhat This Skill Does
A comprehensive React skill that guides your AI toward modern, performant React code. Covers proper hook usage, component composition, memoization strategies, state management best practices, and accessibility standards.
Tags
Skill Code Preview
Copy this code to your .cursorrules file
# React Best Practices
## Rules
- Use functional components with hooks exclusively
- Prefer composition over inheritance
- Memoize expensive computations with useMemo
- Use useCallback for event handlers passed to children
- Always include proper TypeScript types for propsInstallation Instructions
For Cursor:
- Create a file named
.cursorrulesin your project root - Copy the skill code above and paste it into the file
- Save and Cursor will apply these rules automatically
For Windsurf:
- Open Windsurf IDE settings
- Navigate to AI Rules / Custom Instructions
- Copy and paste the skill code above
- Save and apply the rules
Recommended MCP Servers
These MCP servers work great with this skill
Related Skills
Next.js Expert
Enforces App Router patterns, Server Components best practices, and modern Next.js 14+ conventions.
Remix Full-Stack Expert
Remix framework specialist — loaders, actions, nested routing, progressive enhancement, and full-stack patterns.
Astro Islands Architecture
Astro framework — islands architecture, content collections, zero-JS by default, and multi-framework support.
Need More AI Skills?
Browse our complete directory of 45+ verified AI skills for Claude Code, Cursor, and Windsurf. Find the perfect skills to supercharge your AI coding assistant.