nuxt4-patterns

Überblick über den Skill nuxt4-patterns

Wofür nuxt4-patterns gedacht ist

nuxt4-patterns ist ein auf Nuxt 4 ausgerichteter Skill, mit dem du vor dem Ausrollen einer Seite die richtigen Muster für SSR, Hydration, Routing und Datenabruf auswählst. Er hilft immer dann, wenn du praktische Unterstützung für Entscheidungen in der Frontend-Entwicklung brauchst, die Korrektheit und Performance beeinflussen — nicht nur Syntax-Hilfe.

Wer den Skill nutzen sollte

Nutze den Skill nuxt4-patterns, wenn du Nuxt-4-Apps baust oder reparierst und Hilfe bei Hydration-Mismatches, Route Rules, Lazy Loading oder SSR-sicherem Datenabruf brauchst. Am nützlichsten ist er für Engineers, die einen installierbaren Workflow wollen, den sie über Seiten und Komponenten hinweg wiederverwenden können, statt jedes Mal einen neuen Prompt zu formulieren.

Was den Skill unterscheidet

Der Mehrwert von nuxt4-patterns liegt in der Entscheidungsunterstützung: Wann das Rendering deterministisch bleiben sollte, wann Logik in den Client verlagert werden kann, wann useFetch gegenüber useAsyncData sinnvoller ist und wann ssr: false wirklich die Lösung ist — und wann nicht. Dadurch ist der Skill nuxt4-patterns nützlicher als ein generischer Nuxt-Prompt, weil er die Abwägungen in den Mittelpunkt stellt, die die Einführung in der Praxis meist ausbremsen.

So verwendest du den Skill nuxt4-patterns

nuxt4-patterns installieren und zuerst prüfen

Installiere den Skill nuxt4-patterns mit:

npx skills add affaan-m/everything-claude-code --skill nuxt4-patterns

Lies nach der Installation zuerst SKILL.md. Das Repo des Skills ist klein und in sich geschlossen, daher liegt der eigentliche Nutzen darin, die Anleitung zu verstehen und auf deine Codebasis anzuwenden — nicht darin, einen großen Support-Baum abzusuchen.

Was du in deiner Anfrage angeben solltest

Für eine gute Nutzung von nuxt4-patterns gib dem Modell das Ziel der Seite oder des Features, den Render-Modus und die genaue Problemklasse. Ein guter Prompt wäre zum Beispiel: „Behebe eine Nuxt-4-Dashboard-Seite mit SSR-Hydration-Mismatch durch clientseitige Datumsformatierung; die Seite soll SSR-gerendert bleiben und das bestehende SEO beibehalten.“ Das ist besser als „Hilfe bei Hydration“, weil der Skill dann weiß, was nicht verändert werden soll.

Der beste Workflow für die Umsetzung der Hinweise

Nutze nuxt4-patterns als Entscheidungsfilter: Erst klären, ob es um Hydration-Sicherheit, Route Rules, Lazy Loading oder Datenabruf geht, dann nach der kleinsten sicheren Änderung fragen. Wenn die Seite serverseitig gerendert wird, bitte zuerst um SSR-sichere Markup-Lösungen; wenn sie wirklich Browser-Only-Verhalten braucht, fordere die engste mögliche Grenze mit ClientOnly oder einer .client.vue-Komponente an.

Welche Dateien und Abschnitte du zuerst lesen solltest

Starte mit SKILL.md, vor allem mit den Aktivierungskriterien und den Abschnitten zur Hydration-Sicherheit und zum Datenabruf. Das sind die informativsten Teile des nuxt4-patterns-Leitfadens, weil sie erklären, wodurch der Fehler entsteht und welches Muster ihn meist behebt. Wenn du den Skill an dein eigenes Projekt anpasst, prüfe außerdem die Repo-Struktur auf feature-spezifische Hinweise, bevor du Beispiele übernimmst.

FAQ zum Skill nuxt4-patterns

Ist nuxt4-patterns nur für Nuxt-4-SSR-Apps gedacht?

Nein. Der Skill nuxt4-patterns ist besonders stark bei Nuxt-4-Apps, die SSR und Client-Verhalten mischen, hilft aber auch bei hybriden Seiten, prerendered Routes und Komponenten, die Daten abrufen oder vom Route-State abhängen. Wenn deine App rein clientseitig ist, ist der Nutzen geringer.

Wann sollte ich den Skill nicht verwenden?

Greife nicht zu nuxt4-patterns, wenn das Problem nichts mit Rendering oder Datenfluss zu tun hat, etwa bei reinem Styling, unabhängigem Vue-State-Management oder Backend-API-Design. Am stärksten ist er, wenn es um Markup-Konsistenz, Payload-Verhalten oder Rendering-Entscheidungen auf Route-Ebene geht.

Ist er besser als ein normaler Prompt?

Meistens ja, weil der Skill nuxt4-patterns die wichtigen Nuxt-4-Constraints direkt mitbringt: deterministischer First Render, SSR-sicherer Fetch und saubere Grenzen für Client-only-Bereiche. Ein normaler Prompt kann zwar eine funktionierende Antwort liefern, übersieht aber wahrscheinlicher Hydration- oder Payload-Probleme.

Ist er einsteigerfreundlich?

Ja, wenn du die Seite und das Symptom beschreiben kannst. Der Leitfaden nuxt4-patterns ist praktisch genug für Einsteiger, aber bessere Ergebnisse gibt es, wenn du eine konkrete Komponente, Route oder Fehlermeldung nennst, statt breite Architekturberatung zu verlangen.

So verbesserst du den Skill nuxt4-patterns

Gib dem Modell die echte Einschränkung

Die stärkste Nutzung von nuxt4-patterns beginnt mit der Grenze, die du einhalten musst: SSR, SEO, Routing-Verhalten oder Bundle-Größe. Sage, ob du clientseitiges Rendering akzeptieren kannst, ob die Seite crawlbar bleiben muss und ob Daten serverseitig geholt werden sollen. So kann der Skill das passende Muster wählen, statt zu stark gegenzusteuern.

Beschreibe das Mismatch oder den Zielkonflikt präzise

Wenn du einen Bug hast, nenne das exakte Symptom: den Wortlaut der Hydration-Warnung, die Route, die sich falsch verhält, Daten, die doppelt geladen werden, oder eine Komponente, die server- und clientseitig unterschiedlich rendert. Wenn du einen Feature-Wunsch hast, beschreibe das gewünschte Render-Verhalten und was unverändert bleiben muss. Das ist der schnellste Weg, um die Ergebnisse von nuxt4-patterns zu verbessern.

Arbeite dich von sicheren zu engeren Änderungen vor

Bitte zuerst um die kleinste mögliche Korrektur und verfeinere dann. Zum Beispiel: „SSR beibehalten, Mismatch entfernen, Layout nicht ändern“, später dann „Jetzt das Chart nur bei Interaktion lazy-loaden.“ So bleibt der Skill nuxt4-patterns auf die eigentliche Entscheidung fokussiert, statt die ganze Seite umzubauen.