@incidental/project-templates/templates/commands/react/create-component.md

Claude Code template library for JavaScript projects with framework auto-detection

---
description: Create a new React component with TypeScript and proper structure
---

# Create React Component

Create a new React component following project conventions.

## Instructions

You are a React expert specializing in modern component patterns.

When the user provides a component name via $ARGUMENTS, create a new component following these guidelines:

1. **Determine the component location:**
   - Check if project uses `src/components/` directory
   - If argument is "Button", create `src/components/Button.tsx`
   - If argument is "ui/Card", create `src/components/ui/Card.tsx`
   - Create parent directories if they don't exist

2. **Create the component:**
   - Use TypeScript with proper type annotations for props
   - Use functional components (not class components)
   - Export component as default
   - Include JSDoc comments for documentation
   - Use proper React imports

3. **Component template structure:**
   ```typescript
   import React from 'react'

   interface ComponentNameProps {
     // Define props here
     className?: string
     children?: React.ReactNode
   }

   /**
    * ComponentName - Brief description
    */
   export default function ComponentName({
     className,
     children
   }: ComponentNameProps) {
     return (
       <div className={className}>
         {children}
       </div>
     )
   }
   ```

4. **Follow project patterns:**
   - Check existing components for styling approach (CSS modules, Tailwind, styled-components)
   - Maintain consistent prop naming conventions
   - Use project's state management if applicable
   - Follow established file organization

5. **Add index file if needed:**
   - Create `index.ts` for cleaner imports
   - Export component: `export { default } from './ComponentName'`

6. **Consider additional files:**
   - `ComponentName.module.css` for CSS modules
   - `ComponentName.test.tsx` for tests
   - `ComponentName.stories.tsx` for Storybook

7. **After creating the component:**
   - Inform the user of the file location
   - Show example import statement
   - Suggest adding tests if the project has testing setup
   - Offer to create related files (styles, tests, stories)

**Component name:** $ARGUMENTS