vue-skills

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

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

Skill	When to use	Description
vue-best-practices	Vue 3 + Composition API + TypeScript	Common gotchas, reactivity patterns, SSR, performance
vue-options-api-best-practices	Options API (data(), methods)	this context, lifecycle, TypeScript with Options API
vue-router-best-practices	Vue Router 4	Navigation guards, route params, route-component lifecycle
vue-pinia-best-practices	Pinia for state management	Store setup, reactivity, state patterns
vue-testing-best-practices	Writing component or E2E tests	Vitest, Vue Test Utils, Playwright
vue-jsx-best-practices	JSX in Vue	Syntax differences from React JSX
vue-development-guides	Building a Vue/Nuxt project	Component splitting, data flow, core principles
create-adaptable-composable	Creating reusable composables	MaybeRef/MaybeRefOrGetter input patterns

Examples

vue-development-guides

Original from vue-best-practices of serkodev/vue-skills

Demo - Todo App

Prompt

create a todo app

🔎 See demo full output.

Changes after using skill

• More readable code
• Components split
• Moved states into composables (useTodos.ts)
• Use shallowRef for primitive reactive data (see Reactivity Guide)

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

Every skill in this repository is created through a rigorous, evidence-based process:

1. Real-World Issue Collection

Skills are sourced from actual developer pain points encountered in production.

2. Multi-Model Verification

Each skill undergoes systematic testing:

• Baseline test: Verify the model fails to solve the problem without the skill
• Skill test: Confirm the model correctly solves the problem with the skill
• Deletion criteria: If both Sonnet AND Haiku pass without the skill, the rule will be deleted

3. Model Tier Validation

Model	Without Skill	With Skill	Action
Haiku	Fail	Pass	Keep
Sonnet	Fail	Pass	Keep
Both	Pass	-	Delete

Acceptance criteria: A skill is only kept if it enables Haiku or Sonnet to solve a problem they couldn't solve without it.

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

Related projects

• vueuse/vueuse-skills - Agent skills for VueUse development
• onmax/nuxt-skills - Agent skills for Nuxt development

License

MIT