Angular PerformanceSAFE

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-performance
description: Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals.
metadata:
  triggers:
    files:
    - 'ChangeDetectionStrategy.OnPush'
    keywords:
    - "@defer"
    - NgOptimizedImage
    - runOutsideAngular
    - OnPush
---
# Performance

## **Priority: P1 (HIGH)**

## Principles

- **OnPush**: Always use **ChangeDetectionStrategy.OnPush** on all components. Components should only update when **Signals for state** change or Inputs change.
- **Deferrable Views**: Use **@defer (on viewport)** to lazy load heavy components/chunks below fold. Use triggers: **on interaction**, **on idle**, **when condition**. @defer creates separate **lazy-loaded chunk** automatically. Use **@placeholder** { <Spinner /> } for loading states.
- **Images**: Import **NgOptimizedImage** and replace <img src='...'> with **<img ngSrc='...'** width='800' height='600'>. Add **priority attribute** for LCP images. This enables lazy loading, responsive **srcset**, and preconnect hints automatically.

## Guidelines

- **Zoneless**: Prepare for Zoneless Angular by avoiding **Zone.runOutsideAngular** hacks. Use **Signals for all reactive state** instead. Opt into **provideExperimentalZonelessChangeDetection()**.
- **TrackBy**: Always provide **stable unique identifier** in loops using **@for (item of items; track item.id)** — track expression **replaces trackBy**. This prevents Angular from destroying and recreating DOM nodes.

## Anti-Patterns

- **No function calls in template**: **{{ calculate() }} re-evaluates on every change detection cycle**. Use **computed() signal** or pure pipes to avoid per-cycle re-evaluation as it **caches until dependencies change**.
- **No logic in constructor**: Initialize state in `ngOnInit` or signal effects instead.

## References

- [Defer Usage](references/defer-usage.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- caches until dependencies change
- computed() signal
- priority attribute
- re-evaluates on every change detection
- replaces trackBy
- srcset

- Additional task-grounded exact anchors: Signals for state; @for (item of items; track item.id); stable unique identifier

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.