React Component Generator

This generates production-ready React components with TypeScript interfaces, proper accessibility attributes, and modern patterns baked in. You get templates for client components with hooks and state, server components with async data fetching, and form components with React Hook Form and Zod validation. It includes the boilerplate most developers copy between projects anyway: variant systems, size props, loading states, and ARIA attributes for screen readers. The accessibility checklist alone saves you from forgetting keyboard navigation or error announcements. Use it when you're scaffolding new components or want consistent patterns across your codebase without writing the same setup code every time.

skills.sh installs: 332
GitHub stars: 422
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add onewave-ai/claude-skills --skill react-component-generator --agent claude-code

Installs into .claude/skills of the current project.

Files

React Component Generator

Instructions

When creating React components:

Determine component type: Client or Server component
Define props interface with TypeScript
Implement with best practices
Add accessibility attributes

Templates

Client Component

'use client';

import { useState, useCallback } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  children: React.ReactNode;
}

export function Button({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  children,
  className,
  disabled,
  ...props
}: ButtonProps) {
  const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2';

  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'hover:bg-gray-100',
  };

  const sizes = {
    sm: 'h-8 px-3 text-sm',
    md: 'h-10 px-4',
    lg: 'h-12 px-6 text-lg',
  };

SKILL.md on GitHub