react-component-generator_skill

Overview

This skill generates production-ready React components in TypeScript that follow modern best practices. It scaffolds .tsx files (optionally styling files), typed props interfaces, sensible default props, hooks usage, and accessibility considerations. Use it to quickly create buttons, inputs, forms, modals, data-fetching components, and other reusable UI pieces.

How this skill works

When triggered, the generator produces a complete, typed React component file with patterns such as forwardRef, hooks (useState, useEffect, useCallback), and optional integration examples (react-query, react-hook-form). It emits TypeScript types for props, default values for optional props, event handler typings, and recommended styling file choices (.module.css, .css, or styled-components). It also includes accessibility attributes, keyboard handling, loading/error states, and a barrel export pattern when requested.

When to use it

• Scaffolding a new UI component with TypeScript and React 18+
• Creating accessible components with proper ARIA and keyboard support
• Generating form components wired with react-hook-form and zod validation patterns
• Building data-fetching components integrated with react-query or similar
• Establishing consistent component file and export structure for a design system

Best practices

• Always export typed props and set sensible default values for optional props
• Use forwardRef and set displayName for components that accept refs
• Prefer explicit event types (ChangeEvent, KeyboardEvent) and Omit/extends patterns when extending HTML elements
• Include loading, error, and empty states for remote data components
• Keep component styles colocated (module CSS or styled-system) and provide an index barrel export for easy imports

Example use cases

• Button component with variants, sizes, loading state, and HTML button extension
• SearchInput with debounced value, keyboard submit, and accessible labels
• UserProfile data-fetching component using react-query with skeleton and error handling
• ContactForm using react-hook-form + zod resolver, validation, submit/cancel flows
• Modal dialog with focus trap, overlay click/escape handling, size variants, and composition (Footer)