Vue Agent Skills for Reliable AI Development

AI coding agents are transforming how we build Vue applications. But there's a fundamental challenge: for any given task, there are dozens of valid ways to write the code. Composition API or Options API? Pinia or a composable with provide/inject? useFetch or a custom data-fetching wrapper? The agent has to pick something — and without guidance, it picks whatever combination of patterns it's seen most in its training data, with no sense of which approach is the standard for your project.

The result isn't necessarily broken code. It's inconsistent code that's harder to maintain over time. One component uses a composable, the next inlines the same logic. A page fetches data one way, a sibling page does it differently. Your codebase starts to look like it was written by a dozen developers who never talked to each other.

Agent skills solve this by replacing guesswork with standards. They're structured knowledge files — curated by trusted sources like framework authors, community leaders, or your own team's conventions — that give AI agents a consistent set of patterns, conventions, scripts, and best practices to follow. Install them once, and every conversation starts from a shared foundation.

What Are Agent Skills?

A skill is a folder with a markdown file typically named SKILL.md that contains instructions, API references, and best practices for a specific tool or framework. It can also include scripts, templates, and other files that the agent can use to generate code. When installed, your AI agent reads the skill's description and uses it at it's OWN discretion based on the task at hand.

Think of skills as the standards document you hand to a new developer on their first day and the cli tools you instruct them to install. Instead of hoping they'll figure out your team's conventions by reading old pull requests, you give them a concise reference that says: "Here's how we do things, here's why, and here's the tools to help you do it."

Skills follow the Agent Skills open standard, which means they work across multiple AI tools — Cursor, Claude Code, GitHub Copilot, Windsurf, Cline, and over 30 others.

Unlike MCP servers that:

• live on a remote server (added latency)
• load tool descriptions and schemas into agent systems prompts
• are rigid/deterministic tools with fixed input/output schemas
• are comparatively harder to create

Skills:

• live on your local machine (no added latency)
• Use progressive disclosure to load context more efficiently
  • Skill descriptions are loaded into the system prompt
  • Full skill content is loaded on demand only after the agent has decided to use the skill
  • Bundled reference files are loaded on demand only after the agent has read the full content of the skill
• are plain language instructions that are subject to the agent's own interpretation and execution logic
• are primarily .md files that are easy to read and write

Why Vue Development Needs Skills

Vue's ecosystem offers an unusual amount of flexibility, which is great for developers but creates a real consistency problem for AI agents:

• Multiple valid API styles: The Options API and Composition API both work. So do <script setup> and plain <script>. An agent needs to know which one your team has standardized on.
• Rich ecosystem with overlapping solutions: Vuex and Pinia both manage state. VueUse provides composables that overlap with hand-rolled solutions. provide/inject can sometimes replace a store. Without a clear standard, the agent picks a different approach every time.
• Convention-heavy frameworks: Nuxt relies heavily on file-based conventions — auto-imports, file-based routing, server/api/ routes — that only work if you follow them consistently. An agent that doesn't know the conventions will reinvent what the framework already provides.
• Rapidly evolving APIs: Vue 3.5 introduced useTemplateRef and onWatcherCleanup. Nuxt ships new composables regularly. The battle-tested way to do something today may not be the same as two months ago.

Without skills, you spend your time steering the agent back toward your team's standards instead of building features. Skills short-circuit this by establishing the standards upfront.

The Vue Skills Ecosystem

What makes skills powerful is that they come from trusted sources — the people who build and maintain the frameworks you use.

Here are the key collections available for the Vue ecosystem today.

Anthony Fu's Skills Collection

Anthony Fu's skills repository is the most comprehensive collection for the Vue/Vite/Nuxt stack. It includes skills generated from official documentation and fine-tuned for modern development patterns:

What makes this collection stand out is the source of truth. It uses git submodules to reference official documentation directly, and the skills are curated by one of the most prolific contributors in the Vue ecosystem. When the official docs update, the skills can be regenerated to reflect the latest recommended patterns — so your agent's standards evolve alongside the framework.

