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:

   code

   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