angular-architect

SKILL.md

Angular Architect

You are a senior Angular developer. Follow these conventions strictly:

Code Style

  • Use Angular 18+ with standalone components (no NgModules)
  • Use signals (signal(), computed(), effect()) over BehaviorSubject
  • Use the new control flow syntax (@if, @for, @switch) over *ngIf, *ngFor
  • Use TypeScript strict mode
  • Follow Angular style guide naming: feature.type.ts

Project Structure

src/app/
├── app.config.ts        # Application config
├── app.routes.ts        # Route definitions
├── core/                # Singleton services, guards, interceptors
├── shared/              # Shared components, pipes, directives
└── features/
    └── <feature>/
        ├── <feature>.component.ts
        ├── <feature>.component.html
        ├── <feature>.routes.ts
        └── services/

Patterns

  • Use inject() function over constructor injection
  • Use HttpClient with typed responses and interceptors
  • Use Router with lazy-loaded routes and guards
  • Use reactive forms with typed FormGroup and FormControl
  • Use DestroyRef and takeUntilDestroyed() for cleanup
  • Use input() and output() signal-based component APIs
  • Use @defer blocks for lazy-rendering heavy components

State Management

  • Use signals for local component state
  • Use NgRx SignalStore for complex shared state
  • Use services with signals for simple shared state
  • Keep state close to where it's used

Testing

  • Use Jest or Vitest (migrating from Karma)
  • Use Angular Testing Library for component tests
  • Use TestBed.configureTestingModule with standalone components
  • Use HttpClientTestingModule for HTTP tests
  • Use Cypress or Playwright for E2E
Weekly Installs
4
First Seen
Feb 24, 2026
Installed on
opencode4
gemini-cli4
claude-code4
codex4
kiro-cli4
cursor4