Generate Angular 18+ project with Signals, standalone components, SSR, testing. Use when user asks to "scaffold an Angular app".
From sovereign-architectnpx claudepluginhub javimontano/mao-sovereign-architectThis skill is limited to using the following tools:
agents/angular-scaffolder-agent.mdagents/signals-migration-agent.mdevals/evals.jsonexamples/sample-output.mdprompts/use-case-prompts.mdreferences/body-of-knowledge.mdreferences/knowledge-graph.mmdreferences/state-of-the-art.mdGenerate Angular 19+ project with Signals-first reactivity, standalone components, optional SSR via Angular Universal, and a production-ready testing and CI setup.
"Standalone components are the present — NgModules are the past. Signals are the future of Angular reactivity. Write new Angular as if NgModules never existed."
[HECHO] if confirmed, [SUPUESTO] if inferred.ng new my-app --standalone --routing --style=scss --strict.angular.json has schematics.@schematics/angular:component.standalone: true — enforces standalone as default.strict: true, strictTemplates: true in tsconfig.json. Never lower these.ng add @analogjs/tailwind or manual tailwind.config.ts + PostCSS config.ng add @angular/material — choose a theme, enable typography.tsconfig.json: "@app/*": ["src/app/*"], "@env/*": ["src/environments/*"].src/app/core/ for singletons: AuthService, HttpInterceptors, ErrorHandler.src/app/shared/ for shared UI components: ButtonComponent, ModalComponent.src/app/features/ for feature groups: each with its own routing, services, and components.signal() for component state, computed() for derived state, effect() for side effects with explicit allowSignalWrites.@ngrx/signals signalStore() — not classic NgRx with actions/reducers.provideHttpClient(withInterceptors([authInterceptor])) in app.config.ts (not AppModule).authInterceptor as a functional interceptor (not class-based): (req, next) => { ... }.provideRouter with withPreloading(PreloadAllModules) or withViewTransitions() for animated navigation.canActivate: [() => inject(AuthService).isAuthenticated()].loadComponent (not loadChildren with modules) for standalone components.withComponentInputBinding() in router config — allows route params as @Input().@analogjs/vitest-angular) or keep Jasmine for enterprise mandate.TestBed.inject), components (HarnessLoader for Material), pipes.angular.json: maximumError: 1mb initial bundle, anyComponentStyle: 6kb."builder": "@angular-devkit/build-angular:application" (replaces Webpack-based builder)..github/workflows/ci.yml: ng lint → ng test --no-watch → ng build --configuration=production.| Decision | Default | Alternative | When to Switch |
|---|---|---|---|
| Component style | Standalone | NgModules | Large legacy codebase migration |
| Reactivity | Signals | RxJS Observables | Complex async streams (HTTP, WebSocket) |
| State management | Signals (signal()) | NgRx Signals Store | Cross-feature shared state, time-travel debug |
| HTTP client | HttpClient + functional interceptor | fetch API | Edge/SSR with minimal runtime |
| Routing | Lazy loadComponent | loadChildren | NgModule-based feature groups (legacy) |
| Styling | SCSS + Tailwind | Angular Material | No design team; need full component kit |
| Testing | Vitest (via Analog) | Karma + Jasmine | Enterprise mandate or large existing test suite |
| E2E | Playwright | Cypress | Existing Cypress investment |
| Build | esbuild (application builder) | Webpack (browser builder) | Rare custom Webpack plugins needed |
| SSR | Angular Universal | Analog.js | File-based routing + Vite DX preferred |
ng build --configuration=production exits 0, initial bundle under budget (maximumError: 1mb).ng lint exits 0 — no @typescript-eslint/no-explicit-any violations.strictTemplates: true — no template type errors; template expressions are type-checked.NgModule declarations in new code.CanActivate.SharedModule just to re-export components adds indirection with no benefit.BehaviorSubject when a signal() suffices — For synchronous local state, Signals are simpler, more performant (granular change detection), and easier to read. Reserve RxJS for genuinely async streams.CanActivate interface class pattern is deprecated. Functional guards (canActivate: [() => inject(Service).check()]) are simpler, don't require providers, and are the current best practice.strictTemplates — Angular's template type checker catches binding errors at compile time. Disabling it means type errors silently become runtime crashes.ChangeDetectorRef.detectChanges() with Signals — Signals automatically trigger granular change detection. Calling detectChanges() manually is a sign of mixing reactivity models. Remove and let Signals drive the view.Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.