Techvoyage
Accueil
Nuxt sur Cloudflare : Compétences d'Agent vs Scripts - Comparatif des scripts de build fragiles et des compétences d'agent IA robustes.

Comment les compétences d'agents IA remplacent les scripts

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.

Aug 25, 2026 - 5 MIN DE LECTURE
Sommaire

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.

#!/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 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, 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

ScriptCompétence
Intention de l'utilisateur❌ valeurs figées✅ s'adapte à la demande
Prise de décisionuniquement via flags codés✅ évaluée à l'exécution
Changements de versionréécriture manuelle✅ vérifie l'état actuel
Gestion des erreurss'arrête✅ corrige et continue
Validation du résultat❌✅ liste de contrôle finale
Coût de maintenancemultiplication des flags, mises à jour de versionmodification 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 :

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 :

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.

L'ouverture de Claude Code confirme que la compétence est correctement installée.

À 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 et essayez-la.

Articles connexes