Component Library

2. Gather Requirements

Ask the user (via vscode/askQuestions):

• What is the component's purpose?
• What variants/states does it need? (e.g., primary, secondary, disabled, loading)
• What inputs and outputs should it expose?
• Does it have a Figma design? → Hand off to figma-to-code skill if yes

3. Generate Component Files

Create a colocated component directory under the relevant feature area:

src/app/{feature}/{component-name}/
├── {component-name}.component.ts       # Component class + decorator
├── {component-name}.component.html     # Template
├── {component-name}.component.css      # Scoped styles
└── {component-name}.component.spec.ts  # Unit tests

Component scaffold:

import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';

@Component({
  selector: 'app-{component-name}',
  standalone: true,
  imports: [],
  templateUrl: './{component-name}.component.html',
  styleUrl: './{component-name}.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class {ComponentName}Component {
  /** Description of input */
  readonly label = input.required<string>();

  /** Emitted when the primary action is triggered */
  readonly actionTriggered = output<void>();
}

4. Implementation Checklist

For every new component, verify:

• Standalone component with ChangeDetectionStrategy.OnPush
• Inputs use input() / input.required() signal API
• Outputs use output() signal API
• Dependencies injected via inject() — no constructor injection
• readonly modifier on all Angular-managed properties
• protected access on template-only members
• All interactive elements are keyboard-navigable
• aria-label provided for icon-only variants
• Loading and error states handled with @if control flow
• Design tokens used (no hardcoded colors, spacing, fonts)
• Tests cover: default render, all variants, key interactions, edge cases

5. Update Memory

After creating the component, update .github/ui-wizard/memory.md:

• Add entry to ## Component Inventory table
• Set status to in-progress or complete

Composition Patterns

See references/composition.md for detailed patterns:

• Content Projection: <ng-content> for flexible templates
• Named Slots: <ng-content select="[slot-name]"> for multi-slot layouts
• Structural patterns: Use @if, @for, @switch in templates
• Component communication: input() / output() / model() signals

Component API Reference

See references/components.md for the full API reference of existing components.

Gotchas

• Don't create inline components — even small ones should get their own file if reused
• Avoid prop drilling — if a component needs data from 3+ levels up, consider a service or content projection
• Don't over-abstract early — start concrete, generalize when you see the third use case
• OnPush + signals — with OnPush, template expressions must read signals synchronously; avoid async calls in templates
• Signal inputs are required or have defaults — never read an input() outside Angular's reactive context