> angular-performance
Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: **/*.ts, **/*.html, ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/angular-performance?format=md"Performance
Priority: P1 (HIGH)
Principles
- OnPush: Always use
ChangeDetectionStrategy.OnPush. Components should only update when Inputs change or Signals fire. - Deferrable Views: Use
@deferto lazy load heavy components/chunks below the fold. - Images: Use
NgOptimizedImage(ngSrc) for LCP optimization.
Guidelines
- Zoneless: Prepare for Zoneless Angular by avoiding
Zone.runOutsideAngularhacks. Use Signals. - TrackBy: Always provide a tracking function in loops (
@for (item of items; track item.id)).
Anti-Patterns
- Functions in Template:
{{ calculate() }}causes re-evaluation on every change detection cycle. Usecomputed()signals or pure pipes. - Heavy Constructors: Keep constructors empty. Use
ngOnInitor effects.
References
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)