skill:angular-architect — Enterprise Angular Architecture & Patterns

Version: 1.0.0

Purpose

Design and implement scalable enterprise Angular application architectures. This skill guides decisions on module organization, state management strategy, component hierarchy, lazy loading, micro-frontend boundaries, monorepo structure (Nx/Turborepo), and standalone component migration. Use when starting new Angular projects, refactoring existing architectures, or evaluating architectural trade-offs.

File Structure

skills/angular-architect/ ├── SKILL.md (this file) └── examples.md

Interface References

• Context: Loaded via ContextProvider Interface

• Memory: Accessed via MemoryStore Interface

• Shared Patterns: Shared Loading Patterns

• Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json

Mandatory Workflow

IMPORTANT: Execute ALL steps in order. Do not skip any step.

Step 1: Initial Analysis

• Gather inputs: project type, team size, expected scale, existing codebase (if any)

• Detect Angular version (standalone components vs NgModules)

• Determine monorepo usage (Nx, Turborepo, Angular CLI workspaces)

• Identify current state management (NgRx, NGXS, Akita, Elf, signals-based, service-based)

• Identify UI component library (Angular Material, PrimeNG, Taiga UI, custom)

• Determine project name for memory lookup

Step 2: Load Memory

Follow Standard Memory Loading with skill="angular-architect" and domain="angular" .

Load per-project memory files if they exist:

• project_overview.md — Framework stack, Angular version, key dependencies

• architecture_decisions.md — ADRs and rationale for past choices

• module_map.md — Module/library boundaries and dependency graph

• patterns_catalog.md — Established patterns in this project

Step 3: Load Context

Follow Standard Context Loading for the angular domain. Stay within the file budget declared in frontmatter.

Always Load:

• contextProvider.getConditionalContext("angular", "common_issues") — Universal Angular problems

Load Based on Detection:

• Standalone migration → contextProvider.getConditionalContext("angular", "component_patterns")

• State management → contextProvider.getConditionalContext("angular", "ngrx_patterns")

• Service architecture → contextProvider.getConditionalContext("angular", "service_patterns")

• Performance concerns → contextProvider.getConditionalContext("angular", "performance_patterns")

• TypeScript architecture → contextProvider.getConditionalContext("angular", "typescript_patterns")

Step 4: Architectural Assessment

Evaluate the project across these architectural dimensions:

Module Organization

• Feature modules vs domain modules vs shared modules

• Standalone components migration path (Angular 15+)

• Library boundaries in monorepo setups

• Circular dependency detection and resolution

State Management Strategy

• Global state (NgRx/NGXS/Akita/Elf) vs local component state

• Signal-based reactive state (Angular 16+)

• Server state vs client state separation

• State hydration for SSR/SSG

Component Architecture

• Smart (container) vs presentational (dumb) component separation

• Component communication patterns (Input/Output, services, state)

• Component granularity and reusability

• Dynamic component loading patterns

Routing & Lazy Loading

• Route-based code splitting

• Preloading strategies (PreloadAllModules, custom)

• Guard architecture (functional guards in Angular 15+)

• Resolver patterns and data prefetching

Dependency Injection Architecture

• Provider scope hierarchy (root, module, component)

• Multi-provider patterns

• Injection token design

• Abstract service patterns for testability

Scalability Patterns

• Micro-frontend boundaries (Module Federation, Native Federation)

• Monorepo library architecture (Nx buildable/publishable libs)

• Shared component libraries

• API layer abstraction

Build & Deploy Architecture

• Build optimization (budgets, tree-shaking, chunk strategy)

• Environment configuration

• CI/CD pipeline considerations

• SSR/SSG with Angular Universal or Analog

Step 5: Generate Architectural Recommendations

Produce actionable recommendations including:

• Architecture diagrams (described in text/mermaid)

• Module/library dependency graph

• Migration path for incremental adoption

• Decision records (ADRs) for key choices

• Risk assessment for proposed changes

Step 6: Generate Output

• Save output to /claudedocs/angular-architect_{project}_{YYYY-MM-DD}.md

• Follow naming conventions in ../OUTPUT_CONVENTIONS.md

Step 7: Update Memory

Follow Standard Memory Update for skill="angular-architect" . Store any newly learned patterns, conventions, or project insights.

Update per-project memory:

• project_overview.md: Angular version, dependencies, team size, scale

• architecture_decisions.md: ADRs from this session's recommendations

• module_map.md: Updated module/library boundaries

• patterns_catalog.md: New patterns introduced or validated

Compliance Checklist

Before completing, verify:

• All mandatory workflow steps executed in order

• Standard Memory Loading pattern followed (Step 2)

• Standard Context Loading pattern followed (Step 3)

• All 7 architectural dimensions assessed (Step 4)

• Recommendations include migration path (Step 5)

• Output saved with standard naming convention

• Standard Memory Update pattern followed (Step 7)

Version History

Version Date Changes

1.0.0 2026-02-12 Initial release — enterprise Angular architecture patterns