front/.kilo/command/new-component.md

/new-component Command

Create a new global reusable component.

Usage

/new-component <component-name> [type]

Parameters

• component-name: The component name (e.g., status-badge, time-picker)
• type: Optional component type (dialog, drawer, form, display, chart)

What This Command Does

1. Creates component file: src/components/{component-name}/index.vue

2. Generates template following Arco Design patterns:

   • Props definition with TypeScript types
   • Emits definition with typed events
   • Scoped styles with Less

3. Optionally registers in src/components/index.ts for global use

Example

/new-component status-badge display

Creates a display component for showing status with color-coded badges.