skills.rest
Design-System-ET
Design-System-ETOFFICIAL
Explore all skills by this author →
GitHub

angular-architect

Generate Angular 17+ standalone components with signals and NgRx stores.

Updated Jun 16, 2026
Search Tags:#typescript#architecture#frontend#angular#signals#rxjs#ngrx
One-click install
npx skills add https://github.com/Design-System-ET/genexus-dev-opencode --skill angular-architect-design-system-et
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-architect
Source: https://github.com/Design-System-ET/genexus-dev-opencode/tree/main/skills/angular-architect
Command: npx skills add https://github.com/Design-System-ET/genexus-dev-opencode --skill angular-architect-design-system-et

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of modernizing Angular applications by providing a standardized, high-performance architecture based on standalone components, signals, and reactive patterns.

Core Features & Use Cases

  • Modern Architecture: Implements Angular 17+ standalone components, signal-based state management, and OnPush change detection.
  • State & Routing: Configures robust NgRx stores and advanced lazy-loaded routing with functional guards.
  • Use Case: Use this skill when migrating legacy NgModule-based apps to standalone architecture or when scaffolding a new enterprise project requiring high test coverage and optimized bundle performance.

Quick Start

Use the angular-architect skill to scaffold a new standalone component with signal-based inputs and an associated NgRx store for state management.

Frequently Asked Questions about angular-architect

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

FAQPage Schema
How do I migrate legacy NgModule-based Angular apps to standalone components?▼

Migrate legacy Angular applications by scaffolding standalone components and replacing NgModule dependencies with signal-based state management. This modernizes the architecture to use Angular 17+ standards while maintaining high unit test coverage.

What is the best way to manage state in Angular 17 using signals and NgRx?▼

Manage state in Angular 17 by configuring robust NgRx stores alongside signal-based state management. This combination provides reactive RxJS patterns and optimized routing configurations for scalable web applications.

How do I implement OnPush change detection with standalone components in Angular?▼

Implement OnPush change detection by generating enterprise-grade Angular 17+ standalone components. This ensures strict TypeScript standards and optimized bundle performance for high-performance architecture.

Can I use functional guards with lazy-loaded routing in Angular 17 enterprise projects?▼

Yes, you can configure advanced lazy-loaded routing with functional guards in Angular 17. This facilitates complex state management via NgRx and ensures strict TypeScript standards for scalable applications.

Does this Angular architecture approach support strict TypeScript standards and high test coverage?▼

Yes, this architecture enforces strict TypeScript standards and high unit test coverage thresholds. It generates Angular 17+ code structures using standalone components, signals, and reactive RxJS patterns.

Why use signals for state management when scaffolding new Angular enterprise projects?▼

Use signals for state management to standardize high-performance architecture in new Angular enterprise projects. It implements OnPush change detection and reactive patterns, optimizing bundle performance and scalability.

Related Skills

Explore More Software Engineering Skills→
jbaranskijbaranski

jeff-skill-angular-project

Install or update the Angular CLI globally and verify with ng version.

Community
Intermediate
secondskysecondsky
204

web-performance-optimization

Apply code splitting, lazy loading, caching, and Core Web Vitals monitoring to web apps.

Community
Advanced
JeffallanJeffallan
10.9k

angular-architect

Design Angular 17+ applications with standalone components, signals, and reactive patterns.

Community
Advanced
NgDuyKhanhsNgDuyKhanhs

vue-pinia-best-practices

Analyze Pinia stores in Vue 3 applications for state-management pitfalls.

Community
Intermediate