angular-architect

Generates Angular 17+ standalone components, NgRx stores, routing, and tests.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/iJosueeh/itera-workspace --skill angular-architect-ijosueeh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-architect
Source: https://github.com/iJosueeh/itera-workspace/tree/main/.agents/skills/angular-architect
Command: npx skills add https://github.com/iJosueeh/itera-workspace --skill angular-architect-ijosueeh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building enterprise Angular applications requires coordinating standalone components, signals, RxJS streams, NgRx state, routing guards, and tests, which is error-prone without consistent architectural patterns. ## Core Features & Use Cases - Standalone Components & Signals: Generate Angular 17+ components using signal inputs, computed values, OnPush change detection, and the new @if/@for control flow. - State Management & RxJS: Implement NgRx stores with entity adapters, effects, and selectors, plus RxJS patterns like switchMap, takeUntilDestroyed, and shareReplay. - Routing & Testing: Configure lazy-loaded routes with functional guards and resolvers, and write TestBed, mock store, and marble tests targeting over 85% coverage. - Use Case: When building a user management dashboard, use this Skill to scaffold the container and presentational components, wire an NgRx feature store with effects, protect routes with an auth guard, and produce the matching unit tests. ## Quick Start Ask the assistant to build an Angular 17 standalone user list feature with an NgRx store, lazy-loaded route, and unit tests.

Frequently Asked Questions about angular-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a standalone component with signals in Angular 17?

Define a component with standalone: true, use signal() and computed() for reactive state, and input()/output() for component communication. Apply ChangeDetectionStrategy.OnPush and the new @if/@for control flow in templates.

How to set up NgRx store with entity adapter in Angular?

Register reducers with provideStore and effects with provideEffects in app.config.ts. Use createEntityAdapter to get normalized state with built-in CRUD operations, then derive selectors via adapter.getSelectors().

Should I use switchMap, mergeMap, concatMap, or exhaustMap in RxJS?

Use switchMap for search typeaheads to cancel stale requests, mergeMap for independent concurrent calls, concatMap when order matters, and exhaustMap to ignore repeated triggers like double-clicks on save buttons.

Does Angular 17 still support NgModule-based components?

Standalone components are the Angular 17+ default and recommended approach. NgModules remain supported only for compatibility scenarios, but new features should use standalone components with the inject() function.

How do I prevent memory leaks from RxJS subscriptions in Angular?

Use takeUntilDestroyed from @angular/core/rxjs-interop with an injected DestroyRef, or the async pipe in templates. The legacy takeUntil with a destroy Subject pattern also works but requires manual ngOnDestroy cleanup.

How do I test NgRx effects with marble diagrams?

Provide mock actions with provideMockActions and stub the service with a jasmine spy. Use hot and cold observables from jasmine-marbles to define action streams and expected outputs, then assert with toBeObservable.