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.
Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.
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.
Microscopy data management platform. Access images via Python, retrieve datasets, analyze pixels, manage ROIs/annotations, batch processing, for high-content screening and microscopy workflows.
Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.
This skill should be used when working with pre-trained transformer models for natural language processing, computer vision, audio, or multimodal tasks. Use for text generation, classification, question answering, translation, summarization, image classification, object detection, speech recognition, and fine-tuning models on custom datasets.
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.