🎯

vue-best-practices

🎯Skill

from yuanxiao0115/agent-skills

What it does

Enforces Vue 3 TypeScript best practices by providing comprehensive type-safe rules for component props, templates, modules, and performance optimization.

📦

Part of

yuanxiao0115/agent-skills(22 items)

vue-best-practices

Installation

Quick InstallInstall with npx

npx skills add yuanxiao0115/agent-skills/skills --all

Quick InstallInstall with npx

npx skills add yuanxiao0115/agent-skills/skills/read-github

Quick InstallInstall with npx

npx skills add yuanxiao0115/agent-skills/skills --skill read-github planner

Quick InstallInstall with npx

npx skills add yuanxiao0115/agent-skills/skills /path/to/your/project

npm installInstall npm package

npm install -g skills

+ 22 more commands

📖 Extracted from docs: yuanxiao0115/agent-skills

Need more details? View full documentation on GitHub →

4Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Vue 3 TypeScript, vue-tsc, Volar, Vite, component props, testing, composition API.

Overview

# Vue Best Practices

Capability Rules

| Rule | Keywords | Description |

|------|----------|-------------|

| [extract-component-props](rules/extract-component-props.md) | get props type, wrapper component, extend props, inherit props, ComponentProps | Extract types from .vue components |

| [vue-tsc-strict-templates](rules/vue-tsc-strict-templates.md) | undefined component, template error, strictTemplates | Catch undefined components in templates |

| [fallthrough-attributes](rules/fallthrough-attributes.md) | fallthrough, $attrs, wrapper component | Type-check fallthrough attributes |

| [strict-css-modules](rules/strict-css-modules.md) | css modules, $style, typo | Catch CSS module class typos |

| [data-attributes-config](rules/data-attributes-config.md) | data-, strictTemplates, attribute | Allow data- attributes |

| [volar-3-breaking-changes](rules/volar-3-breaking-changes.md) | volar, vue-language-server, editor | Fix Volar 3.0 upgrade issues |

| [module-resolution-bundler](rules/module-resolution-bundler.md) | cannot find module, @vue/tsconfig, moduleResolution | Fix module resolution errors |

| [unplugin-auto-import-conflicts](rules/unplugin-auto-import-conflicts.md) | unplugin, auto-import, types any | Fix unplugin type conflicts |

| [codeactions-save-performance](rules/codeactions-save-performance.md) | slow save, vscode, performance | Fix slow save in large projects |

| [duplicate-plugin-detection](rules/duplicate-plugin-detection.md) | duplicate plugin, vite, vue plugin | Detect duplicate plugins |

| [define-model-update-event](rules/define-model-update-event.md) | defineModel, update event, undefined | Fix model update errors |

| [with-defaults-union-types](rules/with-defaults-union-types.md) | withDefaults, union type, default | Fix union type defaults |

| [deep-watch-numeric](rules/deep-watch-numeric.md) | watch, deep, array, Vue 3.5 | Efficient array watching |

| [vue-directive-comments](rules/vue-directive-comments.md) | @vue-ignore, @vue-skip, template | Control template type checking |

| [script-setup-jsdoc](rules/script-setup-jsdoc.md) | jsdoc, script setup, documentation | Add JSDoc to script setup |

| [vue-router-typed-params](rules/vue-router-typed-params.md) | route params, typed router, unplugin | Fix route params typing |

Efficiency Rules

| Rule | Keywords | Description |

|------|----------|-------------|

| [hmr-vue-ssr](rules/hmr-vue-ssr.md) | hmr, ssr, hot reload | Fix HMR in SSR apps |

| [pinia-store-mocking](rules/pinia-store-mocking.md) | pinia, mock, vitest, store | Mock Pinia stores |

Reference

[Vue Language Tools](https://github.com/vuejs/language-tools)
[Vue 3 Documentation](https://vuejs.org/)

More from this repository10

🎯

read-github🎯Skill

Retrieves and searches GitHub repository documentation and code via gitmcp.io, enabling easy exploration of project contents and details.

🎯

planner🎯Skill

Generates comprehensive, phased implementation plans with detailed sprints, atomic tasks, and clear requirements clarification across multiple project stages.

🎯

agent browser🎯Skill

Enables AI-powered browser automation using a fast Rust-based CLI with Node.js fallback, allowing programmatic web interaction and control.

🎯

parallel-task🎯Skill

Launches parallel subagents to simultaneously execute tasks from a markdown plan file, triggered by "/parallel-task" command.

🎯

context7🎯Skill

Retrieves up-to-date library documentation via Context7 API, ensuring access to current technical references beyond training data limitations.

🎯

plan-harder🎯Skill

Generates comprehensive, phased implementation plans with atomic tasks, sprints, and detailed requirements analysis for complex development requests.

🎯

frontend-design🎯Skill

Crafts distinctive, production-grade frontend interfaces with exceptional design quality, avoiding generic AI aesthetics.

🎯

skill-creator🎯Skill

Scaffolds, validates, and packages Codex skills using helper scripts for efficient skill development and management.

🎯

cli-design-guidelines🎯Skill

Provides comprehensive design guidelines for creating user-friendly, robust, and intuitive command-line interfaces with best practices and human-first UX principles.

🎯

web-design-guidelines🎯Skill

Provides comprehensive web design guidelines and best practices for creating user-friendly, accessible, and visually appealing websites.