angular-best-practices

Enforce modern Angular best practices across components, services, templates, and routing.

Updated Aug 24, 2022
One-click install
npx skills add https://github.com/cillies-finatix/todo-angular-with-best-practices --skill angular-best-practices-cillies-finatix
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-best-practices
Source: https://github.com/cillies-finatix/todo-angular-with-best-practices/tree/main/.agents/skills/angular-best-practices
Command: npx skills add https://github.com/cillies-finatix/todo-angular-with-best-practices --skill angular-best-practices-cillies-finatix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angular projects often suffer from inconsistent patterns, performance pitfalls, and maintenance overhead across components, services, templates, styles, routing, SSR, testing, and accessibility.

Core Features & Use Cases

  • 112 rules covering TypeScript strictness, signal-based reactivity, component architecture, template optimization, RxJS patterns, SSR hydration, testing strategies, and accessibility guidelines.
  • Use cases include code reviews, onboarding, audits, and large-scale migrations to modern patterns; adoption of signals, inject() over constructors, and proper testing practices.

Quick Start

Refactor an existing Angular feature to use signals, inject(), resource(), and tested patterns described in the rules.

Frequently Asked Questions about angular-best-practices

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

FAQPage Schema
How do I enforce Angular best practices for signals and state management?

Angular best practices for signals and state management are enforced through 112 rules covering signal-based reactivity, component architecture, and RxJS patterns. These rules provide practical code examples and impact ratings for reliable apps.

What's the best way to review Angular code for performance and accessibility?

The best way to review Angular code for performance and accessibility is applying a comprehensive ruleset covering template optimization, SSR hydration, and accessibility guidelines. This approach identifies performance pitfalls and maintenance overhead with practical impact ratings.

How do I migrate an existing Angular component to use signals and inject()?

To migrate an Angular component to use signals and inject(), refactor existing features to adopt signal-based reactivity, inject() over constructors, and resource() patterns. This modernization improves maintainability and aligns with current Angular architecture guidelines.

Does this Angular best practices ruleset cover testing strategies and SSR hydration?

Yes, this Angular best practices ruleset covers testing strategies and SSR hydration. It provides 112 rules across TypeScript strictness, server-side rendering hydration, and testing to ensure reliability during code reviews, onboarding, and project audits.

Why should I use strict TypeScript and signal-based reactivity in Angular?

You should use strict TypeScript and signal-based reactivity in Angular to improve maintainability, performance, and reliability. Enforcing these patterns reduces inconsistent architecture and maintenance overhead across components, services, and templates.

Can I audit a large Angular codebase for RxJS and template optimization issues?

Yes, you can audit a large Angular codebase for RxJS and template optimization issues. The ruleset is suitable for large-scale migrations and project audits, evaluating architecture, template performance, and state management patterns with practical impact ratings.