@harness-engineering/cli 1.23.1 → 1.24.0

package/dist/agents/skills/codex/vue-async-components/skill.yaml

@@ -0,0 +1,35 @@
+name: vue-async-components
+version: '1.0.0'
+description: Load Vue components lazily to reduce initial bundle size using defineAsyncComponent
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-teleport-pattern
+  - vue-composables-pattern
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - async-components
+  - lazy-loading
+  - code-splitting
+  - defineAsyncComponent
+  - suspense
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/async-components'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/codex/vue-component-events/SKILL.md

@@ -0,0 +1,72 @@
+# Vue Component Events
+
+> Communicate from child to parent components using emits and defineEmits
+
+## When to Use
+
+- A child component needs to notify its parent of user actions or state changes
+- Implementing form inputs, buttons, or interactive components that report values upward
+- Building reusable components with a clear input/output contract (props down, events up)
+
+## Instructions
+
+1. Declare events with `defineEmits<{ eventName: [payload: Type] }>()` in `<script setup>`.
+2. Emit events with `emit('eventName', payload)`.
+3. The parent listens with `@event-name="handler"` (kebab-case in template).
+4. Always type your emit payloads for compile-time safety.
+
+```vue
+<!-- ChildButton.vue -->
+<script setup lang="ts">
+const emit = defineEmits<{
+  click: [id: number];
+  update: [value: string];
+}>();
+</script>
+
+<template>
+  <button @click="emit('click', 42)">Click</button>
+</template>
+
+<!-- Parent.vue -->
+<ChildButton @click="handleClick" @update="handleUpdate" />
+```
+
+5. Use `v-model` as syntactic sugar for an `update:modelValue` event pattern.
+6. Validate emits at runtime by passing a validation function to `defineEmits`.
+
+## Details
+
+Vue's event system follows a "props down, events up" pattern. Parents pass data to children via props; children notify parents via emitted events. This creates a clear, unidirectional data flow that is easy to trace and debug.
+
+**Trade-offs:**
+
+- Events only travel one level up — for deeply nested communication, use `provide`/`inject` or a store
+- Untyped emits (array syntax) provide no compile-time safety — always use the typed syntax
+- Event names are strings — typos are caught at runtime, not compile time (unless using TypeScript with `defineEmits`)
+
+**When NOT to use:**
+
+- For deeply nested parent-child communication — use `provide`/`inject` or Pinia
+- For sibling component communication — use a shared store or event bus (though event buses are discouraged in Vue 3)
+- When the parent does not need to know about the event — side effects belong in the child
+
+## Source
+
+https://patterns.dev/vue/component-events
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/codex/vue-component-events/skill.yaml

@@ -0,0 +1,35 @@
+name: vue-component-events
+version: '1.0.0'
+description: Communicate from child to parent components using emits and defineEmits
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-provide-inject
+  - vue-composables-pattern
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - emit
+  - defineEmits
+  - v-on
+  - custom-events
+  - parent-child-communication
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/component-events'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/codex/vue-composables-pattern/SKILL.md

