Cómo las habilidades de IA reemplazan scripts de Nuxt

Cuando iniciamos una nueva aplicación utilizando el framework Nuxt, tenemos que pasar por pasos tediosos como instalar módulos y establecer configuraciones como nuxt.config.ts y wrangler.jsonc. Un script puede resolver este problema, pero alcanza sus límites a medida que aumentan las variaciones. Por eso exploramos y reemplazamos los scripts con una habilidad de agente (agent skill).

En qué destacan los scripts de shell tradicionales

Un script es ideal para ejecutar un conjunto fijo de instrucciones en secuencia con decisiones predefinidas en el código.

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

Este script funciona hasta que ocurre lo siguiente:

• Valores predeterminados fijos. El script incluye de forma fija el módulo Nuxt UI; ¿qué pasa si queremos el módulo Ant Design UI? Cada nueva opción de módulo requiere otro argumento por parte del usuario.
• No puede leer la intención del usuario. "Construye un blog" necesita @nuxt/content; "construye un sitio web con boletines informativos" necesita Cloudflare D1 + Drizzle. Un script no puede distinguir la diferencia: cada variación requiere un nuevo script.
• Se vuelve obsoleto silenciosamente. Las convenciones de Nuxt cambian entre versiones principales. Nuxt 4 cambió el directorio de origen a app/. Un script escrito para Nuxt 3 realiza el andamiaje (scaffolding) de la estructura incorrecta sin alertar nunca al usuario.

La inicialización de proyectos (app scaffolding) es un problema de decisión, no de ejecución. El script no escalará cuando aumente el número de decisiones.

¿Por qué usar una habilidad de agente de IA en lugar de scripts tradicionales?

Una habilidad de agente de IA no es un conjunto de código que se ejecuta, sino un conjunto de conocimientos que el agente de IA sigue. Contiene un archivo SKILL.md y puede empaquetar cualquier otro archivo que requiera la tarea (como documentos de referencia, plantillas y scripts ejecutables). El artículo, Habilidades de los agentes de IA: qué son y cómo crearlas, explica cómo funciona una habilidad de agente. Una habilidad mantiene la diligencia de un script mientras agrega el juicio razonable del que carece un script:

• Infiere la intención del usuario para determinar si la aplicación necesita una base de datos.
• Decide qué módulos opcionales se necesitan a partir de la lista especificada. Por ejemplo, Nuxt Content, i18n y analíticas son opcionales según lo solicite el usuario.
• Se adapta al ecosistema actual utilizando el último framework Nuxt, NuxtHub para los enlaces de Cloudflare y Wrangler para el despliegue.
• Se recupera cuando un paso falla.
• Realiza una verificación final con una lista de control antes de entregar el proyecto.

Detrás de escena de nuestra habilidad de scaffolding para Nuxt y Cloudflare

La habilidad, scaffold-nuxt-cloudflare-app-skill, guía a través de una inicialización orientada a producción:

1. Clarifica cualquier aspecto que no pueda inferirse:
   • El kit de interfaz de usuario (Nuxt UI por defecto o Antdv Next);
   • Si se requiere una base de datos (como Cloudflare D1);
   • Módulos adicionales como @nuxtjs/i18n o @nuxt/content para funciones de CMS.
2. Inicializa la aplicación base con pnpm dlx nuxi@latest init para obtener la última versión del framework Nuxt con pnpm como gestor de paquetes. Luego configura las listas de permitidos para compilaciones nativas de modo que el entorno de compilación de Cloudflare pueda compilar better-sqlite3/sharp.
3. Instala módulos a partir de una tabla de decisiones: @nuxt/ui o @antdv-next/nuxt, @nuxt/image, @nuxtjs/seo, @nuxthub/core, @vueuse/nuxt, además de Drizzle/D1, Nuxt Content e i18n solo cuando se seleccionan.
4. Organiza la estructura de directorios:
   • app/
   • server/
   • shared/
   • tests/
   • archivos de configuración en la raíz.
5. Configura nuxt.config.ts:
   • site.url/site.name para SEO
   • El bloque hub de NuxtHub para Cloudflare
   • routeRules
   • compatibilityDate
6. Configura wrangler.jsonc
7. Configura Vitest y ESLint, luego ejecuta una lista de verificación final que incluye pnpm install && pnpm dev antes de considerar el trabajo terminado.

Scripts de shell frente a habilidades de agentes de IA: una comparación directa

Cómo instalar habilidades de agentes de IA con la CLI npx skills

La instalación se realiza con un único comando utilizando la CLI de skills:

npx skills add https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill.git -g

La CLI clona el repositorio, encuentra la habilidad y pregunta a cuál de los 77 agentes compatibles debe asignarse:

Optamos por Symlink (el método recomendado), que instala la habilidad una vez en ~/.agents/skills y apunta cada agente seleccionado a esta copia única.

• Consulte este artículo, Evita fragmentar habilidades de agentes usando npx skills, sobre cómo centralizar las habilidades de agentes en una única fuente de verdad.

Al abrir Claude Code se confirma que la habilidad se ha instalado correctamente.

A partir de ahí, una solicitud en lenguaje natural es todo lo que se necesita:

"Scaffold a new Nuxt app deployed to Cloudflare Workers — Nuxt UI, a blog section, and a D1 database"

La habilidad es de código abierto; visite el repositorio de GitHub y pruébela.