Vue.js/Nuxt Frontend Engineer Claude Skill

Name: Vue Developer AI Skill - Zosia
Brand: KissMySkills
Price: 19 USD
Availability: InStock

Vue Developer, Zosia AI skill by KissMySkills, cover

Diagnose Vue reactivity bugs at the actual ref or watcher, choose Nuxt's rendering mode per route, and fix hydration mismatches at their real source.

$19 this skill one payment yours forever

Claude skill package instant downloadzosia-vue-nuxt-frontend-engineer.skill

Library plan

Get this skill and 2,500+ others

$9/mo or $59 a year

Get Library · $9/moGet Library

Try this skill free for 7 daysTry this skill free

7-day free trial, no card
Cancel anytime
30-day money-back on your first payment

Nothing is charged. A −30% code for your first payment arrives 2 days before the trial ends.

Works inside Claude, ChatGPT, Claude Code, Codex and Cursor through one connector
Every skill, prompt pack and agent, plus AI CRM and tools during the trial
Cancel anytime

Why a subscription? How it works

Need just this skill?

One file, paid once. No updates, no connector.

Costs about the same as 2 months of Library.

$19

Pay once, keep foreverInstant download30-day money-back guarantee

As featured onProduct Hunt Fazier KittyLaunch

Works with

Secure checkout by Stripe

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

How it works

Ask it something hard.

📎 zosia-vue-nuxt-frontend-engineer.skillLOADED ✓

Migrating 200 components from Vue 2 Options API to Vue 3, and my team keeps writing composables that are just renamed mixins. The actual pattern?

CLAUDE · WITH THIS SKILL A composable returning a grab-bag of unrelated state is a mixin with a passport - the pattern is one concern per composable: useOrderFilters owns filter state and nothing else, returns named refs and functions, no this, no silent property collisions. For 200 components: leaves first, shared state second, and don't convert stable Options components at all - Vue 3 runs both APIs side by side, and converting for purity is how migrations stall at 60%. Mind the reactivity edges: destructured props die without toRefs, reactive() loses tracking on spread. Is Vuex heading to Pinia? That sequencing matters more than the components.

Or have every skill inside your AI.

0:16 · no sound

Get all 2,500+ with Library · $9/mo →

Questions before you buy? A person answers, usually the same day: hello@kissmyskills.com

// the file itself

Read it before you buy it.

The first lines of the file your AI will read, exactly as delivered. Nothing rewritten for the page.

// the skill your AI runs on

You are Zosia, a Senior Vue.js and Nuxt Frontend Engineer working across the Composition API, the reactivity system, Pinia and Vitest. You have been activated to help the user build a production Vue 3 or Nuxt 3 frontend.

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

SKILL.md · 237 lines · instant download

// what's inside

What's inside this skill

Reactivity diagnosis at the exact ref or watcher
Hydration mismatch root cause with the render named
Rendering mode decided per route, not per project
Fix plan with the component-level changes listed

Vue and Nuxt developers debugging hydration warnings and reactivity that silently fails.

// two ways to get it

Use it inside your AI, or download it once.

Library plan

This skill and 2,500+ others, inside your chat

$9/mo cancel anytime, or $59 a year

All 2,500+ skills, prompt packs and agents, loaded the moment you ask
Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
New skills every week and 10 catalog files a month to download

Get Library · $9/mo Try it free for 7 days

Compare Library, AI CRM and Both

Buy once

Just this skill, as a file

$19 one payment

Download after checkout and paste it into any AI chat
One file, no updates, no connector
30-day money-back guarantee

Already on Library or Both? This one is included, no need to buy the file.

Works with

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

// ask your assistant

Or let your AI set up this skill for you.

Go to kissmyskills.com/pages/connector and set up the "Vue Developer AI Skill - Zosia" skill (handle: zosia-vue-js-nuxt-frontend-engineer-ai-skill) for me

Paste it into Claude, ChatGPT, Claude Code, Cursor or Codex. Your AI walks you through connecting KissMySkills (about 3 minutes, 7-day free trial) and loads the skill. What your AI will read →

What you're actually buying

Stop treating Vue's reactivity system like React's re-render model.

Zosia is a Senior Vue.js/Nuxt Frontend Engineer skill built around Vue's actual mental model: a fine-grained, proxy-based reactivity system, single-file components, and a Composition API built on composables rather than hooks with dependency arrays. She covers Composition API architecture and composable design, the reactivity system (refs, reactive, computed caching, watchers), Pinia state management, Nuxt's rendering strategy (SSR, SSG, hybrid rendering via routeRules on Nitro), file-based routing and layouts, SEO/meta management, Vitest/Vue Test Utils testing, and Vue 2-to-3 or Options-to-Composition API migration.

Who it's for

Vue and Nuxt frontend engineers, and teams migrating off Vue 2 or the Options API.

Key capabilities

Checks for a destructured reactive() object, a missing .value unwrap, or a dependency read outside a reactive context before looking anywhere else on a "reactivity bug."
Recommends a Pinia store only after confirming a composable with local state genuinely can't do the job.
Picks Nuxt's rendering strategy per route via routeRules (SSR, SSG, hybrid) instead of one global mode for the whole app.
Diagnoses hydration mismatches to the actual server/client divergence (client-only values, non-deterministic content) instead of a blanket ClientOnly wrap.
Builds Vitest and Vue Test Utils coverage scoped to the actual risk in the composable, store, or component under test.

How to use it

Paste Zosia's SKILL.md into your Claude Project Instructions (or any AI system prompt), then describe your vue.js/nuxt frontend engineer problem. Works with Claude, ChatGPT, and any AI chat. Under 2 minutes to install.

// how to install Under 2 minutes

Four steps. Any AI chat.

01
Download the file
After checkout, the download link lands in your inbox. Save the .skill file: Claude takes it as it is.
02
Open your AI chat
Any AI chat you already use: Claude, ChatGPT, Gemini, Grok, Copilot or another.
03
Add it to your AI
Claude: Settings → Capabilities → Skills, upload the .skill file. ChatGPT, Gemini and others: open the .skill file like a .zip archive and paste SKILL.md into custom instructions or Project instructions.
04
Start working
Your AI is now configured as a specialist. Ask it anything inside its domain.

No technical knowledge required.

With Library there is nothing to download. Connect your AI once, then just ask: "Load Vue Developer AI Skill from KissMySkills."

Setup guide → Library · $9/mo →

// faq

Questions about this product

What AI tools does this work with?+

Any AI chat that accepts custom instructions - Claude, ChatGPT, Gemini, and others. Paste the SKILL.md content into your project instructions or system prompt.

How do I install it?+

Download the file, paste its full contents into your AI's custom instructions, project instructions, or system prompt field. Takes under 2 minutes.

Is this a course or a tool?+

It's a tool - a structured expert persona and workflow, not a video course. You use it immediately by pasting it into your AI chat.

What's the first thing Zosia checks on a reported "reactivity bug"?+

Destructuring of a reactive() object, a missing .value unwrap, or a dependency read outside a reactive context - these three cover most reported Vue bugs, and Zosia checks them before looking anywhere else.