react

carlos-algms's avatarfrom carlos-algms

React best practices and guidelines for code generation

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 27, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a comprehensive set of React best practices and guidelines for high-quality code generation. It ensures the creation of modern, efficient, and type-safe React components and hooks using TypeScript. By enforcing functional component structures, optimized hook usage, and accessibility standards, it helps developers maintain a clean and consistent codebase while avoiding common pitfalls like unnecessary re-renders or namespace clutter.

Use Cases

  • New Component Creation: Automatically generate boilerplate-free functional components that follow modern React standards and TypeScript best practices.
  • Refactoring Legacy Code: Convert class-based components or outdated React patterns into clean, functional components with optimized hooks.
  • Standardizing Hook Logic: Implement custom hooks and state management with proper TypeScript generics and efficient dependency handling.
  • Ensuring Accessibility: Build UI elements that adhere to accessibility (a11y) best practices, including proper ARIA attributes and semantic HTML.
namereact

React Protocol

Component Structure

  • Functional components only (no classes)
  • No import React from 'react' — import individually
  • Never use React.* namespace (e.g., React.useState, React.ReactNode)
  • Export default in single expression
  • No return types for components (TypeScript infers)
// ✓ Good
import { useState, type ReactNode } from 'react';

export default function MyComponent() {
  return <div>Hello</div>;
}

// ✗ Bad
import React from 'react';
function MyComponent(): JSX.Element { ... }
export default MyComponent;

Hooks

  • useState generic only for unions/complex types (not for string, boolean, number)
  • No useCallback for same-component functions
  • useCallback acceptable for functions returned from custom hooks
  • Named functions (not arrows) for async/complex logic inside hooks
// ✓ Good
const [name, setName] = useState(''); // no generic needed
const [status, setStatus] = useState<'a' | 'b'>('a'); // union needs generic

useEffect(() => {
  async function fetchData() {
    const res = await fetch('/api');
  }
  void fetchData();
}, []);

Other Rules

  • Follow accessibility best practices
  • displayName only for forwardRef components
  • Fragment <> only for multiple siblings
// ✓ forwardRef with displayName
const MyInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref={ref} {...props} />
));
MyInput.displayName = 'MyInput';

// ✓ Fragment for siblings
return (
  <>
    <div>First</div>
    <div>Second</div>
  </>
);

// ✗ Unnecessary fragment
return (
  <>
    <div>Only child</div>
  </>
);