Engineering AngularSignalsNgRx

Angular Architect

Angular architecture: standalone components, signals, NgRx/signal store, lazy loading, micro-frontends, testing with Jest/Cypress, and enterprise patterns.

An Angular architect experienced with enterprise-scale SPAs: standalone component migration, Angular Signals for fine-grained reactivity, NgRx signal store for predictable state, and Module Federation for micro-frontend composition. Designs lazy-loading strategies that hit sub-2s initial load, writes testable services with TestBed, and configures zone-less change detection.

Added Mar 20, 2026

$npx skills add johnefemer/skillfish --skill angular-architect

Capabilities Real Examples Get Started Models & Context Works Great With

What This Skill Can Do

Concrete capabilities you get when you install this skill.

Architect standalone component trees with lazy routes and deferred loading

Implement Angular Signals and signal-based inputs/queries for fine-grained reactivity

Design NgRx signal stores with entity adapters and computed state

Set up Module Federation for micro-frontend shell + remote architecture

Write component and service tests with TestBed, jest-marbles, and Cypress

Enable zoneless change detection and migrate zone-dependent code

Real Conversations

See how the Angular Architect skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

We're on Angular 15 with ~200 NgModule-based components. The team wants to migrate to standalone. What's the safest incremental approach?

Agent

Angular's ng generate includes a standalone migration schematic — use it component by component rather than all at once:

Phase 1: Leaf components first (lowest risk)

# Migrate one component at a time
ng generate @angular/core:standalone --path src/app/components/button

# Or use the interactive migration tool
ng generate @angular/core:standalone

This converts the component to standalone: true and moves its imports from NgModule declarations to the component's own imports array.

Phase 2: Remove NgModules iteratively Once all components in a module are standalone, the module is just a routing wrapper. Collapse it:

// ❌ Old: AppModule + RouterModule.forRoot()
@NgModule({ imports: [RouterModule.forRoot(routes)] })
export class AppRoutingModule {}

// ✅ New: provideRouter in app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withPreloading(PreloadAllModules))]
};

Phase 3: Bootstrap migration

// main.ts — replace platformBrowserDynamic().bootstrapModule(AppModule)
bootstrapApplication(AppComponent, appConfig);

Risk mitigation:

Keep SharedModule alive until all consumers are migrated — don't delete it early
Run ng build --configuration production after each module migration to catch missing imports
Migrate feature modules team-by-team if you have multiple teams, not all at once

You

Our Angular app runs change detection on every mouse move event and the UI is janky at 60fps. We're using Default change detection everywhere. How do we fix this?

Agent

Two fixes, in order of invasiveness:

Fix 1: Run the event listener outside Angular's zone (quick win)

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

ngAfterViewInit() {
  this.zone.runOutsideAngular(() => {
    // Angular's change detection won't fire for this listener
    this.el.nativeElement.addEventListener('mousemove', (e: MouseEvent) => {
      this.updatePosition(e.clientX, e.clientY); // only updates a local var
      // Only trigger CD when something visible actually changes:
      if (this.shouldUpdate()) this.zone.run(() => this.visibleState = this.newValue);
    });
  });
}

Fix 2: Switch to OnPush change detection (best long-term)

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MapComponent {
  @Input() markers: Marker[] = [];
  // CD only fires when: @Input reference changes, async pipe resolves, markForCheck() called
}

With OnPush + zone.runOutsideAngular, the component only re-renders when you explicitly call this.cdr.markForCheck() — giving you full control.

Angular 17+ (signals): Signals automatically opt components into signal-based updates with no zone involvement:

position = signal({ x: 0, y: 0 });
// Updating position.set() only re-renders components that read position()

Start with Fix 1 for immediate jank relief, then migrate the component to signals in the next sprint.

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Claude Sonnet 4 or GPT-4o have good Angular 17+ knowledge including signals. Verify NgRx signal store APIs against the official docs as they stabilized in NgRx 17.

Context Window

SKILL.md ~5KB. Enterprise app architecture discussions benefit from 64K+ context to hold module trees and state models.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Works Great With

These skills complement Angular Architect for end-to-end coverage. Install them together for better results.

Senior Frontend

React, Next.js, TypeScript, Tailwind CSS, accessibility, and performance.

FrontendReact

TypeScript Pro

Advanced TypeScript patterns: generics, conditional types, mapped types, module augmentation, declaration files, and strict-mode migration guides.

TypeScriptGenerics

Playwright Pro

Production-grade Playwright testing toolkit with 55 templates and smart reporting.

TestingPlaywright

TDD Guide

Test-driven development workflow with test generation and multi-framework support.

TDDTesting

$ skillfish add johnefemer/skillfish --all # install all skills at once

Ready to try Angular Architect?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.