VueJS

Skill Vue.js Claude Code : créez de meilleures applications Vue avec les compétences IA

Amine LahmaryAmine Lahmary·Aug 1, 2026·8 min read
Skill Vue.js Claude Code : créez de meilleures applications Vue avec les compétences IA

Qu'est-ce qu'un skill Claude Code ?

Un skill est un simple dossier contenant un fichier SKILL.md. Dans ce fichier, vous écrivez deux choses :

  1. Le frontmatter — quelques lignes en haut qui disent à Claude quand utiliser le skill.
  2. Les instructions — les étapes que Claude doit suivre quand le skill s'exécute. Claude Code lit ces fichiers et les ajoute à sa boîte à outils. Quand votre tâche correspond à un skill, Claude l'utilise automatiquement. Vous pouvez aussi lancer un skill vous-même en tapant son nom, comme /build-vue-component.

Les skills suivent la norme ouverte Agent Skills (agentskills.io). Cela signifie que le même fichier de skill fonctionne avec de nombreux outils IA — pas seulement Claude Code.

Pourquoi les développeurs Vue devraient aimer les skills

Les projets Vue sont pleins de tâches répétitives. Vous écrivez des composants, des composables, des validations de formulaire et des tests encore et encore. Sans skills, chaque nouveau composant signifie retaper les mêmes instructions à Claude. Avec les skills, votre IA connaît déjà :

  • Votre style Vue 3 : <script setup>, Composition API, règles de nommage.
  • Vos conventions de projet : pas de points-virgules, guillemets simples, lignes de 100 caractères.
  • Votre structure de composants et votre organisation de dossiers.
  • Comment vous écrivez et lancez les tests. Le résultat ? Moins de saisie, moins d'erreurs, et un code qui ressemble à celui écrit par votre propre équipe.

Où vivent les skills

Claude Code cherche les skills à plusieurs endroits :

EmplacementCheminS'applique àPersonnel~/.claude/skills/<nom-du-skill>/SKILL.mdTous vos projetsProjet.claude/skills/<nom-du-skill>/SKILL.mdUniquement ce projetPlugin<plugin>/skills/<nom-du-skill>/SKILL.mdLà où le plugin est activé

Pour une équipe, placez les skills Vue dans le dossier du projet (.claude/skills/) et committez-les dans git. Ainsi, chaque développeur — et chaque session IA — suit les mêmes règles.

Claude Code surveille les dossiers de skills. Modifiez un SKILL.md et la nouvelle version fonctionne dans votre session actuelle sans redémarrage.

Créez votre premier skill Vue

Construisons un skill simple qui aide Claude à créer des composants Vue 3 comme vous les aimez.

Étape 1 : Créez un dossier.

mkdir -p .claude/skills/vue-component

Étape 2 : Écrivez le fichier SKILL.md.

---
description: Create Vue 3 components using the Composition API with script setup. Use when the user asks to build a new Vue component or page.
---

Créer un composant Vue 3 en suivant ces règles :

1. Utiliser `<script setup>` et la Composition API. Ne jamais utiliser l'Options API.
2. Importer les composables et utilitaires depuis `@/composables/` et `@/utils/`.
3. Nommer le fichier en PascalCase, comme `ContactForm.vue`.
4. Utiliser `ref` et `computed` pour l'état. Garder les props simples avec `defineProps`.
5. Ne pas ajouter de points-virgules et utiliser des guillemets simples.
6. Terminer le template avec une structure propre et simple qui respecte le design system.

Étape 3 : Testez-le. Ouvrez Claude Code dans votre projet et demandez :

« Crée un composant de formulaire de contact. »

Claude lit le skill et construit le composant exactement comme votre équipe le souhaite.

Les champs du frontmatter expliqués simplement

Vous n'avez pas besoin de mémoriser chaque option. Voici ceux que vous utiliserez le plus :

ChampRôledescriptionDit à Claude quand utiliser le skill. Ajoutez-le toujours.nameUn nom d'affichage. Claude Code utilise le nom du dossier pour la commande.disable-model-invocation: trueClaude ne lance jamais ce skill seul. Seul vous pouvez taper /nom. Pratique pour les étapes de déploiement ou de commit.user-invocable: falseSeul Claude peut l'utiliser. Pratique pour les connaissances de fond.when_to_useDes indices supplémentaires, comme des exemples de questions qui devraient déclencher le skill.allowed-toolsLes outils que Claude peut utiliser sans demander, par exemple Bash(npm run test).

La description est la plus importante. Écrivez-la ainsi : ce que fait le skill, puis quand l'utiliser. Claude la lit pour décider si le skill correspond à votre demande.

Des idées de skills Vue que vous pouvez copier

Voici des idées pratiques de skills Vue.js pour Claude Code. Chacune fait gagner du temps.

1. Le créateur de composants Vue

L'exemple ci-dessus. Il garde chaque composant cohérent avec votre design system et vos conventions.

2. Le rédacteur de composables

---
description: Create reusable Vue composables with the Composition API. Use when the user wants shared logic like forms, API calls, or local storage.
---

Écrire un composable dans `src/composables/` :

