angular-architect

Generate Angular 17+ standalone components with NgRx state and RxJS patterns.

1|Updated May 16, 2026
One-click install
npx skills add https://github.com/enigmaicon-eng/AI-Enterprise-OS --skill angular-architect-enigmaicon-eng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-architect
Source: https://github.com/enigmaicon-eng/AI-Enterprise-OS/tree/main/examples/claude-skills/skills/angular-architect
Command: npx skills add https://github.com/enigmaicon-eng/AI-Enterprise-OS --skill angular-architect-enigmaicon-eng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement enterprise-grade Angular 17+ applications without ending up with fragile architecture, inconsistent state handling, weak routing, or poor performance.

Core Features & Use Cases

  • Standalone Angular 17+ architecture: Generates and structures standalone components using modern patterns suitable for large teams and long-lived codebases (signals, OnPush, input/output).
  • NgRx state management setup: Creates a complete state flow using actions, reducers, selectors, and (when needed) effects, with entity adapter patterns for scalable state.
  • Routing, guards, and testing guidance: Configures lazy-loaded routing strategies with guards/resolvers and provides test scaffolding to keep functionality reliable.
  • RxJS reactive best practices: Applies robust RxJS patterns for subscription management, error handling, and operator selection to avoid memory leaks and logic flaws.

Use when you are building an Angular 17+ enterprise app with standalone components and signals, and you need predictable state, efficient navigation, and maintainable test coverage.

Quick Start

Generate the full Angular 17+ standalone component and enterprise routing for a new feature, including signals-based UI state, NgRx store structure (actions/reducer/selectors), RxJS patterns for data loading with safe cleanup, and unit tests with a coverage goal.

Frequently Asked Questions about angular-architect

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

FAQPage Schema
How do I structure Angular 17 standalone components with signals and NgRx state management?

Angular 17 standalone components with signals and NgRx state management are structured by generating feature modules with lazy-loaded routes, actions, reducers, selectors, and effects, ensuring scalable state workflows and OnPush change detection for high performance.

What is the best way to manage RxJS subscriptions and prevent memory leaks in enterprise Angular apps?

Managing RxJS subscriptions and preventing memory leaks in enterprise Angular apps requires applying reactive patterns with safe subscription cleanup, robust error handling, and proper operator selection to avoid logic flaws and memory leaks.

How do I configure lazy-loaded routing with guards and resolvers in Angular 17?

Configuring lazy-loaded routing with guards and resolvers in Angular 17 involves setting up guarded navigation strategies within standalone feature modules, ensuring safe access control and efficient data preloading before component activation.

Does this approach support building scalable state workflows for real UI flows like lists and details?

Yes, this approach supports building scalable state workflows for real UI flows like lists, details, and async data loading by using NgRx entity adapter patterns and signals-based UI state to maintain predictable application behavior.

Can I generate unit and integration test scaffolding for Angular standalone components and NgRx?

Yes, you can generate unit and integration test scaffolding for Angular standalone components and NgRx, providing test templates and coverage guidance to ensure reliable functionality across feature modules and state workflows.

When should I use NgRx effects instead of reducers for async data loading in Angular?

You should use NgRx effects instead of reducers for async data loading in Angular when handling side effects like API calls, keeping reducers pure for synchronous state transitions while effects manage reactive data fetching and safe RxJS cleanup.