Wie KI-Agenten-Skills Nuxt-Scaffolding-Scripts ersetzen

Wenn wir ein neues Projekt mit dem Nuxt-Framework starten, müssen wir mühsame Schritte wie das Installieren von Modulen und das Einrichten von Konfigurationen wie nuxt.config.ts und wrangler.jsonc durchlaufen. Ein Skript kann dieses Problem zwar lösen, stößt jedoch schnell an seine Grenzen, sobald die Anforderungen variieren. Aus diesem Grund haben wir untersucht, wie wir Skripte durch einen KI-Agenten-Skill (Agent Skill) ersetzen können.

Was traditionelle Shell-Skripte gut können

Ein Skript eignet sich hervorragend, um eine feste Reihe von Anweisungen nacheinander mit fest im Code verankerten Entscheidungen (Hardcoding) auszuführen.

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

Dieses Skript funktioniert einwandfrei, bis Folgendes passiert:

• Starre Standardwerte. Das Skript schreibt das Nuxt UI-Modul fest vor. Was aber, wenn wir das Ant Design UI-Modul verwenden möchten? Jede neue Moduloption erfordert ein weiteres Argument vom Benutzer.
• Kein Verständnis für die Benutzerabsicht. "Baue mir einen Blog" erfordert @nuxt/content; "baue mir eine Website mit Newslettern" benötigt Cloudflare D1 + Drizzle. Ein Skript kann diesen Unterschied nicht erkennen — jede Variation erfordert ein neues Skript.
• Geräuschloses Veralten. Nuxt-Konventionen ändern sich zwischen Major-Versionen. Nuxt 4 hat das Quellverzeichnis auf app/ geändert. Ein für Nuxt 3 geschriebenes Skript scaffoldet im Hintergrund die falsche Struktur, ohne den Benutzer jemals zu warnen.

Projekt-Scaffolding (Initialisierung) ist ein Entscheidungsproblem, kein Ausführungsproblem. Das Skript lässt sich nicht skalieren, wenn die Anzahl der Entscheidungen steigt.

Warum ein KI-Agenten-Skill statt traditioneller Skripte?

Ein Agenten-Skill ist kein Code, der einfach ausgeführt wird, sondern ein Wissenspaket, dem der KI-Agent folgt. Er enthält eine SKILL.md-Datei und kann beliebige andere Dateien enthalten, die für die Aufgabe benötigt werden (wie Referenzdokumente, Vorlagen und ausführbare Skripte). Der Artikel KI-Agenten-Skills: Was sie sind und wie man sie erstellt erklärt, wie ein Agenten-Skill funktioniert. Ein Skill bewahrt die Zuverlässigkeit eines Skripts und fügt die klugen Abwägungen hinzu, die einem herkömmlichen Skript fehlen:

• Er schließt auf die Absicht des Benutzers zurück, um zu bestimmen, ob die App eine Datenbank benötigt.
• Er entscheidet anhand der angegebenen Liste, welche optionalen Module benötigt werden. Beispielsweise sind Nuxt Content, i18n und Analytics optional und werden nur auf Wunsch des Benutzers integriert.
• Er passt sich dem aktuellen Ökosystem an, indem er das neueste Nuxt-Framework, NuxtHub für Cloudflare-Bindings und Wrangler für das Deployment nutzt.
• Er repariert sich selbst, falls ein Schritt fehlschlägt.
• Er prüft das Projekt anhand einer abschließenden Checkliste, bevor er es an den Benutzer übergibt.

Ein Blick hinter die Kulissen unseres Nuxt- & Cloudflare-Scaffolding-Skills

Der Skill scaffold-nuxt-cloudflare-app-skill führt durch eine produktionsreife Initialisierung:

1. Klärung von Unklarheiten, die nicht automatisch abgeleitet werden können:
   • Das UI-Kit (Nuxt UI standardmäßig oder Antdv Next);
   • Ob eine Datenbank erforderlich ist (wie Cloudflare D1);
   • Zusätzliche Module wie @nuxtjs/i18n oder @nuxt/content für CMS-Funktionen.
2. Initialisierung der Basis-App mit pnpm dlx nuxi@latest init für die neueste Version des Nuxt-Frameworks mit pnpm als Paketmanager. Anschließend werden Allowlists für native Builds konfiguriert, damit die Cloudflare-Build-Umgebung better-sqlite3/sharp kompilieren kann.
3. Installation von Modulen basierend auf einer Entscheidungstabelle: @nuxt/ui oder @antdv-next/nuxt, @nuxt/image, @nuxtjs/seo, @nuxthub/core, @vueuse/nuxt sowie Drizzle/D1, Nuxt Content und i18n nur bei Auswahl.
4. Aufbau der Verzeichnisstruktur:
   • app/
   • server/
   • shared/
   • tests/
   • Konfigurationsdateien im Root-Verzeichnis.
5. Konfiguration von nuxt.config.ts:
   • site.url/site.name für SEO
   • NuxtHub hub-Block für Cloudflare
   • routeRules
   • compatibilityDate
6. Konfiguration von wrangler.jsonc
7. Einrichtung von Vitest und ESLint, gefolgt von einer abschließenden Checkliste einschließlich pnpm install && pnpm dev, bevor die Arbeit als erledigt gilt.

Shell-Skripte vs. KI-Agenten-Skills: Ein direkter Vergleich

Wie man KI-Agenten-Skills mit der npx skills CLI installiert

Die Installation erfolgt über einen einzigen Befehl mit der skills CLI:

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

Die CLI klont das Repository, findet den Skill und fragt, welcher der 77 unterstützten Agenten ihn erhalten soll:

Wir haben uns für Symlink entschieden (die empfohlene Methode), wodurch der Skill einmalig in ~/.agents/skills installiert wird und alle ausgewählten Agenten auf diese eine Kopie verweisen.

• Weitere Informationen zur Zentralisierung von Agenten-Skills in einer Single Source of Truth finden Sie in diesem Artikel: Fragmentierung von KI-Agenten-Skills mit npx skills lösen.

Das Öffnen von Claude Code bestätigt, dass der Skill erfolgreich installiert wurde.

Ab hier reicht ein Prompt in natürlicher Sprache völlig aus:

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

Der Skill ist Open Source; besuchen Sie das GitHub-Repository und probieren Sie ihn aus!