@dianzhong/create-harness-app 0.1.0

package/templates/harness/full/.agents/skills/vue-best-practices/references/composables.md

@@ -0,0 +1,303 @@
+---
+title: Composable Organization Patterns
+impact: MEDIUM
+impactDescription: Well-structured composables improve maintainability, reusability, and update performance
+type: best-practice
+tags: [vue3, composables, composition-api, code-organization, api-design, readonly, utilities]
+---
+
+# Composable Organization Patterns
+
+**Impact: MEDIUM** - Treat composables as reusable, stateful building blocks and keep their code organized by feature concern. This keeps large components maintainable and prevents hard-to-debug mutation and API design issues.
+
+## Task List
+
+- Compose complex behavior from small, focused composables
+- Use options objects for composables with multiple optional parameters
+- Return readonly state when updates must flow through explicit actions
+- Keep pure utility functions as plain utilities, not composables
+- Organize composable and component code by feature concern, and extract composables when components grow
+
+## Compose Composables from Smaller Primitives
+
+**BAD:**
+
+```vue
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+const x = ref(0)
+const y = ref(0)
+const inside = ref(false)
+const el = ref(null)
+
+function onMove(e) {
+  x.value = e.pageX
+  y.value = e.pageY
+  if (!el.value) return
+  const r = el.value.getBoundingClientRect()
+  inside.value = x.value >= r.left && x.value <= r.right && y.value >= r.top && y.value <= r.bottom
+}
+
+onMounted(() => window.addEventListener('mousemove', onMove))
+onUnmounted(() => window.removeEventListener('mousemove', onMove))
+</script>
+```
+
+**GOOD:**
+
+```javascript
+// composables/useEventListener.js
+import { onMounted, onUnmounted, toValue } from 'vue'
+
+export function useEventListener(target, event, callback) {
+  onMounted(() => toValue(target).addEventListener(event, callback))
+  onUnmounted(() => toValue(target).removeEventListener(event, callback))
+}
+```
+
+```javascript
+// composables/useMouse.js
+import { ref } from 'vue'
+
+import { useEventListener } from './useEventListener'
+
+export function useMouse() {
+  const x = ref(0)
+  const y = ref(0)
+
+  useEventListener(window, 'mousemove', (e) => {
+    x.value = e.pageX
+    y.value = e.pageY
+  })
+
+  return { x, y }
+}
+```
+
+```javascript
+// composables/useMouseInElement.js
+import { computed } from 'vue'
+
+import { useMouse } from './useMouse'
+
+export function useMouseInElement(elementRef) {
+  const { x, y } = useMouse()
+
+  const isOutside = computed(() => {
+    if (!elementRef.value) return true
+    const rect = elementRef.value.getBoundingClientRect()
+    return (
+      x.value < rect.left || x.value > rect.right || y.value < rect.top || y.value > rect.bottom
+    )
+  })
+
+  return { x, y, isOutside }
+}
+```
+
+## Use Options Object Pattern for Composable Parameters
+
+**BAD:**
+
+```javascript
+export function useFetch(url, method, headers, timeout, retries, immediate) {
+  // hard to read and easy to misorder
+}
+
+useFetch('/api/users', 'GET', null, 5000, 3, true)
+```
+
+**GOOD:**
+
+```javascript
+export function useFetch(url, options = {}) {
+  const { method = 'GET', headers = {}, timeout = 30000, retries = 0, immediate = true } = options
+
+  // implementation
+  return { method, headers, timeout, retries, immediate }
+}
+
+useFetch('/api/users', {
+  method: 'POST',
+  timeout: 5000,
+  retries: 3,
+})
+```
+
+```typescript
+interface UseCounterOptions {
+  initial?: number
+  min?: number
+  max?: number
+  step?: number
+}
+
+export function useCounter(options: UseCounterOptions = {}) {
+  const { initial = 0, min = -Infinity, max = Infinity, step = 1 } = options
+  // implementation
+}
+```
+
+## Return Readonly State with Explicit Actions
+
+**BAD:**
+
+```javascript
+export function useCart() {
+  const items = ref([])
+  const total = computed(() => items.value.reduce((sum, item) => sum + item.price, 0))
+  return { items, total } // any consumer can mutate directly
+}
+
+const { items } = useCart()
+items.value.push({ id: 1, price: 10 })
+```
+
+**GOOD:**
+
+```javascript
+import { computed, readonly, ref } from 'vue'
+
+export function useCart() {
+  const _items = ref([])
+
+  const total = computed(() =>
+    _items.value.reduce((sum, item) => sum + item.price * item.quantity, 0),
+  )
+
+  function addItem(product, quantity = 1) {
+    const existing = _items.value.find((item) => item.id === product.id)
+    if (existing) {
+      existing.quantity += quantity
+      return
+    }
+    _items.value.push({ ...product, quantity })
+  }
+
+  function removeItem(productId) {
+    _items.value = _items.value.filter((item) => item.id !== productId)
+  }
+
+  return {
+    items: readonly(_items),
+    total,
+    addItem,
+    removeItem,
+  }
+}
+```
+
+## Keep Utilities as Utilities
+
+**BAD:**
+
+```javascript
+export function useFormatters() {
+  const formatDate = (date) => new Intl.DateTimeFormat('en-US').format(date)
+  const formatCurrency = (amount) =>
+    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount)
+  return { formatDate, formatCurrency }
+}
+
+const { formatDate } = useFormatters()
+```
+
+**GOOD:**
+
+```javascript
+// utils/formatters.js
+export function formatDate(date) {
+  return new Intl.DateTimeFormat('en-US').format(date)
+}
+
+export function formatCurrency(amount) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(amount)
+}
+```
+
+```javascript
+// composables/useInvoiceSummary.js
+import { computed } from 'vue'
+
+import { formatCurrency } from '@/utils/formatters'
+
+export function useInvoiceSummary(invoiceRef) {
+  const totalLabel = computed(() => formatCurrency(invoiceRef.value.total))
+  return { totalLabel }
+}
+```
+
+## Organize Composable and Component Code by Feature Concern
+
+**BAD:**
+
+```vue
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+
+const searchQuery = ref('')
+const items = ref([])
+const selected = ref(null)
+const showModal = ref(false)
+const sortBy = ref('name')
+const filter = ref('all')
+const loading = ref(false)
+
+const filtered = computed(() => items.value.filter((i) => i.category === filter.value))
+function openModal() {
+  showModal.value = true
+}
+const sorted = computed(() => [...filtered.value].sort(/* ... */))
+watch(searchQuery, () => {
+  /* ... */
+})
+onMounted(() => {
+  /* ... */
+})
+</script>
+```
+
+**GOOD:**
+
+```vue
+<script setup>
+import { useItems } from '@/composables/useItems'
+import { useSearch } from '@/composables/useSearch'
+import { useSelectionModal } from '@/composables/useSelectionModal'
+
+// Data
+const { items, loading, fetchItems } = useItems()
+
+// Search/filter/sort
+const { query, visibleItems } = useSearch(items)
+
+// Selection + modal
+const { selectedItem, isModalOpen, selectItem, closeModal } = useSelectionModal()
+</script>
+```
+
+```javascript
+// composables/useItems.js
+import { onMounted, ref } from 'vue'
+
+export function useItems() {
+  const items = ref([])
+  const loading = ref(false)
+
+  async function fetchItems() {
+    loading.value = true
+    try {
+      items.value = await api.getItems()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(fetchItems)
+  return { items, loading, fetchItems }
+}
+```

