Animate code transformations with Shiki Magic Move. Use this skill to create smooth morphing transitions between code states.
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.
Magic Move analyzes two code blocks and:
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.
````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
```
````
````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!
```
````
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
```
````
````md magic-move {at: 3}
```js
// Starts at click 3
const x = 1
```
```js
const x = 1
const y = 2
```
````
````md magic-move {lines: false}
```js
const x = 1
```
```js
const x = 2
```
````
````md magic-move {at: 2, lines: true}
```js {*|1|2}
const first = 1
const second = 2
```
```js {*}
const result = first + second
```
````
````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>
)
}
```
````
````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)
}
```
````
````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))
}
```
````
````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
```
````
````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)
```
````
````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!
})
```
````
````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!
}
```
````
❌ 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 = ... }
Try Magic Move at: https://shiki-magic-move.netlify.app/
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]
```
npx skills add yoanbernabeu/slidev-magic-move下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer