Angular ComponentsSAFE

A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: angular-components
description: Build standalone Angular components with Signals inputs, OnPush change detection, Control Flow, and Smart/Dumb patterns. Use when building standalone Angular components, implementing @if/@for control flow, applying OnPush change detection, or implementing Signals in Angular components.
metadata:
  triggers:
    files:
    - '**/*.component.ts'
    - '**/*.component.html'
    keywords:
    - angular component
    - standalone
    - input signal
    - output
    - "@if"
    - "@for"
    - ChangeDetectionStrategy
    - OnPush
    - Input
    - Output
---
# Angular Components

## **Priority: P0 (CRITICAL)**

## Standalone & Structure

- **Standalone**: `standalone: true`. Import all deps in `imports` array. No NgModule. (Angular 20+: standalone default.)
- **Smart/Dumb Split**: **Smart (Container)** → inject services, manage state. **Presentational (Dumb)** → accept inputs and emit events via outputs only; no service dependencies.
- **Host Bindings**: Define in `host: { }` on `@Component` (e.g., `'[class.active]': 'isActive()'`) — never use @HostBinding/@HostListener.
- **View Encapsulation**: Default `Emulated`. Use `None` carefully.

## Signals & Change Detection

- **OnPush**: ALWAYS use `ChangeDetectionStrategy.OnPush`. No exceptions.
- **Signal Inputs**: `input.required<T>()` or `input<T>()` not `@Input()`. Access as functions: `{{ userId() }}`. Use `booleanAttribute`/`numberAttribute` transforms.
- **Signal Outputs**: `output<T>()` (v17.3+) not `@Output() EventEmitter`. Two-way binding: `model()`.
- **State**: `signal()` local, `computed()` derived, `effect()` side effects only.
- **Cleanup**: `toSignal()` (auto-unsubscribes), `takeUntilDestroyed()`, or `DestroyRef`. Never `subscribe()` without cleanup.

## Control Flow

- Use `@if (condition)`, `@for (item of items; track item.id)`, `@switch`, `@empty { }` instead of `*ngIf`/`*ngFor` (new control flow syntax, Angular 17+).

## Anti-Patterns

- **No default CD**: OnPush only — default re-checks every component every event.
- **No functions in templates**: `{{ calculate() }}` re-evaluates every cycle → `computed()` instead.
- **No manual subscribe**: `async` pipe or `toSignal`. Never `subscribe()` without cleanup.
- **No ElementRef mutation**: Directives or Renderer2.
- **No class inheritance**: Compose with Directives and Services.

## References

- [Standalone Pattern](references/standalone-pattern.md)
- [Control Flow](references/control-flow.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- @empty { }
- Never use @HostBinding
- Signal inputs
- inputs and emit events via outputs

- Additional task-grounded exact anchors: @if (condition); @for (item of items; track item.id); booleanAttribute; model(); Smart (Container); toSignal()

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.