Agent Skills : transformez votre IA en développeur Angular senior

Les agents IA n’ont jamais été aussi puissants. Mais sur Angular… ils sont restés bloqués sur la version 16.

Alors que nous sommes passés à l’ère de l’Angular moderne avec les signaux (signal(), input()), les nouveaux contrôles de flux (@if, @for) et les composants autonomes, les LLMs continuent de générer du code d’un autre temps : @Input, *ngFor et NgModule. Jusqu’ici, nous ne pouvions donc pas profiter pleinement de la puissance de l’IA.

Mais la donne vient de changer. L’équipe Angular vient de publier ses skills officiels pour faire passer votre agent IA d’un développeur Angular junior à un senior. Ces skills s’appuient sur le standard ouvert Agent Skills, initié par Anthropic et supporté par les principaux agents IA comme GitHub Copilot, Claude Code et Gemini CLI.

Qu’est-ce que le standard Agent Skills ?

Un Agent Skill est un dossier contenant un fichier SKILL.md qui inclut des métadonnées (un frontmatter YAML qui doit inclure au minimum name et description) et des instructions expliquant à un agent comment accomplir une tâche spécifique. Un skill peut également contenir :

• du code exécutable dans un dossier scripts/
• de la documentation de référence en Markdown dans un dossier references/
• des ressources statiques (templates, images, schémas de données) dans un dossier assets/

Contrairement au format AGENTS.md (un fichier de contexte global chargé systématiquement et entièrement à chaque session), les skills sont chargés de manière différée et progressive. Lorsqu’un agent commence une tâche, il charge uniquement les métadonnées du skill pour déterminer dans quel contexte et à quel moment il doit lire le reste du fichier SKILL.md. Cela permet aux agents de disposer de toutes les informations nécessaires sans saturer leur fenêtre de contexte ni gaspiller des tokens.

Comment fonctionnent les “Agent Skills” ?

Le chargement progressif des Agent Skills se déroule en trois phases — découverte, activation, exécution — comme illustré dans le diagramme suivant :

• Phase 1 — Découverte : Au démarrage, l’agent charge uniquement le nom et la description de chaque skill.
• Décision : Pour chaque tâche reçue, l’agent évalue si elle correspond à la description d’un skill. Si ce n’est pas le cas, le skill reste inactif. Sinon, on passe à l’activation.
• Phase 2 — Activation : L’agent charge dans son contexte les instructions détaillées contenues dans le fichier SKILL.md.
• Phase 3 — Exécution : L’agent suit les instructions, charge des fichiers supplémentaires référencés dans le skill si besoin, et exécute du code si nécessaire.

Comment installer les skills Angular ?

Les skills Angular sont disponibles dans le dépôt GitHub angular/skills. Mais pour les installer dans votre projet, il suffit de lancer la commande suivante :

1npx skills add angular/skills

Une fois cette commande lancée, vous pourrez choisir les différents skills que vous souhaitez installer parmi les deux disponibles :

• angular-developer pour enseigner aux agents comment développer en Angular.
• angular-new-app pour enseigner aux agents à générer de nouveaux projets Angular.

Cela aura pour effet de télécharger et de placer les skills sélectionnés dans le dossier .agents/skills. C’est dans ce dossier que les agents compatibles — comme Claude Code, GitHub Copilot ou Gemini CLI — iront chercher les skills disponibles. Le chemin exact peut varier selon l’agent, mais .agents/skills est le chemin conventionnel adopté par la plupart des implémentations.

NOTA BENE : Il est important de noter que ce projet a d’abord vu le jour au sein de la communauté, notamment via le dépôt analogjs/angular-skills maintenu par Brandon Roberts. Face au succès de l’initiative et à l’importance du standard Agent Skills, l’équipe Angular a décidé de reprendre le flambeau en proposant un dépôt officiel angular/skills.

Avant / Après : ce que ça change vraiment

J’ai généré une nouvelle application Angular et demandé à un agent IA (modèle Gemini 3 Flash) de développer une fonctionnalité pour afficher une liste de plats.

Sans les skills

L’agent sans skills a généré du vieux code Angular :

• Décorateurs @Input(), @Output().
• Directives structurelles *ngIf et *ngFor.
• Des .subscribe() à profusion
• Lifecycle hook ngOnInit