1. Exporter une fonction qui renvoie `ref`, `computed` et des fonctions.
2. Garder un nom parlant, comme `useContactForm`.
3. Gérer clairement les états de chargement, d'erreur et de succès.
4. Ne pas ajouter de points-virgules et utiliser des guillemets simples.
5. Ne renvoyer que ce dont le composant a besoin.

3. Le testeur Vue

---
description: Write and run Vue tests with Vitest. Use when the user asks to test a component or composable.
---

1. Écrire les tests dans `src/components/__tests__/`.
2. Utiliser `@vue/test-utils` pour monter les composants.
3. Tester d'abord le comportement visible : rendu, événements et formulaires.
4. Lancer `pnpm run test:unit` après avoir écrit les tests.

4. L'assistant de refactorisation

---
description: Migrate Vue 2 Options API code to Vue 3 Composition API. Use when the user asks to refactor or modernize old Vue components.
---

Lors de la refactorisation d'un composant Vue :

1. Convertir `data`, `methods` et `computed` en `ref`, fonctions et `computed` de la Composition API.
2. Déplacer les hooks de cycle de vie (`mounted`, `beforeDestroy`) vers `onMounted`, `onBeforeUnmount`.
3. Garder un comportement identique — ne pas changer ce que fait le composant.
4. Remplacer `this.$emit` et `this.$props` par `defineEmits` et `defineProps`.
5. Expliquer brièvement les changements pour que le développeur puisse les relire.

5. Le skill d'instructions de projet

---
description: Apply this project's coding rules to every Vue file. Use for all Vue.js work in this repo.
---

Ce projet utilise Vue 3, Vite et Tailwind CSS.

- Utiliser la Composition API avec `<script setup>`.
- Ne jamais utiliser les noms de couleurs Tailwind standard pour les couleurs de marque. Utiliser `text-primary`, `bg-primary`.
- Garder les composants dans `src/components/`, les pages dans `src/views/`.
- Ajouter les nouvelles chaînes traduites dans les trois fichiers : `english.js`, `french.js`, `arabic.js`.
- Lancer `pnpm run lint` avant de terminer.

Ce skill transforme les règles de votre projet en un fichier que toute l'équipe partage.

Les skills inclus qui aident le travail Vue

Claude Code est livré avec des skills prêts à l'emploi. Certains sont très utiles pour les projets Vue :

  • /run — lance votre application et vérifie qu'un changement fonctionne, pas seulement qu'il compile.
  • /verify — compile et exécute votre application Vue pour confirmer qu'un changement fait ce qu'il doit.
  • /code-review — relit vos derniers changements et détecte les problèmes avant le commit.
  • /debug — vous aide à trouver et corriger les bugs plus vite.
  • /doctor — vérifie que votre configuration Claude Code est saine. Vous pouvez aussi utiliser @vueuse/head, vue-router et d'autres outils Vue avec les skills — le skill ajoute simplement les règles par-dessus.

Skills ou CLAUDE.md

Beaucoup de développeurs se demandent : pourquoi ne pas tout mettre dans CLAUDE.md ?

La réponse courte : le contexte. CLAUDE.md se charge à chaque session, ce qui coûte des tokens et de l'attention. Un skill ne se charge que lorsqu'on en a besoin. Le matériel de référence long — comme votre design system complet — appartient à un skill, pas à CLAUDE.md. Gardez CLAUDE.md pour les faits courts et toujours nécessaires.

Claude Code applique la même idée aux skills : gardez SKILL.md court et simple, et placez les détails dans des fichiers d'accompagnement.

Bonnes pratiques pour les skills Vue.js Claude Code

  1. Écrivez unedescriptionclaire. Elle décide quand Claude utilise le skill.
  2. Gardez le skill court. Chaque ligne que vous ajoutez reste en contexte pendant toute la session.
  3. Utilisez le contexte dynamique. Une ligne comme git diff HEAD lance une commande et colle le résultat dans le skill. Idéal pour les skills de relecture.
  4. Commitez les skills dans git. Toute votre équipe obtient le même comportement IA.
  5. Utilisezdisable-model-invocationpour les étapes risquées. Seuls les humains déclenchent les déploiements ou les commits.
  6. Découpez les gros skills en fichiers. Référencez des docs et des exemples depuis SKILL.md au lieu de tout écrire dans un seul fichier.

    Commencez à utiliser votre skill Vue.js aujourd'hui

Les skills Claude Code sont l'un des moyens les plus simples de rendre le codage IA personnel. En dix minutes, vous pouvez créer un skill Vue qui fait gagner des heures chaque semaine. Commencez par un skill simple — comme le créateur de composants Vue — et développez votre collection au fil des tâches répétitives découvertes.

Les meilleurs skills sont ceux que votre équipe utilise vraiment. Placez-les dans le projet, committez-les, et laissez Claude Code apprendre comment vous construisez en Vue.

Cet article a été écrit en août 2026 à partir de la documentation la plus récente sur les skills Claude Code. Les skills suivent la norme ouverte Agent Skills et les fonctionnalités peuvent continuer d'évoluer.