vueAvoid common Vue mistakes â reactivity traps, ref vs reactive, computed timing, and Composition API pitfalls.
Install via ClawdBot CLI:
clawdbot install ivangdavila/vueRequires:
User needs Vue expertise â from Composition API patterns to production optimization. Agent handles reactivity, component design, state management, and performance.
| Topic | File |
|-------|------|
| Reactivity patterns | reactivity.md |
| Component patterns | components.md |
| Composables design | composables.md |
| Performance optimization | performance.md |
is the recommended syntaxâcleaner and better performanceref for primitivesâaccess with .value in script, auto-unwrapped in templatereactive can't reassign whole objectâstate = {...} breaks reactivityreactive loses reactivityâuse toRefs(state) to preservearr[0] = x works, unlike Vue 2reactive({count: ref(0)}).count is number, not refcomputed for derived stateâcached, recalculates only when dependencies changewatch for side effectsâwhen you need to DO something in response to changescomputed should be pureâno side effects, no asyncwatchEffect for immediate reaction with auto-tracked dependenciesdeep: trueâor watch a getter functionwatch is lazy by defaultâuse immediate: true for initial runwatch(source, (newVal, oldVal) => {})watchEffect can't access old valueâuse watch if you need old/new comparisonconst stop = watch(...); stop()defineProps for type-safe propsâdefineProps<{ msg: string }>()defineEmits for type-safe eventsâdefineEmits<{ (e: 'update', val: string): void }>()v-model is :modelValue + @update:modelValueâcustom v-model with defineModel()default: () => ({})ref="name" + const name = ref(null)ânames must match exactlyonMounted, not during setupref on component gives component instanceâref on element gives DOM elementv-for becomes array of refsonMounted for DOM accessâcomponent mounted to DOMonUnmounted for cleanupâsubscriptions, timers, event listenersonBeforeMount runs before DOM insertârarely needed but exists wrapperprovide('key', value) in parentâinject('key') in any descendantinject('key', defaultVal)âthird param for factory functionuseRoute for current routeâreactive, use in setupuseRouter for navigationârouter.push('/path')beforeEach, beforeResolve, afterEachâreturn false to cancel with named viewsâmultiple views per routev-if vs v-showâv-if removes from DOM, v-show toggles displayv-for requiredâv-for="item in items" :key="item.id".prevent.stop vs .stop.prevent renders outside component treeGenerated Mar 1, 2026
Develop real-time data visualization dashboards for financial services or analytics platforms. Vue's reactivity system enables live updates without page refreshes, while Composition API organizes complex data-fetching and transformation logic into reusable composables.
Create dynamic product configurators where users customize items with real-time price updates and visual previews. Vue's computed properties handle derived pricing calculations, while template refs manage DOM interactions for product visualization components.
Build offline-capable web applications with smooth transitions and native-like interactions. Vue Router manages complex navigation flows with named views, while lifecycle hooks handle service worker registration and cache management for optimal performance.
Develop comprehensive administration interfaces with multi-step forms, data tables, and permission management. Provide/inject patterns share authentication state across deeply nested components, while watchers handle side effects like auto-saving and validation.
Create collaborative editing environments where multiple users interact simultaneously. Vue's reactivity traps ensure proper handling of shared state updates, while Teleport components manage modal dialogs outside the main component hierarchy.
Build subscription-based web applications with Vue's component architecture enabling rapid feature development. The modular nature of composables allows for easy maintenance and scaling as customer requirements evolve over time.
Offer custom web development services using Vue for client projects ranging from marketing sites to complex web applications. Vue's performance optimization capabilities help deliver fast-loading sites that improve client conversion rates.
Create and sell reusable Vue component libraries to other developers and teams. Leverage Vue's Composition API patterns to build flexible, well-documented components that solve common UI challenges across different industries.
đŹ Integration Tip
Start with Composition API patterns for new features while maintaining Options API for existing code. Use Vue Router for navigation and provide/inject for shared state instead of global variables.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui â no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.