Generate Production-Ready React Components

This skill generates modern, production-ready React components with TypeScript, proper architecture, accessibility, and industry best practices. Structurally it favors functional components with hooks over class components, clear TypeScript interfaces for props and state, single-responsibility components, composition over inheritance, and error boundaries where needed. A representative component - a Button with variant, size, loading, and disabled states - shows the pattern in full:

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  children: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  className?: string;
  'data-testid'?: string;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  onClick,
  className = '',
  'data-testid': testId,
}) => {
  const baseClasses = 'font-medium rounded-md focus:outline-none focus:ring-2';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
  };
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };

  return (
    <button
      type="button"
      disabled={disabled || loading}
      onClick={onClick}
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      data-testid={testId}
      aria-disabled={disabled || loading}
    >
      {children}
    </button>
  );
};

For TypeScript it defines clear prop interfaces with JSDoc comments, generic types for reusable components, properly typed event handlers, exported types for consumers, and discriminated unions for variant props. For accessibility it defaults to semantic HTML, correct ARIA attributes (aria-expanded, aria-controls, aria-labelledby), keyboard navigation, focus management, and screen-reader support - demonstrated in an accordion pattern that tracks open items in a Set, toggles single or multiple open sections, and wires ARIA relationships between headers and content regions. It builds supporting custom hooks for complex logic, such as a generic useLocalStorage<T> hook that persists state with error-safe JSON serialization.

For testing and documentation it adds data-testid attributes, JSDoc comments on all props and methods, usage examples in comments, and documented performance considerations. For performance it applies React.memo on expensive components, useCallback/useMemo where appropriate, React.lazy for heavy components, careful dependency arrays to avoid unnecessary re-renders, and proper key props on lists. It also reaches for modern patterns as needed: compound components, render props and children functions, context providers for shared state, custom hooks for reusable logic, and Suspense/error boundaries for async and failure handling.

Use it when you need a component generated to production standards from the start - typed, accessible, tested, and performant - rather than a quick prototype to be hardened later. Its own scope is components themselves: architecture, typing, accessibility, and performance patterns, not application-level state management or routing decisions.

Input is a component's functional requirements (variants, states, interactions). Output is a fully typed React functional component with its prop interface, accessibility attributes, supporting custom hooks where needed, and inline documentation.

Generated components target React with TypeScript, use Tailwind-style utility classes for styling in the shown examples, and are structured to work with standard React tooling (React.memo, React.lazy, Suspense, Context).

Frontend engineers who need consistently production-ready React components - typed, accessible, tested, and performant - generated to a repeatable standard rather than built ad hoc each time.