Summary

vue-skills is an AI Agent skill library. After installing it with `npx skills add vuejs-ai/skills`, prefix a prompt with `use vue skill` so AI tools such as Cursor and Claude Code—among more than 30 supported tools—automatically follow official Vue 3 rules when generating code and troubleshooting errors.

vue-skills: Vue 3 AI Development Skill Library Based on the Agent Skills Standard screenshot

What Is vue-skills?

vue-skills is an AI Agent skill library developed by the Vue core team and VoidZero members. Built on the Agent Skills open standard, it packages Vue 3 best practices, Pinia conventions, Vue Router guidance, and VueUse rules into structured knowledge modules. Once developers install it into AI coding tools such as Cursor or Claude Code, the AI automatically follows these official rules when generating Vue code, solving the “it runs but is not right” problem and producing high-quality code that matches community standards.

Note that the repository is currently 🚧 Early Experiment / Community Project. The skills are derived from real-world issues, but some of them may be incomplete because of model hallucinations; feedback is welcome. If the project proves valuable, the maintainers plan to propose transferring it to the Vue organization to benefit the wider community.

Product Positioning

vue-skills acts as a translation layer between AI models and official Vue conventions. As AI-assisted programming becomes more common, large models often generate code based on outdated documentation or non-standard anti-patterns. By providing an authoritative, structured rule set, vue-skills fills the gap caused by outdated or missing training data, ensuring that AI consistently outputs current, standards-compliant Vue code.

Core Features

vue-skills covers the full Vue ecosystem development workflow:

  • Vue 3 best practices: Includes correct Composition API usage, common pitfall avoidance, SSR performance optimization, and project maintainability rules.
  • Options API conventions: Provides this context management, lifecycle hooks, and TypeScript adaptation strategies.
  • Vue Router 4 guide: Packages navigation guard configuration, route parameter handling, and route component lifecycle rules.
  • Pinia state management: Defines store type design, TS inference, modular organization, and reactive patterns.
  • Testing standards: Includes component unit testing and E2E testing specifications for Vitest, Vue Test Utils, and Playwright.
  • Vue JSX syntax: Explains scope and directive differences from React JSX to prevent misuse.
  • Debugging guide: Contains runtime errors, async exception handling, and hydration troubleshooting guidance—for example, triggering the vue-debug-guides skill.
  • Composable wrapping: Supports standardized reusable logic wrappers based on MaybeRef and MaybeRefOrGetter.

How to Use

  1. Install the skill package: Run npx skills add vuejs-ai/skills in the terminal to add Vue Skills to your local environment.
  2. Choose your AI tool: Follow the interactive terminal prompts and select the AI tool you use, such as Cursor, Claude Code, or GitHub Copilot.
  3. Configure the install scope: Choose a global or project-level installation scope, then complete the security assessment and confirmation.
  4. Trigger the skill explicitly: In the AI conversation, prefix your prompt with use vue skill. This step is important: explicit triggering ensures the AI calls the right rules. Without the prefix, skill triggering may be inconsistent because the prompt may not match the skill's description keywords closely enough.
  5. Describe the development task: Directly describe the Vue development task; the AI automatically references the skill rules and generates code that follows official standards.

Use Cases

  • AI-assisted Vue 3 development: Let AI generate type-safe, Composition API-compliant components while avoiding common anti-patterns.
  • Consistent team code standards: In multi-developer projects, installing vue-skills ensures all AI-generated code follows the same official Vue best practices, reducing code-review style disputes.
  • Vue 2 to Vue 3 migration: Use the built-in Options API and Composition API comparison rules to help AI refactor legacy code to Vue 3 standards, lowering migration cost.
  • Debugging and troubleshooting: For hydration errors, reactivity anomalies, or TypeScript inference issues, trigger the vue-debug-guides skill and let AI follow the official troubleshooting guide to locate the root cause.

Key Strengths

  • Authoritative source: Maintained by Vue core team and VoidZero members, validated with real issues and official documentation rather than secondhand community curation.
  • On-demand loading: Uses progressive disclosure, loading complete instructions only when a task matches, avoiding long-term token and context window consumption.
  • Cross-tool compatibility: Follows the Agent Skills open standard and supports more than 30 AI tools, including Cursor, Claude Code, GitHub Copilot, and Gemini CLI.
  • Dynamic adaptation: Uses interactive configuration to automatically identify project traits such as Vue 2/3 version, Composition/Options API, and whether Pinia is enabled.
  • Automated validation: Every rule is validated with an automatic eval test; only rules that fail without the skill and pass with it are kept, ensuring quality control.

Limitations and Project Status

As a 🚧 Early Experiment / Community Project, vue-skills is built from real-world issues but may still contain incomplete rules caused by model hallucinations. Development happens on the dev branch; the main branch is reserved for published stable skills. Contributions are created as feature branches, merged after review, and maintainers use a GitHub Action to sync content when ready to publish.

Price and Availability Note

vue-skills is currently provided as an open-source project on GitHub. Details about future pricing plans or enterprise-level support are not included in the available materials. Please check the official repository for the latest status and availability.

Similar Projects and Alternatives

If you are looking for similar tools, these community projects may be useful:

  • antfu/skills: Anthony Fu's curated collection of agent skills for Vue/Vite/Nuxt.
  • vueuse/vueuse-skills: Agent skills designed for VueUse development.
  • onmax/nuxt-skills: Agent skills designed for Nuxt development.

Official Repository and First-Hand Resources

Frequently asked questions

How do I use vue-skills in Cursor?

Run `npx skills add vuejs-ai/skills` in the terminal and choose Cursor when prompted. After selecting a global or project-level installation scope and confirming the security assessment, use `use vue skill` at the start of your prompt in the conversation to explicitly trigger the skill.

What specific rules does vue-skills include?

The skill library covers Vue 3 best practices, Options API conventions, the Vue Router 4 guide, Pinia state management, testing standards, Vue JSX syntax, debugging guidance, and Composable wrapping rules, covering the full Vue ecosystem development workflow.

Which AI tools does vue-skills support?

Because it follows the Agent Skills open standard, vue-skills supports more than 30 mainstream AI coding tools, including Cursor, Claude Code, GitHub Copilot, and Gemini CLI.

Why do I need to add the use vue skill prefix in a conversation?

Explicitly triggering the skill ensures the AI accurately applies the relevant rules. Without the prefix, skill triggering can be inconsistent because the prompt may not match the skill description keywords closely enough.