Vue Gets AI Skills: Evan You Endorses a Tool to Cure Hallucinated Code

Why Vue Needs Skills

Vue has undergone major version changes—from the Options API in Vue 2 to the Composition API in Vue 3, then the widespread <script setup> syntax and new features like defineModel in Vue 3.3/3.4/3.5—making AI models frequently produce "hallucinated" code because their training data lags behind these updates.

AI may generate code for a Vue 3.5 project but still use the old props passing style.

It confuses the configuration differences between volar and vue-tsc.

TypeScript type inference often yields outdated type definitions.

vue-skills: Curing AI’s "Hallucination"

The open‑source project vue-skills by developer hyf0 was created to address these pain points. Unlike ordinary prompt libraries, the author applies a rigorous scientific validation method.

According to the README, each Skill follows a three‑step creation process:

Collect real pain points : all issues stem from production‑level development.

Multi‑Model Verification (the hardest part):

Benchmark testing : confirm that an AI model such as Claude writes incorrect code when the Skill is absent.

Skill testing : verify that adding the Skill makes the AI produce correct code.

Elimination mechanism : if even a weaker model (e.g., Haiku) can solve the problem without the Skill, the Skill is discarded.

Current Skills are divided into two categories:

Capability : solves problems AI cannot handle at all, e.g., fixing Volar 3.0 breaking‑change configurations, resolving vue-tsc strictTemplates type errors, and correctly using the new defineModel update event syntax.

Efficiency : helps AI write better code, e.g., configuring Hot Module Replacement for SSR and providing a standard Pinia Store mocking pattern for unit tests.

Hands‑On Experience

Installation is straightforward via the previously introduced Skills Hub . Import the repository URL: https://github.com/hyf0/vue-skills Skills Hub automatically detects and imports the Skills. When prompting the AI, prepend the prefix Use vue skill to explicitly activate the rules.

For example, when asking the AI to extract component Props types, without a Skill it may generate a complex PropType definition; with the extract-component-props rule from vue‑skills, it prefers the modern, TypeScript‑friendly defineProps<T>() generic syntax.

Although the author modestly calls this an "early experiment," the emergence of structured Agent Skills for both React and Vue hints at the next evolution of documentation and developer assistance.