vue

Überblick über den vue skill

Wofür der vue skill gedacht ist

Der vue skill ist ein fokussierter Leitfaden zum Generieren und Prüfen von Vue-3-Code nach aktuellen Best Practices – insbesondere für Composition API, <script setup lang="ts">, Compiler-Makros, Reactivity-APIs und eingebaute Komponenten wie Transition, Teleport, Suspense und KeepAlive. Am nützlichsten ist er, wenn du einen AI-Agenten Vue Single File Components erzeugen lassen willst, die bereits einem modernen Vue-Stil folgen, statt auf ältere Options-API-Muster zurückzufallen.

Für wen sich dieser vue skill lohnt

Dieser vue skill passt für Frontend-Entwickler, Full-Stack-Entwickler und AI-Nutzer, die regelmäßig nach Vue-Komponenten, Composables oder Refactorings fragen. Besonders wertvoll ist er, wenn du Ausgaben willst, die TypeScript-first sind, Makros korrekt einsetzen und sich an der Vue-3.5-Generation der Dokumentation orientieren statt an einem Mix aus Vue-2- und frühem Vue-3-Stil.

Der konkrete Job-to-be-done

Die meisten Nutzer brauchen keine generische Framework-Zusammenfassung. Sie brauchen einen Agenten, der zuverlässig Vue-Code schreibt, der:

• standardmäßig die Composition API verwendet
• <script setup lang="ts"> bevorzugt
• defineProps, defineEmits und defineModel korrekt einsetzt
• ref, shallowRef, computed und watch bewusster auswählt
• fortgeschrittene Built-ins nur dann nutzt, wenn sie wirklich passen

Genau darin liegt der praktische Wert von vue for Frontend Development: weniger Nacharbeit nach AI-generiertem Code.

Was diesen vue skill wirklich unterscheidet

Der stärkste Unterschied ist die klare, meinungsstarke Ausrichtung. Die Quelle bevorzugt ausdrücklich TypeScript, <script setup lang="ts"> und die Composition API und rät von Reactive Props Destructure ab. Außerdem enthält sie gezielte Referenzen zu:

• script setup macros
• reactivity und neueren Core-APIs
• fortgeschrittenen eingebauten Komponenten und Direktiven

Dadurch ist der Skill für konkrete Implementierungsarbeit deutlich besser geeignet als ein allgemeiner „teach me Vue“-Prompt.

Was dieser vue skill nicht abdecken will

Das ist keine vollständige Karte des gesamten Vue-Ökosystems. Er ersetzt keine tiefgehende Dokumentation zu Routing, State-Libraries, SSR-Frameworks, Testing oder Build-Tooling. Wenn deine Hauptaufgabe Nuxt-Architektur, Vue-Router-Setup, Pinia-Design oder Deployment-Pipelines sind, hilft der vue skill beim komponentennahen Code-Stil, sollte aber nicht deine einzige Quelle sein.

So nutzt du den vue skill

Installationskontext für vue

Installiere den Skill in deiner skills-fähigen Umgebung mit:

npx skills add antfu/skills --skill vue

Die Repository-Struktur zeigt, dass der Skill unter skills/vue in antfu/skills liegt. Es gibt hier kein separates Package-Install für Vue selbst; es geht um Leitlinien für bessere AI-gestützte Vue-Generierung, nicht um das Framework-Runtime-Paket.

Diese Dateien solltest du zuerst lesen

Wenn du vor der Nutzung des vue skill den schnellsten Weg mit dem höchsten Informationswert willst, lies diese Dateien in dieser Reihenfolge:

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

Warum genau diese Reihenfolge:

• SKILL.md erklärt die Arbeitspräferenzen und den Geltungsbereich.
• Die drei Referenzdateien enthalten die praktischen Details, die der Agent am ehesten anwenden wird.
• GENERATION.md zeigt, dass das Material aus den Vue-Dokumenten generiert wurde und einen aktuellen Snapshot abbildet.

Welche Eingaben der vue skill braucht

Die Qualität bei vue usage hängt stark davon ab, wie gut deine Anfrage formuliert ist. Gib dem Agenten:

• den Zweck der Komponente
• Props und emitte Events
• ob du v-model brauchst
• die erwartete State-Struktur
• Anforderungen an asynchrone Daten
• ob die Ausgabe eine Komponente, ein Composable oder ein Pattern-Beispiel sein soll
• Versionsgrenzen für Vue, falls du nicht auf aktuellem Vue 3 bist
• die TypeScript-Anforderung
• eventuelle UI- oder Performance-Vorgaben

Schwache Eingabe:

• “Make a Vue component for search.”

Starke Eingabe:

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

Aus groben Zielen starke vue Prompts machen

Um den vue skill gut zu nutzen, solltest du Implementierungsentscheidungen explizit anfordern. Eine gute Prompt-Struktur ist:

1. das Artefakt benennen
2. die Vue-Konventionen festlegen
3. Eingaben und Ausgaben definieren
4. Verhalten und Einschränkungen ergänzen
5. bei Trade-offs um Begründung bitten

