skills.rest
tranhieutt
tranhieuttCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-best-practices

Audit Angular components for OnPush, Signals, lazy loading, and hydration readiness.

70|42|Updated Mar 27, 2026
Search Tags:#performance#angular#signals#ssr#lazy-loading#change-detection
One-click install
npx skills add https://github.com/tranhieutt/software_development_department --skill angular-best-practices-tranhieutt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-best-practices
Source: https://github.com/tranhieutt/software_development_department/tree/main/.claude/skills/angular-best-practices
Command: npx skills add https://github.com/tranhieutt/software_development_department --skill angular-best-practices-tranhieutt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies prioritized Angular performance guardrails so AI agents avoid costly change detection, async, bundle, and rendering regressions during development, reviews, and refactors.

Core Features & Use Cases

  • Change Detection & Signals: Enforce OnPush and Signal-first state to minimize unnecessary rechecks.
  • Async, Bundle, and Rendering Practices: Avoid waterfalls, lazy load routes, use @defer, virtual scrolling, and tree-shaking friendly imports.
  • SSR, Hydration, and State Hygiene: Apply TransferState, incremental hydration, and subscription cleanup strategies before launch.
  • Use Case: When reviewing a new feature, run through the checklist to confirm the component, routes, and SSR configuration follow each priority rule before merging.

Quick Start

Ask the angular-best-practices skill to audit a component for OnPush, Signals, lazy loading, and hydration readiness.

Frequently Asked Questions about angular-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Angular change detection to stop unnecessary rechecks?▼

Optimize Angular change detection by enforcing OnPush components and adopting a Signal-first state strategy to minimize unnecessary rechecks during rendering cycles.

What's the best way to lazy load Angular routes and improve bundle health?▼

Improve bundle health by lazy loading routes, using tree-shaking friendly imports, and applying the @defer directive to delay rendering non-critical components.

How does TransferState improve Angular SSR and hydration performance?▼

TransferState improves Angular SSR by serializing server data to the client, preventing duplicate API calls and enabling incremental hydration for faster page loads.

How do I audit an Angular component for performance before merging a new feature?▼

Audit an Angular component by running through a prioritized checklist that validates OnPush usage, Signals, lazy loading, virtual scrolling, and subscription cleanup readiness.

Why does my Angular app experience rendering waterfalls and how can I avoid them?▼

Avoid Angular rendering waterfalls by prioritizing async operations correctly, leveraging @defer blocks, and implementing virtual scrolling for large lists to reduce initial load strain.

Related Skills

Explore More Software Engineering Skills→
maedmattmaedmatt
3

vercel-react-best-practices

Analyze React and Next.js projects for performance optimization best practices.

Community
Advanced
j0KZj0KZ

performance-profiler

Profile CPU usage, memory leaks, and bundle size in Node.js and browsers.

Community
Advanced
hiddink-aihiddink-ai
1

react-best-practices

Enforce React and Next.js performance rules for rendering, data fetching, and bundles.

Official
Intermediate
DengNaichenDengNaichen
34

axiom-audit-spritekit

Audit SpriteKit Swift codebases for physics anti-patterns, memory leaks, and rendering issues.

Community
Advanced