feat: Complete fleet — 94 skills across 10+ domains

Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

skills/vueuse-functions/references/useAnimate.md

@@ -0,0 +1,140 @@
+---
+category: Animation
+---
+
+# useAnimate
+
+Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+
+## Usage
+
+### Basic Usage
+
+The `useAnimate` function will return the animate and its control function.
+
+```vue
+<script setup lang="ts">
+import { useAnimate } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const {
+  isSupported,
+  animate,
+
+  // actions
+  play,
+  pause,
+  reverse,
+  finish,
+  cancel,
+
+  // states
+  pending,
+  playState,
+  replaceState,
+  startTime,
+  currentTime,
+  timeline,
+  playbackRate,
+} = useAnimate(el, { transform: 'rotate(360deg)' }, 1000)
+</script>
+
+<template>
+  <span ref="el" style="display:inline-block">useAnimate</span>
+</template>
+```
+
+### Custom Keyframes
+
+Either an array of keyframe objects, or a keyframe object, or a `ref`. See [Keyframe Formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) for more details.
+
+```ts
+import { useAnimate } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+// ---cut---
+const keyframes = { transform: 'rotate(360deg)' }
+// Or
+const keyframes = [
+  { transform: 'rotate(0deg)' },
+  { transform: 'rotate(360deg)' },
+]
+// Or
+const keyframes = ref([
+  { clipPath: 'circle(20% at 0% 30%)' },
+  { clipPath: 'circle(20% at 50% 80%)' },
+  { clipPath: 'circle(20% at 100% 30%)' },
+])
+
+useAnimate(el, keyframes, 1000)
+```
+
+## Type Declarations
+
+```ts
+export interface UseAnimateOptions
+  extends KeyframeAnimationOptions,
+    ConfigurableWindow {
+  /**
+   * Will automatically run play when `useAnimate` is used
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Whether to commits the end styling state of an animation to the element being animated
+   * In general, you should use `fill` option with this.
+   *
+   * @default false
+   */
+  commitStyles?: boolean
+  /**
+   * Whether to persists the animation
+   *
+   * @default false
+   */
+  persist?: boolean
+  /**
+   * Executed after animation initialization
+   */
+  onReady?: (animate: Animation) => void
+  /**
+   * Callback when error is caught.
+   */
+  onError?: (e: unknown) => void
+}
+export type UseAnimateKeyframes = MaybeRef<
+  Keyframe[] | PropertyIndexedKeyframes | null
+>
+export interface UseAnimateReturn {
+  isSupported: ComputedRef<boolean>
+  animate: ShallowRef<Animation | undefined>
+  play: () => void
+  pause: () => void
+  reverse: () => void
+  finish: () => void
+  cancel: () => void
+  pending: ComputedRef<boolean>
+  playState: ComputedRef<AnimationPlayState>
+  replaceState: ComputedRef<AnimationReplaceState>
+  startTime: WritableComputedRef<CSSNumberish | number | null>
+  currentTime: WritableComputedRef<CSSNumberish | null>
+  timeline: WritableComputedRef<AnimationTimeline | null>
+  playbackRate: WritableComputedRef<number>
+}
+/**
+ * Reactive Web Animations API
+ *
+ * @see https://vueuse.org/useAnimate
+ * @param target
+ * @param keyframes
+ * @param options
+ */
+export declare function useAnimate(
+  target: MaybeComputedElementRef,
+  keyframes: UseAnimateKeyframes,
+  options?: number | UseAnimateOptions,
+): UseAnimateReturn
+```