When should I use react-patterns?

react-patterns is useful in the following scenarios: • Scaffolding new React functional components with predefined TypeScript interfaces and prop types to ensure type safety. • Implementing robust data-fetching logic with standardized loading and error states for improved user experience. • Refactoring legacy code into modern React patterns using hooks like useState and useEffect for cleaner state management. • Enforcing consistent naming conventions for event handlers and BEM-style CSS architecture across a frontend codebase.

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for building high-quality React components using modern best practices. It streamlines frontend development by enforcing standards for functional components, React Hooks, TypeScript interfaces, and structured state management, ensuring that generated code is consistent, maintainable, and production-ready.

Use Cases

Scaffolding new React functional components with predefined TypeScript interfaces and prop types to ensure type safety.
Implementing robust data-fetching logic with standardized loading and error states for improved user experience.
Refactoring legacy code into modern React patterns using hooks like useState and useEffect for cleaner state management.
Enforcing consistent naming conventions for event handlers and BEM-style CSS architecture across a frontend codebase.

name	react-patterns
description	React component patterns including functional components, hooks, state management, API integration, loading/error states, and event handlers. Use when creating or reviewing React components.

name

react-patterns

description

React component patterns including functional components, hooks, state management, API integration, loading/error states, and event handlers. Use when creating or reviewing React components.

React Patterns

Overview

These patterns ensure consistent, maintainable React components with TypeScript. Follow these guidelines for all frontend development.

Component Structure

Functional Components Only

Always use functional components with hooks:

export function TaskList({ tasks, onTaskClick }: TaskListProps) {
  return (
    <ul className="task-list">
      {tasks.map(task => (
        <TaskItem key={task.id} task={task} onClick={onTaskClick} />
      ))}
    </ul>
  );
}

Component File Structure

components/
├── TaskList/
│   ├── TaskList.tsx       # Component implementation
│   ├── TaskList.css       # Component styles
│   └── index.ts           # Re-export

TypeScript Interfaces

Props Interfaces

Define props interfaces for every component:

interface TaskListProps {
  tasks: Task[];
  onTaskClick: (task: Task) => void;
  isLoading?: boolean;
}

export function TaskList({ tasks, onTaskClick, isLoading = false }: TaskListProps) {
  // ...
}

State Management

useState for Local State

const [title, setTitle] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);

useEffect for Side Effects

useEffect(() => {
  fetchTasks();
}, []);

Loading and Error States

Always Handle All States

if (isLoading) {
  return <div className="loading">Loading tasks...</div>;
}

if (error) {
  return <div className="error">Error: {error}</div>;
}

if (tasks.length === 0) {
  return <div className="empty">No tasks yet. Create one!</div>;
}

Event Handlers

Naming Convention

Prefix with handle for component handlers, on for props:

interface TaskItemProps {
  task: Task;
  onComplete: (id: string) => void;  // Prop callback
}

function TaskItem({ task, onComplete }: TaskItemProps) {
  function handleCompleteClick() {  // Local handler
    onComplete(task.id);
  }
  // ...
}

CSS Styling

Component-Scoped CSS

Each component has its own CSS file with BEM-like naming:

.task-list - Block
.task-item - Element
.task-item.completed - Modifier