From slidev-complete
Teaches Slidev click animations with v-click, v-after, v-clicks, v-switch for progressive content reveals and engaging presentations.
npx claudepluginhub yoanbernabeu/slidev-skills --plugin slidev-getting-startedThis skill uses the workspace's default tool permissions.
This skill covers all click-based animations in Slidev, including v-click, v-after, v-clicks, v-switch, and motion directives for creating dynamic, engaging presentations.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
This skill covers all click-based animations in Slidev, including v-click, v-after, v-clicks, v-switch, and motion directives for creating dynamic, engaging presentations.
<v-click>
This appears on the first click
</v-click>
<div v-click>
This also appears on click
</div>
<v-click>First</v-click>
<v-click>Second</v-click>
<v-click>Third</v-click>
Each appears on successive clicks.
<div v-click="1">Appears first</div>
<div v-click="3">Appears third</div>
<div v-click="2">Appears second</div>
<div v-click>First (click 1)</div>
<div v-click="'+1'">Second (click 2)</div>
<div v-click="'+2'">Fourth (click 4)</div>
<v-click>Main content</v-click>
<v-after>Appears with main content</v-after>
Or using relative position:
<v-click>Main content</v-click>
<v-click="'+0'">Also appears with main</v-click>
<v-clicks>
- First item
- Second item
- Third item
</v-clicks>
<v-clicks depth="2">
- Parent 1
- Child 1.1
- Child 1.2
- Parent 2
- Child 2.1
</v-clicks>
<v-clicks every="2">
- Items 1-2 together
- (same click)
- Items 3-4 together
- (same click)
</v-clicks>
<div v-click.hide>This disappears on click</div>
<v-click hide>
This content will be hidden after the click
</v-click>
<div v-click.hide="[2, 4]">
Visible until click 2, hidden on clicks 2-3, visible again at click 4
</div>
Switch between different content based on clicks:
<v-switch>
<template #1>Content at click 1</template>
<template #2>Content at click 2</template>
<template #3>Content at click 3</template>
<template #4-6>Content at clicks 4, 5, and 6</template>
<template #default>Default content (before click 1)</template>
</v-switch>
<v-switch>
<template #0>
<h2>Step 1: Initialize</h2>
<p>Set up the project structure</p>
</template>
<template #1>
<h2>Step 2: Configure</h2>
<p>Add configuration files</p>
</template>
<template #2>
<h2>Step 3: Build</h2>
<p>Run the build command</p>
</template>
</v-switch>
<div
v-motion
:initial="{ opacity: 0, y: 100 }"
:enter="{ opacity: 1, y: 0 }"
>
Slides up and fades in
</div>
<div
v-motion
:initial="{ x: -100, opacity: 0 }"
:enter="{ x: 0, opacity: 1 }"
:click-1="{ scale: 1.2 }"
:click-2="{ x: 100 }"
:leave="{ opacity: 0 }"
>
Complex motion sequence
</div>
| Variant | When Applied |
|---|---|
initial | Initial state |
enter | When slide is entered |
click-N | At click N |
click-N-M | During clicks N to M |
leave | When leaving slide |
<div
v-motion
:initial="{
opacity: 0,
scale: 0.5,
x: -200,
y: 100,
rotate: -45
}"
:enter="{
opacity: 1,
scale: 1,
x: 0,
y: 0,
rotate: 0,
transition: {
duration: 500,
ease: 'easeOut'
}
}"
>
Animated element
</div>
---
clicks: 5
---
Forces the slide to have exactly 5 clicks.
---
clicks: auto
---
Automatically determines click count (default).
When an element has v-click:
.slidev-vclick-target - Always applied.slidev-vclick-hidden - When hidden.slidev-vclick-current - Currently active click.slidev-vclick-prior - Already revealed/* styles/index.css */
.slidev-vclick-target {
transition: all 0.5s ease;
}
.slidev-vclick-hidden {
opacity: 0;
transform: translateY(20px);
}
.slidev-vclick-target {
transition: all 0.3s ease;
}
.slidev-vclick-hidden {
transform: scale(0);
opacity: 0;
}
.slidev-vclick-hidden {
filter: blur(10px);
opacity: 0;
}
# Key Points
<v-clicks>
1. **Performance** - Optimized for speed
2. **Security** - Built-in protection
3. **Scalability** - Handles growth
4. **Maintainability** - Clean architecture
</v-clicks>
# Architecture
<div class="grid grid-cols-3 gap-4">
<div v-click="1" class="box">Frontend</div>
<div v-click="2" class="box">API</div>
<div v-click="3" class="box">Database</div>
</div>
<Arrow v-click="4" x1="100" y1="100" x2="200" y2="100" />
<Arrow v-click="5" x1="300" y1="100" x2="400" y2="100" />
# The Solution
<div v-click.hide="2">
<h2>Before</h2>
<pre>Old code here</pre>
</div>
<div v-click="2">
<h2>After</h2>
<pre>New improved code</pre>
</div>
# Important Concept
<p v-click="1">
This is a paragraph with
<span
v-motion
:initial="{ background: 'transparent' }"
:click-2="{ background: '#fef08a' }"
class="px-1"
>
highlighted text
</span>
that appears.
</p>
```typescript {1|2|3|all}
const name = 'Slidev'
const version = '0.50'
console.log(`${name} v${version}`)
```
โ Too many clicks
<v-click>Word</v-click>
<v-click>by</v-click>
<v-click>word</v-click>
<v-click>is</v-click>
<v-click>annoying</v-click>
โ Meaningful groups
<v-click>First complete thought</v-click>
<v-click>Second complete thought</v-click>
<v-click>
<h3>Feature A</h3>
<p>Description of feature A</p>
</v-click>
<v-click>
<h3>Feature B</h3>
<p>Description of feature B</p>
</v-click>
<!-- Good for demos - immediate -->
<div v-click>Quick reveal</div>
<!-- Good for emphasis - animated -->
<div
v-motion
:initial="{ opacity: 0 }"
:enter="{ opacity: 1, transition: { duration: 800 } }"
>
Dramatic reveal
</div>
<v-click at="1">
๐ First, we'll look at setup
</v-click>
<v-click at="2">
๐ Then, we'll implement features
</v-click>
<v-click at="3">
๐ Finally, we'll deploy
</v-click>
When creating click animations:
# [Slide Title]
[Static introductory content if any]
<v-clicks>
- [Point revealed at click 1]
- [Point revealed at click 2]
- [Point revealed at click 3]
</v-clicks>
<v-click at="4">
[Conclusion that appears last]
</v-click>
---
CLICK SEQUENCE:
1. [What appears/happens]
2. [What appears/happens]
3. [What appears/happens]
4. [What appears/happens]
TOTAL CLICKS: [N]