package/templates/harness/full/.agents/skills/vue-best-practices/references/directives.md

@@ -0,0 +1,168 @@
+---
+title: Directive Best Practices
+impact: MEDIUM
+impactDescription: Custom directives are powerful but easy to misuse; following patterns prevents leaks, invalid usage, and unclear abstractions
+type: best-practice
+tags: [vue3, directives, custom-directives, composition, typescript]
+---
+
+# Directive Best Practices
+
+**Impact: MEDIUM** - Directives are for low-level DOM access. Use them sparingly, keep them side-effect safe, and prefer components or composables when you need stateful or reusable UI behavior.
+
+## Task List
+
+- Use directives only when you need direct DOM access
+- Do not mutate directive arguments or binding objects
+- Clean up timers, listeners, and observers in `unmounted`
+- Register directives in `<script setup>` with the `v-` prefix
+- In TypeScript projects, type directive values and augment template directive types
+- Prefer components or composables for complex behavior
+
+## Treat Directive Arguments as Read-Only
+
+Directive bindings are not reactive storage. Don’t write to them.
+
+```ts
+const vFocus = {
+  mounted(el, binding) {
+    // binding.value is read-only
+    el.focus()
+  },
+}
+```
+
+## Avoid Directives on Components
+
+Directives apply to DOM elements. When used on components, they attach to the root element and can break if the root changes.
+
+**BAD:**
+
+```vue
+<MyInput v-focus />
+```
+
+**GOOD:**
+
+```vue
+<!-- MyInput.vue -->
+<script setup>
+const vFocus = (el) => el.focus()
+</script>
+
+<template>
+  <input v-focus />
+</template>
+```
+
+## Clean Up Side Effects in `unmounted`
+
+Any timers, listeners, or observers must be removed to avoid leaks.
+
+```ts
+const vResize = {
+  mounted(el) {
+    const observer = new ResizeObserver(() => {})
+    observer.observe(el)
+    el._observer = observer
+  },
+  unmounted(el) {
+    el._observer?.disconnect()
+  },
+}
+```
+
+## Prefer Function Shorthand for Single-Hook Directives
+
+If you only need `mounted`/`updated`, use the function form.
+
+```ts
+const vAutofocus = (el) => el.focus()
+```
+
+## Use the `v-` Prefix and Script Setup Registration
+
+```vue
+<script setup>
+const vFocus = (el) => el.focus()
+</script>
+
+<template>
+  <input v-focus />
+</template>
+```
+
+## Type Custom Directives in TypeScript Projects
+
+Use `Directive<Element, ValueType>` so `binding.value` is typed, and augment Vue's template types so directives are recognized in SFC templates.
+
+**BAD:**
+
+```ts
+// Untyped directive value and no template type augmentation
+export const vHighlight = {
+  mounted(el, binding) {
+    el.style.backgroundColor = binding.value
+  },
+}
+```
+
+**GOOD:**
+
+```ts
+import type { Directive } from 'vue'
+
+type HighlightValue = string
+
+export const vHighlight = {
+  mounted(el, binding) {
+    el.style.backgroundColor = binding.value
+  },
+} satisfies Directive<HTMLElement, HighlightValue>
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    vHighlight: typeof vHighlight
+  }
+}
+```
+
+## Handle SSR with `getSSRProps`
+
+Directive hooks such as `mounted` and `updated` do not run during SSR. If a directive sets attributes/classes that affect rendered HTML, provide an SSR equivalent via `getSSRProps` to avoid hydration mismatches.
+
+**BAD:**
+
+```ts
+const vTooltip = {
+  mounted(el, binding) {
+    el.setAttribute('data-tooltip', binding.value)
+    el.classList.add('has-tooltip')
+  },
+}
+```
+
+**GOOD:**
+
+```ts
+const vTooltip = {
+  mounted(el, binding) {
+    el.setAttribute('data-tooltip', binding.value)
+    el.classList.add('has-tooltip')
+  },
+  getSSRProps(binding) {
+    return {
+      'data-tooltip': binding.value,
+      class: 'has-tooltip',
+    }
+  },
+}
+```
+
+## Prefer Declarative Templates When Possible
+
+If a standard attribute or binding works, use it instead of a directive.
+
+## Decide Between Directives and Components
+
+Use a directive for DOM-level behavior. Use a component when behavior affects structure, state, or rendering.

