slidev-click-animations

This skill provides comprehensive control over animation and interactivity within Slidev presentations. Designed for technical presenters and developers, it enables the creation of dynamic, non-static slide content that guides audience attention effectively. By leveraging Vue-based directives, users can coordinate timing, reveal content in sequence, and execute complex layout transitions without leaving the markdown environment.

• Full support for v-click, v-clicks, v-after, and v-switch directives for step-by-step content exposure.

• Integration of v-motion directives to apply CSS transitions, transforms, and keyframe-based animations to any DOM element.

• Advanced positioning capabilities using explicit indexes or relative offset syntax for granular timing control.

• Support for range-based visibility toggling and complex list nesting animations.

• Seamless CSS integration via slidev-vclick-target, prior, and current state classes for custom visual effects like blurs, scaling, or color transitions.

• Capability to animate code blocks and diagrams, making technical demonstrations more accessible and engaging.

• Use this skill to build up complex architecture diagrams from individual components on a single slide.

• Ideal for educational or conference presentations where code evolution or step-by-step logic needs to be explained.

• When implementing, ensure that total click counts are managed via front-matter configuration to avoid layout shifts or navigation errors.

• Combine with motion properties like initial, enter, and leave states to achieve professional-grade motion design.

• Be mindful of overusing animations to maintain presentation readability and focus, as excessive movement can distract from core technical content.

• Input relies on standard Slidev Markdown syntax; ensure your project environment supports the @vueuse/motion integration.