vue-jsx-best-practices

Überblick über die Skill vue-jsx-best-practices

Die Skill vue-jsx-best-practices hilft dir, den häufigsten Fehler beim Schreiben von JSX in Vue zu vermeiden: anzunehmen, dass React-JSX-Konventionen unverändert gelten. Das tun sie nicht. In Vue JSX verwendest du in der Regel Standard-HTML-Attributnamen wie class und for statt der React-Varianten className und htmlFor.

Für wen diese Skill gedacht ist

Diese Skill passt besonders gut für Frontend-Entwickler, die:

• Vue-3-Komponenten mit JSX oder TSX schreiben
• Komponenten von React nach Vue migrieren
• auf TypeScript-Fehler bei JSX-Props und -Attributen stoßen
• möchten, dass Vue-Render-Funktionen zu den Vue-Template-Konventionen passen

Wenn dein Job lautet: „Diesen Vue-JSX-Code ohne Trial-and-Error typsicher und idiomatisch machen“, dann ist vue-jsx-best-practices eine sehr gute Wahl.

Wobei dir diese Skill konkret hilft

Die eigentliche Aufgabe ist nicht „JSX lernen“. Es geht darum, rohes, gemischtes oder stark von React geprägtes JSX in Vue-kompatibles JSX zu überführen, das:

• TypeScript-Prüfungen besteht
• Vue-Konventionen folgt
• subtile Migrationsfehler vermeidet
• für Teams lesbar bleibt, die sowohl Templates als auch Render-Funktionen nutzen

Was vue-jsx-best-practices anders macht

Die Skill ist bewusst eng zugeschnitten – und genau das ist nützlich. Statt alle Rendering-Themen in Vue abzudecken, konzentriert sie sich auf einen besonders friktionsreichen Stolperstein: Vue JSX verwendet HTML-Attributnamen statt React-spezifischer Benennungen. Genau darin liegt ihr Wert, wenn du fehlerhafte Attribute debuggen, migrierten Code reviewen oder die TSX-Nutzung in einer Codebase vereinheitlichen willst.

Was du vor der Installation wissen solltest

Das ist kein umfassender Architekturleitfaden für Vue. Die Repository-Basis zeigt eine kompakte Skill mit Fokus auf ein zentrales Referenzdokument: reference/render-function-jsx-vue-vs-react.md. Installiere vue-jsx-best-practices, wenn du gezielte Hilfe zu Syntaxunterschieden in Vue JSX und zu sichereren Migrationsmustern suchst – nicht, wenn du ein vollständiges JSX-Kompendium erwartest.

So verwendest du die Skill vue-jsx-best-practices

Installationskontext für vue-jsx-best-practices

Nutze die Skill, wenn dein Agent oder Workflow Vue JSX/TSX generiert, überprüft oder migriert. Ein praktischer Installationsbefehl ist:

npx skills add vuejs-ai/skills --skill vue-jsx-best-practices

Danach rufst du sie auf, wenn deine Aufgabe Formulierungen enthält wie:

• „convert this React component to Vue TSX“
• „fix JSX attribute type errors in Vue“
• „review this Vue render function for React-style conventions“
• „make this Vue JSX idiomatic“

Lies zuerst diese Repository-Dateien

Diese Skill ist klein, deshalb ist der schnellste Leseweg wichtig:

1. skills/vue-jsx-best-practices/SKILL.md
2. skills/vue-jsx-best-practices/reference/render-function-jsx-vue-vs-react.md

Die zweite Datei enthält den Großteil des praktischen Nutzens. Sie erklärt die zentrale Regel, warum TypeScript das Problem erkennt und was du bei einer Migration konkret ändern solltest.

Welche Eingaben die Skill braucht

vue-jsx-best-practices funktioniert am besten, wenn du echten Code und Kontext lieferst, nicht nur „help with Vue JSX“. Gib möglichst Folgendes mit:

• den Komponenten-Quellcode
• ob es sich um Vue 3 handelt
• ob du JSX oder TSX verwendest
• aktuelle TypeScript-Fehler, falls vorhanden
• ob der Code aus React stammt
• dein Build-Tool, zum Beispiel Vite

Minimal sinnvoller Input:

• „This is a Vue 3 TSX component migrated from React. Fix invalid JSX attributes and explain each change.”

Besserer Input:

• „Review this Vue 3 TSX file migrated from React. Replace React-only JSX conventions with Vue equivalents, preserve behavior, and note anything that will still require plugin or TypeScript config checks in Vite.”

Die zentrale Regel, die die Skill durchsetzt

Die wichtigste praktische Erkenntnis ist einfach:

• verwende class, nicht className
• verwende for, nicht htmlFor
• nutze HTML-artige Attributnamen passend zu Vue-Templates
• nutze Standardnamen für Event-Handler mit dem Präfix on, etwa onClick

Das ist wichtig, weil Vues Runtime hier tolerant sein kann, TypeScript die React-Varianten aber in der Regel markieren sollte. Genau das ist hilfreich: Inkonsistenzen werden früh sichtbar.

