congiuluc/performance-frontend-angular
skills/performance-frontend-angular/SKILL.md
Optimize Angular 19 frontend performance with lazy loading, OnPush change detection, trackBy functions, bundle optimization, image optimization, and Core Web Vitals. Use when: reducing bundle size, lazy loading routes, optimizing change detection, virtualizing long lists, or improving Core Web Vitals in Angular applications.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add congiuluc/my-awesome-copilot performance-frontend-angularInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 1:22 PM4.5s3 files scanned
SKILL.md
- name:
- performance-frontend-angular
- description:
- >-
- Use when:
- reducing bundle size, lazy loading routes, optimizing change detection,
- argument-hint:
- Describe the Angular frontend performance issue or optimization needed.
Frontend Performance Optimization (Angular)
When to Use
- Reducing initial bundle size with route-level lazy loading
- Optimizing change detection with
OnPushstrategy - Adding
trackByfunctions to@forloops /*ngFor - Virtualizing large lists with
@angular/cdk/scrolling - Optimizing images with
NgOptimizedImage - Improving Core Web Vitals (LCP, CLS, INP)
Official Documentation
- Angular Lazy Loading
- OnPush Change Detection
- NgOptimizedImage
- CDK Virtual Scrolling
- Angular Performance Checklist
- Web Vitals
Procedure
- Identify bottleneck type: bundle size, change detection, image loading, list rendering
- Apply Angular performance patterns
- Review lazy loading sample
- Ensure all components use
OnPushchange detection - Add
trackByto every@for/*ngForloop - Use
NgOptimizedImagefor all<img>tags - Virtualize lists with 100+ items using CDK
VirtualScrollViewport - Measure with Lighthouse / Angular DevTools before and after
Performance Review Checklist
| # | Check | Tool / Method |
|---|-------|---------------|
| 1 | Bundle size < 200 KB gzipped (initial load) | ng build --stats-json + webpack-bundle-analyzer |
| 2 | All routes use loadComponent lazy loading | Code review |
| 3 | All components use ChangeDetectionStrategy.OnPush | Code review |
| 4 | Every @for / *ngFor has a trackBy function | Code review |
| 5 | Images use NgOptimizedImage with width/height | Code review |
| 6 | Above-the-fold images have priority attribute | Code review |
| 7 | Lists > 100 items use cdk-virtual-scroll-viewport | Code review |
| 8 | No unnecessary subscriptions (use takeUntilDestroyed) | Code review |
| 9 | Signals used instead of getters in templates | Code review |
| 10 | LCP < 2.5s, CLS < 0.1, INP < 200ms | Lighthouse / Web Vitals |
| 11 | Third-party scripts loaded async/deferred | HTML review |
| 12 | Fonts use font-display: swap | CSS review |
Profiling Workflow
- Run Lighthouse:
npx lighthouse http://localhost:4200 --view - Use Angular DevTools Profiler to inspect change detection cycles
- Run
ng build --stats-jsonthennpx webpack-bundle-analyzer dist/stats.json - Check Chrome DevTools → Performance tab for runtime bottlenecks
- Compare before/after metrics for any optimization
Related Skills
congiuluc/vscode-extension
tools
VerifiedTrustedCommunity
Build VS Code extensions with TypeScript. Covers extension anatomy, activation events, commands, tree views, webview panels, language features, testing, and publishing. Use when: creating a new VS Code extension, adding commands/views/providers, building webview UIs, implementing language server features, testing extensions, or packaging for the marketplace.
SKILL.mdUpdated Apr 16, 2026
congiuluc/version-tracking
development
VerifiedTrustedCommunity
Track implementations, features, bugs, and releases in a versioning document. Use when: adding a commit, completing a feature, fixing a bug, or preparing a release. Automatically updates CHANGELOG.md following Keep a Changelog format and Semantic Versioning.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend
development
VerifiedTrustedCommunity
Write frontend tests using Vitest and React Testing Library. Use when: testing React components, hooks, user interactions, form submissions, accessibility assertions, or mocking API services.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend-angular
development
VerifiedTrustedCommunity
Write Angular frontend tests using Jasmine, Karma, and Angular TestBed. Use when: testing Angular components, services, pipes, directives, user interactions, form submissions, accessibility assertions, or mocking HTTP services.
SKILL.mdUpdated Apr 16, 2026