dev-create-component

name	dev-create-component
description	Use when adding a new UI component to an existing module - handles templates, inputs, and test scaffolding.
user-invocable	true
argument-hint	[ComponentName]
allowed-tools	Read, Write, Edit, Bash, Glob, Grep

Create an Angular standalone component following docs/ARCHITECTURE.md section 5.

Component: $ARGUMENTS

Steps

1. Read docs/ARCHITECTURE.md section 5.

2. Determine the type:

   • Feature component -> src/modules/[module]/components/kebab-case.component.ts
   • Shared component -> src/shared/components/kebab-case.component.ts
   • Page -> src/modules/[module]/pages/kebab-case-page.component.ts

3. Create the component with the standard template:

import { Component, ChangeDetectionStrategy, inject, input, output, signal, computed } from '@angular/core'

@Component({
  selector: 'app-kebab-case',
  standalone: true,
  imports: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- clean template, < 100 lines -->
  `,
})
export class PascalCaseComponent {
  // Inputs / Outputs (signal-based)
  readonly myInput = input<string>()
  readonly myOutput = output<string>()

  // Injected dependencies
  private readonly service = inject(MyService)

  // Local state, computed, handlers...
}

4. Checklist:

   • Standalone component ✅
   • input()/output() signals ✅
   • inject() for DI ✅
   • OnPush change detection ✅
   • < 200 lines ✅
   • kebab-case.component.ts ✅

5. Validate: npx tsc --noEmit