angular-performance
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)
Best use case
angular-performance is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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)
Teams using angular-performance should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/angular-performance/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How angular-performance Compares
| Feature / Agent | angular-performance | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 `ngOnInit` or signal effects instead.
## References
- [Defer Usage](references/defer-usage.md)Related Skills
react-performance
Optimize React rendering, bundle size, and data fetching performance. Use when optimizing React rendering performance, reducing re-renders, or improving bundle size. (triggers: **/*.tsx, **/*.jsx, waterfall, bundle, lazy, suspense, dynamic)
react-native-performance
Optimize React Native rendering for smooth 60fps mobile experiences. Use when optimizing React Native app performance, reducing re-renders, or fixing frame drops. (triggers: **/*.tsx, **/*.ts, FlatList, memo, useMemo, useCallback, performance, optimization)
nestjs-performance
Optimize NestJS throughput with Fastify adapter, singleton scope enforcement, compression, and query projections. Use when switching to Fastify, diagnosing request-scoped bottlenecks, or profiling API overhead. (triggers: main.ts, FastifyAdapter, compression, SINGLETON, REQUEST scope)
ios-performance
Profile and optimize iOS apps with Instruments, memory management, and rendering techniques. Use when profiling iOS apps with Instruments or optimizing memory and rendering. (triggers: **/*.swift, Instruments, Allocations, Leaks, dequeueReusableCell)
flutter-performance
Optimization standards for rebuilds and memory. Use when optimizing Flutter widget rebuilds, reducing memory usage, or improving rendering performance. (triggers: lib/presentation/**, pubspec.yaml, const, buildWhen, ListView.builder, Isolate, RepaintBoundary)
angular-tooling
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
angular-testing
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)
angular-style-guide
Naming conventions, file structure, and coding standards for Angular projects. Use when naming Angular files, organizing project structure, or following Angular style guide. (triggers: angular style, naming convention, file structure, angular-style-guide)
angular-state-management
Implement application state with Angular Signals, computed derivations, and NgRx Signal Store. Use when implementing reactive state with signal(), computed(), effect(), or @ngrx/signals in Angular. (triggers: **/*.store.ts, **/state/**, angular signals, signal store, computed, effect, linkedSignal)
angular-ssr
Implement Angular SSR with hydration, TransferState caching, and per-route render modes. Use when configuring Angular Universal SSR, client hydration, static prerendering, or preventing double-fetching. (triggers: **/*.server.ts, server.ts, hydration, transferState, afterNextRender, isPlatformServer, RenderMode)
angular-security
Harden Angular apps against XSS, CSP violations, and unauthorized access. Use when implementing XSS protection, Content Security Policy, or auth guards in Angular. (triggers: DomSanitizer, innerHTML, bypassSecurityTrust, CSP, angular security, route guard)
angular-rxjs-interop
Bridge Observables and Signals using toSignal and toObservable in Angular. Use when converting between RxJS Observables and Angular Signals. (triggers: toSignal, toObservable, takeUntilDestroyed, rxjs angular)