Coding agents are powerful tools for building applications, but they often suggest outdated Angular patterns—NgModules, @Input() decorators, *ngIf, and constructor injection. Angular has evolved significantly, and without up-to-date context, coding agents don't know about standalone components, signals, or the new control flow syntax.
This post introduces Angular Skills, a collection of skills that teach coding agents modern Angular v20+ patterns.
What Are Skills?
Skills are structured knowledge files that provide coding agents with domain-specific expertise. Agent Skills are a simple, open format for giving agents new capabilities and expertise, developed by Anthropic. They are meant to integrate directly into your AI-assisted development workflow.
Installing Angular Skills
Install all skills with a single command:
npx skills add analogjs/angular-skills
Or install individual skills:
npx skills add analogjs/angular-skills/skills/angular-signals
npx skills add analogjs/angular-skills/skills/angular-forms
npx skills add analogjs/angular-skills/skills/angular-http
Available Skills
angular-component
Modern standalone components with signal-based inputs, outputs, and queries. Covers OnPush change detection, host bindings, content projection, and lifecycle hooks.
angular-signals
Angular's reactive primitives: signal(), computed(), linkedSignal(), and effect(). Includes RxJS interop with toSignal() and toObservable().
angular-di
Dependency injection using the inject() function, injection tokens, provider configuration, and hierarchical DI patterns.
angular-forms
Signal Forms (experimental) with schema-based validation and field state management.
angular-http
Data fetching with httpResource() and resource() APIs for declarative, signal-based HTTP. Also covers HttpClient and functional interceptors.
angular-routing
Lazy loading, functional guards and resolvers, and signal-based route parameters with input.fromRoute().
angular-directives
Attribute directives, structural directives for portals and overlays, and host directive composition.
angular-ssr
Server-side rendering, incremental hydration, prerendering, and patterns for browser-only code.
angular-testing
Testing with TestBed, component harnesses, and signal testing utilities. Includes Vitest support for Angular v21+.
angular-tooling
Angular CLI commands, code generation with schematics, build configuration, and workspace setup.
What You Get
With these skills installed, coding agents will:
- Use standalone components without adding
standalone: true - Prefer signal inputs (
input(),input.required()) over@Input()decorators - Use native control flow (
@if,@for,@switch) instead of*ngIf,*ngFor - Apply
OnPushchange detection by default - Use
inject()instead of constructor injection - Suggest
httpResource()for data fetching - Write functional guards and interceptors
- And more ...
Conclusion
Angular Skills provides coding agents with the context they need to generate modern Angular code. Install the skills and start building with AI that understands the framework.
Check out the repository:
https://github.com/analogjs/angular-skills
Give the GitHub repo a ⭐️! Contributions are welcome!
If you enjoyed this post, click the ❤️ so other people will see it. Follow me on Bluesky, X, and subscribe to my YouTube Channel for more content!
Top comments (1)
Sorry for a dumb question (I have just got used to MCP stuff and now...) but how the skills thing actually works? Does it work with "proxy" tools like Warp or Cursor?