--- title: "Comment les compétences d'agents IA remplacent les scripts" description: "Créez des apps Nuxt sur Cloudflare. Découvrez pourquoi nous remplaçons les scripts de build fragiles par des compétences d'agent IA robustes et adaptables." canonical_url: "https://techvoyage.dev/fr/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts" last_updated: "2026-10-20T09:53:46.789Z" --- Lorsque l'on démarre une nouvelle application avec le framework Nuxt, il faut passer par des étapes fastidieuses telles que l'installation de modules et la mise en place de configurations comme `nuxt.config.ts` et `wrangler.jsonc`. Un script peut résoudre ce problème, mais il atteint ses limites à mesure que les variations augmentent. C'est pourquoi nous avons exploré et remplacé les scripts par une **compétence d'agent** (agent skill). ## Ce pour quoi les scripts shell traditionnels sont doués Un script est idéal pour exécuter une suite d'instructions fixes et séquentielles avec des décisions codées en dur. ```bash #!/usr/bin/env bash set -e npx nuxi@latest init "$1" --template minimal --packageManager pnpm --no-gitInit -M @nuxt/ui,@nuxthub/core,@vueuse/nuxt cd "$1" cp ~/templates/nuxt.config.ts . cp ~/templates/wrangler.jsonc . ``` Ce script fonctionne jusqu'à ce que les situations suivantes se produisent : - **Valeurs par défaut figées.** Le script intègre de manière fixe le module Nuxt UI ; que se passe-t-il si nous voulons le module Ant Design UI ? Chaque nouvelle option de module nécessite un autre argument de la part de l'utilisateur. - **Incapacité à lire l'intention de l'utilisateur.** "Construis-moi un blog" a besoin de `@nuxt/content` ; "construis-moi un site web avec des newsletters" nécessite Cloudflare D1 + Drizzle. Un script ne peut pas faire la différence — chaque variation nécessite un nouveau script. - **Obsolescence silencieuse.** Les conventions de Nuxt changent d'une version majeure à l'autre. Nuxt 4 a modifié le répertoire source en `app/`. Un script écrit pour Nuxt 3 configure silencieusement une mauvaise structure sans jamais alerter l'utilisateur. L'**initialisation d'application** (app scaffolding) est un problème de décision, pas d'exécution. Le script ne passera pas à l'échelle lorsque le nombre de décisions augmentera. ## Pourquoi utiliser une compétence d'agent IA plutôt que des scripts traditionnels ? Une compétence d'agent (agent skill) n'est pas un ensemble de codes qui s'exécutent, mais un **ensemble de connaissances que l'agent IA suit**. Elle contient un fichier `SKILL.md` et puede regrouper tous les autres fichiers nécessaires à la tâche (tels que des documents de référence, des modèles et des scripts exécutables). L'article [Compétences des agents d'IA : guide complet de création](/article/ai-agent-skills-what-they-are-how-to-create-them) explique le fonctionnement d'une compétence d'agent. Une compétence conserve la rigueur d'un script tout en y ajoutant le jugement raisonnable qui lui fait défaut : - Déduit l'intention de l'utilisateur pour déterminer si l'application a besoin d'une base de données. - Décide quels modules optionnels sont nécessaires à partir de la liste spécifiée. Par exemple, Nuxt Content, i18n et analytics sont activés uniquement à la demande de l'utilisateur. - S'adapte à l'écosystème actuel en utilisant le dernier framework Nuxt, NuxtHub pour les liaisons Cloudflare et Wrangler pour le déploiement. - Reprend l'exécution lorsqu'une étape échoue. - Valide le projet par rapport à une liste de contrôle finale avant de le livrer. ## Les coulisses de notre compétence d'initialisation Nuxt & Cloudflare La compétence, [`scaffold-nuxt-cloudflare-app-skill`](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill), guide à travers une initialisation orientée production : 1. **Clarifier tout ce** qui ne peut pas être déduit : - Le kit UI (**Nuxt UI** par défaut ou **Antdv Next**) ; - Si une base de données est requise (comme Cloudflare D1) ; - Les modules supplémentaires comme `@nuxtjs/i18n` ou `@nuxt/content` pour les fonctionnalités de CMS. 2. **Initialise l'application de base** avec `pnpm dlx nuxi@latest init` pour obtenir la dernière version de Nuxt avec `pnpm` comme gestionnaire de paquets. Elle configure ensuite les listes d'autorisation de build natif afin que l'environnement de build de Cloudflare puisse compiler `better-sqlite3`/`sharp`. 3. **Installe les modules à partir d'une table de décision** : `@nuxt/ui` ou `@antdv-next/nuxt`, `@nuxt/image`, `@nuxtjs/seo`, `@nuxthub/core`, `@vueuse/nuxt`, plus Drizzle/D1, Nuxt Content et i18n uniquement s'ils sont sélectionnés. 4. **Organise la structure des répertoires** : - `app/` - `server/` - `shared/` - `tests/` - fichiers de configuration à la racine. 5. **Configure nuxt.config.ts** : - `site.url`/`site.name` pour le référencement (SEO) - Bloc `hub` de NuxtHub pour Cloudflare - `routeRules` - `compatibilityDate` 6. **Configure wrangler.jsonc** 7. **Configure Vitest et ESLint**, puis exécute une **liste de contrôle finale** incluant `pnpm install && pnpm dev` avant de considérer le travail comme terminé. ## Scripts shell vs compétences d'agents IA : comparaison directe
Script Compétence
Intention de l'utilisateur ❌ valeurs figées ✅ s'adapte à la demande
Prise de décision uniquement via flags codés ✅ évaluée à l'exécution
Changements de version réécriture manuelle ✅ vérifie l'état actuel
Gestion des erreurs s'arrête ✅ corrige et continue
Validation du résultat ❌ ✅ liste de contrôle finale
Coût de maintenance multiplication des flags, mises à jour de version modification du Markdown, pas du code
## Comment installer les compétences d'agents IA avec la CLI npx skills L'installation se fait en une seule commande avec la [CLI skills](https://github.com/vercel-labs/skills) : ```bash npx skills add https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill.git -g ``` La CLI clone le dépôt, trouve la compétence et demande auquel des 77 agents pris en charge elle doit être attribuée : ![Interface en ligne de commande montrant l'installation de la compétence d'initialisation Nuxt via la commande CLI npx skills add](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-add-scaffold-nuxt-installation.webp) Nous avons choisi **Symlink** (la méthode recommandée), qui installe la compétence une seule fois dans `~/.agents/skills` et pointe chaque agent sélectionné vers cette copie unique. ![Écran de terminal affichant le résumé d'installation et la configuration du lien symbolique pour les compétences d'agents centralisées](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-installation-summary-details.webp) - *Veuillez vous référer à cet article, Résoudre la fragmentation des compétences d'agents via npx skills, pour savoir comment centraliser les compétences d'agents dans une source unique de vérité.* L'ouverture de Claude Code confirme que la compétence est correctement installée. ![Interface de ligne de commande Claude Code montrant la commande slash scaffold-nuxt nouvellement installée, active et prête à l'emploi](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/claude-code-scaffold-nuxt-slash-command-active.webp) À partir de là, un prompt en langage naturel suffit : > "Scaffold a new Nuxt app deployed to Cloudflare Workers — Nuxt UI, a blog section, and a D1 database" La compétence est open source ; visitez le [dépôt GitHub](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) et essayez-la.