Angular Performance Agent Skill
Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/HoangNguyen0403/agent-skills-standard --skill angular-performanceWhat comes with it
5 147 bytes besides the instructionThe instruction itself
7 sections, as written by the authorPerformance
Priority: P1 (HIGH)
Principles
- OnPush: Always use ChangeDetectionStrategy.OnPush on all components. Components should only update when Signals for state change or Inputs change.
- Deferrable Views: Use @defer (on viewport) to lazy load heavy components/chunks below fold. Use triggers: on interaction, on idle, when condition. @defer creates separate lazy-loaded chunk automatically. Use @placeholder { <Spinner /> } for loading states.
- Images: Import NgOptimizedImage and replace <img src='...'> with <img ngSrc='...' width='800' height='600'>. Add priority attribute for LCP images. This enables lazy loading, responsive srcset, and preconnect hints automatically.
Guidelines
- Zoneless: Prepare for Zoneless Angular by avoiding Zone.runOutsideAngular hacks. Use Signals for all reactive state instead. Opt into provideExperimentalZonelessChangeDetection().
- TrackBy: Always provide stable unique identifier in loops using @for (item of items; track item.id) — track expression replaces trackBy. This prevents Angular from destroying and recreating DOM nodes.
Anti-Patterns
- No function calls in template: {{ calculate() }} re-evaluates on every change detection cycle. Use computed() signal or pure pipes to avoid per-cycle re-evaluation as it caches until dependencies change.
- No logic in constructor: Initialize state in
ngOnInitor signal effects instead.
References
- Defer Usage
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- caches until dependencies change
- computed() signal
- priority attribute
- re-evaluates on every change detection
- replaces trackBy
- srcset
- Additional task-grounded exact anchors: Signals for state; @for (item of items; track item.id); stable unique identifier
Other skills for the same job
different authors, same section of the catalogue
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
Publish Markdown articles to X (Twitter) Articles editor with proper formatting. Use when user wants to publish a Markdown file/URL to X Articles, or mentions "publish to X", "post article to Twitter", "X article", or wants help with X Premium article publishing. Handles cover image upload and converts Markdown to rich text automatically.
Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
Lightweight WSI tile extraction and preprocessing. Use for basic slide processing tissue detection, tile extraction, stain normalization for H&E images. Best for simple pipelines, dataset preparation, quick tile-based analysis. For advanced spatial proteomics, multiplexed imaging, or deep learning pipelines use pathml.
How to use it
Take hoangnguyen0403/angular-performance from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.