Beispiel:

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

Das funktioniert besser als ein generisches „write Vue“, weil es zu den eingebauten Präferenzen des Skills passt.

Auf welchen Standard-Code-Stil der vue skill hinausläuft

Das Quellenmaterial lenkt den Agenten sehr klar in Richtung:

• Vue 3.5
• Composition API
• <script setup lang="ts">
• makrobasierte Komponentendefinitionen
• typisierte Props und Emits
• gezielter Einsatz von shallowRef bei performancekritischen Daten

Wenn du Options API, pures JavaScript oder ältere Vue-Muster willst, musst du das ausdrücklich sagen, weil der Skill bewusst in eine andere Richtung voreingestellt ist.

Beste Einsatzfälle für vue usage

Dieser vue guide ist besonders stark bei:

• dem Schreiben neuer Vue-SFCs
• dem Refactoring alter Komponenten nach <script setup>
• dem Definieren typisierter Props, Emits und Models
• der Wahl zwischen ref, reactive, computed und Watchern
• dem Einsatz von Transition, Teleport, Suspense oder KeepAlive
• dem Erzeugen von Composable-Beispielen nach modernen Vue-Mustern

Weniger nützlich ist er für rein visuelle Designarbeit oder framework-unabhängige Frontend-Aufgaben.

Praktischer Workflow für die erste Ausgabe

Ein verlässlicher Ablauf ist:

1. Bitte zuerst um eine erste Vue-SFC-Fassung mit klaren Props, Emits und State-Struktur.
2. Prüfe dann, ob die generierte API wirklich zu deinem Komponentenvertrag passt.
3. Bitte anschließend um einen zweiten Durchgang, der Reactivity-Entscheidungen, Typisierung und Edge Cases schärft.
4. Erst danach solltest du fortgeschrittene Features wie Transitions oder Suspense-Boundaries anfordern.

Diese Reihenfolge ist wichtig, weil fortgeschrittene Vue-Features schnell überstrapaziert werden, solange der grundlegende State-Flow noch nicht sauber definiert ist.

Repository-gestützte Details, die die Ausgabequalität beeinflussen

Nützliche Details aus der Skill-Quelle:

• defineModel wird als verfügbar ab Vue 3.4+ behandelt
• withDefaults bleibt für Vue 3.4 und darunter relevant
• reactive() verliert beim Destructuring seine Reaktivität
• shallowRef wird bevorzugt, wenn tiefe Reaktivität nicht nötig ist
• Built-ins wie Transition und Suspense werden mit praxistauglichen Mustern behandelt

Genau solche Details heben generierten Code über einen oberflächlichen Repo-Skim hinaus.

Beispielanfragen, die gut zum vue skill passen

Gute Anfragen für vue usage:

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

Häufige Fehlannahmen vor der Installation

Erwarte nicht, dass der vue skill allein diese Themen löst:

• Projekt-Scaffolding
• Router-Architektur
• State-Store-Design über eine große App hinweg
• SSR- oder Nuxt-spezifische Entscheidungen
• Test-Runner-Setup
• Details zur Integration von CSS-Frameworks

Wenn das deine Hauptblocker sind, installiere ihn wegen der Qualität bei der Komponentengenerierung – nicht als vollständigen Leitfaden für deinen gesamten Vue-Stack.

FAQ zum vue skill

Ist dieser vue skill gut für Einsteiger?

Ja, wenn du bereits mit Vue 3 arbeitest und sauberere AI-Ausgaben willst. Er ist kein Einsteigerkurs, reduziert aber Verwirrung, weil er einen klaren Stil bevorzugt: Composition API mit <script setup lang="ts">. Diese Konsistenz hilft gerade neueren Nutzern, keine gemischten Muster zu übernehmen.

Unterstützt der vue skill ältere Vue-Muster?

Nicht als erste Wahl. Laut Quelle soll immer die Composition API statt der Options API verwendet werden. Wenn dein Codebase stark legacy-lastig ist, kannst du den Skill trotzdem nutzen, solltest aber Kompatibilitätsgrenzen explizit angeben und Migrationen sorgfältig prüfen.

Worin unterscheidet sich das von einem normalen Vue-Prompt?

Ein normaler Prompt erzeugt oft inkonsistenten Vue-Code: gemischte APIs, schwächere Typisierung oder veraltete Makros. Der vue skill gibt dem Agenten ein engeres Regelwerk mit Präferenzen, moderner Makro-Nutzung und gezielten Referenzen. Das bedeutet in der Regel weniger manuelle Korrekturen.

Reicht vue install aus, wenn ich mit Nuxt oder einem größeren Stack arbeite?

Nein. vue install hilft bei Komponenten- und Reactivity-Leitlinien, aber größere Stack-Themen erfordern weiterhin Wissen zu Nuxt, Routing, State, Data Fetching und Deployment. Nutze ihn als Ebene für Vue-Codegenerierung, nicht als Skill für vollständige Anwendungsarchitektur.

