angular-best-practices

What problem does it solve?

This Skill helps developers adopt modern Angular patterns to improve maintainability, performance, and accessibility across frontend work. It consolidates signals-based state management, standalone components, strict TypeScript usage, and reactive forms into a cohesive guide for day-to-day development.

Core Features & Use Cases

• Signals-based state management: derive state with computed signals and resources to keep components predictable.
• Standalone components and OnPush: promote modular architecture with reusable components that load lazily.
• TypeScript discipline: enforce strict typing, prefer unknown over any, and leverage type-safe templates and injections.
• Reactive forms and templates: guide to robust forms with minimal boilerplate and strong validation.
• Accessibility-first: ensure WCAG-compatible focus management, ARIA attributes, and semantic markup.
• Guided templates and icons: consistent use of ng-icon and Tailwind styling for rapid UI development.

Quick Start

Start by reviewing the examples in this Skill and applying the patterns to an existing feature module: convert components to standalone, introduce signals for local state, and switch to reactive forms where appropriate. Then refactor a small feature to OnPush and lazy-load it to observe performance gains.