eva813 avatar

Vue3 Best Practices

A solid reference for writing performant Vue 3 code, organized into 45 rules across eight categories from critical reactivity patterns down to advanced techniques. It covers the usual suspects like ref versus reactive, async components, and script setup syntax, plus less obvious wins like v-memo for expensive lists and shallow refs for large objects. Each rule includes before/after examples and performance impact notes. Most useful when you're refactoring existing code or reviewing pull requests, since it gives you specific patterns to look for rather than vague advice. The prioritization helps you focus on what actually matters instead of bikeshedding template syntax.

skills.sh installs
114
GitHub stars
2
last updated
Jun 3, 2026

Install

$ npx -y skills add eva813/vue3-skills --skill vue3-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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

PriorityCategoryImpactPrefix
1Reactivity PerformanceCRITICALreactivity-
2Component OptimizationCRITICALcomponent-
3Bundle Size & LoadingHIGHbundle-
4Composition APIMEDIUM-HIGHcomposition-
5Template PerformanceMEDIUMtemplate-
6State ManagementMEDIUMstate-
7Lifecycle OptimizationLOW-MEDIUMlifecycle-
8Advanced PatternsLOWadvanced-

Quick Reference

1. Reactivity Performance (CRITICAL)

Sponsors

Details

Repository
github.com/eva813/vue3-skills
First seen
Jun 3, 2026

Recommended

1juliusbrussee avatarcavemanjuliusbrussee/cavemanUltra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels618.3Kskills.sh installs
2mattpocock avatargrill-memattpocock/skillsA relentless interview to sharpen a plan or design.1.5Mskills.sh installs
3shadcn avatarimproveshadcn/improveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on s40Kskills.sh installs
4obra avatarsystematic-debuggingobra/superpowersUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes326.7Kskills.sh installs
5forrestchang avatarkarpathy-guidelinesforrestchang/andrej-karpathy-skillsBehavioral guidelines to reduce common LLM coding mistakes through explicit assumptions, simplicity, and verifiable success criteria.17.9Kskills.sh installs
6vercel-labs avatarfind-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express int4.3Mskills.sh installs