@nockdev/awf 6.2.0

package/.agent/skills/cross-cutting/ui-ux-pro-max/data/stacks/vue.yaml

@@ -0,0 +1,485 @@
+metadata:
+  skill: ui-ux-pro-max
+  domain: vue
+  version: 6.2.0
+  updated: '2026-02-05'
+  migrated_from: vue.csv
+  patterns_count: 49
+  columns:
+  - 'No'
+  - Category
+  - Guideline
+  - Description
+  - Do
+  - Don't
+  - Code Good
+  - Code Bad
+  - Severity
+  - Docs URL
+patterns:
+- id: '1'
+  category: Composition
+  guideline: Use Composition API for new projects
+  description: Composition API offers better TypeScript support and logic reuse
+  do: <script setup> for components
+  don_t: Options API for new projects
+  code_good: <script setup>
+  code_bad: export default { data() }
+  severity: Medium
+  docs_url: https://vuejs.org/guide/extras/composition-api-faq.html
+- id: '2'
+  category: Composition
+  guideline: Use script setup syntax
+  description: Cleaner syntax with automatic exports
+  do: <script setup> with defineProps
+  don_t: setup() function manually
+  code_good: <script setup>
+  code_bad: <script> setup() { return {} }
+  severity: Low
+  docs_url: https://vuejs.org/api/sfc-script-setup.html
+- id: '3'
+  category: Reactivity
+  guideline: Use ref for primitives
+  description: ref() for primitive values that need reactivity
+  do: ref() for strings numbers booleans
+  don_t: reactive() for primitives
+  code_good: const count = ref(0)
+  code_bad: const count = reactive(0)
+  severity: Medium
+  docs_url: https://vuejs.org/guide/essentials/reactivity-fundamentals.html
+- id: '4'
+  category: Reactivity
+  guideline: Use reactive for objects
+  description: reactive() for complex objects and arrays
+  do: reactive() for objects with multiple properties
+  don_t: ref() for complex objects
+  code_good: 'const state = reactive({ user: null })'
+  code_bad: 'const state = ref({ user: null })'
+  severity: Medium
+- id: '5'
+  category: Reactivity
+  guideline: Access ref values with .value
+  description: Remember .value in script unwrap in template
+  do: Use .value in script
+  don_t: Forget .value in script
+  code_good: count.value++
+  code_bad: count++ (in script)
+  severity: High
+- id: '6'
+  category: Reactivity
+  guideline: Use computed for derived state
+  description: Computed properties cache and update automatically
+  do: computed() for derived values
+  don_t: Methods for derived values
+  code_good: const doubled = computed(() => count.value * 2)
+  code_bad: const doubled = () => count.value * 2
+  severity: Medium
+  docs_url: https://vuejs.org/guide/essentials/computed.html
+- id: '7'
+  category: Reactivity
+  guideline: Use shallowRef for large objects
+  description: Avoid deep reactivity for performance
+  do: shallowRef for large data structures
+  don_t: ref for large nested objects
+  code_good: const bigData = shallowRef(largeObject)
+  code_bad: const bigData = ref(largeObject)
+  severity: Medium
+  docs_url: https://vuejs.org/api/reactivity-advanced.html#shallowref
+- id: '8'
+  category: Watchers
+  guideline: Use watchEffect for simple cases
+  description: Auto-tracks dependencies
+  do: watchEffect for simple reactive effects
+  don_t: watch with explicit deps when not needed
+  code_good: watchEffect(() => console.log(count.value))
+  code_bad: watch(count, (val) => console.log(val))
+  severity: Low
+  docs_url: https://vuejs.org/guide/essentials/watchers.html
+- id: '9'
+  category: Watchers
+  guideline: Use watch for specific sources
+  description: Explicit control over what to watch
+  do: watch with specific refs
+  don_t: watchEffect for complex conditional logic
+  code_good: watch(userId, fetchUser)
+  code_bad: watchEffect with conditionals
+  severity: Medium
+- id: '10'
+  category: Watchers
+  guideline: Clean up side effects
+  description: Return cleanup function in watchers
+  do: Return cleanup in watchEffect
+  don_t: Leave subscriptions open
+  code_good: watchEffect((onCleanup) => { onCleanup(unsub) })
+  code_bad: watchEffect without cleanup
+  severity: High
+- id: '11'
+  category: Props
+  guideline: Define props with defineProps
+  description: Type-safe prop definitions
+  do: defineProps with TypeScript
+  don_t: Props without types
+  code_good: 'defineProps<{ msg: string }>()'
+  code_bad: defineProps(['msg'])
+  severity: Medium
+  docs_url: https://vuejs.org/guide/typescript/composition-api.html#typing-component-props
+- id: '12'
+  category: Props
+  guideline: Use withDefaults for default values
+  description: Provide defaults for optional props
+  do: withDefaults with defineProps
+  don_t: Defaults in destructuring
+  code_good: 'withDefaults(defineProps<Props>(), { count: 0 })'
+  code_bad: const { count = 0 } = defineProps()
+  severity: Medium
+- id: '13'
+  category: Props
+  guideline: Avoid mutating props
+  description: Props should be read-only
+  do: Emit events to parent for changes
+  don_t: Direct prop mutation
+  code_good: emit('update:modelValue', newVal)
+  code_bad: props.modelValue = newVal
+  severity: High
+- id: '14'
+  category: Emits
+  guideline: Define emits with defineEmits
+  description: Type-safe event emissions
+  do: defineEmits with types
+  don_t: Emit without definition
+  code_good: 'defineEmits<{ change: [id: number] }>()'
+  code_bad: emit('change', id) without define
+  severity: Medium
+  docs_url: https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits
+- id: '15'
+  category: Emits
+  guideline: Use v-model for two-way binding
+  description: Simplified parent-child data flow
+  do: v-model with modelValue prop
+  don_t: :value + @input manually
+  code_good: <Child v-model="value"/>
+  code_bad: <Child :value="value" @input="value = $event"/>
+  severity: Low
+  docs_url: https://vuejs.org/guide/components/v-model.html
+- id: '16'
+  category: Lifecycle
+  guideline: Use onMounted for DOM access
+  description: DOM is ready in onMounted
+  do: onMounted for DOM operations
+  don_t: Access DOM in setup directly
+  code_good: onMounted(() => el.value.focus())
+  code_bad: el.value.focus() in setup
+  severity: High
+  docs_url: https://vuejs.org/api/composition-api-lifecycle.html
+- id: '17'
+  category: Lifecycle
+  guideline: Clean up in onUnmounted
+  description: Remove listeners and subscriptions
+  do: onUnmounted for cleanup
+  don_t: Leave listeners attached
+  code_good: onUnmounted(() => window.removeEventListener())
+  code_bad: No cleanup on unmount
+  severity: High
+- id: '18'
+  category: Lifecycle
+  guideline: Avoid onBeforeMount for data
+  description: Use onMounted or setup for data fetching
+  do: Fetch in onMounted or setup
+  don_t: Fetch in onBeforeMount
+  code_good: onMounted(async () => await fetchData())
+  code_bad: onBeforeMount(async () => await fetchData())
+  severity: Low
+- id: '19'
+  category: Components
+  guideline: Use single-file components
+  description: Keep template script style together
+  do: .vue files for components
+  don_t: Separate template/script files
+  code_good: Component.vue with all parts
+  code_bad: Component.js + Component.html
+  severity: Low
+- id: '20'
+  category: Components
+  guideline: Use PascalCase for components
+  description: Consistent component naming
+  do: PascalCase in imports and templates
+  don_t: kebab-case in script
+  code_good: <MyComponent/>
+  code_bad: <my-component/>
+  severity: Low
+  docs_url: https://vuejs.org/style-guide/rules-strongly-recommended.html
+- id: '21'
+  category: Components
+  guideline: Prefer composition over mixins
+  description: Composables replace mixins
+  do: Composables for shared logic
+  don_t: Mixins for code reuse
+  code_good: const { data } = useApi()
+  code_bad: 'mixins: [apiMixin]'
+  severity: Medium
+- id: '22'
+  category: Composables
+  guideline: Name composables with use prefix
+  description: Convention for composable functions
+  do: useFetch useAuth useForm
+  don_t: getData or fetchApi
+  code_good: export function useFetch()
+  code_bad: export function fetchData()
+  severity: Medium
+  docs_url: https://vuejs.org/guide/reusability/composables.html
+- id: '23'
+  category: Composables
+  guideline: Return refs from composables
+  description: Maintain reactivity when destructuring
+  do: Return ref values
+  don_t: Return reactive objects that lose reactivity
+  code_good: 'return { data: ref(null) }'
+  code_bad: 'return reactive({ data: null })'
+  severity: Medium
+- id: '24'
+  category: Composables
+  guideline: Accept ref or value params
+  description: Use toValue for flexible inputs
+  do: toValue() or unref() for params
+  don_t: Only accept ref or only value
+  code_good: const val = toValue(maybeRef)
+  code_bad: const val = maybeRef.value
+  severity: Low
+  docs_url: https://vuejs.org/api/reactivity-utilities.html#tovalue
+- id: '25'
+  category: Templates
+  guideline: Use v-bind shorthand
+  description: Cleaner template syntax
+  do: :prop instead of v-bind:prop
+  don_t: Full v-bind syntax
+  code_good: <div :class="cls">
+  code_bad: <div v-bind:class="cls">
+  severity: Low
+- id: '26'
+  category: Templates
+  guideline: Use v-on shorthand
+  description: Cleaner event binding
+  do: '@event instead of v-on:event'
+  don_t: Full v-on syntax
+  code_good: <button @click="handler">
+  code_bad: <button v-on:click="handler">
+  severity: Low
+- id: '27'
+  category: Templates
+  guideline: Avoid v-if with v-for
+  description: v-if has higher priority causes issues
+  do: Wrap in template or computed filter
+  don_t: v-if on same element as v-for
+  code_good: <template v-for><div v-if>
+  code_bad: <div v-for v-if>
+  severity: High
+  docs_url: https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for
+- id: '28'
+  category: Templates
+  guideline: Use key with v-for
+  description: Proper list rendering and updates
+  do: Unique key for each item
+  don_t: Index as key for dynamic lists
+  code_good: v-for="item in items" :key="item.id"
+  code_bad: v-for="(item, i) in items" :key="i"
+  severity: High
+- id: '29'
+  category: State
+  guideline: Use Pinia for global state
+  description: Official state management for Vue 3
+  do: Pinia stores for shared state
+  don_t: Vuex for new projects
+  code_good: const store = useCounterStore()
+  code_bad: Vuex with mutations
+  severity: Medium
+  docs_url: https://pinia.vuejs.org/
+- id: '30'
+  category: State
+  guideline: Define stores with defineStore
+  description: Composition API style stores
+  do: Setup stores with defineStore
+  don_t: Options stores for complex state
+  code_good: defineStore('counter', () => {})
+  code_bad: defineStore('counter', { state })
+  severity: Low
+- id: '31'
+  category: State
+  guideline: Use storeToRefs for destructuring
+  description: Maintain reactivity when destructuring
+  do: storeToRefs(store)
+  don_t: Direct destructuring
+  code_good: const { count } = storeToRefs(store)
+  code_bad: const { count } = store
+  severity: High
+  docs_url: https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store
+- id: '32'
+  category: Routing
+  guideline: Use useRouter and useRoute
+  description: Composition API router access
+  do: useRouter() useRoute() in setup
+  don_t: this.$router this.$route
+  code_good: const router = useRouter()
+  code_bad: this.$router.push()
+  severity: Medium
+  docs_url: https://router.vuejs.org/guide/advanced/composition-api.html
+- id: '33'
+  category: Routing
+  guideline: Lazy load route components
+  description: Code splitting for routes
+  do: () => import() for components
+  don_t: Static imports for all routes
+  code_good: 'component: () => import(''./Page.vue'')'
+  code_bad: 'component: Page'
+  severity: Medium
+  docs_url: https://router.vuejs.org/guide/advanced/lazy-loading.html
+- id: '34'
+  category: Routing
+  guideline: Use navigation guards
+  description: Protect routes and handle redirects
+  do: beforeEach for auth checks
+  don_t: Check auth in each component
+  code_good: router.beforeEach((to) => {})
+  code_bad: Check auth in onMounted
+  severity: Medium
+- id: '35'
+  category: Performance
+  guideline: Use v-once for static content
+  description: Skip re-renders for static elements
+  do: v-once on never-changing content
+  don_t: v-once on dynamic content
+  code_good: <div v-once>{{ staticText }}</div>
+  code_bad: <div v-once>{{ dynamicText }}</div>
+  severity: Low
+  docs_url: https://vuejs.org/api/built-in-directives.html#v-once
+- id: '36'
+  category: Performance
+  guideline: Use v-memo for expensive lists
+  description: Memoize list items
+  do: v-memo with dependency array
+  don_t: Re-render entire list always
+  code_good: <div v-for v-memo="[item.id]">
+  code_bad: <div v-for> without memo
+  severity: Medium
+  docs_url: https://vuejs.org/api/built-in-directives.html#v-memo
+- id: '37'
+  category: Performance
+  guideline: Use shallowReactive for flat objects
+  description: Avoid deep reactivity overhead
+  do: shallowReactive for flat state
+  don_t: reactive for simple objects
+  code_good: 'shallowReactive({ count: 0 })'
+  code_bad: 'reactive({ count: 0 })'
+  severity: Low
+- id: '38'
+  category: Performance
+  guideline: Use defineAsyncComponent
+  description: Lazy load heavy components
+  do: defineAsyncComponent for modals dialogs
+  don_t: Import all components eagerly
+  code_good: defineAsyncComponent(() => import())
+  code_bad: import HeavyComponent from
+  severity: Medium
+  docs_url: https://vuejs.org/guide/components/async.html
+- id: '39'
+  category: TypeScript
+  guideline: Use generic components
+  description: Type-safe reusable components
+  do: Generic with defineComponent
+  don_t: Any types in components
+  code_good: <script setup lang="ts" generic="T">
+  code_bad: <script setup> without types
+  severity: Medium
+  docs_url: https://vuejs.org/guide/typescript/composition-api.html
+- id: '40'
+  category: TypeScript
+  guideline: Type template refs
+  description: Proper typing for DOM refs
+  do: ref<HTMLInputElement>(null)
+  don_t: ref(null) without type
+  code_good: const input = ref<HTMLInputElement>(null)
+  code_bad: const input = ref(null)
+  severity: Medium
+- id: '41'
+  category: TypeScript
+  guideline: Use PropType for complex props
+  description: Type complex prop types
+  do: PropType<User> for object props
+  don_t: Object without type
+  code_good: 'type: Object as PropType<User>'
+  code_bad: 'type: Object'
+  severity: Medium
+- id: '42'
+  category: Testing
+  guideline: Use Vue Test Utils
+  description: Official testing library
+  do: mount shallowMount for components
+  don_t: Manual DOM testing
+  code_good: import { mount } from '@vue/test-utils'
+  code_bad: document.createElement
+  severity: Medium
+  docs_url: https://test-utils.vuejs.org/
+- id: '43'
+  category: Testing
+  guideline: Test component behavior
+  description: Focus on inputs and outputs
+  do: Test props emit and rendered output
+  don_t: Test internal implementation
+  code_good: expect(wrapper.text()).toContain()
+  code_bad: expect(wrapper.vm.internalState)
+  severity: Medium
+- id: '44'
+  category: Forms
+  guideline: Use v-model modifiers
+  description: Built-in input handling
+  do: .lazy .number .trim modifiers
+  don_t: Manual input parsing
+  code_good: <input v-model.number="age">
+  code_bad: <input v-model="age"> then parse
+  severity: Low
+  docs_url: https://vuejs.org/guide/essentials/forms.html#modifiers
+- id: '45'
+  category: Forms
+  guideline: Use VeeValidate or FormKit
+  description: Form validation libraries
+  do: VeeValidate for complex forms
+  don_t: Manual validation logic
+  code_good: useField useForm from vee-validate
+  code_bad: Custom validation in each input
+  severity: Medium
+- id: '46'
+  category: Accessibility
+  guideline: Use semantic elements
+  description: Proper HTML elements in templates
+  do: button nav main for purpose
+  don_t: div for everything
+  code_good: <button @click>
+  code_bad: <div @click>
+  severity: High
+- id: '47'
+  category: Accessibility
+  guideline: Bind aria attributes dynamically
+  description: Keep ARIA in sync with state
+  do: :aria-expanded="isOpen"
+  don_t: Static ARIA values
+  code_good: :aria-expanded="menuOpen"
+  code_bad: aria-expanded="true"
+  severity: Medium
+- id: '48'
+  category: SSR
+  guideline: Use Nuxt for SSR
+  description: Full-featured SSR framework
+  do: Nuxt 3 for SSR apps
+  don_t: Manual SSR setup
+  code_good: npx nuxi init my-app
+  code_bad: Custom SSR configuration
+  severity: Medium
+  docs_url: https://nuxt.com/
+- id: '49'
+  category: SSR
+  guideline: Handle hydration mismatches
+  description: Client/server content must match
+  do: ClientOnly for browser-only content
+  don_t: Different content server/client
+  code_good: <ClientOnly><BrowserWidget/></ClientOnly>
+  code_bad: <div>{{ Date.now() }}</div>
+  severity: High