main_frontend/.claude/commands/gc.md

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:

   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