Angular Agent Skills : guide complet

Qu'est-ce que les Angular Agent Skills ?

Depuis l'avènement des assistants de code IA (GitHub Copilot, Gemini CLI, Cursor, Claude Code), les développeurs Angular font face à un problème récurrent : les modèles de langage génèrent souvent du code Angular obsolète. NgModules au lieu de composants standalone, OnInit au lieu de inject(), BehaviorSubject au lieu de signal()... Le code est syntaxiquement correct, mais ne reflète pas les bonnes pratiques Angular v17-v21.

Les Angular Agent Skills résolvent ce problème à la source. Ce sont des paquets d'instructions spécialisées, maintenus officiellement par l'équipe Angular, qui donnent aux agents IA un contexte précis et à jour sur :

• Les conventions actuelles du framework (standalone components, signal-based reactivity)
• Les APIs modernes (inject(), resource(), linkedSignal(), httpResource())
• Les patterns d'architecture recommandés pour Angular v21
• Les outils CLI, le SSR avec Angular Universal, l'accessibilité ARIA
• Les bonnes pratiques de testing avec Vitest et Playwright

Le dépôt officiel github.com/angular/skills compte déjà plus de 319 étoiles et 27 forks depuis son lancement. Il est synchronisé avec le dépôt principal angular/angular — les skills évoluent avec le framework, pas indépendamment.

Pourquoi maintenant ?

Angular v21 a opéré une rupture nette avec l'ancienne façon de coder. Les templates de formation sur le web restent massivement centrés sur les NgModules et RxJS. Les LLMs, entraînés sur ces données historiques, perpétuent ces patterns dépassés. Les Agent Skills sont la réponse structurée de l'équipe Angular : plutôt que d'espérer que les modèles "apprennent" les nouveaux patterns, on leur injecte directement les instructions correctes au moment de l'exécution.

Comment fonctionnent les Agent Skills ?

Le mécanisme repose sur le protocole skills.sh — une spécification ouverte pour packager des instructions IA réutilisables. Un skill est essentiellement un ensemble de fichiers texte structurés que les agents IA lisent avant de répondre à vos prompts.

Architecture d'un skill Angular

Chaque skill se compose de deux éléments principaux :

• Instructions de base : règles architecturales, patterns préférés, APIs à utiliser
• Ressources contextuelles : extraits de documentation, exemples de code de référence, liens vers les guides officiels

Flux d'exécution avec Gemini CLI

Voici comment un Agent Skill est utilisé en pratique :

# 1. L'utilisateur pose une question à Gemini CLI
gemini "Crée un composant Angular pour afficher une liste de produits"

# 2. Gemini CLI détecte le skill angular-developer actif
# 3. Les instructions Angular sont injectées dans le contexte système
# 4. Le modèle génère du code Angular v21 moderne, pas Angular 12

# Résultat généré par l'IA SANS le skill :
# → NgModule, HttpClient dans le constructeur, ngOnInit, subscribe()

# Résultat généré par l'IA AVEC le skill angular-developer :
# → Standalone component, inject(HttpClient), resource(), signal()

Compatibilité des outils

Installation et configuration avec Gemini CLI

La mise en place des Angular Agent Skills prend moins de 5 minutes. Voici le workflow complet depuis zéro.

Prérequis

• Node.js 18+ (pour npx)
• Gemini CLI installé (npm install -g @google/gemini-cli) — ou Antigravity
• Un projet Angular existant ou en cours de création

Étape 1 : Installer les skills via npx

La commande officielle télécharge et enregistre les deux skills Angular dans votre environnement :

# Installer les Angular Agent Skills officiels
npx skills add https://github.com/angular/skills

# Vérifier l'installation
npx skills list
# → angular-developer  (v1.x)
# → angular-new-app    (v1.x)

Étape 2 : Activer un skill pour votre session

# Démarrer Gemini CLI avec le skill angular-developer actif
gemini --skill angular-developer

# Ou via la configuration Gemini CLI
# Fichier : ~/.gemini/settings.json
{
  "defaultSkills": ["angular-developer"]
}

Étape 3 : Vérifier que l'IA utilise les bonnes conventions

Pour valider que le skill est bien actif, posez une question simple :

# Prompt de test
"Génère un service Angular qui récupère une liste d'utilisateurs depuis une API REST"

# Résultat ATTENDU avec angular-developer skill :
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { resource } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {
  // inject() remplace l'injection par constructeur
  private http = inject(HttpClient);

  // resource() gère automatiquement loading/error/data
  users = resource({
    loader: () => this.http.get<User[]>('/api/users')
  });
}

Mise à jour des skills

