Riadh MNASRI's Technical BLOG

L’intelligence artificielle transforme la manière dont nous codons. Des outils comme Claude et GitHub Copilot sont devenus essentiels dans nos workflows de développement. Mais savez-vous comment vraiment les personnaliser ? Comment créer des skills (compétences) qui amplifient vos capacités ?

Ce guide vous enseignera à construire des Skills Claude — des modules de connaissance spécialisés — puis comment adapter cette même approche puissante à GitHub Copilot. Que vous soyez junior découvrant ces outils ou développeur expérimenté cherchant à optimiser votre productivité, vous trouverez ici une approche step-by-step concrète.

Partie 1 : Comprendre les Skills Claude

1.1 Qu’est-ce qu’un Skill Claude ?

Un Skill Claude est un fichier structuré (typiquement SKILL.md) qui étend les capacités de Claude en lui fournissant :

• Des instructions précises sur quand et comment accomplir une tâche spécifique
• Un contexte métier ou technique détaillé
• Des exemples concrets
• Des bonnes pratiques documentées

Analogie : Si Claude est un développeur général, un Skill est un spécialiste dans un domaine donné.

1.2 Pourquoi créer des Skills ?

Trois raisons principales :

1. Cohérence : Vous définissez une approche standardisée que Claude répète
2. Expertise : Vous encapsulez votre connaissance métier
3. Efficacité : Moins de corrections, plus de premières tentatives réussies

Cas d’usage concrets :

• Un skill pour générer des composants React suivant votre architecture
• Un skill pour documenter le code selon vos standards
• Un skill pour déboguer des erreurs TypeScript spécifiques
• Un skill pour structurer vos tests unitaires

Partie 2 : Architecture d’un Skill Claude

2.1 Structure de fichier

my-skill/
├── SKILL.md              # Le fichier principal
├── scripts/              # Code exécutable (optionnel)
│   └── generate.py
└── references/           # Documentation annexe (optionnel)
    └── best-practices.md

2.2 Anatomie du fichier SKILL.md

Le fichier SKILL.md combine métadonnées YAML et instructions Markdown. Voici la structure complète :

---
name: mon-skill-react
description: Génère des composants React avec hooks, TypeScript et tests.
compatibility: Node.js 18+, React 18+
---
# Mon Skill React
## À Quand Déclencher Ce Skill ?
- Requêtes pour créer des composants React
- Besoin de refactoriser du code React existant
## Principes Directeurs
1. Utiliser les hooks modernes
2. TypeScript obligatoire
3. Tests inclus

Partie 3 : Créer Votre Premier Skill – Guide Complet

3.1 Étape 1 : Définir votre besoin

Exercice pratique : Choisissez un workflow que vous répétez souvent.

Exemple : “Je crée toujours des API REST avec Express en suivant une structure spécifique”

Documentez quatre éléments clés :

• Quoi : Qu’essayez-vous d’accomplir ?
• Quand : Dans quels contextes ?
• Comment : Votre approche standard
• Sortie attendue : Format et structure désirés

3.2 Étape 2 : Rédiger le SKILL.md

Checklist de rédaction :

• ✓ Nom descriptif et unique
• ✓ Description courte (100-150 mots)
• ✓ “Quand utiliser” clairement énoncé
• ✓ Principes/règles fondamentales
• ✓ Workflow étape par étape
• ✓ Au moins 2 exemples complets
• ✓ Cas limites mentionnés

Conseil de rédaction : Soyez précis. Au lieu de :

“Générer du code bien structuré”

Écrivez :

“Générer des contrôleurs Express avec validation des entrées via joi, gestion d’erreurs standardisée, et endpoints documentés en JSDoc. Chaque contrôleur doit avoir son fichier dédié et ses tests unitaires.”

3.3 Étape 3 : Tester Votre Skill

Avant de l’utiliser en production, testez avec 3-5 prompts différents :

1. “Crée un contrôleur Express pour gérer les utilisateurs”
2. “Refactorise ce contrôleur pour ajouter de la validation”
3. “Comment organiser les erreurs dans ce skill ?”

Évaluez :

• ✓ Claude suit-il votre approche ?
• ✓ La qualité du code généré
• ✓ Les cas limites sont-ils bien gérés ?
• ✓ Y a-t-il des détails manquants ?

3.4 Étape 4 : Itérer et Affiner

Basé sur vos tests, affinez le skill :

• Clarifiez les sections floues
• Ajoutez des exemples pour les cas mal compris
• Mentionnez les exceptions explicitement
• Structurez mieux si Claude saute des étapes

Partie 4 : Adapter Votre Approche à GitHub Copilot

4.1 Les Différences Clés

4.2 Structure Équivalente pour Copilot

your-project/
├── .copilot/
│   ├── instructions.md      # Équivalent du SKILL.md
│   ├── guidelines.md        # Bonnes pratiques spécifiques
│   └── examples/            # Dossier d'exemples
│       ├── component.tsx
│       └── component.test.tsx
├── src/
└── package.json

4.3 Rédiger les Instructions pour Copilot

Fichier : `.copilot/instructions.md`

# Directives Copilot pour [Votre Projet]
## Principes Fondamentaux
1. **TypeScript Strict** : Aucun `any` sauf justification
2. **Tests Obligatoires** : Chaque feature = tests unitaires
3. **Architecture Modulaire** : Composants petits et testables
## Code Style
- ESLint config : `airbnb-typescript`
- Prettier : 2 espaces
- Nommage : `camelCase` pour variables

4.4 Intégrer les Exemples dans Copilot

Créez un dossier .copilot/examples/ avec 2-3 exemples réels de votre codebase. Cela aide Copilot à comprendre vos patterns spécifiques.

4.5 Activer et Tester dans Copilot

Dans VS Code avec GitHub Copilot :

1. Créez .copilot/instructions.md dans votre repo
2. GitHub Copilot détectera automatiquement le fichier
3. Commencez à taper — Copilot respectera les directives
4. Testez : Demandez la génération d’un composant et vérifiez

Partie 5 : Workflow Complet – De Claude à Copilot

5.1 Phase 1 : Développer votre Skill avec Claude

Jour 1 :
├─ Définir le besoin (Étape 3.1)
├─ Rédiger SKILL.md initial (Étape 3.2)
└─ Tester 3 prompts (Étape 3.3)
Jour 2-3 :
├─ Affiner basé sur résultats (Étape 3.4)
├─ Tester 5 prompts supplémentaires
└─ Valider la qualité

5.2 Phase 2 : Adapter pour Copilot

├─ Traduire en .copilot/instructions.md
├─ Créer 2-3 exemples réalistes
├─ Tester dans VS Code
└─ Ajuster si nécessaire

5.3 Phase 3 : Déploiement et Maintenance

├─ Commiter .copilot/ dans votre repo
├─ Documenter dans votre README
├─ Former votre équipe
└─ Itérer mensuellement

Partie 6 : Bonnes Pratiques et Pièges à Éviter

6.1 ✅ À Faire

6.2 ❌ À Éviter