How do I install vue-skills?

You can install it via the `npx skills add vuejs-ai/skills` command. If you use Claude Code, you can also add the marketplace first, then install all or individual skills via the `/plugin install` command.

How do I trigger a skill when using it?

For the most reliable results, prefix your prompt with "use vue skill", e.g., Use vue skill, . Without the prefix, skill triggering may be inconsistent.

How are the skill rules validated?

Each rule is validated through automated evaluations: a baseline test runs without the skill installed, then again after installation. A rule is kept only if it turns a failure into a pass; otherwise, it is considered for removal.

Is this an official project?

No. It is an early-stage community experiment. The author plans to propose moving it under the Vue organization to serve the broader community if it proves valuable.

Which AI tools are supported?

The documentation mentions a general installation method as well as a Marketplace installation method for Claude Code.

September 26, 2026

vue-skills

AI & Machine Learning Prompt Engineering & Skill Management0

Get resource

Provides Vue 3 development skill packs for AI Agents, helping generate code that follows best practices.

MITClaude CodeText InputCode Output

Prompt Templates Skill广场 Skill Packaging

安装 / 调用方式bash

npx skills add vuejs-ai/skills

调用示例json

Use vue skill, <your prompt here>

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude Code
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

vue-skills is a community experiment aimed at creating skills specifically for Vue 3 development for AI Agents. These skills originate from real-world development issues and use structured rules to guide AI in generating more standardized, higher-quality Vue code. ## What problem does it solve When generating Vue code, AI may be unaware of version-specific behavioral differences, undocumented features, or edge cases. vue-skills divides skills into two categories: - **Capability**: Addresses problems AI cannot handle without skills, such as version-specific behaviors or edge cases outside its training data. - **Efficiency**: Optimizes problems AI can already solve but with lower quality, providing best practices and consistent implementation patterns. ## Key capabilities The project includes multiple granular skills covering different aspects of the Vue 3 ecosystem: - **vue-best-practices**: Best practices for Composition API and TypeScript, SSR guidance, and performance optimization. - **vue-options-api-best-practices**: `this` context, lifecycle, and TypeScript usage for Options API. - **vue-router-best-practices**: Navigation guards, route parameters, and component lifecycles for Vue Router 4. - **vue-pinia-best-practices**: Store configuration, reactivity, and state patterns for Pinia state management. - **vue-testing-best-practices**: Writing tests using Vitest, Vue Test Utils, and Playwright. - **vue-jsx-best-practices**: Differences between JSX syntax in Vue and React JSX. - **vue-debug-guides**: Debugging guides for runtime errors, warnings, async error handling, and hydration issues. - **create-adaptable-composable**: Creating reusable composables using `MaybeRef` / `MaybeRefOrGetter` patterns. ## Validation mechanism Every skill rule is validated through automated evaluations. Only rules where the model goes from failing to passing after installing the skill are kept; if a rule passes both before and after installation, it is considered for removal. ## Who is it for For developers who use AI coding assistants (such as Claude Code) to write Vue 3 code in their daily work. The project is open-sourced under the MIT license.

Key features

Composition API best practices: Provides development standards for Vue 3 + Composition API + TypeScript, SSR guidance, and performance tips.
Options API support: Covers `this` context, lifecycle, and TypeScript usage considerations for Options API.
Vue Router 4 skills: Guides proper usage of navigation guards, route parameters, and route component lifecycles.
Pinia state management: Offers best practices for Pinia store configuration, reactivity handling, and state management patterns.
Testing guidance: Supports writing component and E2E tests using Vitest, Vue Test Utils, and Playwright.
Vue JSX syntax: Explains specific differences between JSX syntax in Vue and React JSX.
Debugging guides: Helps troubleshoot runtime errors, warnings, async error handling, and hydration issues.
Composable creation: Creates reusable composables using MaybeRef and MaybeRefOrGetter input patterns.
Automated rule validation: Validates each rule's effectiveness through automated evals comparing baseline vs. skill results.

Releases

Notify me

Initial · vue-skills

September 26, 2026

Q&A

How do I install vue-skills?AI-generated: You can install it via the `npx skills add vuejs-ai/skills` command. If you use Claude Code, you can also add the marketplace first, then install all or individual skills via the `/plugin install` command.
How do I trigger a skill when using it?AI-generated: For the most reliable results, prefix your prompt with "use vue skill", e.g., Use vue skill, <your prompt here>. Without the prefix, skill triggering may be inconsistent.
How are the skill rules validated?AI-generated: Each rule is validated through automated evaluations: a baseline test runs without the skill installed, then again after installation. A rule is kept only if it turns a failure into a pass; otherwise, it is considered for removal.
Is this an official project?AI-generated: No. It is an early-stage community experiment. The author plans to propose moving it under the Vue organization to serve the broader community if it proves valuable.
Which AI tools are supported?AI-generated: The documentation mentions a general installation method as well as a Marketplace installation method for Claude Code.