vue-best-practices

by @hyf0 in Development

709

# Install this skill:

npx skills add hyf0/vue-skills

Or install specific skill: npx add-skill https://github.com/hyf0/vue-skills/tree/master/skills/vue-best-practices

# Description

Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration.

# SKILL.md

name: vue-best-practices
description: Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration.
license: MIT
metadata:
author: hyf0
version: "8.0.0"

Capability Rules

Rule	Keywords	Description
extract-component-props	get props type, wrapper component, extend props, inherit props, ComponentProps	Extract types from .vue components
vue-tsc-strict-templates	undefined component, template error, strictTemplates	Catch undefined components in templates
fallthrough-attributes	fallthrough, $attrs, wrapper component	Type-check fallthrough attributes
strict-css-modules	css modules, $style, typo	Catch CSS module class typos
data-attributes-config	data-*, strictTemplates, attribute	Allow data-* attributes
volar-3-breaking-changes	volar, vue-language-server, editor	Fix Volar 3.0 upgrade issues
module-resolution-bundler	cannot find module, @vue/tsconfig, moduleResolution	Fix module resolution errors
define-model-update-event	defineModel, update event, undefined	Fix model update errors
with-defaults-union-types	withDefaults, union type, default	Fix union type defaults
deep-watch-numeric	watch, deep, array, Vue 3.5	Efficient array watching
vue-directive-comments	@vue-ignore, @vue-skip, template	Control template type checking
vue-router-typed-params	route params, typed router, unplugin	Fix route params typing

Efficiency Rules

Rule	Keywords	Description
hmr-vue-ssr	hmr, ssr, hot reload	Fix HMR in SSR apps
pinia-store-mocking	pinia, mock, vitest, store	Mock Pinia stores

Reference

# README.md

vue-skills

Agent skills for Vue 3 development.

🚧 Early Experiment

This repository is an early experiment in creating specialized skills for AI agents to enhance their capabilities in Vue 3 development. The skills are derived from real-world issues and best practices, but might be incomplete or inaccurate due to hallucinations.

Please give feedback when encountering any issues.

🚧 This is a community project

I created this project to explore how AI can improve Vue 3 development. If it proves valuable, I plan to propose transferring it to the Vue organization so it can benefit the wider community.

Installation

npx add-skill hyf0/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

vue-best-practices (17 rules)

Vue 3 development best practices covering TypeScript configuration, component typing, tooling troubleshooting, and testing patterns.

Type	Count	Examples
Capability	15	Component props extraction, vue-tsc strictTemplates, Volar 3.0 breaking changes, @vue-ignore directives
Efficiency	2	HMR in SSR, Pinia store mocking

Rule Types

Rules 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.

Methodology

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.

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

License

MIT

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.