react-component-generator

Dexploarer's avatarfrom Dexploarer

Generates React components with TypeScript, hooks, and best practices. Use when user asks to "create React component", "generate component", or "scaffold component".

⭐1stars🔀1forks📁View on GitHub🕐Updated Nov 23, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the creation of modern React components using TypeScript and hooks. It follows industry best practices to generate clean, maintainable code including styles, tests, and documentation, significantly accelerating the frontend development workflow and ensuring architectural consistency.

Use Cases

  • Rapidly scaffolding UI components like buttons, inputs, or cards with pre-defined TypeScript interfaces and CSS modules.
  • Generating complex functional components that require state management (useState) or side effects (useEffect) with standardized boilerplate.
  • Creating a complete component package including the main logic, associated styles, unit tests, and barrel exports for better project organization.
  • Ensuring new components adhere to specific coding standards such as functional patterns, proper prop destructuring, and comprehensive JSDoc documentation.
namereact-component-generator
descriptionGenerates React components with TypeScript, hooks, and best practices. Use when user asks to "create React component", "generate component", or "scaffold component".
allowed-tools[Write, Read, Glob]

React Component Generator

Generates modern React components following best practices with TypeScript support.

When to Use

  • "Create a Button component"
  • "Generate a UserProfile component"
  • "Scaffold a DataTable component"

Instructions

1. Gather Requirements

  • Component name (PascalCase)
  • Component type (functional, with state, with effects)
  • Props needed
  • TypeScript types
  • Styling approach

2. Generate Component Structure

Functional Component:

import React from 'react';
import styles from './ComponentName.module.css';

interface ComponentNameProps {
  // Props here
}

export const ComponentName: React.FC<ComponentNameProps> = ({
  // Destructure props
}) => {
  return (
    <div className={styles.container}>
      {/* Component JSX */}
    </div>
  );
};

With State:

import React, { useState } from 'react';

export const ComponentName: React.FC<Props> = () => {
  const [state, setState] = useState<Type>(initialValue);

  return <div>{/* ... */}</div>;
};

With Effects:

import React, { useEffect } from 'react';

export const ComponentName: React.FC<Props> = () => {
  useEffect(() => {
    // Effect logic
    return () => {
      // Cleanup
    };
  }, [dependencies]);

  return <div>{/* ... */}</div>;
};

3. Add PropTypes/TypeScript Interfaces

interface ComponentNameProps {
  title: string;
  onAction?: () => void;
  children?: React.ReactNode;
  className?: string;
}

4. Create Associated Files

  • ComponentName.tsx - Component file
  • ComponentName.module.css - Styles
  • ComponentName.test.tsx - Tests
  • index.ts - Barrel export

5. Add Documentation

/**
 * ComponentName - Brief description
 *
 * @example
 * <ComponentName title="Hello" onAction={handleClick} />
 */

Best Practices

  • Use functional components
  • TypeScript for type safety
  • CSS Modules for styling
  • Proper prop destructuring
  • Meaningful names
  • Add tests
  • Export from index.ts