hyf0/vue-skills
8 skills54.4k installs22.1k starsGitHub
Install
npx skills add https://github.com/hyf0/vue-skillsSkills in this repo
1Vue Best PracticesVue 3 development best practices including Composition API, TypeScript, SSR guidance, and performance optimization. Covers gotchas, common mistakes, and validated patterns through automated evaluation. Early experiment in specialized Vue 3 agent skills.25.3kinstalls2Vue Debug Guidestitle Use Key Attribute to Force Re-render Animations impact MEDIUM impactDescription Without key attributes Vue reuses DOM elements and animation libraries like AutoAnimate cannot detect changes to animate type gotcha tags vue3 animation key autoanimate rerender dom Use Key Attribute to Force Re-render Animations Impact MEDIUM Vue optimizes performance by reusing DOM elements when possible However this optimization can prevent animation libraries like AutoAnimate from detecting changes because the element is updated in place rather than re-created Adding a key attribute forces Vue to treat changed elements as new triggering proper animations Task Checklist Add key to elements that should animate when their content changes Use unique changing values for keys not indices For route transitions add key route fullPath to router-view Apply v-auto-animate to the parent element of keyed children Problematic Code vue template BAD Text changes but no animation occurs div v-auto-animate p message p No key element is reused div BAD Image source changes but no animation div v-auto-animate img src imageUrl No key element is reused14.5kinstalls3Vue Pinia Best Practicesvue-pinia-best-practices is a Vue 3 agent skill from hyf0/vue-skills tagged as a high-impact gotcha fix for Pinia state management. The skill diagnoses the common error when stores are accessed before Pinia is installed on the Vue app instance. It enforces calling app.use(pinia) before app.mount() and corrects store usage timing in setup blocks, plugins, and router guards. Developers reach for vue-pinia-best-practices when a Vue 3 app crashes with getActivePinia() errors after adding Pinia stores, composables, or early lifecycle hooks that reference useStore() too soon.3kinstalls4Vue Router Best Practicesvue-router-best-practices is a Vue Router 4 skill at version 1.0.0 from hyf0/vue-skills that documents navigation patterns, guard pitfalls, and route-component lifecycle interactions. It links to focused reference notes such as router-beforeenter-no-param-trigger for same-route param changes, router-beforerouteenter-no-this for beforeRouteEnter instance access, and router-guard-async-await-pattern for awaited API calls in guards. Developers reach for this skill when navigation guards fail silently, params do not retrigger hooks, or async guards race navigation. The MIT-licensed skill targets vuejs-ai curated patterns rather than generic Vue docs. Use it during SPA routing implementation and code review.2.7kinstalls5Create Adaptable Composablecreate-adaptable-composable is a Vue 3 agent skill (metadata version 17.0.0) for building reusable composables that accept plain values, refs, or getters from calling code. The skill guides normalization with toValue() and toRef() inside reactive effects such as watch and watchEffect, producing predictable behavior whether inputs are static or reactive. It targets Vue 3 or Nuxt 3 projects where composables must work like published library APIs rather than one-off component helpers. Developers reach for create-adaptable-composable when implementing shared state, async data hooks, or DOM utilities that multiple components will call with inconsistent input shapes. The workflow emphasizes MaybeRef typing patterns so downstream callers are not forced to wrap literals in ref() before use. Output is production-ready TypeScript composable code aligned with Vue ecosystem conventions for adaptable, testable reactive modules.2.4kinstalls6Vue Testing Best Practicesvue-testing-best-practices is a high-impact gotcha skill from hyf0/vue-skills for Vue 3 async component testing. It explains that defineAsyncComponent loads asynchronously and Vue updates on microtasks, so tests without await flushPromises() assert before the component renders—producing false negatives. The skill tags vue3, testing, async, defineAsyncComponent, flushPromises, and vitest, and includes a task checklist for async/await test functions and proper promise flushing. Developers reach for vue-testing-best-practices when Vitest or Vue Test Utils suites flake or fail on async child components that appear blank at assertion time.2.3kinstalls7Vue Options Api Best Practicesvue-options-api-best-practices is an agent skill tagged HIGH impact that warns against using arrow functions for Options API lifecycle hooks in Vue 2 and Vue 3. Arrow functions lexically bind this from the enclosing scope, so Vue cannot bind this to the component instance in mounted, created, and similar hooks, leaving this undefined or pointing at the wrong context. That breaks access to component data, methods, and computed properties at runtime. The skill covers options-api lifecycle patterns with tags including vue3, vue2, lifecycle, arrow-functions, this-binding, mounted, and created. Developers reach for vue-options-api-best-practices when debugging mysterious undefined this errors in Options API components or reviewing legacy Vue codebases that mix arrow and function syntax in hooks.2.2kinstalls8Vue Jsx Best Practicesvue-jsx-best-practices is a gotcha-focused skill from hyf0/vue-skills rated MEDIUM impact for Vue 3 teams using JSX or TSX render functions in Cursor or Claude Code. Vue's JSX transform expects standard HTML attribute names such as class and for, not React conventions like className and htmlFor; with proper TypeScript configuration, React-style names trigger TypeScript errors that catch inconsistencies early. The skill tags cover vue3, jsx, tsx, and render-function workflows. Frontend developers reach for vue-jsx-best-practices when migrating React JSX habits into Vue 3 or debugging TSX attribute type failures in Vue components.2.1kinstalls