Créer un AI Skill en 10 minutes : le tutoriel complet
Vous utilisez un assistant IA pour coder et vous répétez souvent les mêmes instructions ? Il est temps de créer un AI skill. En 10 minutes, vous aurez un skill fonctionnel qui automatise une tâche récurrente. Suivez le guide.
Minute 0-2 : Identifier la tâche à automatiser
La première étape pour créer un AI skill est de choisir la bonne tâche. Un bon candidat est :
- Répétitif : vous le faites au moins une fois par semaine
- Procédural : il suit des étapes définies
- Textuel : il implique du code, de la configuration ou de la documentation
Exemples de bonnes tâches
| Tâche | Fréquence | Temps gagné | |-------|-----------|-------------| | Créer un nouveau composant React | 3-5x/semaine | 15 min | | Écrire des tests unitaires | Quotidien | 20 min | | Préparer une release | Hebdomadaire | 30 min | | Scaffolder un endpoint API | 2-3x/semaine | 10 min |
Pour ce tutoriel, nous allons créer un skill qui génère un composant React complet avec ses tests et ses types.
Minute 2-5 : Écrire le SKILL.md
Créez un fichier SKILL.md avec la structure suivante :
# Generate React Component
## Description
Crée un composant React TypeScript complet avec tests
et types, en suivant les conventions du projet.
## Instructions
1. Demander le nom du composant et son type (page, feature, UI)
2. Créer le fichier principal `ComponentName.tsx` avec :
- Import des dépendances nécessaires
- Interface Props typée
- Composant fonctionnel avec export nommé
- Styles via CSS modules ou Tailwind selon le projet
3. Créer le fichier de test `ComponentName.test.tsx` avec :
- Test de rendu basique
- Test des props principales
- Test des interactions utilisateur
4. Créer le fichier index `index.ts` pour le re-export
5. Mettre à jour le barrel export du dossier parent si existant
## Conventions
- Utiliser les named exports (pas de default export)
- Nommer les fichiers en PascalCase
- Placer les composants dans `src/components/[type]/`
- Les tests dans le même dossier que le composant
## Exemple
Entrée : "Créer un composant UI appelé UserAvatar"
Sortie attendue :
src/components/ui/UserAvatar/ ├── UserAvatar.tsx ├── UserAvatar.test.tsx └── index.ts
Le secret d'un bon skill est d'être précis dans les instructions tout en restant flexible pour les cas particuliers.
Minute 5-7 : Installer le skill
L'installation dépend de votre outil.
Pour Claude Code
# Créer le répertoire de skills
mkdir -p .claude/skills
# Copier le fichier
cp SKILL.md .claude/skills/react-component.md
Claude Code détecte automatiquement les fichiers dans .claude/skills/ et les rend disponibles comme commandes slash.
Pour Cursor
Ajoutez le contenu du SKILL.md dans votre fichier .cursorrules :
# Ajouter au fichier de règles Cursor
cat SKILL.md >> .cursorrules
Pour Windsurf
Placez le skill dans le répertoire de mémoire cascade :
mkdir -p .windsurf/skills
cp SKILL.md .windsurf/skills/react-component.md
Minute 7-9 : Tester et affiner
Testez votre skill avec un cas concret :
Utilisateur : Crée un composant UI appelé SearchBar
Vérifiez que le résultat respecte :
- La structure de fichiers attendue
- Les conventions de nommage
- La qualité des tests générés
- L'intégration avec le code existant
Itérations courantes
Après le premier test, vous devrez probablement ajuster :
- Les imports : précisez les bibliothèques à utiliser
- Le style : clarifiez si c'est Tailwind, CSS modules, styled-components
- Les tests : ajoutez des patterns de test spécifiques à votre projet
## Ajustement après test
- Toujours importer depuis @/lib/utils pour les helpers
- Utiliser cn() pour les classes conditionnelles Tailwind
- Inclure un test de snapshot dans chaque fichier test
Minute 9-10 : Documenter et partager
Ajoutez un en-tête de métadonnées à votre skill pour faciliter le partage :
---
name: react-component
version: 1.0.0
author: votre-nom
tags: [react, typescript, components]
compatibility: [claude-code, cursor, windsurf]
---
Vous pouvez ensuite publier votre skill sur une marketplace comme Skills & Guides pour que d'autres développeurs en bénéficient.
Bonnes pratiques pour créer un AI skill
Soyez explicite
Plutôt que « créer un bon composant », détaillez exactement ce que « bon » signifie dans votre contexte.
Incluez des exemples concrets
Les exemples d'entrée/sortie sont la meilleure façon de calibrer le comportement de l'IA.
Gérez les cas limites
Prévoyez ce qui se passe quand un fichier existe déjà, quand le nom est invalide, ou quand une dépendance manque.
Versionnez vos skills
Traitez vos skills comme du code : versionnez-les, faites des revues et documentez les changements.
Conclusion
Créer un AI skill est plus simple qu'il n'y paraît. En 10 minutes, vous avez un outil qui vous fera gagner des heures sur la durée. Le plus important est de commencer petit, tester rapidement et itérer. Votre premier skill n'a pas besoin d'être parfait — il doit juste fonctionner.
Explorez notre bibliothèque de skills pour vous inspirer, ou publiez le vôtre pour aider la communauté.