@@ -0,0 +1,75 @@
+# Vue Composables Pattern
+
+> Extract and reuse stateful logic across components using Vue composables
+
+## When to Use
+
+- Multiple components share the same stateful logic (e.g., window size tracking, API fetching, form validation)
+- You want to extract complex logic out of a component's `<script setup>` for readability and reuse
+- Replacing Vue 2 mixins with a more explicit, composable approach
+
+## Instructions
+
+1. Create a function prefixed with `use` (e.g., `useWindowSize`, `useFetch`).
+2. Inside, use `ref`, `reactive`, `computed`, `watch`, and lifecycle hooks as needed.
+3. Return only what consumers need — keep internal state private.
+4. Co-locate composable files with their primary consumer or place in a `composables/` directory.
+
+```typescript
+// composables/useWindowSize.ts
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useWindowSize() {
+  const width = ref(window.innerWidth);
+  const height = ref(window.innerHeight);
+
+  function update() {
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  }
+
+  onMounted(() => window.addEventListener('resize', update));
+  onUnmounted(() => window.removeEventListener('resize', update));
+
+  return { width, height };
+}
+```
+
+5. Composables can accept parameters (refs or plain values) for configuration.
+6. Return cleanup functions or use lifecycle hooks to handle side-effect teardown.
+
+## Details
+
+Composables are the Vue 3 Composition API's answer to code reuse. They replace mixins, which suffered from namespace collisions, implicit dependencies, and unclear data sources. A composable is a plain function that uses Vue's reactivity primitives, making dependencies explicit.
+
+**Trade-offs:**
+
+- Composables must be called during `setup()` — they cannot be used conditionally or in loops (similar to React hooks rules)
+- Deeply nested composable calls can make the dependency chain hard to trace
+- Over-extracting into composables can fragment logic that is easier to understand inline
+
+**When NOT to use:**
+
+- For stateless utility functions — just export a plain function, no need for Vue reactivity
+- When the logic is used by only one component — inline it in `<script setup>` until reuse is needed
+- For global state — use Pinia stores instead of a composable with module-level state
+
+## Source
+
+https://patterns.dev/vue/composables-pattern
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/codex/vue-composables-pattern/skill.yaml

@@ -0,0 +1,34 @@
+name: vue-composables-pattern
+version: '1.0.0'
+description: Extract and reuse stateful logic across components using Vue composables
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-reactive-refs
+  - vue-watchers-pattern
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - composables
+  - use-prefix
+  - reusable-logic
+  - composition-api
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/composables-pattern'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/codex/vue-directive-pattern/SKILL.md

@@ -0,0 +1,66 @@
+# Vue Directive Pattern
+
+> Create custom Vue directives for low-level DOM manipulation and reusable DOM behavior
+
+## When to Use
+
+- You need reusable DOM manipulation logic (auto-focus, click-outside, intersection observer, tooltips)
+- The behavior is purely DOM-level and does not involve component state or rendering
+- Integrating third-party libraries that need direct DOM access
+
+## Instructions
+
+1. Define a directive as an object with lifecycle hooks (`mounted`, `updated`, `unmounted`).
+2. Register globally via `app.directive('name', directiveObj)` or locally in `<script setup>` with `vName` convention.
+3. Access the element as the first argument and binding value as the second.
+4. Use directives only for DOM manipulation — for logic, prefer composables.
+
+```typescript
+// v-focus directive — auto-focuses an input on mount
+const vFocus = {
+  mounted(el: HTMLElement) {
+    el.focus();
+  },
+};
+
+// Usage in template: <input v-focus />
+```
+
+5. Clean up event listeners and observers in the `unmounted` hook to prevent memory leaks.
+6. Use `binding.value` to pass dynamic data: `<div v-tooltip="'Hello'">`.
+
+## Details
+
+Custom directives give you low-level access to DOM elements. They run at specific lifecycle points (created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted) and receive the element and binding information. Vue's built-in directives (`v-if`, `v-show`, `v-model`) are implemented the same way.
+
+**Trade-offs:**
+
+- Directives are harder to test than composables — they require a real or mocked DOM
+- No reactive return value — directives modify the DOM imperatively, not declaratively
+- Overusing directives leads to "jQuery-style" code that bypasses Vue's reactivity
+
+**When NOT to use:**
+
+- When a composable can achieve the same result — composables are easier to test and compose
+- For complex component behavior — use a component, not a directive
+- When the DOM manipulation is a one-time setup — inline it in `onMounted`
+
+## Source
+
+https://patterns.dev/vue/directive-pattern
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/codex/vue-directive-pattern/skill.yaml

