Zosia - Vue-Entwicklerin AI Skill
Komplettes Skill-Paket Sofort-Downloadzosia-vue-nuxt-frontend-engineer.skill
Choose how to get it
Start All-Access, from $8.25/mo$99 a year, or $19 a month. 14-day refund on the first charge.
// all-access
You do not download skills. Your AI fetches them.
The KissMySkills connector is a small server your AI chat talks to. Add it once to Claude, ChatGPT, Claude Code or Cursor. From then on, any of our 1,000+ skills is one sentence away.
- 01Add the connector. Settings, Connectors, paste one link. A minute.
- 02Sign in once. The email from your subscription. Nothing installs.
- 03Ask for a skill. "Load Zosia." It arrives in the conversation and your AI answers as that specialist.
Every skill, prompt pack and agent, new releases included. Single files can still be bought and kept. Cancel any time from your account. Compare plans
Secure checkout by Shopify
Add it once. Your AI works like a specialist.
Füge es zu Claude, ChatGPT oder Gemini hinzu – deine AI arbeitet als Spezialist in diesem Bereich.
Sofortiger Download · 30 Tage Geld-zurück-Garantie. Einmal bezahlen, für immer behalten – kein Abonnement. Von uns geschrieben und getestet, niemals von GitHub abgeschöpft. Rückerstattungsrichtlinie
Ask Zosia something hard.
Fragen vor dem Kauf?
Schreib uns, und eine Person antwortet – normalerweise noch am selben Tag. Kein Bot, keine Ticket-Warteschlange.
hello@kissmyskills.comTrademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.
Du liest es nicht. Deine AI tut es.
Füge die Skill-Datei einmal zu Claude, ChatGPT oder Gemini hinzu. Danach arbeitet es als Spezialist auf diesem Gebiet und antwortet bereits ab der nächsten Nachricht als Zosia.
Kaufen Sie einmal und behalten Sie die Datei für immer. Oder abonnieren Sie All-Access und lassen Sie sie mit dem KissMySkills-Connector sowie jede andere Fähigkeit bei Bedarf in Ihren Chat laden.
// what's inside
Was steckt in dieser Fähigkeit?
- Reaktivitätsdiagnose an der genauen Referenz oder am Watcher
- Ursache der Hydration-Abweichung mit benanntem Render-Vorgang
- Rendering-Modus pro Route festgelegt, nicht pro Projekt
- Behebungsplan mit den aufgeführten Änderungen auf Komponentenebene
Vue- und Nuxt-Entwickler, die Hydration-Warnungen und Reaktivität debuggen, die stillschweigend fehlschlägt.
Ein erfahrener Vue.js-/Nuxt-Frontend-Engineer berechnet mehr als 80 $ pro Stunde für das Debugging von Reaktivität und die Entwicklung von Rendering-Strategien – das vollständige Know-how gehört für immer dir.
What you're actually buying
Behandle Vues Reaktivitätssystem nicht wie das Re-Rendering-Modell von React.
Zosia ist eine Senior-Vue.js/Nuxt-Frontend-Engineer-Skill, die auf Vues tatsächlichem mentalen Modell basiert: einem feingranularen, proxybasierten Reaktivitätssystem, Single-File-Komponenten und einer Composition API, die auf Composables statt auf Hooks mit Dependency-Arrays aufbaut. Sie deckt die Architektur der Composition API und das Design von Composables, das Reaktivitätssystem (Refs, reactive, gecachtes Computed, Watcher), das State-Management mit Pinia, Nuxts Rendering-Strategie (SSR, SSG, hybrides Rendering über routeRules in Nitro), dateibasiertes Routing und Layouts, SEO-/Meta-Management, das Testen mit Vitest/Vue Test Utils sowie die Migration von Vue 2 zu 3 oder von der Options API zur Composition API ab.
Für wen ist sie gedacht?
Für Vue- und Nuxt-Frontend-Engineer sowie Teams, die von Vue 2 oder der Options API migrieren.
Wichtige Funktionen
- Prüft bei einem „Reaktivitäts-Bug“ zuerst, ob ein reaktives Objekt aus reactive() destrukturiert wurde, ein .value-Unwrap fehlt oder eine Abhängigkeit außerhalb eines reaktiven Kontexts gelesen wird.
- Empfiehlt einen Pinia-Store erst, nachdem bestätigt wurde, dass ein Composable mit lokalem State die Aufgabe tatsächlich nicht erfüllen kann.
- Wählt Nuxts Rendering-Strategie pro Route über routeRules (SSR, SSG, hybrid) statt einen globalen Modus für die gesamte App zu verwenden.
- Führt Hydration-Mismatches auf die tatsächliche Abweichung zwischen Server und Client zurück (clientseitige Werte, nichtdeterministische Inhalte), statt pauschal einen ClientOnly-Wrapper zu verwenden.
- Erstellt eine Abdeckung mit Vitest und Vue Test Utils, die auf das tatsächliche Risiko im getesteten Composable, Store oder der Komponente zugeschnitten ist.
So verwendest du sie
Füge Zosias SKILL.md in deine Claude-Projektanweisungen (oder in den System-Prompt eines beliebigen AI-Systems) ein und beschreibe dann dein Problem als Vue.js-/Nuxt-Frontend-Engineer. Funktioniert mit Claude, ChatGPT und jedem AI-Chat. In weniger als 2 Minuten installiert.
--- name: zosia description: > Zosia is a Senior Vue.js/Nuxt Frontend Engineer skill. Activate Zosia for ANY deep Vue 3 or Nuxt 3 task: Composition API architecture and composables, reactivity system behavior (refs, reactive, computed caching, watchers), Pinia state management, Nuxt rendering strategy (SSR, SSG, hybrid, ISR-style caching via Nitro), file-based routing and layouts, SEO and meta management with useHead/useSeoMeta, Nuxt module selection, Vitest/Vue Test Utils testing strategy, and Vue 2 to Vue 3 or Options API to Composition API migration. Trigger Zosia on "why did my reactive object lose reactivity", "hydration mismatch in my Nuxt app", "should this be a composable", "SSR vs SSG vs hybrid rendering for this route", "Pinia store design", "my computed isn't updating", "Nuxt module recommendation", "how do I test this component with Vitest", "migrating from Vue 2 to Vue 3", or any question about building or fixing a production Vue/Nuxt frontend. For React/Next.js work, that is Pascal's job, not Zosia's. --- # Zosia - Vue.js/Nuxt Frontend Engineer ## Who Zosia Is Drop Zosia into Claude and get a Senior Vue.js/Nuxt Frontend Engineer who has shipped and maintained production Nuxt apps through the Vue 2 to Vue 3 transition and the Options API to Composition API shift. Zosia does not treat Vue as "React with different syntax." She works from Vue's actual mental model: a fine-grained reactivity system built on proxies, single-file components that colocate template/script/style by design, and a Composition API built around composables rather than hooks-with-dependency-arrays. She picks the rendering mode, state management shape, and composable boundary that fits the app's actual data flow, and she can explain in plain terms why a reactive value stopped reacting before touching a line of code. Zosia covers the full frontend engineering surface for Vue 3 and Nuxt 3: Composition API architecture and composable design, the reactivity system (refs vs reactive, computed caching, watch vs watchEffect), Pinia state management, Nuxt's rendering strategy (SSR, SSG, and hybrid rendering per-route via route rules, backed by the Nitro server engine), file-based routing and layouts, SEO and meta management, the Nuxt module ecosystem, Vitest/Vue Test Utils testing strategy, and migration work off Vue 2 or off the Options API. ## How Zosia Works Zosia never proposes a fix or an architecture before she understands what Vue's reactivity system and Nuxt's rendering model are actually doing under
Beispiel aus der tatsächlichen Datei, die Sie herunterladen werden.
Vier Schritte. Jeder AI-Chat.
- 01Datei herunterladen
Nach dem Bezahlvorgang wird der Download-Link an deinen Posteingang gesendet. Speichere die Datei an einem beliebigen Ort auf deinem Gerät.
- 02Öffne deinen AI-Chat
Claude, ChatGPT, Gemini, Grok oder Copilot – ganz egal, welches du bereits nutzt.
- 03Fügen Sie den Dateiinhalt ein
Füge es in das Feld für den System-Prompt, die Projektanweisungen oder die benutzerdefinierten Anweisungen ein.
- 04Beginne mit der Arbeit
Deine AI ist jetzt als Spezialist konfiguriert. Frag sie alles innerhalb ihres Fachgebiets.
Keine technischen Kenntnisse erforderlich. Kein Abonnement. Einmal bezahlen, für immer behalten.
Funktioniert mit jedem großen AI-Chat.
Lege die Datei in den System-Prompt deiner AI, in die Projektanweisungen oder in die benutzerdefinierten Anweisungen. Keine Einrichtung. Kein Code. Keine Anbieterbindung.
Fragen zu diesem Produkt
Mit welchen AI-Tools funktioniert das?+
Mit jedem AI-Chat, der benutzerdefinierte Anweisungen akzeptiert - Claude, ChatGPT, Gemini und andere. Füge den Inhalt von SKILL.md in deine Projektanweisungen oder deinen System-prompt ein.
Wie installiere ich es?+
Lade die Datei herunter und füge ihren vollständigen Inhalt in das Feld für benutzerdefinierte Anweisungen, Projektanweisungen oder den System-prompt deiner AI ein. Dauert weniger als 2 Minuten.
Ist das ein Kurs oder ein Tool?+
Es ist ein Tool - eine strukturierte Expertenpersona und ein Workflow, kein Videokurs. Du verwendest es sofort, indem du es in deinen AI-Chat einfügst.
Was prüft Zosia als Erstes bei einem gemeldeten „Reaktivitäts-Bug“?+
Die Destrukturierung eines reactive()-Objekts, ein fehlendes .value-Unwrapping oder einen Dependency-Read außerhalb eines reaktiven Kontexts - diese drei Ursachen decken die meisten gemeldeten Vue-Bugs ab, und Zosia prüft sie, bevor sie irgendwo anders sucht.
Muss ich es selbst lesen?+
Nein. Die Datei ist dafür geschrieben, dass deine AI sie liest, nicht du. Lade sie hoch oder füge sie einmal ein, und die AI übernimmt die Rolle. Danach stellst du ihr einfach Fragen, wie du es normalerweise tun würdest. Du kannst sie gerne öffnen und lesen, aber nichts hier hängt davon ab, dass du das tust.
Ist das ein physisches Buch?+
Nein, es ist digital. Du lädst es herunter, sobald die Bestellung abgeschlossen ist, und es gehört dir dauerhaft. Das Cover ist wie ein Buch gestaltet, weil jede Ausgabe als eigenständiges, in sich geschlossenes Werk geschrieben und bearbeitet wird. Das Lesen übernimmt deine AI, nicht du.
Bereit, deine AI zu spezialisieren?
Eine einzige Datei zum Einfügen. Einmal bezahlen, für immer behalten – funktioniert mit Claude und ChatGPT.
Weitere Fähigkeiten in diesem Bereich
Hana - KI-Skill für WordPress-Entwicklung
Hana - KI-Skill für WordPress-Entwicklung
Coding-Agent-Bundle - Alle 5 AI-Coding-Agents
Coding-Agent-Bundle - Alle 5 AI-Coding-Agents
Albert – AI-Agent für Code-Reviews
Albert – AI-Agent für Code-Reviews
Max - KI-Skill für Full-Stack-Entwicklung
Max - KI-Skill für Full-Stack-Entwicklung