hyf0/vue-skills
8 skills47.9k installs20.3k starsGitHub
Install
npx skills add https://github.com/hyf0/vue-skillsSkills in this repo
1Vue Best PracticesVue-best-practices is an agent skill that forces a disciplined Vue 3 workflow for solo builders using Claude Code, Cursor, or similar agents on .vue files, Pinia stores, or Vite projects. It insists on Composition API with script setup and TypeScript as the default, switching to Options API or JSX only when the repo already requires it and companion skills exist. Before coding, the agent confirms architecture and reads bundled references on reactivity, single-file components, and component design—reducing one-off Options API drift and subtle reactivity bugs. The skill frames explicit data flow (props down, events up), small focused components, and computed-driven render efficiency. It targets SSR setups, Volar/editor alignment, and vue-tsc type checking. Use it whenever the task mentions Vue, Vue Router, or frontend work in a Vue codebase; skip it for React-only or backend-only tickets with no .vue touchpoints.22.6kinstalls2Vue Debug GuidesUse Key Attribute to Force Re-render Animations is a focused Vue 3 gotcha guide for solo builders who wire transition libraries such as AutoAnimate and see content swap without motion. Vue’s default DOM reuse is correct for performance but wrong for libraries that expect insert/remove lifecycle events. The skill walks through adding `:key` on children inside a `v-auto-animate` parent, avoiding index keys, and keying `<router-view>` with `$route.fullPath` so route changes animate. It is for indie devs shipping dashboards, marketing sites, or mobile-hybrid Vue apps who hit “the data changed but nothing moved.” When list content, images, or routes update in place, invoke this skill before chasing library bugs or ripping out animations. Intermediate familiarity with Vue templates and directives is assumed; no backend or deploy steps are covered.13.6kinstalls3Vue Pinia Best PracticesFix No Active Pinia Error – Store Setup Timing is a focused Vue 3 agent skill for solo builders who wire Pinia into a Vite or Vue CLI app and immediately hit “getActivePinia() was called but there was no active Pinia.” It walks through a five-step checklist: call app.use(pinia) before app.mount(), install Pinia before the router when navigation guards use stores, never invoke useXxxStore() at module scope, only call stores inside setup, composables, or post-init code, and prefer <script setup> over a top-level <script> that runs too early. The skill contrasts wrong plugin order in main.js with the correct sequence and ties the error to real crash behavior on first load. Use it when scaffolding auth, cart, or user stores alongside vue-router, or when migrating from Vuex where initialization habits differ. It is procedural guidance—not a generator—so you still apply the patterns in your own entry file and guards.2.3kinstalls4Vue Router Best PracticesVue Router Best Practices is a reference-oriented agent skill for solo builders shipping Vue 3 single-page applications with Vue Router 4. It maps common failure modes—guards that forget to await API calls, deprecated next() usage, traps in infinite redirects, beforeEnter not firing on param-only changes, and beforeRouteEnter lacking this—to linked deep dives so your coding agent applies the right fix instead of guessing. It also covers route-component lifecycle when only params change (stale lists and detail views) and cleanup for event listeners that survive navigation. Install it during active frontend work when users report stuck loaders, auth loops, or ghost subscriptions after route changes. The skill is phase-specific to Build frontend; it does not replace official Vue Router docs but compresses gotchas into actionable triggers your agent can search by symptom. Ideal paired with an existing Vue repo where routing is already introduced and you need guard and lifecycle correctness before Ship review.2.1kinstalls5Create Adaptable ComposableCreate Adaptable Composable is an agent skill for solo builders shipping Vue 3 or Nuxt 3 frontends who need reusable functions that do not break when callers pass a static value today and a ref tomorrow. It walks through confirming the composable API, deciding which parameters must stay reactive, and normalizing those inputs with toValue() or toRef() inside watch and watchEffect so derived state stays correct. That pattern matches how production component libraries document public composables and reduces fragile one-off hooks in SaaS dashboards, extensions, and content apps. Use it when you or your coding agent is authoring shared logic—data fetching wrappers, breakpoint helpers, or form state—not when you only need a single inline composable with fixed refs. The skill emphasizes type-level MaybeRef and MaybeRefOrGetter contracts so TypeScript and runtime behavior stay aligned for indie teams without a dedicated design-system maintainer.1.9kinstalls6Vue Testing Best PracticesVue Testing Best Practices is a focused agent skill for solo builders shipping Vue 3 apps with Vitest. It addresses a common high-impact failure mode: testing components created with defineAsyncComponent without waiting for Vue’s async update cycle, which makes tests assert on empty or loading output and fail even when the UI works. The skill walks through async test functions, flushPromises after mount, intentional loading-state assertions before resolution, error paths when the dynamic import rejects, and using trigger with await because it returns a Promise. It is narrowly scoped to testing discipline—not general Vue architecture or E2E. Install it when you are in the Ship phase hardening component tests before release, especially if flaky or always-failing async widget specs are blocking CI.1.8kinstalls7Vue Options Api Best PracticesNever Use Arrow Functions for Options API Lifecycle Hooks is a focused Vue capability skill for solo builders maintaining Vue 2 or Vue 3 Options API codebases. Arrow functions lexically capture `this` from the enclosing scope, so when they are assigned directly to `created`, `mounted`, or similar hooks, `this` is undefined or wrong and calls to `data`, methods, or plugins fail at runtime. The skill trains agents to use regular functions or ES6 method shorthand on the export default object while still permitting arrows for inner callbacks inside those hooks. It includes a short task checklist for reviews and copy-paste correct vs incorrect examples. Install it when an agent is generating lifecycle logic, debugging mysterious undefined `this` errors, or doing a quick pass on legacy Vue before ship.1.8kinstalls8Vue Jsx Best PracticesVue JSX Best Practices is a focused agent skill for solo builders shipping Vue 3 interfaces with JSX or TSX instead of single-file components only. Vue’s JSX transform follows HTML attribute naming—`class` and `for`—which diverges from React’s `className` and `htmlFor`. The skill explains why treating Vue JSX like React JSX creates TypeScript friction and inconsistent style even when the runtime might still map attributes. It gives a concrete checklist: adopt HTML names, use conventional `on` event prefixes, migrate React ports deliberately, and configure TypeScript for Vue JSX inference. The impact is medium but recurring: every ported component or copy-pasted React snippet is a chance to introduce subtle template mismatches. Use it while implementing render functions, reviewing agent-generated JSX, or standardizing a codebase that mixes SFCs and TSX. It does not replace Vue’s official docs; it compresses one high-frequency footgun into agent-invokable rules so Cursor and Claude Code outputs align with Vue template mental models and pass type checks on the first pass.1.7kinstalls