A comprehensive Claude Code Agent Skill for modern Angular development. Provides expert guidance on signals, standalone components, built-in control flow, accessibility (a11y), and TypeScript best practices.
This skill transforms Claude into an Angular expert that follows modern conventions and APIs. When activated, Claude will:
- Write components using signal-based inputs, outputs, queries, and model inputs instead of legacy decorators
- Use built-in control flow (
@if,@for,@switch) instead of structural directives - Apply
ChangeDetectionStrategy.OnPushand signal-based state management - Follow your project's folder structure conventions
- Use
inject()for dependency injection, functional guards/interceptors, and modern routing patterns - Optimize performance with
@defer,NgOptimizedImage, andtakeUntilDestroyed() - Build accessible components using CDK a11y: focus traps, screen reader announcements, keyboard navigation, and ARIA patterns
| Area | What's Covered |
|---|---|
| Signals | signal(), computed(), effect(), linkedSignal(), resource() |
| Component I/O | input(), input.required(), output(), model() |
| Queries | viewChild(), viewChildren(), contentChild(), contentChildren() |
| Templates | @if/@for/@switch, @defer with triggers & prefetching |
| DI & HTTP | inject(), provideHttpClient(), functional interceptors, firstValueFrom |
| Routing | Lazy loading, functional guards, withComponentInputBinding(), withViewTransitions() |
| SSR | RenderMode, hydration, afterNextRender(), withEventReplay() |
| Accessibility | CDK a11y, ARIA binding, FocusTrap, LiveAnnouncer, FocusMonitor, KeyManagers, accessible forms |
| App Config | Full app.config.ts pattern with all modern providers |
| File | Contents |
|---|---|
references/signals.md |
Full signal API reference, linkedSignal patterns, resource/rxResource, effect cleanup, RxJS interop (toSignal/toObservable), decorator migration table |
references/templates.md |
Control flow details, @defer triggers & sub-blocks, NgOptimizedImage, SSR behavior, accessibility patterns, testing deferred views |
references/accessibility.md |
CDK a11y full API: FocusTrap, FocusMonitor, LiveAnnouncer, AriaDescriber, KeyManagers, InteractivityChecker, InputModalityDetector, HighContrastModeDetector, accessible component patterns |
claude skill install /path/to/angular-development.skillOr install directly from the folder:
claude skill install /path/to/angular-development/Creating a component:
"Create a user card component that displays a user's name and avatar"
Claude will generate a standalone, OnPush component with input.required<User>(), signal-based queries, and Tailwind styling.
Data fetching:
"Add a service that fetches products from the API"
Claude will use inject(HttpClient), firstValueFrom, and optionally resource() for signal-based async data.
Lazy loading:
"Add a settings feature module with lazy-loaded routes"
Claude will create a feature folder with loadComponent, functional guards, and @defer blocks for heavy sub-components.
State management:
"I need a filter dropdown that resets when the data source changes"
Claude will use linkedSignal() to create a writable signal that auto-resets when the source changes, preserving the selection when possible.
Accessibility:
"Make this dialog accessible with focus trapping and screen reader support"
Claude will use CdkTrapFocus, LiveAnnouncer, proper ARIA attributes (role="dialog", aria-modal, aria-labelledby), and focus restoration on close.
angular-agent-skill/
├── SKILL.md # Core instructions (~420 lines)
└── references/
├── signals.md # Signal API deep-dive (~400 lines)
├── templates.md # Template patterns deep-dive (~220 lines)
└── accessibility.md # CDK a11y reference (~350 lines)
Built for Angular 19+ with coverage of:
- Stable APIs: signals, standalone components, built-in control flow,
@defer, signal inputs/outputs/queries/model - Experimental APIs:
resource(),rxResource(),linkedSignal(), zoneless change detection
MIT