Best AI Agent Skills for Vue and Nuxt Developers (2026)

Vue has a specific problem with coding agents that React doesn't have: there's roughly a decade of Options API on the internet, and models trained on it will hand you data(), methods, and this.$emit in a project that has been on <script setup> since day one. The code runs. It just doesn't match anything else in your repository, and now you're reviewing a translation instead of a feature.

Nuxt compounds it. Auto-imports mean the correct code has no import statements, which looks wrong to a model that learned import hygiene from every other framework. Server routes live under server/, useFetch and $fetch are not interchangeable, and the rendering mode is a per-route decision. An agent without that context writes Vue that would be fine in a Vite SPA and wrong in a Nuxt app.

The fix is to build the shelf in the order you hit the problems. Here's that order.

The shelf at a glance

Step 1: fix the dialect first

Install Vue Skills from vuejs-ai before anything else:

claude skill add vuejs-ai/skills

MIT licensed, 2.7K stars, community-reviewed. It's the baseline that stops the Options API drift, and it's the only entry on this page whose entire reason for existing is Vue 3 conventions. Everything else in this list is a tool that Vue developers use; this one is about Vue itself.

Install it and run a small test before you trust it on real work. Ask for a component with a computed value and a watcher, and see whether you get <script setup> with computed() and watch(), or a default export with an options object. That single prompt tells you whether the skill is loading.

Step 2: give the agent your actual app

The second problem is that a Nuxt app's structure lives in convention rather than configuration. Nothing in your source tree explicitly says which layers are registered, what got auto-imported, or how the modules resolved.

Nuxt MCP Dev by antfu closes that:

claude mcp add nuxt-mcp-dev -- npx -y antfu/nuxt-mcp-dev

It exposes your running Vite or Nuxt app to the model so it can read the resolved structure rather than guessing from filenames. That's the difference between an agent that invents an import for a composable you already auto-import, and one that knows it's already there.

Two things to check first. It's MIT and free, but our directory records the repository as last updated in March 2026 and marks it unreviewed, so read the source and confirm it works against your Nuxt version. It's also a dev-time server: point it at local, never at a deployed environment.

Step 3: teach it your component library

If you're on Vuetify, install it as context:

claude skill add vuetifyjs/vuetify

Being straight about what this is: the entry indexes the Vuetify repository itself, so what you get is the component framework's own source and documentation as reference material, not a hand-written instruction file. That's still useful. It's the difference between an agent guessing at a prop name and reading the component definition. The same applies to any component library you can point the agent at; the value is grounding, not authorship.

Step 4: settle the data layer

Most Vue apps make this decision once and live with it. If the answer is GraphQL, Apollo Client is indexed here with first-class Vue support:

claude skill add apollographql/apollo-client

19.8K stars, MIT, updated this month. If you're on REST with useFetch, skip this step; step 2 gives the agent what it needs to use Nuxt's own data fetching correctly, and adding a client you don't use is noise in the context window.

Step 5: close the loop with a real browser

An agent that writes a component and declares it done has verified nothing. Two official options, and they're complementary.

Playwright MCP from Microsoft, at 36.1K stars, gives the agent a real browser: navigate, click, read the DOM, take a screenshot.

claude mcp add playwright -- npx @playwright/mcp@latest

Webapp Testing from Anthropic sits on top of Playwright and covers the testing workflow rather than the raw driving.

claude skill add anthropics/skills/webapp-testing

For a Nuxt app the payoff is specific: hydration mismatches, the class of bug where server-rendered markup and client markup disagree, only surface when something actually loads the page. No amount of reading the source finds them. If you want more depth here, we've covered the browser automation skills separately.

Step 6: design and documentation

Frontend Design from Anthropic is the official skill for building interfaces that don't carry the visual signature of every other generated page. Worth having on any project where the UI is customer-facing.

claude skill add anthropics/skills/frontend-design

Docs MCP Server by arabold indexes documentation the agent can query rather than recall. Vue's libraries move, Nuxt 4 changed defaults, and a model's memory of an API is a snapshot of whenever it stopped reading. Grounded lookup beats recall for exactly the packages that changed most recently.

Don't install all eight

The failure mode nobody warns you about is stacking every skill on the list and wondering why the agent got worse.

Skills activate on description matching, so a shelf with eight overlapping entries gives the model more ways to load the wrong one. MCP servers are heavier still: each connected server publishes its tool definitions into the session, and a browser driver plus a docs indexer plus a dev server is a meaningful slice of context spent before you've typed anything.

The practical shape is three or four permanent entries, plus whatever the current task needs. Vue Skills stays. Nuxt MCP Dev stays if you're on Nuxt. The browser tooling earns its place during UI work and is worth disconnecting when you're deep in a composable. If you find the agent hesitating or picking odd approaches, remove servers before you add instructions.

What the Vue shelf is still missing

Being honest about the gaps, since they affect how much of this you should adopt.

There's no official Vue or Nuxt skill from the framework teams the way Anthropic ships official skills for design and testing. Everything Vue-specific here is community work, and the two most useful entries have unreviewed or community-reviewed status rather than an audit.

There's also no Pinia skill, no Vue Router skill, and no Vitest skill in the directory as separate entries. In practice the Vue Skills package covers enough of the state and routing conventions that this matters less than the list makes it look, but if your app leans hard on one of them, expect to write project instructions for it yourself.

React's shelf is deeper. If you work across both, the React skills roundup will show you what a mature ecosystem looks like, and it's a fair argument for keeping your own conventions file regardless of what you install.

The install block

claude skill add vuejs-ai/skills
claude mcp add nuxt-mcp-dev -- npx -y antfu/nuxt-mcp-dev
claude mcp add playwright -- npx @playwright/mcp@latest
claude skill add anthropics/skills/webapp-testing
claude skill add anthropics/skills/frontend-design

Five entries, all free, three of them official or verified. Add the component library and data layer only if they match your stack. On the editor side, our full list for developers covers where Cursor at $20 a month and Windsurf at $15 land against each other.

FAQ

Which skill stops the agent writing Options API?

Vue Skills from vuejs-ai. It's the only entry here written specifically to encode Vue 3 conventions. Test it with a prompt asking for a computed value and a watcher, and check whether the output uses <script setup>.

Do I need Nuxt MCP Dev if I'm on a plain Vite SPA?

It supports Vite as well as Nuxt, so it's still useful, but the payoff is smaller. Most of its value is exposing Nuxt's resolved conventions, and a plain Vite app has fewer of those to resolve.

Are these skills safe to install?

The official ones from Anthropic and Microsoft are audited. The community entries, Nuxt MCP Dev in particular, are marked unreviewed. A skill is a markdown file you can read in a few minutes, and an MCP server is a process on your machine, so read the source and check the last commit date before you install either.

Can I use these with Cursor or VS Code instead of Claude Code?

The MCP servers are portable, since MCP is the protocol rather than the harness. The skill-format entries are Claude Code targeted, though the underlying markdown is usually readable enough to adapt into rules files for another editor.

Does any of this handle Nuxt 4 specifically?

Not with any guarantee. Nuxt 4 changed directory defaults and some data-fetching behavior, and none of these entries advertises version-pinned coverage. Docs MCP Server is the practical hedge: point it at the current Nuxt docs so the agent reads today's API instead of recalling last year's.