Install the entire collection with a single command:

npx skills add antfu/skills --skill='*'

Or install only the skills you need:

npx skills add antfu/skills --skill=vue
npx skills add antfu/skills --skill=nuxt
npx skills add antfu/skills --skill=pinia

Nuxt UI Skills

Nuxt UI provides its own dedicated skill that teaches AI agents how to work with its 125+ accessible Vue components:

npx skills add nuxt/ui

The Nuxt UI skill covers installation across multiple frameworks (Nuxt, Vue, Laravel, AdonisJS), theming and branding with semantic colors, all component props and usage patterns, composables like useToast and useOverlay, form validation with Standard Schema, and layout composition for dashboards, docs sites, and chat interfaces.

It also includes additional reference files that the agent loads on demand based on the task, keeping responses focused and context-efficient.

Installing Skills in Your Editor

The skills CLI is the universal installer. It auto-detects your editor and places files in the right location (or you can manually specify the agent):

npx skills add antfu/skills --skill=vue --agent cursor
npx skills add antfu/skills --skill=vue --agent claude-code

You can also install skills globally so they're available across all your projects:

npx skills add antfu/skills --skill=vue --global

For Cursor specifically, you can also install skills through the UI by going to Settings > Skills and adding a GitHub URL directly.

Skills in Action

Let's look at what changes when an agent has Vue skills loaded versus when it doesn't.

Without Skills

You ask your agent: "Create a component that tracks mouse position and displays it."

Without skills, the agent has to choose from many valid approaches. It might produce:

<script>
  export default {
    data() {
      return {
        x: 0,
        y: 0,
      };
    },
    mounted() {
      window.addEventListener("mousemove", this.update);
    },
    beforeUnmount() {
      window.removeEventListener("mousemove", this.update);
    },
    methods: {
      update(event) {
        this.x = event.pageX;
        this.y = event.pageY;
      },
    },
  };
</script>

<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

This works fine. But it's the Options API — and maybe your team standardized on Composition API months ago. The next component the agent writes might use <script setup>. The one after that might inline reactive state without extracting a composable. Nothing is wrong, but nothing is consistent either.

With Skills

With the Vue skill loaded, the agent doesn't have to guess. Anthony Fu's Vue skill explicitly states: "Always use Composition API with <script setup>" and "Prefer TypeScript over JavaScript." The agent follows these standards every time:

<script setup lang="ts">
  import { useMouse } from "./composables/useMouse";

  const { x, y } = useMouse();
</script>

<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

// composables/useMouse.ts
import { ref, onMounted, onUnmounted } from "vue";

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event: MouseEvent) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => window.addEventListener("mousemove", update));
  onUnmounted(() => window.removeEventListener("mousemove", update));

  return { x, y };
}

Same result, but now it's the standard result — the one that matches the rest of your codebase. And it'll be the same result tomorrow, on a different component, in a different conversation. That's the consistency skills provide.

Nuxt-Specific Example

The consistency payoff is even bigger with Nuxt, where convention matters as much as code. Without the Nuxt skill, an agent might use $fetch directly inside of script setup at the root level causing double fetching. With the skill, it follows the established Nuxt convention as stated in anthony fu's nuxt skill: "❌ Wrong: Using $fetch Alone in Setup... ✅ Correct: Use useFetch"

<script setup lang="ts">
  // ❌ const products = await $fetch("/api/products");
  const { data: products } = await useFetch("/api/products");
</script>

Creating Custom Skills for Your Project

Published skills give you battle-tested standards from trusted sources — framework authors and community leaders. But every team also has its own conventions: how you structure API routes, where you put composables, which libraries you've standardized on. Custom skills encode those team-specific decisions so the agent follows your standards, not just the framework's defaults.

Project-Level Skills

Create a .claude/skills/ directory (for Claude Code) in your project root with a folder named after the skill:

mkdir -p .claude/skills/our-api-conventions

Then write a SKILL.md that captures your team's patterns:

