# vue-skills

- Category: Prompts & plugins
- Official site: https://github.com/vuejs-ai/skills
- HTML: https://www.88z.ai/en/tools/vue-skills
- Markdown: https://www.88z.ai/en/tools/vue-skills.md

Specialized agent skills for Vue 3 development to enhance code quality and best

## What is vue-skills?

vue-skills is a collection of Agent Skills tailored for Vue 3 development, designed to help AI coding assistants generate higher-quality, standards-compliant code by providing structured best practices and scenario-specific guidance.This community-driven project is currently in an early experimental phase, aiming to translate real-world development pain points into actionable instructions for AI agents.

The toolkit covers key areas including Composition API, Options API, Vue Router, Pinia state management, and testing.By integrating these skills, developers can guide AI to avoid common pitfalls, such as improper use of reactive data or lifecycle hooks, significantly reducing downstream debugging efforts.

vue-skills employs a rigorous validation process: a skill is retained only if it enables the model to solve problems it could not handle without it.This outcome-oriented approach ensures that every skill delivers tangible value rather than merely restating documentation.

## Key features

- **Comprehensive Vu**：Includes specialized best practice skills for Vue 3 Composition API, Options API, Vue Router 4, Pinia, and JSX syntax.
- **Smart Triggering**：Supports explicit skill triggering via the 'use vue skill' prefix, ensuring AI strictly follows documented patterns for consistent output.
- **Validated Effect**：Each skill rule undergoes automated evaluation; skills are retained only if they significantly improve the model's problem-solving capabilities.
- **Modular Installa**：Supports installing the entire skill bundle via npx or Claude Code Marketplace, or installing specific domain skills individually as needed.
- **Debugging & Test**：Provides dedicated debugging guide skills covering runtime errors, async handling, and hydration issues, along with Vitest and Playwright testing best practices.
- **Reusable Composa**：Offers guidance on creating flexible reusable composables with support for MaybeRef and MaybeRefOrGetter input patterns to enhance code adaptability.

## How to use it

1. 1.Ensure your development environment is set up with an AI coding tool that supports Agent Skills (e.g., Claude Code).
2. 2.Run the command `npx skills add vuejs-ai/skills` in your terminal to add all Vue skills at once.
3. 3.Alternatively, if you use the Claude Code Marketplace, install the full bundle via `/plugin install vue-skills-bundle@vue-skills`.
4. 4.To install only specific skills, such as Vue Router best practices, run `/plugin install vue-router-best-practices@vue-skills`.
5. 5.When interacting with the AI, prefix your prompt with `use vue skill`, for example: `use vue skill, create a todo app`.
6. 6.Review the generated code to ensure it adheres to expected best practices, such as component splitting and moving state into composables.

## Where it fits

- **New Project Init**：When starting a new Vue 3 project, use the vue-best-practices skill to ensure the initial code structure meets modern standards and avoids technical debt.
- **Complex State Ma**：When migrating component internal state to a Pinia store, leverage the vue-pinia-best-practices skill for guidance on correct store setup and reactivity patterns.
- **Route Logic Opti**：When handling complex navigation guards and route params, rely on the vue-router-best-practices skill to ensure proper handling of route component lifecycles.
- **Debugging Hard-t**：When encountering async errors or hydration issues, use the vue-debug-guides skill to get targeted troubleshooting steps and solutions.

## Pricing and free quota

Pricing and any free quota follow the official site.

## Who it is for

- Vue 3 Frontend Developers
- Teams using AI-assisted coding
- Tech Leads aiming to improve code standards
- Full-stack Engineers

## FAQ

### Is vue-skills stable for production use?

The project is currently marked as an early experiment/community project.While skills are validated, they may still be incomplete, and community feedback is welcomed to help improve them.

### Do I have to prefix every prompt with 'use vue skill'?

While not strictly mandatory, adding the prefix explicitly triggers the skill, ensuring the AI follows documented patterns more consistently.Without it, triggering may be inconsistent.

### Can I install just one specific skill?

Yes.You can install individual skills via the Claude Code Marketplace, for example, `vue-router-best-practices@vue-skills`.

### Are these skills compatible with Vue 2?

No.vue-skills is specifically designed for Vue 3 development, covering Vue 3-specific features like the Composition API and Vue Router 4.

## Tags

Vue 3 · Agent Skills · Best Practices · Claude Code · Frontend Development

Features, pricing and availability follow the official site. Except for 88z.ai’s own API pages, this is a third-party product; 88z.ai only provides a directory introduction.