---

name: create-component description: Create a new React component following project conventions. Use when creating components, UI elements, or reusable modules.

Create Component

Instructions

When creating a new component:

1. Create folder structure using kebab-case naming:

   Copysrc/components/[component-name]/
   ├── index.tsx
   └── [component-name].types.ts  # if types needed
   

2. Component template:

   Copyexport function ComponentName() {
     return (
       <div>
         {/* content */}
       </div>
     )
   }
   

3. With types:

   Copy// index.tsx
   import type { ComponentNameProps } from './component-name.types'
   
   export function ComponentName({ prop }: ComponentNameProps) {
     return <div>{prop}</div>
   }
   

   Copy// component-name.types.ts
   export interface ComponentNameProps {
     prop: string
   }
   

Naming Rules

Example

Creating user-profile component:

Copymkdir -p src/components/user-profile

Copy// src/components/user-profile/index.tsx
export function UserProfile() {
  return (
    <div className="user-profile">
      <h2>User Profile</h2>
    </div>
  )
}