Les skills évoluent avec Angular. Pour maintenir les instructions à jour :

# Mettre à jour tous les skills installés
npx skills update

# Mettre à jour un skill spécifique
npx skills update angular-developer

# Voir la version courante et les changements
npx skills info angular-developer

Le skill angular-developer en détail

Le skill angular-developer est le skill principal pour le développement quotidien Angular. Il couvre l'ensemble du cycle de vie d'une feature, de la création du composant au test unitaire.

Domaines couverts

Exemples générés par le skill

Composant avec entrées typées et ChangeDetection.OnPush :

// Code généré par l'IA avec angular-developer skill actif
import {
  Component,
  input,       // nouveau : input signal (remplace @Input())
  output,      // nouveau : output function (remplace @Output())
  computed,
  ChangeDetectionStrategy,
} from '@angular/core';

@Component({
  selector: 'app-product-card',
  standalone: true,   // standalone TOUJOURS par défaut
  changeDetection: ChangeDetectionStrategy.OnPush, // performance
  template: `
    <article class="product-card">
      <h2>{{ product().name }}</h2>
      <p>{{ discountedPrice() | currency }}</p>
      <button (click)="addToCart.emit(product())">
        Ajouter au panier
      </button>
    </article>
  `,
})
export class ProductCardComponent {
  // input() signal — typé, requis, sans @Input()
  product = input.required<Product>();
  discount = input<number>(0);

  // computed() dérive automatiquement du signal
  discountedPrice = computed(() =>
    this.product().price * (1 - this.discount() / 100)
  );

  // output() function — remplace EventEmitter + @Output()
  addToCart = output<Product>();
}

Service avec resource() pour les appels HTTP

Le skill guide l'IA vers resource() pour les appels asynchrones, remplaçant les patterns RxJS complexes :

import { Injectable, inject, resource, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Product {
  id: number;
  name: string;
  price: number;
}

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);

  // Signal réactif pour l'ID du produit à charger
  selectedProductId = signal<number | null>(null);

  // resource() recharge automatiquement quand selectedProductId change
  product = resource({
    request: () => this.selectedProductId(),
    loader: ({ request: id }) => {
      if (!id) return Promise.resolve(null);
      // firstValueFrom() convertit Observable en Promise
      return firstValueFrom(
        this.http.get<Product>(`/api/products/${id}`)
      );
    },
  });

  // États disponibles automatiquement :
  // product.isLoading() → boolean
  // product.error()     → Error | null
  // product.value()     → Product | null
}

Routing avec lazy loading fonctionnel

Le skill impose les guards fonctionnels (Angular 15+) et le lazy loading avec loadComponent() :

import { Routes } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './services/auth.service';
import { Router } from '@angular/router';

export const routes: Routes = [
  {
    path: 'products',
    // loadComponent() remplace loadChildren() + NgModule
    loadComponent: () =>
      import('./pages/product-list/product-list.component').then(
        (m) => m.ProductListComponent
      ),
    // Guard fonctionnel — plus de classe implements CanActivate
    canActivate: [
      () => {
        const auth = inject(AuthService);
        const router = inject(Router);
        // Redirection si non authentifié
        return auth.isAuthenticated() || router.createUrlTree(['/login']);
      },
    ],
  },
];

Créer une app moderne avec angular-new-app

Le skill angular-new-app est dédié à la création de nouvelles applications Angular. Il guide l'agent IA pour configurer un projet avec toutes les options modernes activées dès le départ — évitant de devoir migrer plus tard.

Différences avec la création manuelle

Scaffold d'un projet Angular moderne via l'IA

Avec le skill angular-new-app actif, demandez à l'agent :

# Prompt pour créer une application e-commerce Angular v21
"Crée une nouvelle application Angular pour un site e-commerce avec SSR,
 authentification JWT, panier d'achat et tableau de bord admin."

# L'IA génère les commandes Angular CLI correctes :
ng new my-shop \
  --ssr \                          # SSR + hydration
  --style=scss \                   # SCSS pour les styles
  --routing \                      # Routing activé
  --strict \                       # Mode strict TypeScript
  --experimental-zoneless           # Zoneless pour meilleures perfs

cd my-shop

# Générer la structure recommandée
ng generate component pages/home --standalone
ng generate component pages/products --standalone
ng generate component pages/cart --standalone
ng generate service services/auth
ng generate service services/product
ng generate guard guards/auth

Configuration SSR avec hydration (app.config.ts)

Le skill indique à l'IA la configuration correcte du bootstrapping pour une app SSR moderne :

