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:

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

Read the appropriate template - Load the template file from the assets/ directory:

Read assets/BasicComponent.tsx

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

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

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:

Component name: Use PascalCase based on the user's description

• "login form" → LoginForm

• "user profile card" → UserProfileCard

• "data table" → DataTable

Props interface: ComponentName + "Props"

• LoginForm → LoginFormProps

• UserProfileCard → UserProfileCardProps

Zustand store: "use" + ComponentName + "Store"

• LoginForm → useLoginFormStore

• DataTable → useDataTableStore

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:

• Identify that this requires a form component

• Read assets/FormComponent.tsx template

• 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

• Place in appropriate directory (e.g., components/auth/LoginForm.tsx )

• Verify accessibility and best practices

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

Steps:

• Identify that this requires a card component

• Read assets/CardComponent.tsx template

• 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

• Place in components/products/ProductCard.tsx

User request: "Create a todo list with Zustand"

Steps:

• Identify that this requires a stateful list component

• Read both assets/StatefulComponent.tsx and assets/ListComponent.tsx

• 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

• Name as TodoList with useTodoListStore

• 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