vue-best-practices
๐ฏSkillfrom hyf0/vue-skills
|A Vue 3 skill for AI agents providing Composition API and TypeScript best practices, common gotcha prevention, SSR guidance, and performance patterns for Claude Code and Cursor.
Overview
Vue Best Practices is a skill from the vue-skills repository that provides AI agents with specialized knowledge for Vue 3 development using Composition API and TypeScript. It covers best practices, common gotchas, SSR guidance, and performance optimization patterns. The skill works with Claude Code, Cursor, and other AI agents through the skills CLI.
Key Features
- Vue 3 + Composition API + TypeScript Patterns: Provides best practices for component structuring, state management with composables, and proper use of reactivity primitives like shallowRef for primitive data
- Companion Skills Suite: Part of a comprehensive set including vue-router-best-practices (Vue Router 4), vue-pinia-best-practices (Pinia), vue-testing-best-practices (Vitest/Playwright), vue-jsx-best-practices, and vue-debug-guides
- Multi-Agent Support: Installable via Claude Code marketplace (/plugin install), Cursor remote rules, or npx skills add for any AI agent, with automatic context discovery
- Practical Demo Examples: Includes before/after comparisons showing how the skill improves code quality, such as splitting components, extracting composables, and choosing correct reactivity primitives
Who is this for?
- Vue 3 developers using Composition API and TypeScript who want AI assistants to follow official best practices and avoid common gotchas
- Teams adopting Vue 3 who need consistent coding patterns across their projects, including SSR guidance and performance optimization
- AI-assisted development users working with Claude Code or Cursor who want automatic, context-aware Vue expertise during their coding sessions
Same repository
hyf0/vue-skills(11 items)
Installation
npx vibeindex add hyf0/vue-skills --skill vue-best-practicesnpx skills add hyf0/vue-skills --skill vue-best-practices~/.claude/skills/vue-best-practices/SKILL.mdSKILL.md
More from this repository10
Diagnoses and resolves Vue 3 runtime errors, async failures, hydration issues, and common component debugging challenges.
Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.
Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.
Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.
Vue 3 Options API best practices covering TypeScript integration, method binding, lifecycle hooks, computed properties, and common gotchas like arrow function pitfalls and stateful method lifecycle management.
Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.
Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.
Provides comprehensive Vue.js development guidelines and best practices for creating, refactoring, and reviewing Vue and Nuxt projects with a focus on code quality
Provides Pinia state management best practices for Vue.js applications including store patterns, code organization, and performance optimization
Provides VueUse composable best practices for efficiently leveraging utility functions and reactive patterns in Vue.js applications