angular-architect
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.
98
100%
Does it follow best practices?
Impact
97%
1.38xAverage score across 6 eval scenarios
Passed
No known issues
Evaluation results
100%
57%Product Catalog Search Feature
RxJS reactive search component
Standalone component
100%
100%
OnPush strategy
0%
100%
Signal-based state
0%
100%
inject() DI
0%
100%
New control flow
0%
100%
Track in @for
0%
100%
debounceTime + distinctUntilChanged
100%
100%
switchMap for search
100%
100%
catchError in stream
100%
100%
Observable cleanup
50%
100%
Signal input/output API
0%
100%
No any type
50%
100%
100%
46%Inventory Management State Layer
NgRx entity state management
Standalone component
100%
100%
createActionGroup
0%
100%
createEntityAdapter
0%
100%
No direct state mutation
100%
100%
createFeatureSelector + createSelector
100%
100%
Entity adapter selectors
0%
100%
createEffect with ofType
100%
100%
exhaustMap for create/add effect
0%
100%
catchError in effects
100%
100%
toSignal for store selectors
0%
100%
provideStore / provideEffects
100%
100%
No any type
100%
100%
100%
12%Multi-Section Dashboard Routing Setup
Angular routing guards and lazy loading
loadComponent lazy loading
100%
100%
loadChildren lazy loading
100%
100%
Functional guard (CanActivateFn)
100%
100%
createUrlTree redirect in guard
100%
100%
Functional resolver (ResolveFn)
100%
100%
withComponentInputBinding
100%
100%
Route param as input()
50%
100%
catchError in resolver
0%
100%
Guard test with runInInjectionContext
100%
100%
Standalone routed components
100%
100%
No class-based guard/resolver
100%
100%
100%
4%Pagination Component for Data Table
Signal model binding, computed, and effect
model<T>() two-way binding
100%
100%
computed() for total pages
100%
100%
effect() for side effect
100%
100%
input.required<T>() signal inputs
100%
100%
input<T>() with default
100%
100%
Accessibility attributes
100%
100%
Standalone with OnPush
50%
100%
inject() DI
100%
100%
No any type
100%
100%
Test file provided
100%
100%
Architecture notes provided
100%
100%
92%
41%Executive Dashboard with Shared Configuration
RxJS shareReplay caching and smart/dumb architecture
shareReplay with bufferSize and refCount
0%
60%
forkJoin or combineLatest for parallel loading
100%
100%
catchError in streams
100%
100%
Smart/dumb separation
100%
100%
Standalone with OnPush
0%
100%
inject() DI
0%
100%
Signal inputs on presentational component
0%
100%
New control flow syntax
0%
100%
No any type
100%
100%
Architecture notes provided
100%
100%
94%
6%Write Unit Tests for Products Module
Angular HTTP service testing and NgRx MockStore
HttpClientTestingModule imported
100%
100%
HttpTestingController used
100%
100%
httpMock.verify() in afterEach
100%
100%
Error scenario tested in service
100%
100%
Multiple service methods tested
100%
100%
provideMockStore used
100%
100%
MockStore selector override
100%
100%
Dispatch spy tested
100%
100%
Standalone component import in TestBed
100%
100%
jasmine.createSpyObj used
0%
0%
No any type
0%
100%
- Repository
- jeffallan/claude-skills
- Commit
5b76101
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.