React Best Practices

The react-best-practices skill equips AI agents with the knowledge to generate clean, maintainable React code. It ensures outputs adhere to modern standards like functional components and hooks while avoiding common anti-patterns.

When to use it

• Refactoring legacy class-based components into modern functional equivalents.
• Generating new UI features that strictly follow current React ecosystem conventions.
• Debugging complex state management issues involving useEffect or context.
• Creating reusable custom hooks for shared logic across an application.

Key capabilities

• Enforces the use of functional components and JSX over class-based syntax.
• Promotes proper usage of React Hooks (useState, useEffect, etc.) for state handling.
• Encourages component composition and prop drilling minimization.
• Avoids deprecated patterns like this.state or inline style objects where CSS modules are preferred.

Example prompts

• "Create a reusable user profile card component using modern React hooks."
• "Refactor this class-based TodoList into a functional component with proper state management."
• "Explain the best practices for managing side effects in a React useEffect hook."

Tips & gotchas

This skill assumes the AI agent already understands basic JavaScript syntax; it focuses specifically on React architecture. For projects using specific libraries like Redux or Next.js, combine this with specialized skills for those ecosystems to ensure full compatibility.