react-component-generator（React component 生成器）

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

1. 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

1. 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

1. Props interface: ComponentName + "Props"

- LoginForm → LoginFormProps - UserProfileCard → UserProfileCardProps

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

- LoginForm → useLoginFormStore - DataTable → useDataTableStore

1. 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

1. Place in appropriate directory (e.g., components/auth/LoginForm.tsx)
2. 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

1. 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

1. Name as TodoList with useTodoListStore
2. 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