Angular performance
Skill ComeOnOliver/skillshub/skills/HoangNguyen0403/agent-skills-standard/angular-performance
🧠The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.
npx -y skills add ComeOnOliver/skillshub --skill angular-performanceAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)
SKILL.md
1.9 KB, 368 tokens by cl100k_base, as published. Nobody here has run it
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 the fold. Use triggers: on interaction, on idle, when condition. @defer creates a 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 a stable unique identifier in loops using @for (item of items; track item.id) — the 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 a computed() signal or pure pipes to avoid per-cycle re-evaluation as it caches until dependencies change.
- No logic in constructor: Initialize state in
ngOnInitor signal effects instead.