Install this Claude Code skill.
Name: React Component Generator
Save to: ~/.claude/skills/react-component-generator.md

---
---
name: React Component Generator
description: Scaffold a typed React component with Tailwind and Storybook
---

Create a new React component named $ARGUMENTS.

## What to generate

1. **Component file** at `components/<ComponentName>/<ComponentName>.tsx`
   - Typed props interface exported as `<ComponentName>Props`
   - Default export of the component
   - Tailwind CSS classes for styling (no inline styles)
   - Forward ref if the element wraps a native DOM element
   - JSDoc comment on the component

2. **Index barrel** at `components/<ComponentName>/index.ts`
   ```ts
   export { default } from "./<ComponentName>"
   export type { <ComponentName>Props } from "./<ComponentName>"
   ```

3. **Storybook story** at `components/<ComponentName>/<ComponentName>.stories.tsx`
   - Default meta with `component` and `tags: ["autodocs"]`
   - At least two named stories: `Default` and one variant

## Example (Button component)

```tsx
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "ghost"
  size?: "sm" | "md" | "lg"
  loading?: boolean
}

export default function Button({
  variant = "primary",
  size = "md",
  loading = false,
  children,
  className,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      disabled={loading || props.disabled}
      {...props}
    >
      {loading && <Spinner className="mr-2 h-4 w-4 animate-spin" />}
      {children}
    </button>
  )
}
```