Wann sollte ich den vue skill nicht verwenden?

Lass ihn weg, wenn deine Aufgabe vor allem ist:

• framework-neutrale UI-Entwicklung
• Arbeit mit React/Angular/Svelte
• reine Backend-Implementierung
• stark Nuxt-spezifische Konventionen mit wenig direkter Vue-Komponentenarbeit
• strikte Pflege von Legacy-Options-API-Code, in dem moderne Muster nicht erlaubt sind

Deckt der vue skill fortgeschrittene Vue-Features ab?

Ja, aber gezielt. Die enthaltenen Referenzen behandeln Transition, Teleport, Suspense, KeepAlive, Direktiven, Reactivity-APIs, Lifecycle-Hooks und Makros. Das reicht für viele reale Frontend-Aufgaben, ohne zu einer vollständigen Vue-Enzyklopädie zu werden.

So verbesserst du den vue skill

Gib dem Agenten Versions- und Kompatibilitätsgrenzen mit

Der Skill basiert auf Leitlinien aus der Vue-3.5-Ära. Wenn deine App Vue 3.3 oder 3.4 nutzt oder ältere Grenzen bei der Makro-Unterstützung hat, sag das direkt zu Beginn. Das ist besonders wichtig für Features wie defineModel und dafür, wie Defaults in Props behandelt werden.

Beschreibe Komponentenverträge, nicht nur UI-Ideen

Der schnellste Weg zu besserem vue-Output ist, Folgendes mitzugeben:

• Prop-Namen und Typen
• emitte Events
• Model-Bindings
• Async-States
• Empty- und Error-States
• Verantwortlichkeiten zwischen Parent und Child

Der Skill ist stark in der Implementierung, sobald der Vertrag klar ist. Schwächer ist er, wenn er aus einer vagen UI-Beschreibung eine komplette API selbst ableiten soll.

Frage explizit nach Reactivity-Entscheidungen

Viele Vue-Fehler entstehen beim State-Modell, nicht in der Template-Syntax. Formuliere Trade-offs direkt mit, zum Beispiel:

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

Das passt zu den stärksten Inhalten der Referenzen und verbessert die Codequalität stärker, als abstrakt nach „best practices“ zu fragen.

Typische Fehlermuster früh erkennen

Prüfe erste Ausgaben gezielt auf diese Punkte:

• Options API taucht auf, obwohl du Composition API wolltest
• schlichtes <script> statt <script setup lang="ts">
• untypisierte defineProps oder defineEmits
• unnötige tiefe Reaktivität
• Watcher werden eingesetzt, obwohl computed einfacher wäre
• fortgeschrittene Built-ins werden ohne echten Bedarf hinzugefügt

Das sind die häufigsten Arten, wie generische Generierung vom Qualitätsanspruch des Skills abweicht.

Immer nur einen Aspekt pro Durchgang verbessern

Nach der ersten Antwort solltest du nicht alles auf einmal anfordern. Arbeite in Durchgängen:

1. API-Form
2. Typisierung und Makros
3. korrekte Reaktivität
4. Rendering-States
5. fortgeschrittene UX-Muster

So lässt sich jede Änderung leichter prüfen, und der Agent bleibt am vue guide ausgerichtet, statt die ganze Komponente unvorhersehbar neu zu generieren.

Nutze die Referenzdateien als Eskalationspfad

Wenn das erste Ergebnis nah dran, aber noch nicht belastbar ist, lenke den Agenten auf die eigenen Referenzen des Skills:

• references/script-setup-macros.md für Props, Emits, Models, Slots und Makro-Syntax
• references/core-new-apis.md für Reactivity, Watcher und Composables
• references/advanced-patterns.md für eingebaute Komponenten und Direktiven

Das ist eine der praktischsten Methoden, um Ausgaben für vue for Frontend Development zu verbessern, ohne den Prompt komplett neu zu schreiben.

Fordere einen Minimal- und einen Production-Pass an

Ein besonders ergiebiges Muster ist:

• erste Anfrage: minimal funktionierende SFC
• zweite Anfrage: Production-Pass mit Typisierung, States, Accessibility und Performance-Entscheidungen

So vermeidest du aufgeblähte erste Entwürfe und erkennst schneller, an welchen Stellen Vue-spezifische Entscheidungen wirklich relevant sind.

Halte den vue skill an die Regeln deiner Codebase angepasst

Wenn dein Team Konventionen hat, die von den Standards des Skills abweichen, benenne sie direkt. Zum Beispiel:

• nur JavaScript
• kein defineModel
• Suspense vermeiden
• explizite Prop-Objekte statt rein typbasierter Deklarationen verwenden
• keine fortgeschrittenen Built-ins, außer wenn ausdrücklich angefordert

Der vue skill ist bewusst meinungsstark – das ist nützlich. Die besten Ergebnisse bekommst du aber dann, wenn seine Defaults an die realen Einschränkungen deines Repositories angepasst werden.