skills.rest
Lynricsy
LynricsyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vue

Develops Vue 3 and Nuxt applications with Composition API, Pinia, and Vue Router.

22|Updated Sep 10, 2026
Search Tags:#code review#vue#reactivity#ssr#pinia#nuxt#composition api
One-click install
npx skills add https://github.com/Lynricsy/HyperSkills --skill vue-lynricsy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/Lynricsy/HyperSkills/tree/main/skills/vue
Command: npx skills add https://github.com/Lynricsy/HyperSkills --skill vue-lynricsy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Vue and Nuxt codebases fail silently in predictable ways: reactivity detaches after a destructure, async watchers race and overwrite fresh data, Pinia stores freeze the UI, and Nuxt fetches run twice or leak state across SSR requests. This Skill encodes those failure modes as enforceable rules and workflows so an agent writes and reviews Vue code that actually stays reactive. ## Core Features & Use Cases - 25 version-gated core rules: Invariants for reactivity, props, computed/watch, defineModel, provide/inject, Pinia setup stores, navigation guards, and Nuxt data fetching, each tagged with its version floor (Vue 3.5, Nuxt 4, Router 5, Pinia 4). - Five gated workflows: implement-feature, diagnose-not-updating, review, add-tests, and optimize, each ending in a verification gate such as a typecheck, a causal-chain explanation, or a repeated measurement. - Deep reference files: Dedicated references for reactivity, components, composables, Pinia, Vue Router, Nuxt, testing, and performance, loaded on demand via a topic router. - Use Case: A component's list stops updating after a prop change and search results arrive out of order. The diagnose-not-updating workflow walks the detachment list, finds the destructured prop and the uncancelled async watcher, and produces fixes with exact line citations. ## Quick Start Use the vue skill to review ProductFilters.vue and explain why the list stops updating when the category prop changes.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Vue component stop updating after destructuring props or a store?▼

Destructuring detaches reactivity: const { x } = props after defineProps copies a snapshot, and destructuring a Pinia store yields plain values. Destructure the defineProps() call directly (3.5+) and use storeToRefs() for store state and getters.

How do I fix stale results from an async watcher in Vue?▼

Register onWatcherCleanup(() => controller.abort()) synchronously before the first await and pass the AbortController signal to fetch. This cancels the previous run so a slower earlier response cannot overwrite current data; a debounce only narrows the race.

Why does Nuxt fetch the same API endpoint twice per page load?▼

useFetch derives its cache key from the URL, options, and call site, so two components calling the same URL get two keys and two requests. Pass one explicit shared key, or read the cached result with useNuxtData in the second component.

Does this skill cover Vue 2 or the Options API?▼

No. The rules target Vue 3.5, Nuxt 4, Vue Router 5, and Pinia 4 with script setup as the default authoring style. Options API and JSX appear only in the context of migrating to script setup.

Why is my Pinia setup store missing state in DevTools and SSR?▼

A setup store must return every state ref, and none wrapped in readonly(). A ref left out or made readonly is invisible to Pinia, breaking SSR hydration, devtools, and plugins with no error. Return all refs raw, using an underscore prefix for internal ones.

When should I not use this Vue skill?▼

Do not use it for React or Next.js work, visual and UX design decisions, general TypeScript architecture, Svelte, Astro, or WeChat mini-program runtimes. Those belong to their own dedicated skills; this one covers only the Vue and Nuxt engineering surface.

Related Skills

Explore More Software Engineering Skills→
fanguyunfanguyun

vue-expert

Create Vue 3 components with Composition API and Pinia state management.

Community
Advanced
riftzen-bitriftzen-bit

nuxt4-patterns

Diagnose hydration mismatches and SSR errors in Nuxt 4 applications.

Community
Advanced
lucking7lucking7

frontend-design

Guides layout, typography, color, and accessibility for frontend interfaces.

Community
Basic
inbharataiinbharatai
22

svelte-component

Create Svelte 5 components with runes, stores, and SvelteKit integration.

Community
Intermediate