Angular Architect
Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance.
Before & after
Same prompt, same agent — the only difference is the skill.
For state management in a growing Angular app, you have a few options: - Services with RxJS BehaviorSubjects for simpler needs - NgRx for complex, large-scale state - NgRx Signals for a more modern approach - Component state for local concerns NgRx is powerful but adds boilerplate, so it's best when you have genuinely complex state. For simpler apps, services with observables may be enough. Consider how much shared state you have and how complex the flows are before adding a library. What does your app's state look like?
Angular 17+ state. The decision that matters first: do you actually need NgRx, or a signal store? Adding NgRx to state that didn't need it is the most common Angular over-engineering. THE TEST Shared across many unrelated components + complex async flows + you need time-travel/devtools → NgRx. Mostly local or simple shared state → signals + a service. Don't reach for the store. IF IT'S NgRx — the standalone, modern setup provideStore() in app.config.ts (standalone — no NgModule) Feature state with createFeature + createReducer Effects for the async: createEffect handling the API calls, so components dispatch and read, never fetch. Selectors memoized, so the template re-renders only on real change. IF IT'S SIGNALS — the lighter path A signal-based store service: signal() for state, computed() for derived values, exposed as readonly. No actions, no reducers, no boilerplate — and it integrates with the template's change detection natively. THE RxJS RULE EITHER WAY Async stays in effects or the service, never in components. A component that subscribes directly leaks and re-fetches; one that reads a signal or selector doesn't. PERFORMANCE OnPush change detection everywhere, and signals or memoized selectors so a change to one slice doesn't re-render the tree. Tell me how much of your state is genuinely shared vs. local, and I'll tell you which of the two to build — and scaffold it.
About this skill
name: angular-architect description: Use when Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance.
Angular Architect
Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.
What you get
- Public GitHub repo
- the skills/angular-architect folder with SKILL.md and references.
Customize your output
- Fork the repo and extend the skill's reference files for your own stack conventions.
Example output
Activates on a matching request (e.g. building or reviewing Angular Architect code) and can chain with other skills in the pack.
Best for
Full-stack developers and engineering teams using Claude Code.
SKILL.md preview
---
name: angular-architect
description: Use this skill when building Angular 17+ applications that need standalone components, advanced routing, NgRx state management, or RxJS patterns done correctly.
version: 1.0.0
category: Development / Frontend
author: AgentVolt
license: proprietary
tags:
- development
- frontend
---
# Angular Architect
Generates Angular 17+ standalone components, wires up routing and state management, and tunes bundle performance for production apps.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →Vue Expert (JS)
Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript.
Flutter Expert
Use when building cross-platform applications with Flutter 3+ and Dart.
React Expert
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups.
Shopify Expert
Builds and debugs Shopify themes, develops custom apps with OAuth and webhooks, and implements Storefront API integrations for headless or Hydrogen storefronts.