How does this Claude skill improve presentation workflows?

It automates the creation of complex multi-step markdown blocks, ensuring that transitions are logical, context is preserved, and the syntax for timing and highlighting is correct.

Does it support line highlighting?

Yes, the skill can combine Magic Move transitions with line-specific highlighting to draw attention to specific changes during the animation.

Can I use this for refactoring demonstrations?

Yes, it is specifically designed to show code evolution, such as moving from class components to functional hooks or evolving a simple function into a complex one.

What is Slidev Magic Move?

Slidev Magic Move is a feature that uses Shiki to create smooth, morphing transitions between different snippets of code, similar to Keynote's Magic Move effect.

Which programming languages are supported?

It supports any language compatible with Shiki, including JavaScript, TypeScript, JSX, SQL, Python, and many others.

Slidev Magic Move Animator

Name: Slidev Magic Move Animator
Author: yoanbernabeu

byyoanbernabeu

•

Learning & Documentation

Animates smooth, morphing code transitions between different states in Slidev presentations using Shiki Magic Move.

This skill enables Claude to generate professional-grade code animations for Slidev presentations. By leveraging Shiki Magic Move, it allows presenters to demonstrate code evolution, refactoring processes, and step-by-step tutorials with fluid transitions that automatically identify added, removed, or moved tokens. It simplifies the complex syntax required for multi-step code morphing, making it an essential tool for technical speakers and educators who want to create engaging, high-quality visual demonstrations of code logic.

Key Features

01Template patterns for incremental code building and API evolution

02Automated Shiki Magic Move syntax generation

03Support for integrated line highlighting within animations

04Customizable animation timing and click-trigger controls

05Smooth morphing transitions for code refactoring

0613 GitHub stars

Use Cases

01Creating step-by-step coding tutorials with smooth visual transitions

02Visualizing complex code refactoring steps in technical presentations

03Demonstrating 'before and after' code comparisons for API migrations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yoanbernabeu/slidev-skills code

For use in Claude.ai and ChatGPT

Download Skill