Voici un exemple de ce qui a été généré. Le code complet peut être trouvé dans la branche without-skills du dépôt ahasall/angular-skills-demo.

1import { Component, Input, Output, EventEmitter } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { Dish } from '../../models/dish.model';
4import { trigger, state, style, transition, animate } from '@angular/animations';
5
6@Component({
7  selector: 'app-dish-card',
8  standalone: true,
9  imports: [CommonModule],
10  templateUrl: './dish-card.html',
11  styleUrl: './dish-card.css',
12  animations: [
13    trigger('heartAnimation', [
14      transition(':increment', [
15        style({ transform: 'scale(0.8)' }),
16        animate('150ms ease-out', style({ transform: 'scale(1.3)' })),
17        animate('150ms ease-in', style({ transform: 'scale(1)' }))
18      ]),
19      transition(':decrement', [
20        style({ transform: 'scale(1.2)' }),
21        animate('150ms ease-in-out', style({ transform: 'scale(1)' }))
22      ])
23    ])
24  ]
25})
26export class DishCardComponent {
27  @Input({ required: true }) dish!: Dish;
28  @Output() likeToggle = new EventEmitter<number>();
29
30  onLike() {
31    this.likeToggle.emit(this.dish.id);
32  }
33
34  getStatusClass() {
35    switch (this.dish.status) {
36      case 'Available': return 'bg-green-100 text-green-700';
37      case 'Out of Stock': return 'bg-orange-100 text-orange-700';
38      case 'Unavailable': return 'bg-red-100 text-red-700';
39      default: return 'bg-gray-100 text-gray-700';
40    }
41  }
42}

1<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg flex flex-col h-full border border-gray-100">
2  <div class="relative h-48 overflow-hidden group">
3    <img [src]="dish.image || 'https://images.unsplash.com/photo-1495195129352-aec325b55b65?w=500&q=80'"
4         [alt]="dish.name"
5         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
6    <button (click)="$event.stopPropagation(); onLike()"
7            class="absolute top-3 right-3 p-2 rounded-full bg-white/80 backdrop-blur-sm shadow-sm transition-all duration-300 hover:bg-white active:scale-90"
8            [class.text-red-500]="dish.liked"
9            [class.text-gray-400]="!dish.liked"
10            [@heartAnimation]="dish.liked ? 1 : 0">
11      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24" stroke="none">
12        <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3c1.54 0 2.93.651 3.912 1.693C12.58 3.651 13.97 3 15.512 3c2.974 0 5.438 2.322 5.438 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001z" />
13      </svg>
14    </button>
15  </div>
16
17  <div class="p-4 flex flex-col flex-grow">
18    <div class="flex justify-between items-start mb-2 gap-2">
19      <h3 class="text-lg font-semibold text-gray-900 truncate">{{ dish.name }}</h3>
20      <span class="text-lg font-bold text-indigo-600 shrink-0">{{ dish.price | currency:'EUR' }}</span>
21    </div>
22
23    <div class="mt-auto pt-3 flex items-center justify-between">
24      <span [class]="getStatusClass()" class="px-2.5 py-0.5 rounded-full text-xs font-medium">
25        {{ dish.status }}
26      </span>
27
28      <button (click)="onLike()"
29              class="text-sm font-medium transition-colors duration-200"
30              [class.text-red-500]="dish.liked"
31              [class.text-gray-500]="!dish.liked">
32        {{ dish.liked ? 'Liked' : 'Like' }}
33      </button>
34    </div>
35  </div>
36</div>

Avec les skills

L’agent avec skills a généré du code Angular moderne :

• Inputs basés sur les signaux input()
• Signal-like output()
• Nouveaux contrôles de flux avec @if et @for
• resource pour la récupération et la gestion de l’état des données

Voici un exemple de ce qui a été généré. Le code complet peut être trouvé dans la branche with-skills du dépôt ahasall/angular-skills-demo.

