--- title: "Wie KI-Agenten-Skills Nuxt-Scaffolding-Scripts ersetzen" description: "Scaffolden Sie Nuxt auf Cloudflare Workers mühelos. Erfahren Sie, warum wir fragile Skripte durch intelligente KI-Skills ersetzt haben und npx skills nutzen." canonical_url: "https://techvoyage.dev/de/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts" last_updated: "2026-10-20T09:53:49.846Z" --- 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. ```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 . ``` 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](/article/ai-agent-skills-what-they-are-how-to-create-them) 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`](https://github.com/Tech-Voyage-Dev/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
Skripte Skills
Benutzerabsicht ❌ starre Standardwerte ✅ passt sich der Anfrage an
Entscheidungsfindung nur bei vorprogrammierten Flags ✅ zur Laufzeit bewertet
Versionsänderungen manuelles Umschreiben ✅ prüft aktuellen Zustand
Fehlerbehebung stoppt ✅ repariert und fährt fort
Ergebnisprüfung ❌ ✅ abschließende Checkliste
Wartungsaufwand Flag-Wildwuchs, Versions-Updates Bearbeiten von Markdown, nicht Code
## Wie man KI-Agenten-Skills mit der npx skills CLI installiert Die Installation erfolgt über einen einzigen Befehl mit der [skills CLI](https://github.com/vercel-labs/skills): ```bash 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: ![Befehlszeilenschnittstelle zur Veranschaulichung der Installation des Nuxt-Scaffolding-Skills über den CLI-Befehl npx skills add](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-add-scaffold-nuxt-installation.webp) 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. ![Terminal-Bildschirm mit der Installationszusammenfassung und Symlink-Einrichtung für die zentralisierten Agenten-Skills](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-installation-summary-details.webp) - *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. ![Befehlszeilenschnittstelle von Claude Code, die den neu installierten und einsatzbereiten Slash-Befehl scaffold-nuxt anzeigt](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/claude-code-scaffold-nuxt-slash-command-active.webp) 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](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) und probieren Sie ihn aus!