1---
2name: React Component Generator
3description: Scaffold a typed React component with Tailwind and Storybook
4---
5
6Create a new React component named $ARGUMENTS.
7
8## What to generate
9
101. **Component file** at `components/<ComponentName>/<ComponentName>.tsx`
11   - Typed props interface exported as `<ComponentName>Props`
12   - Default export of the component
13   - Tailwind CSS classes for styling (no inline styles)
14   - Forward ref if the element wraps a native DOM element
15   - JSDoc comment on the component
16
172. **Index barrel** at `components/<ComponentName>/index.ts`
18   ```ts
19   export { default } from "./<ComponentName>"
20   export type { <ComponentName>Props } from "./<ComponentName>"
21   ```
22
233. **Storybook story** at `components/<ComponentName>/<ComponentName>.stories.tsx`
24   - Default meta with `component` and `tags: ["autodocs"]`
25   - At least two named stories: `Default` and one variant
26
27## Example (Button component)
28
29```tsx
30export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
31  variant?: "primary" | "secondary" | "ghost"
32  size?: "sm" | "md" | "lg"
33  loading?: boolean
34}
35
36export default function Button({
37  variant = "primary",
38  size = "md",
39  loading = false,
40  children,
41  className,
42  ...props
43}: ButtonProps) {
44  return (
45    <button
46      className={cn(buttonVariants({ variant, size }), className)}
47      disabled={loading || props.disabled}
48      {...props}
49    >
50      {loading && <Spinner className="mr-2 h-4 w-4 animate-spin" />}
51      {children}
52    </button>
53  )
54}
55```
56