Como habilidades de agentes de IA substituem scripts Nuxt

Quando iniciamos uma nova aplicação usando o framework Nuxt, temos que passar por etapas tediosas como instalar módulos e configurar arquivos como nuxt.config.ts e wrangler.jsonc. Um script pode resolver esse problema, mas ele atinge seus limites à medida que as variações aumentam. É por isso que exploramos e substituímos os scripts por uma habilidade de agente (agent skill).

No que os scripts de shell tradicionais são bons

Um script é excelente para executar um conjunto fixo de instruções em sequência com decisões predefinidas no próprio 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 até que aconteça o seguinte:

• Valores padrão fixos. O script traz o módulo Nuxt UI fixado no código; e se quisermos usar o módulo Ant Design UI? Cada nova opção de módulo exige um novo argumento fornecido pelo usuário.
• Não consegue ler a intenção do usuário. "Crie um blog" precisa do @nuxt/content; "crie um site com newsletters" precisa do Cloudflare D1 + Drizzle. Um script não consegue distinguir a diferença — cada variação exige um novo script.
• Fica desatualizado silenciosamente. As convenções do Nuxt mudam entre versões principais. O Nuxt 4 mudou o diretório de origem para app/. Um script escrito para o Nuxt 3 criará o scaffolding da estrutura errada sem nunca alertar o usuário.

A inicialização do projeto (app scaffolding) é um problema de decisão, não de execução. O script não escalará quando o número de decisões aumentar.

Por que usar uma habilidade de agente de IA em vez de scripts tradicionais?

Uma habilidade de agente (agent skill) não é um bloco de código que simplesmente executa, mas um conjunto de conhecimentos que o agente de IA segue. Ela contém um arquivo SKILL.md e pode agrupar quaisquer outros arquivos que a tarefa exigir (como documentos de referência, modelos e scripts executáveis). O artigo Habilidades de agentes de IA: o que são e como criá-las explica o funcionamento de uma habilidade de agente. Uma habilidade mantém a diligência de um script ao mesmo tempo que adiciona o julgamento razoável que falta ao script:

• Deduz a intenção do usuário para determinar se o aplicativo precisa de um banco de dados.
• Decide quais módulos opcionais são necessários a partir da lista especificada. Por exemplo, Nuxt Content, i18n e analytics são opcionais de acordo com a solicitação do usuário.
• Adapta-se ao ecossistema atual usando o framework Nuxt mais recente, o NuxtHub para integrações com o Cloudflare e o Wrangler para o deployment.
• Recupera-se quando uma etapa falha.
• Valida o projeto por meio de um checklist final antes de entregá-lo.

Por trás dos bastidores da nossa habilidade de scaffolding do Nuxt e Cloudflare

A habilidade, scaffold-nuxt-cloudflare-app-skill, guia você por um scaffolding voltado para produção:

1. Esclarece qualquer detalhe que não possa ser deduzido:
   • O kit de UI (Nuxt UI por padrão ou Antdv Next);
   • Se um banco de dados é necessário (como Cloudflare D1);
   • Módulos extras como @nuxtjs/i18n ou @nuxt/content para recursos de CMS.
2. Inicializa o aplicativo base com pnpm dlx nuxi@latest init para obter a versão mais recente do framework Nuxt com o pnpm como gerenciador de pacotes. Em seguida, configura listas de permissões para compilações nativas de modo que o ambiente de compilação do Cloudflare possa compilar better-sqlite3/sharp.
3. Instala os módulos a partir de uma tabela de decisão: @nuxt/ui ou @antdv-next/nuxt, @nuxt/image, @nuxtjs/seo, @nuxthub/core, @vueuse/nuxt, além de Drizzle/D1, Nuxt Content e i18n apenas se forem selecionados.
4. Organiza a estrutura de diretórios:
   • app/
   • server/
   • shared/
   • tests/
   • arquivos de configuração na raiz.
5. Configura o nuxt.config.ts:
   • site.url/site.name para SEO
   • Bloco hub do NuxtHub para o Cloudflare
   • routeRules
   • compatibilityDate
6. Configura o wrangler.jsonc
7. Configura o Vitest e o ESLint, em seguida executa um checklist final incluindo pnpm install && pnpm dev antes de dar o trabalho por encerrado.

Scripts de shell vs habilidades de agentes de IA: comparação direta

Como instalar habilidades de agentes de IA com a CLI npx skills

A instalação é feita em um único comando com a CLI de skills:

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

A CLI clona o repositório, localiza a habilidade e pergunta a qual dos 77 agentes suportados ela deve ser atribuída:

Escolhemos o Symlink (o método recomendado), que instala a habilidade uma única vez em ~/.agents/skills e aponta cada agente selecionado para esta única cópia.

• Consulte este artigo, Fim da fragmentação de habilidades de agentes usando npx skills, sobre como centralizar habilidades de agentes em uma única fonte de verdade.

Ao abrir o Claude Code, você confirma que a habilidade foi instalada com sucesso.

A partir daí, um prompt em linguagem natural é suficiente:

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

A habilidade é open source; acesse o repositório no GitHub e experimente.