package/templates/harness/full/.agents/skills/vue-best-practices/references/perf-avoid-component-abstraction-in-lists.md

@@ -0,0 +1,177 @@
+---
+title: Avoid Excessive Component Abstraction in Large Lists
+impact: MEDIUM
+impactDescription: Each component instance has memory and render overhead - abstractions multiply this in lists
+type: efficiency
+tags: [vue3, performance, components, abstraction, lists, optimization]
+---
+
+# Avoid Excessive Component Abstraction in Large Lists
+
+**Impact: MEDIUM** - Component instances are more expensive than plain DOM nodes. While abstractions improve code organization, unnecessary nesting creates overhead. In large lists, this overhead multiplies - 100 items with 3 levels of abstraction means 300+ component instances instead of 100.
+
+Don't avoid abstraction entirely, but be mindful of component depth in frequently-rendered elements like list items.
+
+## Task List
+
+- Review list item components for unnecessary wrapper components
+- Consider flattening component hierarchies in hot paths
+- Use native elements when a component adds no value
+- Profile component counts using Vue DevTools
+- Focus optimization efforts on the most-rendered components
+
+**BAD:**
+
+```vue
+<!-- BAD: Deep abstraction in list items -->
+<template>
+  <div class="user-list">
+    <!-- For 100 users: Creates 400 component instances -->
+    <UserCard v-for="user in users" :key="user.id" :user="user" />
+  </div>
+</template>
+
+<!-- UserCard.vue -->
+<template>
+  <Card>
+    <!-- Wrapper component #1 -->
+    <CardHeader>
+      <!-- Wrapper component #2 -->
+      <UserAvatar :src="user.avatar" />
+      <!-- Wrapper component #3 -->
+    </CardHeader>
+    <CardBody>
+      <!-- Wrapper component #4 -->
+      <Text>{{ user.name }}</Text>
+    </CardBody>
+  </Card>
+</template>
+
+<!-- Each UserCard creates: Card + CardHeader + CardBody + UserAvatar + Text
+     100 users = 500+ component instances -->
+```
+
+**GOOD:**
+
+```vue
+<!-- GOOD: Flattened structure in list items -->
+<script setup>
+defineProps({
+  user: Object,
+})
+</script>
+
+<!-- UserCard.vue - Flattened, uses native elements -->
+<template>
+  <div class="user-list">
+    <!-- For 100 users: Creates 100 component instances -->
+    <UserCard v-for="user in users" :key="user.id" :user="user" />
+  </div>
+</template>
+
+<template>
+  <div class="card">
+    <div class="card-header">
+      <img :src="user.avatar" :alt="user.name" class="avatar" />
+    </div>
+    <div class="card-body">
+      <span class="user-name">{{ user.name }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Styles that would have been in Card, CardHeader, etc. */
+.card {
+  /* ... */
+}
+.card-header {
+  /* ... */
+}
+.card-body {
+  /* ... */
+}
+.avatar {
+  /* ... */
+}
+</style>
+```
+
+## When Abstraction Is Still Worth It
+
+```vue
+<!-- Component abstraction is valuable when: -->
+
+<!-- 1. Complex behavior is encapsulated -->
+<UserStatusIndicator :user="user" />  <!-- Has logic, tooltips, etc. -->
+
+<!-- 2. Reused outside of the hot path -->
+<Card>  <!-- OK to use in one-off places, not in 100-item lists -->
+
+<!-- 3. The list itself is small -->
+<template v-if="items.length < 20">
+  <FancyItem v-for="item in items" :key="item.id" />
+</template>
+
+<!-- 4. Virtualization is used (only ~20 items rendered at once) -->
+<RecycleScroller :items="items">
+  <template #default="{ item }">
+    <ComplexItem :item="item" />  <!-- OK - only 20 instances exist -->
+  </template>
+</RecycleScroller>
+```
+
+## Measuring Component Overhead
+
+```javascript
+// In development, profile component counts
+import { getCurrentInstance, onMounted } from 'vue'
+
+onMounted(() => {
+  const instance = getCurrentInstance()
+  let count = 0
+
+  function countComponents(vnode) {
+    if (vnode.component) count++
+    if (vnode.children) {
+      vnode.children.forEach((child) => {
+        if (child.component || child.children) countComponents(child)
+      })
+    }
+  }
+
+  // Use Vue DevTools instead for accurate counts
+  console.log('Check Vue DevTools Components tab for instance counts')
+})
+```
+
+## Alternatives to Wrapper Components
+
+```vue
+<!-- Instead of a <Button> component for styling: -->
+<button class="btn btn-primary">
+Click
+</button>
+
+<!-- Instead of a <Text> component: -->
+<span class="text-body">
+{{ content }}
+</span>
+
+<!-- Instead of layout wrapper components in lists: -->
+<div class="flex items-center gap-2">
+  <!-- content -->
+</div>
+
+<!-- Use CSS classes or Tailwind instead of component abstractions for styling -->
+```
+
+## Impact Calculation
+
+| List Size  | Components per Item | Total Instances | Memory Impact |
+| ---------- | ------------------- | --------------- | ------------- |
+| 100 items  | 1 (flat)            | 100             | Baseline      |
+| 100 items  | 3 (nested)          | 300             | ~3x memory    |
+| 100 items  | 5 (deeply nested)   | 500             | ~5x memory    |
+| 1000 items | 1 (flat)            | 1000            | High          |
+| 1000 items | 5 (deeply nested)   | 5000            | Very High     |