Angular Architect
Generates Angular 17+ standalone components, routing, NgRx state, and RxJS patterns.
Install
npx skills add Jeffallan/claude-skills --skill angular-architect -g -a claude-code -y- Repository
- Jeffallan/claude-skills12.2k
- Category
- Engineering
- Updated
- 5d ago
- License
- MIT
- Context cost
- Lightabout 1,334 tokens
- Runs scripts
- No, instructions only
What it does
Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.
Angular Architect
Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development.
Core Workflow
- Analyze requirements - Identify components, state needs, routing architecture
- Design architecture - Plan standalone components, signal usage, state flow
- Implement features - Build components with OnPush strategy and reactive patterns
- Manage state - Setup NgRx store, effects, selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding
- Optimize - Apply performance best practices and bundle optimization; run
ng build --configuration productionto verify bundle size and flag regressions - Test - Write unit and integration tests with TestBed; verify >85% coverage threshold is met
Reference Guide
Load detailed guidance based on context:
| Topic | Reference | Load When |
|---|---|---|
| Components | references/components.md | Standalone components, signals, input/output |
| RxJS | references/rxjs.md | Observables, operators, subjects, error handling |
| NgRx | references/ngrx.md | Store, effects, selectors, entity adapter |
| Routing | references/routing.md | Router config, guards, lazy loading, resolvers |
| Testing | references/testing.md | TestBed, component tests, service tests |
Key Patterns
Standalone Component with OnPush and Signals
import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