// app.config.ts — généré par l'IA avec angular-new-app skill
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import {
  provideClientHydration,
  withEventReplay,    // rejoue les événements clavier/souris lors de l'hydration
} from '@angular/platform-browser';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withViewTransitions()),
    provideHttpClient(withFetch()),    // withFetch() requis pour SSR
    provideClientHydration(
      withEventReplay()               // capture les events avant hydration
    ),
  ],
};

Zoneless Angular : la configuration expérimentale

Pour les projets prêts à adopter le mode zoneless (sans Zone.js), le skill guide vers la bonne configuration :

// app.config.ts avec mode zoneless (Angular v18+)
import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    // Remplace provideZoneChangeDetection() — pas de Zone.js nécessaire
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
    provideHttpClient(withFetch()),
  ],
};

// angular.json — retirer Zone.js du polyfills
// "polyfills": []   ← vide pour le mode zoneless

Patterns Angular couverts : signaux, inject, standalone

Le cœur de la valeur des Angular Agent Skills réside dans leur capacité à propager les patterns modernes Angular v21 à travers toutes les générations de code IA. Voici les principaux patterns enforced par les skills.

Signals : le modèle réactif natif Angular

Les skills guident l'IA vers l'API Signal complète introduite en Angular 16 et stabilisée en v17-v21 :

import { signal, computed, effect, linkedSignal } from '@angular/core';

// signal() — valeur réactive de base
const count = signal(0);
const name  = signal('Angular');

// computed() — dérivé automatique, recalculé seulement si dépendances changent
const doubled = computed(() => count() * 2);
const greeting = computed(() => `Bonjour, ${name()} !`);

// effect() — effets secondaires réactifs (logs, LocalStorage, analytics)
effect(() => {
  // S'exécute automatiquement quand count change
  console.log(`Compteur : ${count()}`);
  localStorage.setItem('count', String(count()));
});

// linkedSignal() — signal dérivé MAIS modifiable (Angular v19)
const items = signal(['a', 'b', 'c']);
const selectedItem = linkedSignal(() => items()[0]);
// selectedItem suit items() automatiquement
// MAIS peut aussi être modifié manuellement :
selectedItem.set('x');

// Mise à jour des signals
count.set(5);               // remplacement complet
count.update(v => v + 1);  // mise à jour basée sur l'ancienne valeur

inject() : l'injection de dépendances fonctionnelle

Le skill impose systématiquement inject() au lieu de l'injection par constructeur. Cette approche est plus concise et fonctionne dans les fonctions (guards, résolveurs, factories) :

// ❌ Avant : injection par constructeur (pattern Angular 2-14)
@Injectable({ providedIn: 'root' })
export class OldService {
  constructor(
    private http: HttpClient,
    private router: Router,
    private store: Store
  ) {}
}

// ✅ Après : inject() — recommandé par le skill angular-developer
@Injectable({ providedIn: 'root' })
export class ModernService {
  // Plus concis, plus testable, fonctionne aussi hors classe
  private http   = inject(HttpClient);
  private router = inject(Router);
  private store  = inject(Store);
}

// inject() dans un guard fonctionnel (impossible avec le constructeur)
export const authGuard = () => {
  const auth   = inject(AuthService);
  const router = inject(Router);
  return auth.isAuthenticated() || router.createUrlTree(['/login']);
};

// inject() dans une factory function
export function createUserResolver() {
  const userService = inject(UserService);
  return (route: ActivatedRouteSnapshot) =>
    userService.getUser(route.params['id']);
}

Formulaires réactifs typés (Angular 14+)