Aus einem vagen Ziel einen starken Prompt machen

Schwacher Prompt:

• „Fix this JSX.”

Starker Prompt:

• „Apply vue-jsx-best-practices to this Vue 3 TSX component. Identify any React JSX conventions such as className or htmlFor, replace them with Vue JSX equivalents, keep event handlers intact, and explain which changes are for type safety versus runtime behavior.”

Warum das besser ist:

• es benennt die Migrationsquelle des Problems
• es fordert konkrete Ersetzungen an
• es trennt Compile-Time-Probleme von Runtime-Toleranz
• es reduziert generische Vue-Ratschläge

Empfohlener Workflow für Migrationsaufgaben mit vue-jsx-best-practices

Ein guter Workflow für die Nutzung von vue-jsx-best-practices ist:

1. Füge die ursprüngliche React- oder gemischte JSX-Komponente ein.
2. Bitte um eine erste Umstellung auf Vue-JSX-Konventionen.
3. Bitte um einen zweiten Durchgang mit Fokus ausschließlich auf TypeScript-Kompatibilität.
4. Vergleiche Props, Labels und Event-Bindings Zeile für Zeile.
5. Führe lokal deinen Type-Checker aus und gib verbleibende Fehler zurück in die Skill.

Dieses schrittweise Vorgehen ist besser, als in einem Schritt nach einer „full migration“ zu fragen, weil vue-jsx-best-practices besonders stark bei der Bereinigung von JSX-Konventionen ist – nicht bei vollständigen Framework-Rewrites.

Was du im konvertierten Code prüfen solltest

Nach der Nutzung von vue-jsx-best-practices solltest du Folgendes kontrollieren:

• Labels mit for
• CSS-Class-Bindings mit class
• aus React übernommene DOM-Prop-Namen
• die Schreibweise der Event-Handler
• ob die Ausgabe noch von React-Komponentenmustern ausgeht

Die Skill kann Syntax und Konventionen verbessern, aber du musst weiterhin frameworkspezifische Logik wie Hooks, State und Component-APIs validieren.

TypeScript- und Vite-Aspekte

Das Quellmaterial erwähnt explizit TypeScript-Konfiguration für Vue-JSX-Type-Inference und Vite-Konfiguration als relevante Themen. Praktisch heißt das: Attributfehler solltest du nicht als bloß stilistische Frage behandeln. Wenn dein TSX-Setup korrekt ist, sollten ungültige React-artige Attribute beim Type-Checking auftauchen. Falls das nicht passiert, prüfe dein Vue-JSX-Plugin und deine TypeScript-Konfiguration, bevor du einem zur Laufzeit scheinbar „funktionierenden“ Ergebnis vertraust.

Wann vue-jsx-best-practices gut passt – und wann nicht

Gute Einsatzfälle:

• React-zu-Vue-TSX-Migration
• Code-Reviews für Vue-JSX-Konventionen
• Beheben von JSX-Attributfehlern in Vue 3
• Vereinheitlichung des Team-Stils in Render-Funktionen

Weniger passend:

• Vue von Grund auf lernen
• Hilfe bei Template-Syntax
• Composition-API-Design
• vollständiges Troubleshooting von Build-Setups außerhalb JSX-bezogener Konfiguration

Beispielanfrage, die bessere Ergebnisse liefert

Nutze zum Beispiel so etwas:

“Use vue-jsx-best-practices on this Vue 3 TSX component. Flag every React-style JSX attribute, replace it with Vue JSX syntax, keep the component behavior unchanged, and give me a short checklist I can apply to the rest of the codebase.”

Mit diesem Prompt bekommst du sowohl einen Fix als auch ein wiederverwendbares Review-Muster.

FAQ zur Skill vue-jsx-best-practices

Ist vue-jsx-best-practices nur für React-Migrationen gedacht?

Nein. Die Migration von React ist der klarste Anwendungsfall, aber die Skill hilft auch dann, wenn dein Team Vue TSX direkt schreibt und konsistente, typsichere Konventionen möchte. Sie ist immer dann nützlich, wenn React-artige Attributnamen in Vue JSX hineinrutschen.

Installiert vue-jsx-best-practices ein Plugin oder ändert meine Konfiguration?

Nein. Die Skill liefert Anleitung; sie ist kein Paket, das deine Toolchain automatisch patched. Du brauchst weiterhin dein eigenes Vue-JSX- und TypeScript-Setup in deiner App. Die Skill hilft dir dabei zu erkennen, wie der Code aussehen sollte, sobald dieses Setup korrekt steht.

Was ist der Hauptunterschied zu einem normalen Prompt?

Ein gewöhnlicher Prompt kann plausibles JSX erzeugen, ohne Vue-spezifische Attributkonventionen einzuhalten. vue-jsx-best-practices ist für dieses eng umrissene Problem verlässlicher, weil es den Vue-vs-React-JSX-Unterschied und die Auswirkungen auf die Typsicherheit ins Zentrum stellt.

Ist diese Skill anfängerfreundlich?

