slidev-magic-move

Q: How do I install slidev-magic-move?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-magic-move in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-magic-move/ (personal) or .claude/skills/slidev-magic-move/ (project).

by yoanbernabeu

Animate code transformations with Shiki Magic Move. Use this skill to create smooth morphing transitions between code states.

Installs: 203
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-magic-move

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads slidev-magic-move automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Shiki Magic Move

This skill covers Shiki Magic Move, a powerful feature that creates smooth animated transitions between different code states, similar to Keynote's Magic Move effect.

When to Use This Skill

Showing code evolution step by step
Refactoring demonstrations
Before/after code comparisons
Tutorial walkthroughs
Animated code transformations

How Magic Move Works

Magic Move analyzes two code blocks and:

Identifies unchanged tokens
Finds moved/renamed tokens
Detects added/removed tokens
Animates the transition smoothly

Basic Syntax

Use 4 backticks with md magic-move:

````md magic-move
```js
console.log('Hello')
```
```js
console.log('Hello, World!')
```
````

Each code block represents a step, animated on click.

Step-by-Step Example

Refactoring Journey

````md magic-move
```js
// Step 1: Original code
function add(a, b) {
  return a + b
}
```

```js
// Step 2: Add types
function add(a: number, b: number) {
  return a + b
}
```

```js
// Step 3: Add return type
function add(a: number, b: number): number {
  return a + b
}
```

```ts
// Step 4: Convert to arrow function
const add = (a: number, b: number): number => a + b
```
````

Multiple Steps

````md magic-move
```js
const name = 'world'
```
```js
const name = 'world'
const greeting = 'Hello'
```
```js
const name = 'world'
const greeting = 'Hello'
console.log(`${greeting}, ${name}!`)
```
```js
const name = 'world'
const greeting = 'Hello'
console.log(`${greeting}, ${name}!`)
// Output: Hello, world!
```
````

Combining with Line Highlighting

Add highlights within Magic Move:

````md magic-move {lines: true}
```js {*|1|2|3}
const a = 1
const b = 2
const c = 3
```
```js {*}
const sum = 1 + 2 + 3
```
````

Advanced Options

Control Animation Timing

````md magic-move {at: 3}
```js
// Starts at click 3
const x = 1
```
```js
const x = 1
const y = 2
```
````

Disable Line Numbers

````md magic-move {lines: false}
```js
const x = 1
```
```js
const x = 2
```
````

Combined Options

````md magic-move {at: 2, lines: true}
```js {*|1|2}
const first = 1
const second = 2
```
```js {*}
const result = first + second
```
````

Real-World Examples

React Hook Evolution

````md magic-move
```jsx
// Class component state
class Counter extends React.Component {
  state = { count: 0 }

  increment = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <button onClick={this.increment}>
        {this.state.count}
      </button>
    )
  }
}
```

```jsx
// Function component with useState
function Counter() {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }

  return (
    <button onClick={increment}>
      {count}
    </button>
  )
}
```

```jsx
// Simplified with inline handler
function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  )
}
```
````

API Evolution

````md magic-move
```js
// Callbacks
function fetchUser(id, callback) {
  fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(data => callback(null, data))
    .catch(err => callback(err, null))
}

fetchUser(1, (err, user) => {
  if (err) console.error(err)
  else console.log(user)
})
```

```js
// Promises
function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
}

fetchUser(1)
  .then(user => console.log(user))
  .catch(err => console.error(err))
```

```js
// Async/Await
async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

try {
  const user = await fetchUser(1)
  console.log(user)
} catch (err) {
  console.error(err)
}
```
````

Building a Function

````md magic-move
```typescript
function processData() {

}
```

```typescript
function processData(data) {

}
```

```typescript
function processData(data: string[]) {

}
```

```typescript
function processData(data: string[]): string[] {
  return data
}
```

```typescript
function processData(data: string[]): string[] {
  return data
    .filter(item => item.length > 0)
}
```

```typescript
function processData(data: string[]): string[] {
  return data
    .filter(item => item.length > 0)
    .map(item => item.trim())
}
```

```typescript
function processData(data: string[]): string[] {
  return data
    .filter(item => item.length > 0)
    .map(item => item.trim())
    .sort((a, b) => a.localeCompare(b))
}
```
````

SQL Query Building

````md magic-move
```sql
SELECT * FROM users
```

```sql
SELECT id, name, email FROM users
```

```sql
SELECT id, name, email FROM users
WHERE active = true
```

