How does this skill improve Angular application performance?

It enforces high-impact techniques such as OnPush change detection, which limits component updates to Input changes or Signal triggers, significantly reducing CPU cycles.

Can it help with image optimization?

Yes, the skill provides guidance on using NgOptimizedImage to improve the Largest Contentful Paint (LCP) and overall image loading efficiency.

What anti-patterns can this skill help identify?

It detects performance drains such as calling functions within templates and heavy logic in component constructors, suggesting computed signals or lifecycle hooks instead.

Does it support the latest Angular features?

Yes, it specifically includes support for modern features like the @defer block for lazy loading, @for loop tracking, and Signal-based reactivity to prepare for zoneless Angular.

Angular Performance Optimizer

Name: Angular Performance Optimizer
Author: HoangNguyen0403

byHoangNguyen0403

•

260

•

开发者工具

Optimizes Angular application performance by implementing industry-standard best practices for change detection, lazy loading, and asset management.

This skill provides Claude with specialized guidance to audit and improve Angular applications through high-priority performance techniques. It focuses on implementing OnPush change detection, utilizing deferrable views (@defer) for optimized lazy loading, and enhancing asset delivery with NgOptimizedImage. By enforcing signal-based reactive patterns and identifying common anti-patterns like heavy template functions or bloated constructors, this skill ensures your Angular codebase remains fast, scalable, and prepared for a zoneless future.

主要功能

01Lazy loading optimization using @defer blocks

02Signal-based pattern migration for zoneless Angular

03LCP improvement via NgOptimizedImage (ngSrc)

04Automatic implementation of ChangeDetectionStrategy.OnPush

05Template loop tracking with @for and track functions

06260 GitHub stars

使用场景

01Refactoring legacy Angular components to use efficient change detection strategies

02Optimizing Core Web Vitals and LCP for enterprise-scale Angular applications

03Reducing main bundle size by implementing deferrable views for below-the-fold content

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hoangnguyen0403/agent-skills-standard angular

For use in Claude.ai and ChatGPT

Download Skill