angular-best-practices
A best-practices guide for writing and refactoring Angular code to improve performance and load times.
Install
mkdir -p .claude/skills/angular-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/989" && unzip -o skill.zip -d .claude/skills/angular-best-practices && rm skill.zipInstalls to .claude/skills/angular-best-practices
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.Key capabilities
- →Implement OnPush change detection
- →Refactor RxJS data fetching streams
- →Configure lazy loading modules
- →Optimize template rendering with trackBy
- →Manage SSR hydration patterns
How it works
Applies a hierarchy of performance rules from change detection tuning to bundle tree-shaking.
Inputs & outputs
When to use angular-best-practices
- →Optimize Angular change detection
- →Reduce bundle size
- →Refactor for rendering efficiency
- →Configure SSR hydration
About this skill
Angular Best Practices
Comprehensive performance optimization guide for Angular applications. Contains prioritized rules for eliminating performance bottlenecks, optimizing bundles, and improving rendering.
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
Reference these guidelines when:
- Writing new Angular components or pages
- Implementing data fetching patterns
- Reviewing code for performance issues
- Refactoring existing Angular code
- Optimizing bundle size or load times
- Configuring SSR/hydration
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
When not to use it
- →Small-scale hobbyist projects
- →Applications not requiring high performance
Prerequisites
Limitations
- →Requires deep knowledge of Angular lifecycle
- →Performance tuning can be complex
How it compares
Prioritizes critical runtime performance bottlenecks over superficial coding styles.
Compared to similar skills
angular-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| angular-best-practices (this skill) | 21 | 5mo | No flags | Advanced |
| angular-spa | 0 | 2mo | No flags | Advanced |
| react-best-practices | 22 | 4mo | No flags | Intermediate |
| react-component-performance | 2 | 6mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sickn33
View all by sickn33 →You might also like
angular-spa
Allmantool
Govern implementation, refactoring, bug-fix, audit, review, testing, and migration work in this repository’s Angular/Nx SPA. Use for every task that reads or changes Angular, TypeScript, templates, CSS, NgModules, routes, NGXS, RxJS, HTTP/data access, tests, Nx configuration, or Angular/Nx governanc
react-best-practices
redpanda-data
Client-side React performance optimization patterns.
react-component-performance
Dimillian
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.
benchmark-guardian
siliconjungle
Use for JS/TS performance-sensitive changes, benchmark additions, benchmark regressions, benchmark result JSON, or any claim that code is faster, smaller, cheaper, or not slower.
angular
sickn33
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
technology-stack
ag-grid
Technology choices and architectural constraints for AG Grid. Use when choosing technologies, adding dependencies, or understanding zero-dependency requirements.