1import { Component, input, output, computed } from '@angular/core';
2import { Dish } from '../dish.model';
3import { CommonModule } from '@angular/common';
4import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
5
6@Component({
7  selector: 'app-dish-card',
8  standalone: true,
9  imports: [CommonModule],
10  templateUrl: './dish-card.html',
11  animations: [
12    trigger('heartBeat', [
13      transition('unliked => liked', [
14        animate(
15          '300ms ease-in',
16          keyframes([
17            style({ transform: 'scale(1)', offset: 0 }),
18            style({ transform: 'scale(1.3)', offset: 0.5 }),
19            style({ transform: 'scale(1)', offset: 1.0 }),
20          ]),
21        ),
22      ]),
23    ]),
24  ],
25})
26export class DishCardComponent {
27  dish = input.required<Dish>();
28  toggleLike = output<string>();
29
30  statusClasses = computed(() => {
31    switch (this.dish().status) {
32      case 'Available':
33        return 'bg-emerald-100 text-emerald-700';
34      case 'Out of Stock':
35        return 'bg-orange-100 text-orange-700';
36      case 'Unavailable':
37        return 'bg-red-100 text-red-700';
38      default:
39        return 'bg-gray-100 text-gray-700';
40    }
41  });
42}

1<div
2  class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col h-full border border-gray-100"
3>
4  <div class="relative h-48 w-full bg-gray-200">
5    @if (dish().image) {
6    <img [src]="dish().image" [alt]="dish().name" class="h-full w-full object-cover" />
7    } @else {
8    <div class="h-full w-full flex items-center justify-center text-gray-400">
9      <svg
10        xmlns="http://www.w3.org/2000/svg"
11        class="h-12 w-12"
12        fill="none"
13        viewBox="0 0 24 24"
14        stroke="currentColor"
15      >
16        <path
17          stroke-linecap="round"
18          stroke-linejoin="round"
19          stroke-width="2"
20          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
21        />
22      </svg>
23    </div>
24    }
25    <button
26      (click)="toggleLike.emit(dish().id)"
27      class="absolute top-3 right-3 p-2 rounded-full bg-white/80 backdrop-blur-sm shadow-sm hover:bg-white transition-colors group"
28      [@heartBeat]="dish().liked ? 'liked' : 'unliked'"
29    >
30      <svg
31        xmlns="http://www.w3.org/2000/svg"
32        [class.fill-red-500]="dish().liked"
33        [class.stroke-red-500]="dish().liked"
34        [class.stroke-gray-400]="!dish().liked"
35        [class.fill-none]="!dish().liked"
36        class="h-6 w-6 transition-colors"
37        viewBox="0 0 24 24"
38        stroke="currentColor"
39        stroke-width="2"
40      >
41        <path
42          stroke-linecap="round"
43          stroke-linejoin="round"
44          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
45        />
46      </svg>
47    </button>
48  </div>
49
50  <div class="p-5 flex flex-col flex-grow">
51    <div class="flex justify-between items-start mb-2">
52      <h3 class="text-lg font-bold text-gray-800 line-clamp-1">{{ dish().name }}</h3>
53      <span class="text-emerald-600 font-bold">{{ dish().price | currency:'EUR' }}</span>
54    </div>
55
56    <div class="mt-auto flex items-center justify-between">
57      <span class="px-3 py-1 rounded-full text-xs font-medium" [ngClass]="statusClasses()">
58        {{ dish().status }}
59      </span>
60    </div>
61  </div>
62</div>

Nota Bene : gardons les pieds sur terre. L’IA reste un assistant, pas le pilote. Même avec ces skills, le code généré — ici avec un modèle léger comme Gemini 3 Flash — n’est pas parfait : CommonModule toujours présent, ngClass au lieu de class. Il y a toujours du travail de relecture.

Conclusion

Les agents IA sont devenus des outils du quotidien pour les développeurs. Mais un agent qui ne connaît pas l’Angular moderne est un agent qu’on ne peut pas vraiment faire confiance pour écrire du code production-ready. Les skills Angular changent ça. En une commande, votre agent passe de générateur de code d’un autre temps à vrai partenaire de développement : il connaît les signaux, le nouveau contrôle de flux, les composants autonomes — tout ce qui fait l’Angular d’aujourd’hui. Le meilleur dans tout ça ? Les skills sont de simples fichiers Markdown, versionnables et portables. Vous pouvez les adapter à votre guise ou même créer les vôtres.