Ja, wenn du bereits grundlegende Vue- oder JSX-Kenntnisse mitbringst. Der Umfang ist eng genug, um gut zugänglich zu sein. Wenn du aber komplett neu bei Vue-Rendering bist, ersetzt diese Skill keine breitere Einführung in Komponenten, Templates oder Render-Funktionen.

Wann sollte ich vue-jsx-best-practices nicht verwenden?

Lass sie weg, wenn deine Codebase ausschließlich Vue-Templates verwendet und kein JSX/TSX einsetzt. Ebenso ist sie nicht die richtige Wahl, wenn dein Problem nichts mit JSX-Attributbenennung zu tun hat, etwa Routing, State-Management oder Server-Rendering.

Geht das Runtime-Verhalten immer kaputt, wenn ich React-artige Attribute verwende?

Nicht unbedingt. Die Referenz weist darauf hin, dass Vues Runtime tolerant sein kann und einige Attribute korrekt umsetzt. Das größere Thema sind Konsistenz und Typsicherheit: TypeScript sollte diese React-Konventionen in Vue JSX zurückweisen – und genau das ist in der Regel erwünscht.

So verbesserst du die Skill vue-jsx-best-practices

Gib Code, Fehler und Framework-Ziel gemeinsam an

Der schnellste Weg, die Ergebnisse von vue-jsx-best-practices zu verbessern, ist, Folgendes mitzugeben:

• die Quellkomponente
• die gewünschte Zielstruktur im Framework
• tatsächliche Compiler- oder Editor-Fehler
• ob das Ziel Migration, Bereinigung oder Review ist

Ohne diese Angaben bleibt die Ausgabe womöglich bei offensichtlichen Attribut-Ersetzungen stehen und übersieht umliegende JSX-Annahmen.

Bitte um ein diff-orientiertes Review

Ein besonders wertvoller Prompt ist:

“Review this file using vue-jsx-best-practices. Do not rewrite everything. Only flag JSX conventions that are invalid, risky, or non-idiomatic in Vue, and explain each change briefly.”

Das reduziert übermäßige Eingriffe und macht Reviews in bestehenden Codebases leichter.

Trenne Syntax-Fixes von Framework-Rewrites

Ein häufiger Fehlmodus ist, die Skill gleichzeitig um JSX-Syntaxunterschiede und eine vollständige Verhaltensmigration von React nach Vue zu bitten. Die Ausgabe wird besser, wenn du diese Aufgaben trennst:

1. JSX-Konventionen normalisieren
2. Type-Fehler beheben
3. Framework-Logik refactoren

So bleibt vue-jsx-best-practices auf das fokussiert, was sie tatsächlich gut abdeckt.

Bitte um eine wiederverwendbare Checkliste

Das Repository deutet bereits eine task-orientierte Checklistenlogik an. Baue darauf auf, indem du die Skill bittest, eine teamtaugliche Prüfliste zu erstellen, zum Beispiel:

• className durch class ersetzen
• htmlFor durch for ersetzen
• on*-Event-Handler verifizieren
• TS-Checks für konvertierte Dateien erneut ausführen

So wird aus punktueller Hilfe ein wiederholbarer Review-Prozess.

Prüfe Konfigurationsannahmen nach dem ersten Durchgang

Wenn die Ausgabe korrekt aussieht, dein Editor aber fehlerhafte Attribute nicht markiert, stelle im Anschluss eine Frage zu den Annahmen deiner TSX-Umgebung. Die Skill verweist auf TypeScript-Inference und Vite-Konfiguration als relevanten Kontext – eine schwache Validierung in deinem lokalen Setup kann echte Fehler verdecken.

Typische Fehlmuster, auf die du achten solltest

Achte nach der Nutzung von vue-jsx-best-practices auf diese Punkte:

• React-Attributnamen, die in verschachtelten Elementen stehen geblieben sind
• Ausgabe, die zur Laufzeit „funktioniert“, aber TS-Checks nicht besteht
• Migrationsratschläge, die Verhalten statt nur Syntax verändern
• unvollständige Bereinigung bei Labels, Klassen und DOM-Props

Das sind gute Kandidaten für einen zweiten Review-Durchgang.

Verbessere den Prompt nach der ersten Ausgabe

Ein starker Iterations-Prompt ist:

“Now do a second pass with vue-jsx-best-practices focused only on missed React-style JSX conventions and any Vue JSX typing issues. Keep logic unchanged.”

Dieses Follow-up ist oft wirksamer, als direkt eine komplett neue Neufassung anzufordern.

Nutze die Referenzdatei als Entscheidungsanker

Wenn du unsicher bist, ob du der Ausgabe vertrauen kannst, vergleiche sie mit:

reference/render-function-jsx-vue-vs-react.md

Diese Datei ist der klarste Anker für das beabsichtigte Verhalten der Skill. Auch für Installationsentscheidungen ist das ein gutes Signal: Die Skill ist kompakt, aber ihre Anleitung ist spezifisch genug, um vermeidbare Vue-JSX-Fehler spürbar zu reduzieren.