angular-nx-architect

Scaffold Angular 21 apps in an Nx monorepo with app-first folder structure.

Updated Apr 22, 2026

Search Tags:#architecture #angular #injection #monorepo #signals #nx #standalone

Ready to run

npx skills add https://github.com/Shockwave2k/team-claude-skills --skill angular-nx-architect

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-nx-architect
Source: https://github.com/Shockwave2k/team-claude-skills/tree/main/skills/frontend/angular-nx-architect
Command: npx skills add https://github.com/Shockwave2k/team-claude-skills --skill angular-nx-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the setup and ongoing maintenance of large Angular Nx workspaces by enforcing a consistent app-first architecture where each app owns its domain logic and shared utilities live in clearly defined libs only when needed.

Core Features & Use Cases

App-first organization: keep domain logic, layouts, and features inside the owning app to minimize cross-app coupling.
Nx-aligned folder pattern: follow the data-access, feat-, ui-, and util structure inside every app to maximize tree-shaking and affected builds.
Angular 21 defaults: use standalone components, inject() for DI, signals for reactive state, and zoneless change detection to simplify maintenance.
Use Case: when starting a new portal-like workspace, run this skill to scaffold apps portal-example, portal-neolink, and portal-hive with consistent structure.

Quick Start

Create a new Angular Nx app using the app-first structure with data-access, feat-, ui-, and util folders.

Frequently Asked Questions about angular-nx-architect

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

FAQPage Schema

How do I structure an Angular Nx monorepo with an app-first architecture?▼

An app-first Angular Nx monorepo keeps domain logic inside each owning app using data-access, feat-*, ui-*, and util folders to minimize cross-app coupling. Shared code lives in clearly defined libs only when strictly needed.

What is the best way to organize folders inside an Angular Nx app?▼

The best way to organize an Angular Nx app is using data-access, feat-*, ui-*, and util folders. This structure aligns with Nx affected builds and maximizes tree-shaking by grouping code by functional responsibility.

How do I set up Angular 21 with standalone components and zoneless change detection?▼

To set up Angular 21 with zoneless change detection, scaffold standalone components, use inject() for dependency injection, and implement signal-based reactivity for state management. This configuration simplifies ongoing maintenance.

Can I use signals and inject() for dependency injection in an Nx workspace?▼

Yes, you can use signals for reactive state and inject() for dependency injection across your Nx workspace. These Angular 21 defaults are applied during scaffolding to ensure consistent project architecture.

When should I not use an app-first structure in an Angular Nx workspace?▼

You should avoid an app-first structure if your domain logic requires heavy sharing across multiple apps, as this approach keeps features contained within individual apps to minimize coupling and uses shared libs sparingly.

Does scaffolding an Angular Nx workspace configure project.json tagging and module boundaries?▼

Yes, scaffolding an Angular Nx workspace configures project.json tagging and guides module boundaries to enforce the app-first approach, ensuring app-contained domain logic and a consistent folder layout.