Refactor Vue 3 Single-File Components to Composition API with TypeScript.
npx skills add https://github.com/rbaumier/skills --skill vue-rbaumier
Please help me install this Agent Skill. Skill: vue Source: https://github.com/rbaumier/skills/tree/main/vue Command: npx skills add https://github.com/rbaumier/skills --skill vue-rbaumier
Provide a consistent, opinionated set of rules and playbooks to refactor, review, and author Vue 3 Single-File Components so they are type-safe, reactive-correct, and architected for maintainability and performance.
Ask the assistant to refactor a Vue SFC to use <script setup lang="ts">, computed properties, typed props/emits, and extract state into composables.
High-intent search queries and answers about installing and using this skill.
Vue reactivity best practices require using ref or shallowRef appropriately, avoiding destructuring of reactive objects, and preferring computed for derived values. You must understand .value usage in scripts versus template unwrapping to prevent reactivity loss.
Correct Vue 3 Single-File Component structure enforces a predictable SFC section order and splits components for CRUD features. It requires stable v-for keys, safe v-html sanitization, and explicit props and events contracts to ensure type safety and maintainability.
Yes, you can use TypeScript with Vue composables by applying <script setup lang="ts"> and defining explicit props and events contracts. Typed defineProps and defineEmits ensure strict type checking for composable-driven state across your application.
Use shallowRef instead of ref in Vue 3 for performance optimization when dealing with large objects that do not need deep reactivity. It prevents deep tracking overhead, keeping things simple when deep property changes are unnecessary for the component's rendering logic.
Destructuring reactive objects breaks Vue reactivity because primitive values lose their reactive proxies when extracted. To maintain reactivity, keep reactive objects intact and use composables or computed properties to expose specific values without losing the reactive reference.
heamlkStandardize Vue 3 SFC development with script setup and typed props.
kvn3tojOptimize React application performance with memoization, code splitting, and virtualization.
shalevaminDevelop Vue 3 applications with Composition API, Pinia, and Nuxt 3.
futureteaProvide idiomatic React and TypeScript guidance for components, hooks, and state management.