Les skills guident vers les formulaires avec inférence de types complète :

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" type="email" />
      <input formControlName="password" type="password" />
      <button type="submit" [disabled]="form.invalid">Connexion</button>
    </form>
  `,
})
export class LoginFormComponent {
  private fb = inject(FormBuilder);

  // TypeScript infère automatiquement les types des contrôles
  form = this.fb.group({
    email:    ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  });

  onSubmit() {
    if (this.form.valid) {
      // form.value est typé : { email: string | null, password: string | null }
      const { email, password } = this.form.value;
      console.log({ email, password });
    }
  }
}

Créer ses propres Agent Skills

Les deux skills officiels couvrent les besoins généraux Angular, mais votre équipe a peut-être des conventions spécifiques : votre propre Design System, des patterns d'architecture maison, des règles d'accessibilité particulières. Vous pouvez créer des skills privés ou contribuer au repo officiel.

Structure d'un skill custom

Un skill suit une structure de fichiers définie par le protocole skills.sh :

# Structure d'un skill privé pour votre équipe
my-company-angular-skill/
├── skill.json          # Métadonnées du skill
├── instructions.md     # Instructions pour l'agent IA
├── examples/
│   ├── component.ts    # Exemples de code de référence
│   └── service.ts
└── resources/
    └── design-system.md  # Documentation de votre DS

// skill.json — définition du skill
{
  "name": "mycompany-angular",
  "version": "1.0.0",
  "description": "Génère du code Angular conforme aux standards MyCompany",
  "author": "MyCompany Dev Team",
  "keywords": ["angular", "typescript", "mycompany"],
  "entrypoint": "instructions.md"
}

Rédiger les instructions du skill

Le fichier instructions.md est le cœur du skill. Il doit être précis, actionnable et éviter les ambiguïtés :

# MyCompany Angular Skill — Instructions

## Règles obligatoires

1. **Design System** : Utilise TOUJOURS les composants de `@mycompany/ui`
   - `<mc-button>` au lieu de `<button>`
   - `<mc-input>` au lieu de `<input>`
   - `<mc-card>` au lieu de divs avec classes custom

2. **State management** : NgRx Signal Store pour tout état partagé
   - Pas de BehaviorSubject, pas de service avec propriétés publiques mutables
   - Un Store par feature module

3. **Logging** : Toujours `inject(LoggingService)` pour les logs
   - Pas de `console.log()` direct dans le code de production

4. **API calls** : Utilise le `ApiClientService` interne
   - Pas d'injection directe de `HttpClient` dans les composants

## Style de code

- Fichiers : kebab-case strict (mon-composant.component.ts)
- Classes : PascalCase (MonComposantComponent)
- Méthodes privées : camelCase préfixé par _ (_handleError)
- Constants : SCREAMING_SNAKE_CASE (MAX_RETRY_COUNT)

Publier et partager votre skill

# Héberger le skill sur GitHub (recommandé)
# Pousser sur github.com/mycompany/angular-skills

# Installer depuis votre dépôt privé
npx skills add https://github.com/mycompany/angular-skills

# Ou depuis un dépôt local pendant le développement
npx skills add file:./my-local-skill

# Partager avec toute l'équipe via .npmrc ou script d'onboarding
echo "npx skills add https://github.com/mycompany/angular-skills" >> setup.sh

Contribuer aux skills officiels Angular

Si vous identifiez un pattern manquant dans les skills officiels, l'équipe Angular encourage les contributions :

Bonnes pratiques et intégration en équipe

Adopter les Angular Agent Skills en équipe requiert quelques ajustements organisationnels pour en tirer le maximum.

Checklist d'intégration projet

Ce que les skills ne remplacent pas

Les Angular Agent Skills améliorent la qualité du code généré, mais ils ne remplacent pas :

• La revue de code humaine : l'IA peut toujours générer du code fonctionnel mais mal architecturé
• Les tests automatisés : le skill peut suggérer des patterns de test, mais n'exécute pas les tests
• La connaissance métier : les règles propres à votre domaine métier doivent être dans vos skills privés
• Les décisions d'architecture : choix de state management, structure des modules, stratégie de caching

Métriques de qualité avant/après

Ressources pour aller plus loin

• Documentation officielle Angular Agent Skills
• Dépôt GitHub angular/skills
• Guide officiel Angular Signals
• Guide des composants standalone Angular

Questions fréquentes

Qu'est-ce que les Angular Agent Skills ?

Les Angular Agent Skills sont des ensembles d'instructions spécialisées destinées aux agents IA (Gemini CLI, Antigravity, etc.) pour générer du code Angular conforme aux conventions actuelles : composants standalone, signals, inject(), resource(), SSR avec hydration. Ils sont maintenus officiellement par l'équipe Angular.

Comment installer les Angular Agent Skills avec Gemini CLI ?

Installez via la commande `npx skills add https://github.com/angular/skills`. Les deux skills officiels (angular-developer et angular-new-app) sont alors disponibles pour votre assistant IA. Gemini CLI détecte automatiquement les skills dans votre projet.

Quelle différence entre angular-developer et angular-new-app ?

angular-developer couvre la génération de code Angular au quotidien : composants, services, formulaires, routing, tests. angular-new-app est dédié à la création d'une nouvelle application Angular avec toutes les options modernes (SSR, zoneless, hydration) configurées correctement dès le départ.

Peut-on créer ses propres Angular Agent Skills ?

Oui. Les skills sont des fichiers texte dans le répertoire skills/dev-skills/ du dépôt angular/angular. Vous pouvez contribuer des skills officiels ou créer des skills privés pour votre équipe en respectant le format skills.sh. La commande npx skills add supporte n'importe quelle URL GitHub.