angular-best-practices
Angular 21 development with modern best practices including signals, standalone components, reactive patterns, and accessibility. Use when creating Angular components, services, templates, or performing any Angular frontend development work. Covers TypeScript strict typing, signal-based state management, reactive forms, lazy loading, ng-icon setup, and Tailwind styling.
Security Assessment
About angular-best-practices
The Angular Best Practices skill provides developers with a comprehensive guide to building modern, maintainable, and high-performance Angular 21 applications. It addresses common challenges in frontend development such as managing component state, implementing reactive patterns, ensuring accessibility, and maintaining a clean and consistent codebase. By following these best practices, developers can reduce bugs, improve application performance, and adhere to industry standards for Angular development, particularly in TypeScript environments with strict typing enabled.
This skill covers a wide range of features and capabilities. It emphasizes the use of standalone components with OnPush change detection, signal-based state management for predictable and pure transformations, reactive forms for robust user input handling, and the use of native Angular control flow directives for templates. It also provides guidance on resource-based asynchronous data fetching, proper service design, lazy loading for routing, file naming conventions, icon integration via ng-icon, image optimization with NgOptimizedImage, Tailwind CSS styling, and accessibility compliance with AXE and WCAG AA standards. Developers are encouraged to follow recommended practices such as avoiding decorators like @HostBinding and @HostListener, preferring inject() over constructor injection, and using computed() for derived state.
This skill is intended for frontend developers, software engineers, and Angular enthusiasts who are building web applications using Angular 21. It is particularly useful for teams aiming to standardize development practices, improve code quality, and maintain scalable applications. Whether creating new components, refactoring existing services, or setting up project templates, this skill provides actionable guidance to ensure projects follow modern Angular patterns while adhering to accessibility, performance, and maintainability standards.
FAQ
Can I use this skill with Angular versions prior to 21?
This skill is specifically designed for Angular 21 and later, as it relies on features like default standalone components and signal-based state management which may not be available in earlier versions.
Is this skill compatible with Tailwind CSS?
Yes, the skill recommends using Tailwind 4.1 for styling components, alongside Angular CDK where needed.
Can I use inline base64 images with NgOptimizedImage?
No, NgOptimizedImage does not support inline base64 images. Only static image files should be used.
Do I need to use @HostBinding or @HostListener in my components?
No, the skill advises using the host object in the component decorator instead of these decorators.
What accessibility standards should I follow?
All components must pass AXE checks and meet at least WCAG AA minimum standards for focus management and other accessibility criteria.
Install angular-best-practices
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill