skills.rest
kamelmh
kamelmhCOMMUNITY
Explore all skills by this author →
GitHub

angular-architect

Generate Angular 17+ standalone components with routing, NgRx, and RxJS.

Updated Aug 23, 2026
Search Tags:#testing#routing#angular#signals#standalone-components#rxjs#ngrx
One-click install
npx skills add https://github.com/kamelmh/opencode-config --skill angular-architect-kamelmh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-architect
Source: https://github.com/kamelmh/opencode-config/tree/main/skills/angular-architect
Command: npx skills add https://github.com/kamelmh/opencode-config --skill angular-architect-kamelmh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the friction of setting up and maintaining modern Angular 17+ applications by guiding architecture, component design, routing, state management, reactive flows, and testing in one place.

Core Features & Use Cases

  • Standalone Angular Components: Create standalone components with signals, computed state, inputs, outputs, and OnPush change detection.
  • Routing and Lazy Loading: Configure advanced routing with guards, resolvers, route inputs, child routes, and lazy-loaded feature areas.
  • NgRx and RxJS Patterns: Implement reducers, selectors, effects, and resilient observable pipelines with proper error handling and cleanup.
  • Performance and Quality: Apply bundle optimization, accessibility-aware patterns, trackBy usage, and strong test coverage for production-ready frontends.
  • Use Case: Use this Skill when building a new Angular dashboard, modernizing an existing app to standalone APIs, or adding a maintainable state and routing architecture to an enterprise project.

Quick Start

Ask for a complete Angular 17+ feature implementation with standalone components, signals, routing, NgRx, and tests tailored to your app.

Frequently Asked Questions about angular-architect

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

FAQPage Schema
How do I set up Angular standalone components with signals and OnPush change detection?▼

Angular standalone components with signals and OnPush change detection are generated using signal-based state, computed values, inputs, and outputs. This approach targets Angular 17+ enterprise frontends requiring strict TypeScript and optimized rendering pipelines.

What's the best way to configure lazy-loaded routing with guards and resolvers in Angular?▼

Lazy-loaded routing in Angular is configured with guards, resolvers, route inputs, and child routes for feature areas. This setup supports enterprise applications needing protected routes, preloaded data, and modular bundle splitting.

How do I structure NgRx reducers, selectors, and effects with proper RxJS error handling?▼

NgRx reducers, selectors, and effects are structured alongside resilient RxJS observable pipelines with proper error handling and cleanup. This pattern suits production Angular applications requiring scalable state management and reactive flow control.

Can I use this approach to modernize an existing Angular app to standalone APIs and signals?▼

Modernizing an existing Angular app to standalone APIs and signals is supported through performance-oriented refactors. This includes migrating to standalone components, signal-based state, OnPush change detection, and bundle optimization for production readiness.

How do I write tests for Angular standalone components and NgRx store implementations?▼

Tests for Angular standalone components and NgRx store implementations are generated with strong coverage requirements. This ensures production-ready frontends meet quality standards across component design, state management, and reactive flow validation.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

angular-component-generator

Generate Angular 17+ standalone components with TypeScript, HTML, and SCSS.

Community
Basic
shalevaminshalevamin

angular-architect

Generate Angular 17+ standalone components with NgRx state management and routing.

Community
Advanced
enigmaicon-engenigmaicon-eng
1

angular-architect

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

Community
Advanced
huangwb8huangwb8
47

frontend-specialist

Design frontend architectures and component systems for React/Vue apps.

Community
Intermediate