Enforce Angular performance best practices for change detection, signals, and lazy loading.
npx skills add https://github.com/nuclia/frontend --skill performance-nuclia
Please help me install this Agent Skill. Skill: performance Source: https://github.com/nuclia/frontend/tree/main/.claude/skills/performance Command: npx skills add https://github.com/nuclia/frontend --skill performance-nuclia
This Skill addresses common performance bottlenecks in the Nuclia frontend monorepo, ensuring efficient rendering, faster load times, and a smoother user experience.
OnPush and guides away from markForCheck().signal() and computed() for memoization.track expressions in @for loops and suggests virtual scrolling for long lists.shareReplay() and debounceTime/auditTime.Review the attached component for performance issues, ensuring OnPush is used and markForCheck is avoided.
High-intent search queries and answers about installing and using this skill.
To optimize Angular change detection, enforce the OnPush strategy and guide away from using markForCheck(). Utilizing signal() and computed() for memoization further reduces unnecessary render cycles.
Use virtual scrolling and track expressions in Angular @for loops when rendering long lists. Mandating track expressions prevents excessive DOM manipulation, while virtual scrolling ensures efficient rendering of large datasets.
The best way to manage RxJS streams is applying operators like shareReplay() correctly to avoid redundant execution, and using debounceTime or auditTime to throttle high-frequency emissions for efficient stream management.
Reduce initial Angular bundle size by ensuring new routes are lazy-loaded. Configuring bundle budgets and analyzing the output bundle helps maintain awareness of load times and performance limits.
Incorrect shareReplay usage causes performance bottlenecks by either caching excessive data in memory or failing to share stream execution, leading to redundant processing and inefficient stream management in Angular applications.
nimadorostkarEnforce standalone components, signal-based state, and OnPush change detection in Angular 17+ applications.
ihj04982Implement dynamic imports for heavy components using Next.js next/dynamic.
RodrigoVeraCandiaOptimize Angular 19+ applications with lazy loading, virtual scrolling, and OnPush change detection.
nksethScaffold Angular 17+ standalone components, routing, and NgRx state management.