slidev-click-animations

Reveal Slidev presentation content progressively with v-click and related directives.

34|1|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-click-animations
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slidev-click-animations
Source: https://github.com/yoanbernabeu/slidev-skills/tree/main/skills/animations/slidev-click-animations
Command: npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-click-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables creating engaging, dynamic Slidev presentations by revealing content progressively with v-click and related directives, reducing cognitive load and keeping audiences focused.

Core Features & Use Cases

  • v-click: Reveal a single block on a click.
  • v-after, v-clicks, v-switch, and v-motion: Build complex reveal sequences, lists, and animated transitions.
  • Use Case: Step-by-step tutorials, diagrams and flowcharts, and interactive demos where content unfolds as you present.

Quick Start

Use the slidev-click-animations skill to add basic click-based reveals in your Slidev deck. For example, wrap a section in <v-click>Intro</v-click> and create a list with <v-clicks> items to reveal progressively.

Frequently Asked Questions about slidev-click-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reveal content progressively in Slidev presentations?

You reveal content progressively in Slidev by wrapping elements in the v-click directive or using v-clicks for lists, which triggers content visibility on successive clicks to reduce audience cognitive load.

What is the difference between v-click and v-after in Slidev?

v-click in Slidev toggles element visibility upon a dedicated click, whereas v-after automatically displays content simultaneously with the preceding v-click element, enabling complex grouped reveal sequences without extra clicks.

How do I create step-by-step animated diagrams in Slidev?

You create step-by-step animated diagrams in Slidev by structuring slide elements with v-click and v-motion directives, allowing flowchart components to appear sequentially as you present through interactive demonstrations.

Can I use v-switch for interactive flows in Slidev?

Yes, v-switch supports interactive flows in Slidev by enabling conditional content switching, complementing v-click and v-clicks to build dynamic, step-by-step presentations and tutorials.

Does Slidev support animated transitions for progressive lists?

Yes, Slidev supports animated transitions for progressive lists through the v-clicks directive, which automatically applies sequential reveal effects to list items during presentations.

When should I use v-motion instead of v-clicks in Slidev?

You use v-motion in Slidev when you need specific animated transitions for elements, whereas v-clicks is better suited for progressively revealing standard list items on successive clicks.