How does this skill improve Angular performance?

It provides specific code patterns for Signals, OnPush detection, and the @defer block to minimize CPU overhead and reduce initial bundle sizes.

Is it safe to use for refactoring existing code?

Yes, the skill follows official Angular documentation and community-tested patterns, categorized by impact to ensure safe and predictable refactoring.

How do I implement the @defer block with this skill?

The skill provides template syntax examples to defer heavy components until they enter the viewport, are interacted with, or after the browser is idle.

Can it help with older Angular versions?

While it prioritizes modern features like Signals (v16+) and zoneless (v18+), it also includes classic best practices for RxJS and lazy loading compatible with older versions.

Does it cover Server-Side Rendering?

Yes, it includes best practices for incremental hydration, TransferState for SSR data, and deferring non-critical content during the hydration process.

Angular Best Practices & Performance

Name: Angular Best Practices & Performance
Author: JantonioFC

byJantonioFC

•

开发者工具

Optimizes Angular applications by implementing industry-standard performance patterns, Signal-based change detection, and bundle optimization strategies.

This Claude Code skill provides comprehensive guidance for building high-performance Angular applications by leveraging the latest framework features. It covers critical optimization areas including Signal-based change detection, the elimination of asynchronous waterfalls with RxJS, and bundle size reduction via lazy loading and the @defer block. Whether you are refactoring legacy components or architecting a new enterprise-scale application, this skill ensures your code follows modern best practices for rendering efficiency, memory management, and server-side rendering (SSR) hydration.

主要功能

01Implementation of Signal-based and OnPush change detection strategies

02Bundle optimization using lazy loading and @defer control flow

03Server-side rendering (SSR) and hydration configuration for faster LCP

042 GitHub stars

05Memory management techniques using takeUntilDestroyed and Signal patterns

06Advanced RxJS patterns to eliminate sequential data-fetching waterfalls

使用场景

01Refactoring legacy Angular components to use modern Signals and OnPush detection

02Performing code reviews to ensure compliance with enterprise performance standards

03Optimizing large-scale applications to reduce bundle size and improve Core Web Vitals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank angular-best-practices

For use in Claude.ai and ChatGPT

主要功能

01Implementation of Signal-based and OnPush change detection strategies

02Bundle optimization using lazy loading and @defer control flow

03Server-side rendering (SSR) and hydration configuration for faster LCP

042 GitHub stars

05Memory management techniques using takeUntilDestroyed and Signal patterns

06Advanced RxJS patterns to eliminate sequential data-fetching waterfalls

使用场景

01Refactoring legacy Angular components to use modern Signals and OnPush detection

02Performing code reviews to ensure compliance with enterprise performance standards

03Optimizing large-scale applications to reduce bundle size and improve Core Web Vitals