devskill 2.0.2

package/skills/vueuse-functions/references/watchIgnorable.md

@@ -0,0 +1,120 @@
+---
+category: Watch
+alias: ignorableWatch
+---
+
+# watchIgnorable
+
+Ignorable watch
+
+## Usage
+
+Extended `watch` that returns extra `ignoreUpdates(updater)` and `ignorePrevAsyncUpdates()` to ignore particular updates to the source.
+
+```ts
+import { watchIgnorable } from '@vueuse/core'
+import { nextTick, shallowRef } from 'vue'
+
+const source = shallowRef('foo')
+
+const { stop, ignoreUpdates } = watchIgnorable(
+  source,
+  v => console.log(`Changed to ${v}!`),
+)
+
+source.value = 'bar'
+await nextTick() // logs: Changed to bar!
+
+ignoreUpdates(() => {
+  source.value = 'foobar'
+})
+await nextTick() // (nothing happened)
+
+source.value = 'hello'
+await nextTick() // logs: Changed to hello!
+
+ignoreUpdates(() => {
+  source.value = 'ignored'
+})
+source.value = 'logged'
+
+await nextTick() // logs: Changed to logged!
+```
+
+## WatchOptionFlush timing
+
+`watchIgnorable` accepts the same options as `watch` and uses the same defaults.
+So, by default the composable works using `flush: 'pre'`.
+
+## `ignorePrevAsyncUpdates`
+
+This feature is only for async flush `'pre'` and `'post'`. If `flush: 'sync'` is used, `ignorePrevAsyncUpdates()` is a no-op as the watch will trigger immediately after each update to the source. It is still provided for sync flush so the code can be more generic.
+
+```ts
+import { watchIgnorable } from '@vueuse/core'
+import { nextTick, shallowRef } from 'vue'
+
+const source = shallowRef('foo')
+
+const { ignorePrevAsyncUpdates } = watchIgnorable(
+  source,
+  v => console.log(`Changed to ${v}!`),
+)
+
+source.value = 'bar'
+await nextTick() // logs: Changed to bar!
+
+source.value = 'good'
+source.value = 'by'
+ignorePrevAsyncUpdates()
+
+await nextTick() // (nothing happened)
+
+source.value = 'prev'
+ignorePrevAsyncUpdates()
+source.value = 'after'
+
+await nextTick() // logs: Changed to after!
+```
+
+## Recommended Readings
+
+- [Ignorable Watch](https://patak.dev/vue/ignorable-watch.html) - by [@patak-dev](https://github.com/patak-dev)
+
+## Type Declarations
+
+```ts
+export type IgnoredUpdater = (updater: () => void) => void
+export type IgnoredPrevAsyncUpdates = () => void
+export interface WatchIgnorableReturn {
+  ignoreUpdates: IgnoredUpdater
+  ignorePrevAsyncUpdates: IgnoredPrevAsyncUpdates
+  stop: WatchStopHandle
+}
+export declare function watchIgnorable<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchIgnorableReturn
+export declare function watchIgnorable<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchIgnorableReturn
+export declare function watchIgnorable<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchIgnorableReturn
+/** @deprecated use `watchIgnorable` instead */
+export declare const ignorableWatch: typeof watchIgnorable
+```

package/skills/vueuse-functions/references/watchImmediate.md

@@ -0,0 +1,44 @@
+---
+category: Watch
+---
+
+# watchImmediate
+
+Shorthand for watching value with `{immediate: true}`
+
+## Usage
+
+Similar to `watch`, but with `{ immediate: true }`
+
+```ts
+import { watchImmediate } from '@vueuse/core'
+
+const obj = ref('vue-use')
+
+// changing the value from some external store/composables
+obj.value = 'VueUse'
+
+watchImmediate(obj, (updated) => {
+  console.log(updated) // Console.log will be logged twice
+})
+```
+
+## Type Declarations
+
+```ts
+export declare function watchImmediate<T extends Readonly<MultiWatchSources>>(
+  source: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, true>>,
+  options?: Omit<WatchOptions<true>, "immediate">,
+): WatchHandle
+export declare function watchImmediate<T>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, T | undefined>,
+  options?: Omit<WatchOptions<true>, "immediate">,
+): WatchHandle
+export declare function watchImmediate<T extends object>(
+  source: T,
+  cb: WatchCallback<T, T | undefined>,
+  options?: Omit<WatchOptions<true>, "immediate">,
+): WatchHandle
+```

package/skills/vueuse-functions/references/watchOnce.md

@@ -0,0 +1,41 @@
+---
+category: Watch
+---
+
+# watchOnce
+
+Shorthand for watching value with `{ once: true }`. Once the callback fires once, the watcher will be stopped.
+See [Vue's docs](https://vuejs.org/guide/essentials/watchers.html#once-watchers) for full details.
+
+## Usage
+
+Similar to `watch`, but with `{ once: true }`
+
+```ts
+import { watchOnce } from '@vueuse/core'
+
+watchOnce(source, () => {
+  // triggers only once
+  console.log('source changed!')
+})
+```
+
+## Type Declarations
+
+```ts
+export declare function watchOnce<T extends Readonly<MultiWatchSources>>(
+  source: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, true>>,
+  options?: Omit<WatchOptions<true>, "once">,
+): WatchHandle
+export declare function watchOnce<T>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, T | undefined>,
+  options?: Omit<WatchOptions<true>, "once">,
+): WatchHandle
+export declare function watchOnce<T extends object>(
+  source: T,
+  cb: WatchCallback<T, T | undefined>,
+  options?: Omit<WatchOptions<true>, "once">,
+): WatchHandle
+```

package/skills/vueuse-functions/references/watchPausable.md

@@ -0,0 +1,86 @@
+---
+category: Watch
+alias: pausableWatch
+---
+
+# watchPausable
+
+Pausable watch
+
+::: info
+This function will be removed in future version.
+:::
+
+::: tip
+
+[Pausable Watcher](https://vuejs.org/api/reactivity-core.html#watch) has been added to Vue [since 3.5](https://github.com/vuejs/core/pull/9651), use `const { stop, pause, resume } = watch(watchSource, callback)` instead.
+
+:::
+
+## Usage
+
+Use as normal the `watch`, but return extra `pause()` and `resume()` functions to control.
+
+```ts
+import { watchPausable } from '@vueuse/core'
+import { nextTick, shallowRef } from 'vue'
+
+const source = shallowRef('foo')
+
+const { stop, pause, resume } = watchPausable(
+  source,
+  v => console.log(`Changed to ${v}!`),
+)
+
+source.value = 'bar'
+await nextTick() // Changed to bar!
+
+pause()
+
+source.value = 'foobar'
+await nextTick() // (nothing happend)
+
+resume()
+
+source.value = 'hello'
+await nextTick() // Changed to hello!
+```
+
+## Type Declarations
+
+```ts
+export interface WatchPausableReturn extends Pausable {
+  stop: WatchStopHandle
+}
+export type WatchPausableOptions<Immediate> =
+  WatchWithFilterOptions<Immediate> & PausableFilterOptions
+/** @deprecated Use Vue's built-in `watch` instead. This function will be removed in future version. */
+export declare function watchPausable<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchPausableOptions<Immediate>,
+): WatchPausableReturn
+/** @deprecated Use Vue's built-in `watch` instead. This function will be removed in future version. */
+export declare function watchPausable<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchPausableOptions<Immediate>,
+): WatchPausableReturn
+/** @deprecated Use Vue's built-in `watch` instead. This function will be removed in future version. */
+export declare function watchPausable<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchPausableOptions<Immediate>,
+): WatchPausableReturn
+/** @deprecated Use Vue's built-in `watch` instead. This function will be removed in future version. */
+export declare const pausableWatch: typeof watchPausable
+```

package/skills/vueuse-functions/references/watchThrottled.md

@@ -0,0 +1,108 @@
+---
+category: Watch
+alias: throttledWatch
+---
+
+# watchThrottled
+
+Throttled watch. The callback will be invoked at most once per specified duration.
+
+## Usage
+
+Similar to `watch`, but offering extra options `throttle`, `trailing`, and `leading` which will be applied to the callback function.
+
+```ts
+import { watchThrottled } from '@vueuse/core'
+
+watchThrottled(
+  source,
+  () => { console.log('changed!') },
+  { throttle: 500 },
+)
+```
+
+### Options
+
+| Option     | Type                       | Default | Description                               |
+| ---------- | -------------------------- | ------- | ----------------------------------------- |
+| `throttle` | `MaybeRefOrGetter<number>` | `0`     | Throttle interval in ms (can be reactive) |
+| `trailing` | `boolean`                  | `true`  | Invoke on the trailing edge               |
+| `leading`  | `boolean`                  | `true`  | Invoke on the leading edge                |
+
+All standard `watch` options (`deep`, `immediate`, `flush`, etc.) are also supported.
+
+### Leading and Trailing
+
+Control when the callback is invoked:
+
+```ts
+import { watchThrottled } from '@vueuse/core'
+
+// Only invoke at the start of each throttle period
+watchThrottled(source, callback, {
+  throttle: 500,
+  leading: true,
+  trailing: false,
+})
+
+// Only invoke at the end of each throttle period
+watchThrottled(source, callback, {
+  throttle: 500,
+  leading: false,
+  trailing: true,
+})
+```
+
+## How It Works
+
+It's essentially a shorthand for the following code:
+
+```ts
+import { throttleFilter, watchWithFilter } from '@vueuse/core'
+
+watchWithFilter(
+  source,
+  () => { console.log('changed!') },
+  {
+    eventFilter: throttleFilter(500),
+  },
+)
+```
+
+## Type Declarations
+
+```ts
+export interface WatchThrottledOptions<
+  Immediate,
+> extends WatchOptions<Immediate> {
+  throttle?: MaybeRefOrGetter<number>
+  trailing?: boolean
+  leading?: boolean
+}
+export declare function watchThrottled<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchThrottledOptions<Immediate>,
+): WatchHandle
+export declare function watchThrottled<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchThrottledOptions<Immediate>,
+): WatchHandle
+export declare function watchThrottled<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchThrottledOptions<Immediate>,
+): WatchHandle
+/** @deprecated use `watchThrottled` instead */
+export declare const throttledWatch: typeof watchThrottled
+```

package/skills/vueuse-functions/references/watchTriggerable.md

@@ -0,0 +1,98 @@
+---
+category: Watch
+---
+
+# watchTriggerable
+
+Watch that can be triggered manually
+
+## Usage
+
+A `watch` wrapper that supports manual triggering of `WatchCallback`, which returns an additional `trigger` to execute a `WatchCallback` immediately.
+
+```ts
+import { watchTriggerable } from '@vueuse/core'
+import { nextTick, shallowRef } from 'vue'
+
+const source = shallowRef(0)
+
+const { trigger, ignoreUpdates } = watchTriggerable(
+  source,
+  v => console.log(`Changed to ${v}!`),
+)
+
+source.value = 'bar'
+await nextTick() // logs: Changed to bar!
+
+// Execution of WatchCallback via `trigger` does not require waiting
+trigger() // logs: Changed to bar!
+```
+
+### `onCleanup`
+
+When you want to manually call a `watch` that uses the onCleanup parameter; simply taking the `WatchCallback` out and calling it doesn't make it easy to implement the `onCleanup` parameter.
+
+Using `watchTriggerable` will solve this problem.
+
+```ts
+import { watchTriggerable } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const source = shallowRef(0)
+
+const { trigger } = watchTriggerable(
+  source,
+  async (v, _, onCleanup) => {
+    let canceled = false
+    onCleanup(() => canceled = true)
+
+    await new Promise(resolve => setTimeout(resolve, 500))
+    if (canceled)
+      return
+
+    console.log(`The value is "${v}"\n`)
+  },
+)
+
+source.value = 1 // no log
+await trigger() // logs (after 500 ms): The value is "1"
+```
+
+## Type Declarations
+
+```ts
+export interface WatchTriggerableReturn<
+  FnReturnT = void,
+> extends WatchIgnorableReturn {
+  /** Execute `WatchCallback` immediately */
+  trigger: () => FnReturnT
+}
+type OnCleanup = (cleanupFn: () => void) => void
+export type WatchTriggerableCallback<V = any, OV = any, R = void> = (
+  value: V,
+  oldValue: OV,
+  onCleanup: OnCleanup,
+) => R
+export declare function watchTriggerable<
+  T extends Readonly<MultiWatchSources>,
+  FnReturnT,
+>(
+  sources: [...T],
+  cb: WatchTriggerableCallback<
+    MapSources<T>,
+    MapOldSources<T, true>,
+    FnReturnT
+  >,
+  options?: WatchWithFilterOptions<boolean>,
+): WatchTriggerableReturn<FnReturnT>
+export declare function watchTriggerable<T, FnReturnT>(
+  source: WatchSource<T>,
+  cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
+  options?: WatchWithFilterOptions<boolean>,
+): WatchTriggerableReturn<FnReturnT>
+export declare function watchTriggerable<T extends object, FnReturnT>(
+  source: T,
+  cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
+  options?: WatchWithFilterOptions<boolean>,
+): WatchTriggerableReturn<FnReturnT>
+```

package/skills/vueuse-functions/references/watchWithFilter.md

@@ -0,0 +1,54 @@
+---
+category: Watch
+---
+
+# watchWithFilter
+
+`watch` with additional EventFilter control.
+
+## Usage
+
+Similar to `watch`, but offering an extra option `eventFilter` which will be applied to the callback function.
+
+```ts
+import { debounceFilter, watchWithFilter } from '@vueuse/core'
+
+watchWithFilter(
+  source,
+  () => { console.log('changed!') }, // callback will be called in 500ms debounced manner
+  {
+    eventFilter: debounceFilter(500), // throttledFilter, pausableFilter or custom filters
+  },
+)
+```
+
+## Type Declarations
+
+```ts
+export interface WatchWithFilterOptions<Immediate>
+  extends WatchOptions<Immediate>, ConfigurableEventFilter {}
+export declare function watchWithFilter<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchHandle
+export declare function watchWithFilter<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchHandle
+export declare function watchWithFilter<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchWithFilterOptions<Immediate>,
+): WatchHandle
+```

package/skills/vueuse-functions/references/whenever.md

@@ -0,0 +1,100 @@
+---
+category: Watch
+---
+
+# whenever
+
+Shorthand for watching value to be truthy.
+
+## Usage
+
+```js
+import { useAsyncState, whenever } from '@vueuse/core'
+
+const { state, isReady } = useAsyncState(
+  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
+  {},
+)
+
+whenever(isReady, () => console.log(state))
+```
+
+```ts
+import { whenever } from '@vueuse/core'
+// ---cut---
+// this
+whenever(ready, () => console.log(state))
+
+// is equivalent to:
+watch(ready, (isReady) => {
+  if (isReady)
+    console.log(state)
+})
+```
+
+### Callback Function
+
+Same as `watch`, the callback will be called with `cb(value, oldValue, onInvalidate)`.
+
+```ts
+import { whenever } from '@vueuse/core'
+// ---cut---
+whenever(height, (current, lastHeight) => {
+  if (current > lastHeight)
+    console.log(`Increasing height by ${current - lastHeight}`)
+})
+```
+
+### Computed
+
+Same as `watch`, you can pass a getter function to calculate on each change.
+
+```ts
+import { whenever } from '@vueuse/core'
+// ---cut---
+// this
+whenever(
+  () => counter.value === 7,
+  () => console.log('counter is 7 now!'),
+)
+```
+
+### Options
+
+Options and defaults are same with `watch`.
+
+```ts
+import { whenever } from '@vueuse/core'
+// ---cut---
+// this
+whenever(
+  () => counter.value === 7,
+  () => console.log('counter is 7 now!'),
+  { flush: 'sync' },
+)
+```
+
+## Type Declarations
+
+```ts
+export interface WheneverOptions extends WatchOptions {
+  /**
+   * Only trigger once when the condition is met
+   *
+   * Override the `once` option in `WatchOptions`
+   *
+   * @default false
+   */
+  once?: boolean
+}
+/**
+ * Shorthand for watching value to be truthy
+ *
+ * @see https://vueuse.org/whenever
+ */
+export declare function whenever<T>(
+  source: WatchSource<T | false | null | undefined>,
+  cb: WatchCallback<T>,
+  options?: WheneverOptions,
+): WatchHandle
+```

package/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review files for compliance with Web Interface Guidelines.
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.

package/skills/web-design-guidelines/SYNC.md

@@ -0,0 +1,5 @@
+# Sync Info
+
+- **Source:** `vendor/web-design-guidelines/skills/web-design-guidelines`
+- **Git SHA:** `9aec8ee6aaf702e49312a071e672f1c1b7b7e948`
+- **Synced:** 2026-03-24