vue-skills

March 26, 2026 · View on GitHub

Agent skills for Vue 3 development.

🚧 Early Experiment / Community Project

This repository is an early experiment in creating specialized skills for AI agents to enhance Vue 3 development. Skills are derived from real-world issues but may be incomplete due to hallucinations—please give feedback. If valuable, I plan to propose transferring this project to the Vue organization to benefit the wider community.

Installation

npx skills add vuejs-ai/skills

Claude Code Marketplace

An alternative for Claude Code users:

# Add marketplace
/plugin marketplace add vuejs-ai/skills

# Install all skills at once
/plugin install vue-skills-bundle@vue-skills

# Install individual skills
/plugin install vue-best-practices@vue-skills

# Install multiple skills
/plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills

Usage

For most reliable results, prefix your prompt with use vue skill:

Use vue skill, <your prompt here>

This explicitly triggers the skill and ensures the AI follows the documented patterns. Without the prefix, skill triggering may be inconsistent depending on how closely your prompt matches the skill's description keywords.

Available Skills

SkillWhen to useDescription
vue-best-practicesVue 3 + Composition API + TypeScriptBest practices, common gotchas, SSR guidance, performance
vue-options-api-best-practicesOptions API (data(), methods)this context, lifecycle, TypeScript with Options API
vue-router-best-practicesVue Router 4Navigation guards, route params, route-component lifecycle
vue-pinia-best-practicesPinia for state managementStore setup, reactivity, state patterns
vue-testing-best-practicesWriting component or E2E testsVitest, Vue Test Utils, Playwright
vue-jsx-best-practicesJSX in VueSyntax differences from React JSX
vue-debug-guidesDebugging Vue 3 issuesRuntime errors, warnings, async error handling, hydration issues
create-adaptable-composableCreating reusable composablesMaybeRef/MaybeRefOrGetter input patterns

Examples

vue-best-practices

Demo - Todo App

Prompt

create a todo app

🔎 See demo full output.

Changes after using skill

create-adaptable-composable

Original from create-agnostic-composable of serkodev/vue-skills

Demo - useHidden

Prompt

create a reusable composable for controlling hidden for a element

🔎 See demo full output.

Changes after using skill

  • Used MaybeRef and MaybeRefOrGetter for input parameters for reactivity flexibility.
export interface UseHiddenOptions {
  hidden?: MaybeRef<boolean>
  initialHidden?: MaybeRefOrGetter<boolean>
  syncAria?: boolean
}

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

Methodology

Skill Types

Skills are classified into two categories:

  • Capability: AI cannot solve the problem without the skill. These address version-specific issues, undocumented behaviors, recent features, or edge cases outside AI's training data.

  • Efficiency: AI can solve the problem but not well. These provide optimal patterns, best practices, and consistent approaches that improve solution quality.

Validation Process

Each skill rule is validated through automated evals:

  1. Baseline: Run without skill installed
  2. With-skill: Run with skill installed

A rule is kept only if it enables the model to solve problems it couldn't solve without it.

BaselineWith SkillAction
FailPassKeep
PassPassConsidered removed

Contributing

Development happens on the dev branch. The main branch is reserved for published skills only.

  1. Create a feature branch from dev
  2. Submit a PR to dev
  3. After approval, changes are merged to dev
  4. Maintainers sync dev → main via GitHub Action when ready to publish

License

MIT