react-component-generator - Claude MCP Skill

# React Component Generator

This skill provides templates and best practices for generating high-quality React components using TypeScript, Tailwind CSS, and Zustand for state management.

## Purpose

Generate production-ready React components that follow industry best practices and maintain consistency across the codebase. The skill includes pre-built templates for common component patterns and comprehensive best practices documentation.

## When to Use This Skill

Use this skill when:
- The user requests creating a new React component
- The user asks for UI elements like forms, buttons, cards, lists, or modals
- The user mentions component generation or scaffolding
- The user needs a component with Zustand state management
- The user wants to follow React best practices

## Available Component Templates

The skill provides the following templates in the `assets/` directory:

### 1. BasicComponent.tsx
A simple presentational component template for UI elements without complex state.

**When to use:**
- Simple UI elements (headers, footers, containers)
- Presentational components that receive data via props
- Reusable layout components

**Key features:**
- TypeScript interface for props
- JSDoc documentation
- Tailwind CSS styling
- Children support

### 2. StatefulComponent.tsx
A component with integrated Zustand store for state management.

**When to use:**
- Components requiring complex local state
- Components with multiple related state values
- Components with state that might be shared across instances
- Components with async operations

**Key features:**
- Complete Zustand store setup
- State and actions separation
- TypeScript interfaces for store
- Loading state handling

### 3. FormComponent.tsx
A form component with validation, error handling, and submission logic.

**When to use:**
- Login/registration forms
- Contact forms
- Data entry forms
- Any form with validation requirements

**Key features:**
- Built-in validation logic
- Error state management
- Form submission handling
- Accessible form inputs with labels
- Loading state during submission

### 4. ListComponent.tsx
A reusable list component for displaying collections of items.

**When to use:**
- Todo lists
- User lists
- Product catalogs
- Any itemized data display

**Key features:**
- Generic item type support
- Item click handlers
- Delete functionality
- Empty state handling
- Responsive design

### 5. CardComponent.tsx
A flexible card component for content display.

**When to use:**
- Product cards
- User profile cards
- Content previews
- Dashboard widgets

**Key features:**
- Optional image section
- Header and footer sections
- Click handling
- Flexible content area

### 6. ButtonComponent.tsx
A versatile button component with multiple variants and states.

**When to use:**
- Any button needs in the application
- Call-to-action buttons
- Form submission buttons
- Action buttons

**Key features:**
- Multiple variants (primary, secondary, danger, success, outline)
- Multiple sizes (sm, md, lg)
- Loading state with spinner
- Disabled state
- Full-width option

### 7. ModalComponent.tsx
A modal/dialog component with backdrop and accessibility features.

**When to use:**
- Confirmation dialogs
- Content detail views
- Settings panels
- Any overlay UI

**Key features:**
- ESC key handling
- Backdrop click to close
- Body scroll prevention
- Multiple sizes
- Accessible markup

## How to Use Templates

When generating a component:

1. **Identify the component type** - Determine which template best fits the user's requirements.

2. **Read the appropriate template** - Load the template file from the `assets/` directory:
   ```
   Read assets/BasicComponent.tsx
   ```

3. **Customize the template** - Replace placeholder names and add specific functionality:
   - Replace `ComponentName` with the actual component name (PascalCase)
   - Update the interface name from `ComponentNameProps` to match
   - If using Zustand, update `useComponentNameStore` to match
   - Modify props to match requirements
   - Adjust Tailwind classes for styling
   - Add or remove features as needed

4. **Follow naming conventions** - Refer to `references/best-practices.md` for:
   - Component naming (PascalCase)
   - Props interface naming (ComponentName + "Props")
   - Store naming (use + ComponentName + "Store")
   - File organization

5. **Apply best practices** - Consult `references/best-practices.md` for guidance on:
   - TypeScript patterns
   - Zustand store structure
   - Tailwind CSS class organization
   - Accessibility requirements
   - Performance optimization
   - Error handling

## Component Naming Guidelines

Apply these naming rules when generating components:

1. **Component name**: Use PascalCase based on the user's description
   - "login form" → `LoginForm`
   - "user profile card" → `UserProfileCard`
   - "data table" → `DataTable`

2. **Props interface**: ComponentName + "Props"
   - `LoginForm` → `LoginFormProps`
   - `UserProfileCard` → `UserProfileCardProps`

3. **Zustand store**: "use" + ComponentName + "Store"
   - `LoginForm` → `useLoginFormStore`
   - `DataTable` → `useDataTableStore`

4. **File name**: Match the component name exactly
   - `LoginForm` → `LoginForm.tsx`
   - `UserProfileCard` → `UserProfileCard.tsx`

## Best Practices Reference

For detailed guidance, consult `references/best-practices.md` which covers:

- Component structure and file organization
- TypeScript best practices
- Zustand state management patterns
- Tailwind CSS organization and responsive design
- Component composition patterns
- Event handler naming
- Performance optimization (memoization, lazy loading)
- Accessibility (semantic HTML, ARIA, keyboard navigation)
- Error handling and boundaries
- Testing considerations

## Example Workflow

**User request**: "Create a user login form component"

**Steps**:
1. Identify that this requires a form component
2. Read `assets/FormComponent.tsx` template
3. Customize for login use case:
   - Rename to `LoginForm`
   - Update `LoginFormProps` interface
   - Modify form fields (username/email, password)
   - Add appropriate validation
   - Update styling with Tailwind classes
4. Place in appropriate directory (e.g., `components/auth/LoginForm.tsx`)
5. Verify accessibility and best practices

**User request**: "Create a product card with image and price"

**Steps**:
1. Identify that this requires a card component
2. Read `assets/CardComponent.tsx` template
3. Customize for product use case:
   - Rename to `ProductCard`
   - Update `ProductCardProps` to include price, product details
   - Adjust image section for product photos
   - Add price display in content or footer
   - Style with Tailwind for product display
4. Place in `components/products/ProductCard.tsx`

**User request**: "Create a todo list with Zustand"

**Steps**:
1. Identify that this requires a stateful list component
2. Read both `assets/StatefulComponent.tsx` and `assets/ListComponent.tsx`
3. Combine patterns:
   - Create Zustand store for todo state management
   - Use list display pattern for rendering todos
   - Add todo-specific actions (add, toggle, delete)
   - Integrate form for adding new todos
4. Name as `TodoList` with `useTodoListStore`
5. Place in `components/todos/TodoList.tsx`

## Notes

- Always use TypeScript with proper type definitions
- Follow Tailwind's mobile-first responsive design approach
- Include proper JSDoc comments for better IDE support
- Ensure components are accessible (ARIA labels, keyboard navigation)
- Consider performance (memoization for expensive operations)
- Keep components focused and composable
- Export both named and default exports for flexibility