# vue-skills: Agent Skills for Vue 3 Development in Claude Code and Other AI Coding Tools

> vue-skills is a Vue 3 agent skill collection from the vuejs-ai community project that helps AI coding tools like Claude Code and Codex produce better Vue 3 code. It covers the Composition API, Options API, Pinia, Vue Router, testing, JSX, and debugging, with each skill validated through automated evals before inclusion.

**vuejs-ai/skills** — Agent skills for Vue 3 development

- Repository: https://github.com/vuejs-ai/skills
- Stars: 2,878 · Forks: 167
- Language: Unknown
- License: MIT
- Published: 2026-09-24 · Updated: 2026-09-24 · Language: en
- Canonical page: https://hysenlabs.com/projects/vuejs-ai-skills

## What vue-skills Is and Who It Helps

vue-skills is a community project that provides agent skills, which are instruction files that influence how AI coding tools generate code, specifically tuned for Vue 3 development. The README describes it as an early experiment in creating specialized skills for AI agents to enhance Vue 3 development.

The primary audience is Vue 3 developers who already use an AI coding assistant such as Claude Code, GitHub Codex, Cursor, or Windsurf and find that the tool sometimes produces code that does not follow Vue 3 conventions, misuses the Composition API, or applies patterns from Vue 2 or from React. The README distinguishes two types of skills in its methodology section: Capability skills address problems where the AI cannot produce a correct solution without the skill, typically because the issue involves version-specific behavior or undocumented edge cases. Efficiency skills address problems where the AI can produce a solution but not the best one. The project covers both categories.

The README positions this as a proposal for eventual transfer to the official Vue organization if it proves valuable.

## The Eight Skills and Their Scope

vue-skills includes eight skills at the time of the last push. The vue-best-practices skill covers Vue 3 with the Composition API and TypeScript, including common gotchas, SSR guidance, and performance patterns. The vue-options-api-best-practices skill handles the Options API style with data(), methods, this context, and TypeScript usage with Options API.

The vue-router-best-practices skill covers Vue Router 4, specifically navigation guards, route parameters, and the route-component lifecycle. The vue-pinia-best-practices skill addresses Pinia state management, including store setup, reactivity patterns, and state design. The vue-testing-best-practices skill covers writing component tests and E2E tests using Vitest, Vue Test Utils, and Playwright.

The vue-jsx-best-practices skill handles JSX in Vue, calling out the syntax differences from React JSX that trip up developers who have used both frameworks. The vue-debug-guides skill covers debugging Vue 3 issues including runtime errors, warnings, async error handling, and hydration issues. The create-adaptable-composable skill focuses specifically on creating composables with MaybeRef and MaybeRefOrGetter input patterns for reactivity flexibility.

## Installing vue-skills with npx or the Claude Code Plugin Commands

The README gives two installation paths. The npx path works with tools that support the skills standard:

```bash
npx skills add vuejs-ai/skills
```

For Claude Code users, the plugin marketplace provides an alternative with more granular control:

```bash
/plugin marketplace add vuejs-ai/skills
```

From there, you can install all skills in a single command or install individual skills by name:

```bash
/plugin install vue-skills-bundle@vue-skills
```

```bash
/plugin install vue-best-practices@vue-skills
```

Installing multiple individual skills at once is also supported:

```bash
/plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills
```

The repository structure has a .claude-plugin/ directory at the root, which contains the Claude Code plugin configuration, and a skills/ directory with the individual skill files.

## Using a Skill: The 'use vue skill' Invocation Prefix

The README recommends prefixing prompts with the phrase "use vue skill" to reliably invoke a skill:

```
Use vue skill, <your prompt here>
```

This explicit trigger is necessary because skill invocation based on keyword matching alone can be inconsistent depending on how closely the prompt matches the skill's description keywords. The prefix instructs the AI to apply the relevant Vue skill before generating code.

The README includes demonstration outputs for two skills. For vue-best-practices, the example prompt is "create a todo app" and the README describes the differences in the output compared to generating without the skill: more readable code, components split into separate files, state moved into composables using useTodos.ts, and the use of shallowRef for primitive reactive data. For create-adaptable-composable, the skill adds MaybeRef and MaybeRefOrGetter input parameter types as shown in the example output:

```ts
export interface UseHiddenOptions {
  hidden?: MaybeRef<boolean>
  initialHidden?: MaybeRefOrGetter<boolean>
  syncAria?: boolean
}

export function useHidden(
  target?: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options: UseHiddenOptions = {},
)
```

## How Skills Are Validated in This Project

The README describes a two-step validation methodology for each skill rule. A baseline run is performed without the skill installed and a with-skill run is performed with the skill installed. A rule is kept only if it enables the model to pass a test case it failed without the skill (Fail then Pass). Rules that pass with or without the skill are considered for removal because they add no capability. Rules that fail both with and without the skill are discarded.

This is a meaningful quality filter. Skills that appear to help but actually add nothing to the model's output are weeded out. However, the README does not specify which model versions the evaluations were run against. Skills validated on one model version may not have the same effect on a different version or a different AI coding tool.

The development process uses a dev branch for feature work, which is merged to main by maintainers when ready to publish. Contributors submit pull requests to dev, and the main branch contains only published, validated skills.

## Limitations: Early Experiment Status, Hallucination Risk, and Maintenance

The README opens with a warning block that explicitly labels vue-skills as an 'early experiment' and notes that skills may be incomplete due to hallucinations. This is the most important caveat to understand before using it in a production context. A skill that contains incorrect Vue 3 advice can cause an AI tool to generate subtly broken code consistently across many prompts.

The last push to this repository was May 30, 2026. The repository is not archived, but at about four months before publication the pace of updates is unknown. There are no versioned releases, so there is no stable reference version to pin. The main branch changes when maintainers publish new work.

Vue 3 is actively developed, and skills that reflect patterns from an earlier minor version may not reflect current best practices. The vue-best-practices skill covers Composition API and TypeScript patterns that change across Vue minor releases, and a skill that was accurate for Vue 3.4 may not be optimal for later releases.

## Alternatives: antfu/skills and Other Framework-Specific Skill Directories

The README lists three related projects. antfu/skills is Anthony Fu's curated collection of agent skills for Vue, Vite, and Nuxt development. Anthony Fu is a member of the Vue core team and a maintainer of Vite and VueUse, which gives his skills a different authority than a community project.

vueuse/vueuse-skills is the official VueUse library's agent skill set for developing with VueUse. onmax/nuxt-skills is a skills directory focused on Nuxt development. Both are narrower in scope than vue-skills: vueuse/vueuse-skills covers one library, and onmax/nuxt-skills covers Nuxt rather than Vue 3 in general.

For teams that use VueUse extensively or are building Nuxt applications, combining vue-skills with the corresponding library-specific skill set is worth considering. The README does not list integration steps for using multiple skill sets simultaneously, which is a gap the user must address based on the AI tool's documentation.

## Conclusion

vue-skills is worth evaluating for Vue 3 developers who already use Claude Code, Codex, or Cursor and want to improve how the tool handles Vue-specific patterns. The early experiment label in the README is an honest signal: skills may be incomplete or may not reflect the latest Vue changes. Verify each skill before trusting it in production by reading the source and testing the output against your specific framework version. The last push was May 30, 2026, and there are no versioned releases.

## FAQ

### What is vue-skills?

vue-skills is a collection of agent skills for Vue 3 development that improves the output of AI coding tools such as Claude Code and Codex. It covers the Composition API, Options API, Pinia, Vue Router, testing, JSX, and debugging patterns, and each skill is validated through automated evals.

### How do you install vue-skills in Claude Code?

In Claude Code, run /plugin marketplace add vuejs-ai/skills to register the package, then use /plugin install vue-best-practices@vue-skills to install individual skills or /plugin install vue-skills-bundle@vue-skills to install all of them at once.

### Does vue-skills work with tools other than Claude Code?

Yes. The README describes it as compatible with Claude Code, Codex, Cursor, and Windsurf, and the npx skills add vuejs-ai/skills command provides an alternative installation path for tools that support the skills standard.

## Sources

- [Issues](https://github.com/vuejs-ai/skills/issues)
- [License: MIT](https://github.com/vuejs-ai/skills/blob/main/LICENSE)
- [README](https://github.com/vuejs-ai/skills/blob/main/README.md)
- [vuejs-ai/skills on GitHub](https://github.com/vuejs-ai/skills)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/vuejs-ai-skills