Angular Best Practices for AI

If you've been using AI to write Angular code, you've probably noticed a pattern. Your agent keeps making the same mistakes. It writes sequential async calls that create request waterfalls. It eagerly loads routes that should be lazy. It misuses signals in ways that thrash change detection. The code compiles, it runs, but it's not how you'd write it.

AI agents are great at Angular syntax, but they don't have the context of what "good" Angular looks like in production. They're missing the best practices that experienced developers carry around in their heads.

When I saw Vercel's react-best-practices announcement, I realized this is exactly what Angular needs. A curated set of rules you can share with your AI agent and with other developers. But I also wanted something the community could contribute to and make better over time, not just a static list that one person maintains.

So I built Angular Best Practices, a curated rules package that teaches your AI coding agent how to write better Angular code. It works with Claude Code, Cursor, Codex, VS Code Copilot, and 30+ more agents.

npx skills add alfredoperez/angular-best-practices

What Is It?

Angular Best Practices is a skills package built on the Agent Skills specification. You install it, and your AI agent immediately gets access to curated Angular rules covering everything from eliminating request waterfalls and bundle optimization to signals, RxJS patterns, change detection, SSR, testing, and architecture.

One thing I noticed when rules are AI-generated: they tend to include long code examples with poor context. That wastes tokens and bloats your agent's context window. Every rule in this package is human-reviewed for accuracy and token efficiency. Each rule is under 50 lines with one to three line code examples. Every rule shows a clear incorrect vs correct pattern so the AI knows exactly what to change, not just what to aim for. They're tagged by impact (CRITICAL, HIGH, MEDIUM, or LOW) so the most important ones get applied first.

Pick What You Need

I didn't want to split every little aspect of Angular into its own package. If you look at the rules/ folder in the repo, you'll see every rule divided by topic: signals, components, RxJS, change detection, and so on. But when you install the core package, it all comes together as a single file. If you use Angular, this is the one you want:

npx skills add alfredoperez/angular-best-practices

Where it does make sense to split is at the library level. State management libraries, component libraries, testing libraries—these are different for every project. My plan is to have best practices for each one as a separate package, so you just pick whatever you actually have installed:

npx skills add alfredoperez/angular-best-practices-ngrx
npx skills add alfredoperez/angular-best-practices-signalstore
npx skills add alfredoperez/angular-best-practices-tanstack

If you prefer manual installation, copy the AGENTS.md file directly into your project: .claude/AGENTS.md for Claude Code, .cursor/rules/angular.md for Cursor, or .github/copilot-instructions.md for VS Code Copilot.

Explore the Rules

Before installing anything, browse all the rules on the web app at angular-best-practices-web.vercel.app. Check out the categories, read through the code examples, and see if there's something you'd want to use right away—or if there's a rule you think is missing.

Want a Rule Added?

This is an open source project. If you want a rule added, create a request on GitHub—that's it. Rules follow a simple template: a short description, an incorrect pattern, and the correct one, all under 50 lines. Every submission gets human-reviewed for accuracy and token efficiency before it's merged.

Get Started

npx skills add alfredoperez/angular-best-practices

Check out the GitHub repo, browse the rules at angular-best-practices-web.vercel.app, and let me know what you think. Next time your AI agent tries to nest three subscriptions deep, it'll know better.