angular

Angular Stack Guide

Installation

curl -fsSL https://raw.githubusercontent.com/krovomi/ai-agent-kit/main/install | bash -s -- --stack=angular

Agents

Communs (tous les stacks)

Agent	Rôle	Model
@architect	Design, SOLID, Clean Architecture	Sonnet
@reviewer	Code review, sécurité	Sonnet
@docwriter	Documentation API	Haiku

Angular spécifiques

Agent	Rôle	Model	Tokens
@architect	Architecture Angular + NgRx + Material	Sonnet	~100
@angular-developer	Angular implementation	Sonnet	~70
@angular-tester	Tests Jasmine/Karma/Playwright	Sonnet	~50
@angular-component-builder	UI components with Material	Sonnet	~40
@angular-api-integrator	API → TypeScript + RxJS	Sonnet	~45

Chains

Chain	Séquence	Usage
@chain:frontend-feature	api → dev → test → review	Feature frontend
@chain:component	component → test	Composant UI seul
@chain:api-integration	api → test	Intégration API backend

Architecture

src/
├── app/
│   ├── core/              # Services singleton, interceptors
│   ├── shared/            # Composants réutilisables, pipes, directives
│   ├── features/          # Modules fonctionnels
│   │   ├── auth/          # Authentification
│   │   ├── users/         # Gestion utilisateurs
│   │   └── ...            # Autres features
│   ├── store/             # NgRx store
│   └── routing/           # Configuration routing
├── assets/                # Assets statiques
├── environments/          # Environnements
└── styles/                # Styles globaux

Stack Technique

Catégorie	Technologie
Framework	Angular {{ angular_version
Language	TypeScript 5.x (strict)
State Management	NgRx + Signals
Forms	Reactive Forms
UI Library	Angular Material
Testing	Jasmine + Karma + Playwright
Build	Angular CLI + Webpack

Patterns

Component (standalone)

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  template: `
    <div class="user-profile">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  `,
  styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent {
  @Input() user: User;
}

Service (injectable)

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private readonly http = inject(HttpClient);
  
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

Gates

gates:
  - name: types
    command: "pnpm run type-check"
  - name: build
    command: "pnpm run build"
  - name: test
    command: "pnpm run test:ci"
  - name: coverage
    command: "pnpm run test:coverage"
    expect: "coverage >= 80"
  - name: a11y
    command: "pnpm run test:a11y"

Compact Mode (~200 tokens)

Voir templates/angular/.claude/compact/ pour le mode documentation condensée.

Pour les tâches complexes:

@angular-developer:full "Design auth flow with JWT refresh"

Exemples

# Feature complète frontend
@chain:frontend-feature "Add user management page with CRUD"

# Composant UI seul
@chain:component "DataTable with sorting and pagination"

# Intégration API
@chain:api-integration "Setup user service with error handling"

# Agent individuel
@angular-developer "Add product list page with filters"

# Agent spécialisé
@angular-component-builder "Create Modal component with variants"

Bonnes pratiques Angular

• Standalone Components : Privilégier les composants standalone
• Signals : Utiliser les signals pour la réactivité simple
• NgRx : Pour les états complexes et partagés
• Performance : OnPush change detection et trackBy
• Accessibilité : WCAG 2.1 compliance obligatoire

→ Voir ../../.ai-agents/agents/frontend/angular/ pour les agents