@@ -0,0 +1,34 @@
+name: vue-directive-pattern
+version: '1.0.0'
+description: Create custom Vue directives for low-level DOM manipulation and reusable DOM behavior
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-composables-pattern
+  - vue-renderless-components
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - custom-directive
+  - v-directive
+  - dom-manipulation
+  - directive-hooks
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/directive-pattern'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/codex/vue-pinia-pattern/SKILL.md

@@ -0,0 +1,69 @@
+# Vue Pinia Pattern
+
+> Manage shared application state with Pinia stores in the Options or Setup style
+
+## When to Use
+
+- Multiple components across different parts of the app need to share and mutate the same state
+- You need DevTools integration for state inspection, time-travel debugging, and hot-module replacement
+- Replacing Vuex in a Vue 3 application
+
+## Instructions
+
+1. Define a store with `defineStore('id', { state, getters, actions })` or the Setup syntax.
+2. Prefer the Setup syntax for composable-style stores: `defineStore('id', () => { ... })`.
+3. Use `storeToRefs()` when destructuring reactive state from a store.
+4. Keep stores focused — one store per domain concept, not one global store.
+
+```typescript
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0);
+  const doubled = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+  return { count, doubled, increment };
+});
+```
+
+5. Access stores in components: `const store = useCounterStore()`.
+6. Use `store.$reset()` (Options API stores only) to reset state to initial values.
+
+## Details
+
+Pinia is the official state management library for Vue 3. It replaces Vuex with a simpler, type-safe API. Pinia stores are reactive — components that use store state automatically re-render when it changes. Stores are lazy-loaded on first use.
+
+**Trade-offs:**
+
+- Adds a dependency — for simple apps, `provide`/`inject` or composables may suffice
+- Setup-style stores cannot use `$reset()` — you must implement reset logic manually
+- Stores are singletons by default — in SSR, each request needs its own Pinia instance to avoid cross-request state pollution
+
+**When NOT to use:**
+
+- For component-local state — use `ref()` or `reactive()` in `<script setup>`
+- For parent-child communication — use props and emits
+- When the state is only shared between a parent and its direct children — use `provide`/`inject`
+
+## Source
+
+https://patterns.dev/vue/pinia-pattern
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/codex/vue-pinia-pattern/skill.yaml

@@ -0,0 +1,35 @@
+name: vue-pinia-pattern
+version: '1.0.0'
+description: Manage shared application state with Pinia stores in the Options or Setup style
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-provide-inject
+  - vue-composables-pattern
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - pinia
+  - state-management
+  - store
+  - actions
+  - getters
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/pinia-pattern'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/codex/vue-provide-inject/SKILL.md

@@ -0,0 +1,66 @@
+# Vue Provide / Inject
+
+> Share data across a component tree without prop-drilling using provide/inject
+
+## When to Use
+
+- A parent component needs to share data with deeply nested descendants
+- You want to avoid passing props through intermediate components that do not use them
+- Implementing theme, locale, or configuration providers at the app level
+
+## Instructions
+
+1. In the ancestor component, call `provide(key, value)` inside `<script setup>`.
+2. In any descendant, call `const value = inject(key)` to receive the provided value.
+3. Use `InjectionKey<T>` for type-safe provide/inject in TypeScript.
+4. Provide reactive values (`ref` or `reactive`) so descendants receive live updates.
+5. Always provide a default value or document that `inject()` may return `undefined`.
+
+```typescript
+// Parent — provides theme
+import { provide, ref } from 'vue';
+const theme = ref('light');
+provide('theme', theme);
+
+// Deep child — injects theme
+import { inject } from 'vue';
+const theme = inject('theme', ref('light'));
+```
+
+6. Use Symbol keys to avoid naming collisions between providers.
+
+## Details
+
+Vue's `provide`/`inject` is a dependency injection mechanism scoped to the component tree. A provider makes a value available to all its descendants, regardless of depth. Unlike props, the intermediate components do not need to know about or forward the value.
+
+**Trade-offs:**
+
+- Implicit dependencies — it is not obvious from a component's props what injected values it depends on
+- Debugging is harder — there is no props panel in DevTools for injected values (though Vue DevTools does show provide/inject)
+- Overuse leads to "spooky action at a distance" — changes in a provider affect distant descendants
+
+**When NOT to use:**
+
+- When only one level of nesting exists — just pass a prop
+- For application-wide global state — use Pinia stores instead
+- When multiple providers might conflict — the closest ancestor's provide wins, which can be confusing
+
+## Source
+
+https://patterns.dev/vue/provide-inject
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/codex/vue-provide-inject/skill.yaml

