Angular Best Practices

What it does

This skill equips AI agents with the knowledge to generate, review, and refactor Angular code following industry-standard best practices. It ensures applications are built for scalability, maintainability, and performance by enforcing modern patterns like standalone components and signal-based reactivity.

When to use it

• Refactoring legacy Angular applications to adopt standalone components instead of NgModules.
• Generating new features that leverage the latest Angular signals for efficient state management.
• Auditing existing codebases to identify anti-patterns or deprecated APIs.
• Creating unit tests and integration tests that align with modern Angular testing strategies.

Key capabilities

• Enforces the use of standalone components to reduce boilerplate configuration.
• Implements signal-based reactivity for predictable data flow and performance.
• Applies strict linting rules and architectural patterns for clean code structure.
• Generates optimized change detection strategies to minimize unnecessary renders.

Example prompts

• "Generate a new customer dashboard component using standalone directives and signals."
• "Refactor this legacy NgModule-based service to use dependency injection without providers."
• "Audit this codebase for deprecated Angular APIs and suggest modern replacements."

Tips & gotchas

Ensure your project is initialized with the latest Angular CLI version to fully leverage these practices. While this skill promotes standalone components, existing large-scale enterprise apps may require a gradual migration strategy rather than an immediate overhaul.