react-component-generator_skill

Overview

This skill generates production-ready React components using TypeScript, Tailwind CSS, and Zustand for state management. It provides templates and clear naming conventions to create consistent, accessible, and maintainable UI components. Use it to scaffold common patterns like forms, lists, cards, buttons, modals, and stateful components with minimal manual setup.

How this skill works

Pick the template that matches the requested component pattern and customize names, props, and styling to the specific use case. The templates include TypeScript interfaces, Tailwind classes, JSDoc comments, and optional Zustand store setup for shared or complex state. Follow the provided naming rules for components, props interfaces, and store hooks to keep the codebase consistent and easy to navigate.

When to use it

• User asks to create a new React component or UI element
• You need a form with validation, error handling, and submission logic
• You want a stateful component that uses Zustand for local or shared state
• You need a reusable list, card, button, or modal with accessibility in mind
• You want consistent TypeScript + Tailwind styling patterns applied automatically

Best practices

• Use PascalCase for component names and append Props to the props interface
• Keep components focused and composable; extract small pieces when repeated
• Use Zustand stores for related state and expose typed actions and selectors
• Prefer Tailwind mobile-first classes and keep class composition readable
• Add JSDoc and accessible markup (labels, ARIA roles, keyboard handlers)
• Memoize expensive renders and lazy-load heavy components where appropriate

Example use cases

• LoginForm: a validated login form with loading state and accessible inputs
• ProductCard: image, title, price and CTA styled with Tailwind
• TodoList: stateful list using a Zustand store with add/toggle/delete actions
• ConfirmModal: accessible modal with ESC/backdrop close and size variants
• PrimaryButton: variant-driven button with loading and disabled states