```sql
SELECT id, name, email FROM users
WHERE active = true
ORDER BY created_at DESC
```

```sql
SELECT id, name, email FROM users
WHERE active = true
ORDER BY created_at DESC
LIMIT 10
```
````

Patterns and Tips

Start Simple, Add Complexity

````md magic-move
```js
// Start with the goal
const result = processData(input)
```

```js
// Show the implementation
function processData(input) {
  return input
}

const result = processData(input)
```

```js
// Add details
function processData(input) {
  return input
    .filter(x => x != null)
    .map(x => transform(x))
}

const result = processData(input)
```
````

Show Problem Then Solution

````md magic-move
```js
// Problem: Callback hell
getData(function(a) {
  getMoreData(a, function(b) {
    getMoreData(b, function(c) {
      getMoreData(c, function(d) {
        // Finally done
      })
    })
  })
})
```

```js
// Solution: Promises
getData()
  .then(a => getMoreData(a))
  .then(b => getMoreData(b))
  .then(c => getMoreData(c))
  .then(d => {
    // Clean and flat!
  })
```
````

Highlight Changes with Comments

````md magic-move
```js
const config = {
  debug: true,
  timeout: 1000
}
```

```js
const config = {
  debug: false,    // Changed!
  timeout: 1000
}
```

```js
const config = {
  debug: false,
  timeout: 5000    // Increased!
}
```
````

Best Practices

Small Steps: Each transition should show one logical change
Maintain Context: Keep surrounding code visible when possible
Use Comments: Add comments to explain what's changing
Consistent Style: Keep formatting consistent across steps
Test the Animation: Verify smooth transitions before presenting

Common Mistakes

❌ Too many changes at once

Step 1: Original code
Step 2: Completely different code

✓ Incremental changes

Step 1: Original
Step 2: Add one feature
Step 3: Add another feature
Step 4: Refactor

❌ Lost context

Step 1: function foo() { ... }
Step 2: const bar = ...  // Where did foo go?

✓ Preserved context

Step 1: function foo() { ... }
Step 2: function foo() { const bar = ... }

Interactive Playground

Try Magic Move at: https://shiki-magic-move.netlify.app/

Output Format

When creating Magic Move animations:

ANIMATION GOAL: [What transformation are you showing?]

STEPS:
1. [Initial state - describe]
2. [Change 1 - describe]
3. [Change 2 - describe]
...

CODE:
````md magic-move {[options]}
```[lang]
[Step 1 code]

[Step 2 code]

...


SPEAKER NOTES:
- Step 1: [What to say]
- Step 2: [What to say]
```

FAQ

What does the slidev-magic-move skill do?

Animate code transformations with Shiki Magic Move. Use this skill to create smooth morphing transitions between code states.

How do I install slidev-magic-move?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-magic-move in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-magic-move/ (personal) or .claude/skills/slidev-magic-move/ (project).

Which AI agents can use slidev-magic-move?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is slidev-magic-move safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains slidev-magic-move?

It is published by yoanbernabeu in yoanbernabeu/slidev-skills. It has 203 recorded installs.

Popular other skills

View category →

hyperframes-cli

heygen-com/hyperframes

The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.

1.3M installs

triage

mattpocock/skills

Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.

1M installs

ask-matt

mattpocock/skills

Ask which skill or flow fits your situation. A router over the skills in this repo.

778.4K installs

to-questionnaire

mattpocock/skills

Turn a decision you can't fully answer into a questionnaire for someone else to fill in.

508.9K installs

wait-what

mattpocock/skills

Stop. That last message did not land: re-pitch it.

459.7K installs

loop-me

mattpocock/skills

Grill me about specs for the workflows I want to build, within this workspace.

447.9K installs

slidev-magic-move

Install

Install

Describe the task

Review the result

SKILL.md

Shiki Magic Move

When to Use This Skill

How Magic Move Works

Basic Syntax

Step-by-Step Example

Refactoring Journey

Multiple Steps

Combining with Line Highlighting

Advanced Options

Control Animation Timing

Disable Line Numbers

Combined Options

Real-World Examples

React Hook Evolution

API Evolution

Building a Function

SQL Query Building

Patterns and Tips

Start Simple, Add Complexity

Show Problem Then Solution

Highlight Changes with Comments

Best Practices

Common Mistakes

Interactive Playground

Output Format

FAQ

More from yoanbernabeu/slidev-skills

Popular other skills