vue3-best-practices
Vue 3 Best Practices
Comprehensive performance optimization and development guide for Vue 3 applications. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new Vue 3 components or composables
- Implementing reactive data and computed properties
- Reviewing code for performance issues
- Refactoring from Vue 2 to Vue 3
- Optimizing bundle size or load times
- Working with state management (Pinia/Vuex)
- Implementing async operations in components
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|
More from eva813/vue3-skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
4react-agent
Pragmatic React development focused on avoiding over-engineering, effective state management, and render optimization. Use when building React components or features where you need clear guidance on (1) choosing appropriate state management solutions, (2) optimizing component rendering and performance, (3) avoiding common over-engineering patterns, (4) implementing TypeScript with React, or (5) making architectural decisions that balance simplicity with scalability.
3git-conventional-commits
Professional git commit workflow with Conventional Commits format. Enforces commit type categorization (feat, fix, docs, style, refactor, perf, test, build, ci, chore), validates messages against the 7 rules of great commits, previews before committing, and supports multiple languages. Use when you need to create high-quality, traceable git commits.
3web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
3vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
3vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
3