# Generate Component (gc)

Generate an FSD component using the project's generator script.

## Usage

```
/gc <layer> <ComponentName>
```

**Arguments:**
- `$ARGUMENTS` — expects `<layer> <ComponentName>`, e.g. `shared Button`, `entity ProjectCard`, `feature CreateProjectModal`

## Layers

| Alias | Path |
|-------|------|
| `shared` | `src/shared/ui/` |
| `entity` / `entities` | `src/entities/` |
| `feature` / `features` | `src/features/` |
| `widget` / `widgets` | `src/widgets/` |
| `page` / `pages` | `src/pages/` |

## Instructions

1. Parse `$ARGUMENTS` to extract `<layer>` and `<ComponentName>`. If arguments are missing or unclear, ask the user.

2. Run the generator:
   ```bash
   bun run gc <layer> <ComponentName>
   ```

3. This creates 4 files:
   - `index.ts` — re-exports the component
   - `<ComponentName>.tsx` — component implementation with `FunctionComponent`, `JSX.Element`, SCSS module import, `data-testid`
   - `<ComponentName>.d.ts` — props interface `I<ComponentName>Props` with `className?: string`
   - `<ComponentName>.module.scss` — empty `.root {}` class

4. After generation, report the created files and the full path.

5. If the user provides additional context about what the component should do or look like, modify the generated files accordingly:
   - Add props to the `.d.ts` file
   - Implement the component logic in `.tsx`
   - Add styles to `.module.scss`
   - Use existing project patterns: `classnames` as `cs`, typography/mixin includes from auto-injected SCSS partials, Radix UI primitives or Themes where appropriate, `lucide-react` icons

## Project Conventions

- Props interface: `I<ComponentName>Props` in a `.d.ts` file
- Import types with `import type { ... }`
- Import order: types → react/libs → path aliases (`@shared/`, `@entities/`, etc.) → local
- Use `cs()` from `classnames` for combining classes
- Root element gets `className={styles.root}` and `data-testid="<ComponentName>"`
- SCSS auto-injected namespaces: `variables`, `breakpoints`, `typography`, `mixins`
- Use `"use client"` directive only when component uses hooks or browser APIs