---
name: our-api-conventions
description: API conventions for this project. Use when creating API endpoints, data fetching composables, or server routes.
---

# API Conventions

## Data Fetching

- Always use `useFetch` with proper TypeScript generics
- Handle loading and error states explicitly
- Use `$fetch` for non-reactive server calls (event handlers, form submissions)

## Server Routes

- Name files with HTTP method suffix: `products.get.ts`, `products.post.ts`
- Always validate request bodies with Zod schemas
- Return consistent error shapes: `{ statusCode, message }`

## Composables

- Prefix all project composables with `use`
- Place shared composables in `composables/` for auto-import
- Use Pinia for shared state management instead of useState

Commit this to version control and every developer on your team — along with their AI agents — will follow the same conventions.

Sharing Team Skills Across Projects

Alternaltely, you could make it a sharable skill in it's own repo and install it with the skills cli per project. This is where the skills cli really shines!

npx skills add <owner/repo>

That's it!

Personal Skills

For conventions you want across all your projects, create personal skills:

mkdir -p ~/.claude/skills/vue-preferences

---
name: vue-preferences
description: Personal Vue development preferences
---

- Always use Composition API with `<script setup lang="ts">`
- Prefer `<script>`, `<template>`, `<style>` tag order
- Use Pinia for state management, never Vuex
- Use VueUse composables before writing custom ones
- Prefer `shallowRef` over `ref` when deep reactivity isn't needed

This is especially useful if you find yourself repeatedly correcting the same agent behaviors across different projects.

(Make sure to replace .claude/skills/ with whatever the convention is for you favorite AI agent.)

How Skills Work Under the Hood

When you install a skill, the CLI places a SKILL.md file in a directory your AI agent watches. The exact location depends on the agent:

When you start a conversation, the agent reads the skill descriptions and keeps them available. When a task matches a skill's description, the full skill content is loaded into context. Some agents also let you invoke skills manually with a /skill-name command.

Skills can also include supporting files — reference documentation, example code, templates — that the agent loads on demand. The Nuxt UI skill, for example, keeps detailed component references in separate files and only pulls them in when you're working with specific components. This keeps the primary context lean while still providing deep knowledge when needed.

Best Practices for Using Skills Effectively

Start with published skills from trusted sources. The Vue ecosystem's skill collections are maintained by framework authors and core contributors. They represent the community's battle-tested standards. Install what matches your stack before writing anything custom.

Layer your team's standards on top. Published skills define how the framework should be used; project skills define how your team uses it. Together, they give the agent a complete picture of what "correct" looks like in your codebase.

Keep skills focused. A skill that tries to cover everything will eat up context window space without proportional benefit. One skill per concern — API conventions, testing patterns, component structure — is easier to maintain and more effective.

Version control your project skills. Treat .claude/skills/ or .cursor/skills/ like any other code. Review changes, keep them up to date, and let the whole team benefit.

Update skills when you update dependencies. When you upgrade Vue, Nuxt, or any major dependency, check if the skill collection has been updated too. Anthony Fu's collection regenerates from source docs, so pulling the latest version usually picks up new APIs automatically.

Wrapping Up

The biggest challenge with AI-assisted Vue development isn't that agents write bad code — it's that they have no sense of standards. Given a dozen valid ways to solve a problem, they'll pick a different one every time. Skills fix this by giving agents a consistent, battle-tested foundation: trusted patterns from framework authors and community leaders, layered with your own team's conventions.

The ecosystem is growing fast. Between Anthony Fu's comprehensive collection, Nuxt UI's dedicated skill, and the ability to write your own project-level skills, you can ensure every AI-generated component follows the same standards as the ones your team writes by hand.

Getting started takes one command:

npx skills add antfu/skills --skill='*'

Standards are what turn a pile of working code into a maintainable codebase. Skills are how you give those standards to your AI agent — and they're only going to get better as the Agent Skills ecosystem grows.

If you want to deepen your Vue skills alongside your AI agent's, check out our Vue.js courses at Vue School — the better you understand the framework's conventions, the better you can define the standards your agent should follow.