Files

Jason Woltje f5792c40be 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>

2026-02-16 16:27:42 -06:00

2.6 KiB

Raw Permalink Blame History

name, description

name	description
animations	Click animations, motion effects, and slide transitions

Animations

Click animations, motion effects, and slide transitions.

Click Animations

v-click Directive

<div v-click>Appears on click</div>
<div v-click>Appears on next click</div>

v-clicks Component

Animate list items:

<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

With depth for nested lists:

<v-clicks depth="2">

- Parent 1
  - Child 1
  - Child 2
- Parent 2

</v-clicks>

Click Positioning

Relative positioning:

<div v-click>1st (default)</div>
<div v-click="+1">2nd</div>
<div v-click="-1">Same as previous</div>

Absolute positioning:

<div v-click="3">Appears on click 3</div>
<div v-click="[2,5]">Visible clicks 2-5</div>

v-after

Show with previous element:

<div v-click>Main element</div>
<div v-after>Appears with main element</div>

v-switch

Conditional rendering by click:

<v-switch>
  <template #1>First state</template>
  <template #2>Second state</template>
  <template #3>Third state</template>
</v-switch>

Custom Click Count

---
clicks: 10
---

Or starting from specific count:

---
clicksStart: 5
---

Motion Animations

Using @vueuse/motion:

<div
  v-motion
  :initial="{ x: -100, opacity: 0 }"
  :enter="{ x: 0, opacity: 1 }"
>
  Animated content
</div>

Click-based motion:

<div
  v-motion
  :initial="{ scale: 1 }"
  :click-1="{ scale: 1.5 }"
  :click-2="{ scale: 1 }"
>
  Scales on clicks
</div>

Slide Transitions

In headmatter (all slides):

---
transition: slide-left
---

Per-slide:

---
transition: fade
---

Built-in Transitions

fade / fade-out
slide-left / slide-right
slide-up / slide-down
view-transition (View Transitions API)

Directional Transitions

Different transitions for forward/backward:

---
transition: slide-left | slide-right
---

Custom Transitions

Define CSS classes:

.my-transition-enter-active,
.my-transition-leave-active {
  transition: all 0.5s ease;
}
.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

Use: transition: my-transition

CSS Classes

Animation targets get these classes:

.slidev-vclick-target - Animated element
.slidev-vclick-hidden - Hidden state
.slidev-vclick-current - Current click target
.slidev-vclick-prior - Previously shown

Default Animation CSS

.slidev-vclick-target {
  transition: opacity 100ms ease;
}
.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}

2.6 KiB Raw Permalink Blame History