Proposal

Add a new angular-performance-audit skill for diagnosing Core Web Vitals regressions, bundle size issues, change detection inefficiencies, and network loading problems in existing Angular applications.

Motivation

The existing angular-developer skill is strong on architecture and code generation, but treats performance as a side effect of general best practices. There is currently no skill that addresses the use case of auditing a production or actively developed Angular app for performance problems — a task that requires a different workflow: measure first, diagnose by symptom, then prescribe specific fixes.

Proposed skill

The angular-performance-audit skill provides a six-phase diagnostic workflow:

1. Measure — Establish baseline CWV values with Lighthouse and web-vitals field data before looking at code.
2. Diagnose by symptom — Follow targeted decision trees for LCP > 2.5 s, INP > 200 ms, and CLS > 0.1.
3. Audit bundle — Analyze ng build --stats-json output with source-map-explorer to identify lazy loading opportunities and large dependencies.
4. Audit change detection — Use Angular DevTools Profiler to find components with Default strategy, effects used for state propagation, and leaky RxJS subscriptions.
5. Audit network — Check resource hints, font loading strategy, HTTP caching headers, and sequential vs parallel data fetches.
6. Produce findings — Output a structured report with measurements, severity-ranked findings, and file-level fix references.

Proposed file structure

angular-performance-audit/
├── SKILL.md
└── references/
    ├── audit-cwv.md       # Lab/field measurement procedures and LCP/INP/CLS decision trees
    ├── audit-bundle.md    # Bundle analysis workflow with ng build --stats-json
    ├── audit-rendering.md # Change detection profiling with Angular DevTools
    ├── audit-network.md   # Resource hints, font loading, caching, Transfer State
    └── audit-checklist.md # Structured findings report format

Reference implementation

A reference implementation is available at: nucliweb:feat/angular-performance-audit → skills/dev-skills/angular-performance-audit/

Relationship to existing work

This skill complements rather than overlaps with angular-developer. PR #68532 adds performance guardrails to angular-developer for use at code generation time. This skill addresses the separate use case of auditing an existing application.