@@ -0,0 +1,35 @@
+name: vue-provide-inject
+version: '1.0.0'
+description: Share data across a component tree without prop-drilling using provide/inject
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-composables-pattern
+  - vue-pinia-pattern
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - provide
+  - inject
+  - dependency-injection
+  - ancestor-descendant
+  - prop-drilling
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/provide-inject'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/codex/vue-reactive-refs/SKILL.md

@@ -0,0 +1,67 @@
+# Vue Reactive Refs
+
+> Create and manage reactive primitive values and objects using ref and reactive
+
+## When to Use
+
+- You need reactive state in a Vue 3 component using the Composition API
+- Building composables that return reactive values
+- Managing form inputs, counters, flags, or any mutable component state
+
+## Instructions
+
+1. Use `ref()` for primitives (strings, numbers, booleans) — access via `.value`.
+2. Use `reactive()` for objects — access properties directly (no `.value`).
+3. Use `computed()` for derived values that should auto-update.
+4. Never destructure a `reactive()` object — it breaks reactivity. Use `toRefs()` if needed.
+
+```typescript
+import { ref, reactive, computed, toRefs } from 'vue';
+
+const count = ref(0); // ref for primitive
+const user = reactive({ name: 'Alice', age: 30 }); // reactive for object
+const greeting = computed(() => `Hello, ${user.name}!`);
+
+count.value++; // ref needs .value
+user.age = 31; // reactive — direct access
+```
+
+5. In templates, refs are auto-unwrapped — use `{{ count }}` not `{{ count.value }}`.
+6. Use `shallowRef()` or `shallowReactive()` for large objects where deep reactivity is not needed.
+
+## Details
+
+Vue 3's reactivity system is built on ES6 Proxy. `ref()` wraps a value in a reactive container with a `.value` property. `reactive()` wraps an entire object, making all properties reactive. `computed()` creates a cached, read-only reactive value derived from other reactive sources.
+
+**Trade-offs:**
+
+- `ref` requires `.value` in JavaScript (not in templates) — a common source of bugs for new Vue developers
+- `reactive()` loses reactivity when destructured — use `toRefs()` to safely destructure
+- Deep reactivity on large objects can be expensive — use `shallowRef`/`shallowReactive` for performance
+- Replacing a `reactive()` object entirely (`state = newObj`) does not trigger updates — mutate properties instead
+
+**When NOT to use:**
+
+- For non-reactive constants — just use `const` without wrapping
+- For data that never changes after initialization — no need for reactivity overhead
+- For large datasets rendered in lists — consider `shallowRef` with manual trigger via `triggerRef()`
+
+## Source
+
+https://patterns.dev/vue/reactive-refs
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/codex/vue-reactive-refs/skill.yaml

@@ -0,0 +1,35 @@
+name: vue-reactive-refs
+version: '1.0.0'
+description: Create and manage reactive primitive values and objects using ref and reactive
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.vue'
+related_skills:
+  - vue-watchers-pattern
+  - vue-composables-pattern
+stack_signals:
+  - vue
+  - typescript
+keywords:
+  - ref
+  - reactive
+  - computed
+  - reactivity
+  - composition-api
+metadata:
+  author: patterns.dev
+  upstream: 'PatternsDev/skills/vue/reactive-refs'
+state:
+  persistent: false
+  files: []
+depends_on: []