Initial commit

skills/pixel-art-animator/SKILL.md

@@ -0,0 +1,315 @@
+---
+name: Pixel Art Animator
+description: Create and manage sprite animations with multiple frames, animation tags, frame durations, and linked cels. Use when the user wants to animate a sprite, add animation, create movement, make it move, mentions "animation", "animated", "frames", "keyframes", "frame rate", "FPS", "timing", "duration", "walk cycle", "run cycle", "idle animation", "attack animation", "jump", "movement", "motion", or describes actions like "walking", "running", "jumping", "attacking", "breathing", "bobbing", "bouncing". Trigger on animation tags, loops, playback, sequences, "add frames", "duplicate frame", "frame timing", "ping-pong", "loop", "sequence". Also for linked cels, static backgrounds, and frame optimization.
+allowed-tools: Read, Bash, mcp__aseprite__add_frame, mcp__aseprite__delete_frame, mcp__aseprite__duplicate_frame, mcp__aseprite__set_frame_duration, mcp__aseprite__create_tag, mcp__aseprite__delete_tag, mcp__aseprite__link_cel, mcp__aseprite__get_sprite_info, mcp__aseprite__draw_pixels, mcp__aseprite__draw_line, mcp__aseprite__draw_rectangle, mcp__aseprite__draw_circle
+---
+
+# Pixel Art Animator
+
+## Overview
+
+This Skill handles all animation-related tasks for sprites, including frame management, timing, animation tags (sequences), and linked cels for efficient animation.
+
+## When to Use
+
+Use this Skill when the user:
+- Wants to "animate" a sprite or "add animation"
+- Mentions "frames", "keyframes", or "frame rate"
+- Describes motion: "walk cycle", "run cycle", "idle animation", "attack animation"
+- Asks about "animation tags", "loops", or "playback"
+- Wants to create "sprite sheets" for animation (coordinate with exporter Skill)
+
+**Trigger Keywords:** animate, animation, frames, walk cycle, run, idle, attack, loop, movement, motion
+
+## Instructions
+
+### 1. Understanding Animation Basics
+
+**Frame**: A single image in an animation sequence. Sprites start with 1 frame.
+
+**Frame Duration**: How long each frame displays (in milliseconds). Default: 100ms (10 FPS).
+
+**Animation Tag**: Named sequence of frames (e.g., "walk" frames 1-4, "idle" frames 5-8).
+
+**Linked Cel**: A cel that shares image data with another cel. Editing one updates all linked cels.
+
+**Playback Direction**:
+- **Forward**: Frames play 1 → 2 → 3 → 4, then loop
+- **Reverse**: Frames play 4 → 3 → 2 → 1, then loop
+- **Ping-pong**: Frames play 1 → 2 → 3 → 4 → 3 → 2 → 1, then loop
+
+### 2. Creating Animation Frames
+
+**Adding Frames:**
+Use `mcp__aseprite__add_frame` to create new frames:
+- Frames are numbered starting from 1
+- New frames start as copies of the current frame (or blank)
+
+**Common Frame Counts:**
+- **Idle Animation**: 2-4 frames (subtle movement)
+- **Walk Cycle**: 4-8 frames (legs alternate)
+- **Run Cycle**: 6-8 frames (faster, exaggerated)
+- **Attack Animation**: 3-6 frames (windup, strike, recovery)
+- **Jump**: 4-6 frames (crouch, ascend, peak, descend, land)
+
+**Duplicating Frames:**
+Use `mcp__aseprite__duplicate_frame` to copy existing frames:
+- Useful for creating variations
+- Starting point for similar frames
+
+**Deleting Frames:**
+Use `mcp__aseprite__delete_frame` to remove frames:
+- Cannot delete the last remaining frame
+- Frames are renumbered after deletion
+
+### 3. Setting Frame Timing
+
+**Frame Duration:**
+Use `mcp__aseprite__set_frame_duration`:
+- Duration in milliseconds (ms)
+- 100ms = 10 FPS
+- 50ms = 20 FPS
+- 33ms ≈ 30 FPS
+- 16ms ≈ 60 FPS
+
+**Common Timing Patterns:**
+
+**Even Timing:**
+All frames same duration. Simple and predictable.
+- Walk cycle: all frames 100ms (smooth 10 FPS)
+
+**Variable Timing:**
+Different durations for emphasis.
+- Idle: slow frames (150ms) for breathing effect
+- Attack: fast strike (30ms), slower recovery (100ms)
+
+**Hold Frames:**
+Longer duration for dramatic effect.
+- Jump peak: 200ms (hang time)
+- Impact: 50ms (quick flash)
+
+### 4. Creating Animation Tags
+
+**Purpose:** Organize frames into named sequences.
+
+Use `mcp__aseprite__create_tag`:
+- Name: "walk", "idle", "attack", etc.
+- From Frame: starting frame (1-indexed)
+- To Frame: ending frame (inclusive)
+- Direction: "forward", "reverse", or "ping-pong"
+
+**Example Tags:**
+- Tag "idle": frames 1-2, ping-pong direction
+- Tag "walk": frames 3-6, forward direction
+- Tag "attack": frames 7-10, forward direction
+
+**Benefits:**
+- Export specific animations separately
+- Organize complex sprite sheets
+- Game engines can reference tags
+
+### 5. Using Linked Cels
+
+**Purpose:** Share image data across frames to save memory and maintain consistency.
+
+Use `mcp__aseprite__link_cel`:
+- Useful when frame content doesn't change
+- Example: background layer stays same across animation
+- Editing one linked cel updates all
+
+**When to Use:**
+- Static background elements
+- Character face in walk cycle (if body animates separately)
+- Repeated frames in animation
+
+**Workflow:**
+1. Create frames with content
+2. Link cels that should share data
+3. Edit once, updates everywhere
+
+### 6. Animation Workflows
+
+**Workflow 1: Walk Cycle (4 frames)**
+
+1. Create base sprite (or use existing)
+2. Add 3 more frames (total 4)
+3. Edit each frame for walk positions:
+   - Frame 1: Left foot forward
+   - Frame 2: Contact (both feet touching)
+   - Frame 3: Right foot forward
+   - Frame 4: Contact (both feet touching)
+4. Set all frames to 100ms duration
+5. Create tag "walk": frames 1-4, forward direction
+
+**Workflow 2: Idle Animation (2 frames)**
+
+1. Create base sprite
+2. Add 1 more frame (total 2)
+3. Slight variations:
+   - Frame 1: Normal stance
+   - Frame 2: Subtle movement (breathing, blinking)
+4. Set frames to 500ms duration (slow, subtle)
+5. Create tag "idle": frames 1-2, ping-pong direction
+
+**Workflow 3: Complex Multi-Animation Sprite**
+
+1. Create base sprite
+2. Add enough frames for all animations:
+   - Idle: 2 frames
+   - Walk: 4 frames
+   - Jump: 4 frames
+   - Total: 10 frames
+3. Arrange frames sequentially
+4. Create separate tags:
+   - Tag "idle": frames 1-2
+   - Tag "walk": frames 3-6
+   - Tag "jump": frames 7-10
+5. Set appropriate frame durations per animation
+
+## Examples
+
+### Example 1: Simple 2-Frame Idle
+
+**User Request:**
+> "Add a simple idle animation to this sprite"
+
+**Approach:**
+1. Add 1 frame (now have frame 1 and 2)
+2. On frame 2, make subtle change (move pixels up/down 1-2 pixels)
+3. Set both frames to 500ms duration
+4. Create tag "idle": frames 1-2, ping-pong direction
+5. Result: gentle back-and-forth idle motion
+
+### Example 2: 4-Frame Walk Cycle
+
+**User Request:**
+> "Create a walk cycle animation for this character"
+
+**Approach:**
+1. Add 3 frames (now have 1, 2, 3, 4)
+2. Edit each frame for walk poses
+3. Set all frames to 100ms duration
+4. Create tag "walk": frames 1-4, forward direction
+5. Result: looping walk animation at 10 FPS
+
+### Example 3: Variable Timing Attack
+
+**User Request:**
+> "Add an attack animation with a fast strike"
+
+**Approach:**
+1. Add 5 frames (total 6 frames, assuming frame 1 exists)
+2. Frame sequence:
+   - Frame 2: Windup (slow)
+   - Frame 3: Prepare (slow)
+   - Frame 4: Strike (fast)
+   - Frame 5: Follow-through (medium)
+   - Frame 6: Recovery (slow)
+3. Set durations:
+   - Frames 2-3: 150ms (slow windup)
+   - Frame 4: 30ms (fast strike)
+   - Frame 5: 80ms (medium follow-through)
+   - Frame 6: 120ms (slow recovery)
+4. Create tag "attack": frames 2-6, forward direction
+
+### Example 4: Linked Background
+
+**User Request:**
+> "Animate the character but keep the background static"
+
+**Approach:**
+1. Assume 2 layers: "Background", "Character"
+2. Add frames for animation
+3. Edit "Character" layer on each frame for animation
+4. Link all cels on "Background" layer:
+   - Link frame 2's background to frame 1
+   - Link frame 3's background to frame 1
+   - Link frame 4's background to frame 1
+5. Background stays identical, character animates
+
+## Technical Details
+
+### Frame Numbering
+- Frames are 1-indexed (first frame is frame 1)
+- Adding frame at position N inserts at that position
+- Deleting frame N renumbers subsequent frames
+
+### Frame Duration Limits
+- Minimum: 1ms (not recommended, too fast)
+- Maximum: 65535ms (65.5 seconds)
+- Practical range: 16ms (60 FPS) to 500ms (2 FPS)
+
+### Animation Tag Limits
+- No hard limit on number of tags
+- Tags can overlap frames
+- Tag names should be unique and descriptive
+
+### Linked Cel Behavior
+- Editing one linked cel updates all linked instances
+- Unlinking creates independent copy
+- Useful for memory optimization in large animations
+
+### Performance
+- Adding frame: <20ms
+- Duplicating frame: <30ms
+- Setting frame duration: <10ms
+- Creating tag: <15ms
+- Linking cel: <25ms
+
+## Common Patterns
+
+### Pattern: Breathing Idle
+2 frames, ping-pong, slow timing (400-500ms)
+- Frame 1: Normal
+- Frame 2: Slight vertical shift (1-2 pixels)
+
+### Pattern: Basic Walk
+4 frames, forward, even timing (100ms)
+- Frame 1: Left foot forward, right foot back
+- Frame 2: Both feet together (contact)
+- Frame 3: Right foot forward, left foot back
+- Frame 4: Both feet together (contact)
+
+### Pattern: Run Cycle
+6-8 frames, forward, faster timing (60-80ms)
+- More exaggerated poses than walk
+- Longer strides
+- Leaning forward
+
+### Pattern: Jump Sequence
+5-6 frames, forward, variable timing
+- Frame 1: Crouch (100ms)
+- Frame 2: Launch (50ms)
+- Frame 3: Ascend (80ms)
+- Frame 4: Peak (200ms) - hang time
+- Frame 5: Descend (80ms)
+- Frame 6: Land (100ms)
+
+## Integration with Other Skills
+
+- **Start with pixel-art-creator** to create base sprite before animating
+- **Use pixel-art-professional** for polish (shading, antialiasing) after animation
+- **Hand off to pixel-art-exporter** when user wants to export spritesheet or GIF
+
+## Error Handling
+
+**Cannot delete last frame:**
+- Sprites must have at least 1 frame
+- Inform user if they try to delete last frame
+
+**Invalid frame numbers:**
+- Frame numbers must be 1 to N (where N is total frames)
+- Check bounds before operations
+
+**Tag frame range errors:**
+- "From" frame must be ≤ "To" frame
+- Both must be valid frame numbers
+
+## Success Indicators
+
+You've successfully used this Skill when:
+- Frames added/modified correctly
+- Frame durations set appropriately for desired FPS
+- Animation tags created with correct ranges
+- User understands animation will loop or play as specified
+- Animation is ready for export or further refinement

skills/pixel-art-animator/examples.md

@@ -0,0 +1,847 @@
+# Pixel Art Animator Examples
+
+This document provides concrete examples of how the pixel-art-animator skill handles animation tasks in Aseprite. Each example shows the user's request, step-by-step approach, actual MCP tool calls with parameters, and expected results.
+
+Examples are organized by animation complexity, from simple idle animations to complex multi-tag sequences.
+
+---
+
+## Simple Idle Animations
+
+### Example 1: Basic 2-Frame Breathing Animation
+
+**User Request:**
+> "Create a simple breathing animation for a character, just 2 frames, 32x32"
+
+**Approach:**
+1. Create 32x32 canvas
+2. Draw base character on frame 1
+3. Create frame 2 with slight body movement
+4. Set frame durations for smooth breathing
+5. Loop animation
+
+**Tool Calls:**
+```javascript
+// Create canvas with initial frame
+mcp__aseprite__create_canvas({
+  width: 32,
+  height: 32,
+  colorMode: "rgb",
+  name: "breathing-idle"
+})
+
+// Draw character on frame 1 (base pose)
+mcp__aseprite__draw_pixels({
+  frame: 1,
+  pixels: [
+    // Head
+    { x: 14, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 17, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Body (lower position - inhale)
+    { x: 15, y: 12, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 12, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 14, y: 13, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 15, y: 13, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 13, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 17, y: 13, color: { r: 50, g: 100, b: 200, a: 255 } }
+  ]
+})
+
+// Add frame 2
+mcp__aseprite__add_frame({
+  duration: 500  // 500ms
+})
+
+// Draw slightly raised body on frame 2 (exhale)
+mcp__aseprite__draw_pixels({
+  frame: 2,
+  pixels: [
+    // Head (same position)
+    { x: 14, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 17, y: 8, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Body (raised 1 pixel - exhale)
+    { x: 15, y: 11, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 11, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 14, y: 12, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 15, y: 12, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 12, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 17, y: 12, color: { r: 50, g: 100, b: 200, a: 255 } }
+  ]
+})
+
+// Set frame durations for breathing rhythm
+mcp__aseprite__set_frame_duration({
+  frame: 1,
+  duration: 500  // Hold inhale
+})
+
+mcp__aseprite__set_frame_duration({
+  frame: 2,
+  duration: 500  // Hold exhale
+})
+```
+
+**Result:**
+A simple 2-frame breathing animation where the character's body rises and falls subtly.
+
+**Visual Description:**
+When played, the animation shows a gentle breathing effect. Frame 1 shows the body in a lower position (inhaled), frame 2 shows it raised slightly (exhaled). The loop creates a continuous, calm breathing rhythm.
+
+---
+
+### Example 2: Bobbing Coin Animation
+
+**User Request:**
+> "Make a collectible coin that bobs up and down, 3 frames, 16x16"
+
+**Approach:**
+1. Create 16x16 indexed canvas
+2. Draw coin at middle height (frame 1)
+3. Draw coin at top position (frame 2)
+4. Draw coin at bottom position (frame 3)
+5. Set smooth frame timing
+
+**Tool Calls:**
+```javascript
+mcp__aseprite__create_canvas({
+  width: 16,
+  height: 16,
+  colorMode: "indexed",
+  name: "bobbing-coin"
+})
+
+mcp__aseprite__set_palette({
+  colors: [
+    { r: 0, g: 0, b: 0 },          // Index 0: Transparent
+    { r: 180, g: 140, b: 0 },      // Index 1: Gold
+    { r: 255, g: 215, b: 0 },      // Index 2: Bright gold
+    { r: 255, g: 255, b: 200 }     // Index 3: Highlight
+  ]
+})
+
+// Frame 1: Middle position
+mcp__aseprite__draw_pixels({
+  frame: 1,
+  pixels: [
+    { x: 6, y: 7, colorIndex: 2 }, { x: 7, y: 7, colorIndex: 2 },
+    { x: 8, y: 7, colorIndex: 2 }, { x: 9, y: 7, colorIndex: 2 },
+    { x: 5, y: 8, colorIndex: 2 }, { x: 6, y: 8, colorIndex: 3 },
+    { x: 7, y: 8, colorIndex: 2 }, { x: 8, y: 8, colorIndex: 2 },
+    { x: 9, y: 8, colorIndex: 1 }, { x: 10, y: 8, colorIndex: 1 }
+  ]
+})
+
+// Frame 2: Top position (2 pixels up)
+mcp__aseprite__add_frame({ duration: 150 })
+
+mcp__aseprite__draw_pixels({
+  frame: 2,
+  pixels: [
+    { x: 6, y: 5, colorIndex: 2 }, { x: 7, y: 5, colorIndex: 2 },
+    { x: 8, y: 5, colorIndex: 2 }, { x: 9, y: 5, colorIndex: 2 },
+    { x: 5, y: 6, colorIndex: 2 }, { x: 6, y: 6, colorIndex: 3 },
+    { x: 7, y: 6, colorIndex: 2 }, { x: 8, y: 6, colorIndex: 2 },
+    { x: 9, y: 6, colorIndex: 1 }, { x: 10, y: 6, colorIndex: 1 }
+  ]
+})
+
+// Frame 3: Bottom position (2 pixels down)
+mcp__aseprite__add_frame({ duration: 150 })
+
+mcp__aseprite__draw_pixels({
+  frame: 3,
+  pixels: [
+    { x: 6, y: 9, colorIndex: 2 }, { x: 7, y: 9, colorIndex: 2 },
+    { x: 8, y: 9, colorIndex: 2 }, { x: 9, y: 9, colorIndex: 2 },
+    { x: 5, y: 10, colorIndex: 2 }, { x: 6, y: 10, colorIndex: 3 },
+    { x: 7, y: 10, colorIndex: 2 }, { x: 8, y: 10, colorIndex: 2 },
+    { x: 9, y: 10, colorIndex: 1 }, { x: 10, y: 10, colorIndex: 1 }
+  ]
+})
+
+// Set consistent frame timing
+mcp__aseprite__set_frame_duration({ frame: 1, duration: 150 })
+mcp__aseprite__set_frame_duration({ frame: 2, duration: 150 })
+mcp__aseprite__set_frame_duration({ frame: 3, duration: 150 })
+```
+
+**Result:**
+A 3-frame bobbing animation where the coin floats up and down smoothly.
+
+**Visual Description:**
+The coin appears to float in midair with a smooth up-down motion. The animation cycles through middle → top → bottom → middle, creating a continuous hovering effect typical of collectible items in games.
+
+---
+
+### Example 3: Blinking Character
+
+**User Request:**
+> "Add a blinking animation to my character sprite, eyes should close for one frame"
+
+**Approach:**
+1. Assume canvas exists with character
+2. Frame 1: Eyes open (existing)
+3. Frame 2: Same as frame 1 (hold open eyes)
+4. Frame 3: Eyes closed
+5. Frame 4: Eyes open again
+6. Set longer duration for open eyes, short for blink
+
+**Tool Calls:**
+```javascript
+// Add frame 2 (duplicate frame 1 to hold open eyes)
+mcp__aseprite__duplicate_frame({
+  sourceFrame: 1,
+  duration: 2000  // Hold eyes open for 2 seconds
+})
+
+// Add frame 3 (blink - eyes closed)
+mcp__aseprite__add_frame({ duration: 100 })
+
+mcp__aseprite__draw_pixels({
+  frame: 3,
+  pixels: [
+    // Draw closed eyes (horizontal lines instead of dots)
+    { x: 12, y: 9, color: { r: 0, g: 0, b: 0, a: 255 } },
+    { x: 13, y: 9, color: { r: 0, g: 0, b: 0, a: 255 } },
+    { x: 18, y: 9, color: { r: 0, g: 0, b: 0, a: 255 } },
+    { x: 19, y: 9, color: { r: 0, g: 0, b: 0, a: 255 } }
+  ]
+})
+
+// Add frame 4 (duplicate frame 1 for eyes open again)
+mcp__aseprite__duplicate_frame({
+  sourceFrame: 1,
+  duration: 100  // Brief open before loop
+})
+
+// Create animation tag for blinking cycle
+mcp__aseprite__create_tag({
+  name: "blink_cycle",
+  fromFrame: 1,
+  toFrame: 4,
+  direction: "forward"
+})
+```
+
+**Result:**
+A 4-frame blinking animation with natural timing - eyes stay open long, blink quickly, return to open.
+
+**Visual Description:**
+The character's eyes remain open for most of the animation (frames 1-2), quickly close (frame 3), then immediately reopen (frame 4). The timing creates a natural blink that doesn't interrupt the character's idle state.
+
+---
+
+## Walk Cycles
+
+### Example 4: Basic 4-Frame Walk Cycle
+
+**User Request:**
+> "Create a simple side-view walk cycle for a character, 4 frames, 32x32"
+
+**Approach:**
+1. Create canvas
+2. Frame 1: Contact pose (left foot forward)
+3. Frame 2: Passing pose (legs together, body high)
+4. Frame 3: Contact pose (right foot forward)
+5. Frame 4: Passing pose (return)
+6. Set frame durations for walk speed
+
+**Tool Calls:**
+```javascript
+mcp__aseprite__create_canvas({
+  width: 32,
+  height: 32,
+  colorMode: "rgb",
+  name: "walk-cycle"
+})
+
+// Frame 1: Left foot forward contact
+mcp__aseprite__draw_pixels({
+  frame: 1,
+  pixels: [
+    // Head
+    { x: 15, y: 6, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 6, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Body
+    { x: 15, y: 10, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 10, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 15, y: 11, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 11, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Left leg forward
+    { x: 13, y: 12, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 13, y: 13, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 12, y: 14, color: { r: 101, g: 67, b: 33, a: 255 } },
+    // Right leg back
+    { x: 18, y: 12, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 18, y: 13, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 19, y: 14, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 2: Passing pose (legs together, body raised)
+mcp__aseprite__add_frame({ duration: 100 })
+
+mcp__aseprite__draw_pixels({
+  frame: 2,
+  pixels: [
+    // Head (raised 1 pixel)
+    { x: 15, y: 5, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 5, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Body (raised)
+    { x: 15, y: 9, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 9, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 15, y: 10, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 10, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Legs together, vertical
+    { x: 15, y: 11, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 15, y: 12, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 15, y: 13, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 11, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 12, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 13, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 3: Right foot forward contact
+mcp__aseprite__add_frame({ duration: 100 })
+
+mcp__aseprite__draw_pixels({
+  frame: 3,
+  pixels: [
+    // Head
+    { x: 15, y: 6, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 6, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Body
+    { x: 15, y: 10, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 10, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 15, y: 11, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 11, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Right leg forward (mirrored from frame 1)
+    { x: 18, y: 12, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 18, y: 13, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 19, y: 14, color: { r: 101, g: 67, b: 33, a: 255 } },
+    // Left leg back
+    { x: 13, y: 12, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 13, y: 13, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 12, y: 14, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 4: Passing pose again (duplicate frame 2)
+mcp__aseprite__duplicate_frame({
+  sourceFrame: 2,
+  duration: 100
+})
+
+// Set consistent walk timing
+mcp__aseprite__set_frame_duration({ frame: 1, duration: 100 })
+mcp__aseprite__set_frame_duration({ frame: 2, duration: 100 })
+mcp__aseprite__set_frame_duration({ frame: 3, duration: 100 })
+mcp__aseprite__set_frame_duration({ frame: 4, duration: 100 })
+
+// Create walk cycle tag
+mcp__aseprite__create_tag({
+  name: "walk",
+  fromFrame: 1,
+  toFrame: 4,
+  direction: "forward"
+})
+```
+
+**Result:**
+A smooth 4-frame walk cycle with proper contact and passing poses.
+
+**Visual Description:**
+The character walks smoothly from left to right. Frame 1 shows left foot forward, frame 2 shows legs together with body raised, frame 3 shows right foot forward, frame 4 returns to legs together. The cycle creates natural walking motion.
+
+---
+
+### Example 5: 8-Frame Smooth Walk
+
+**User Request:**
+> "Create a more detailed walk cycle with 8 frames for smoother animation"
+
+**Approach:**
+1. Create canvas
+2. Add breakdown frames between contact and passing poses
+3. Include anticipation and follow-through
+4. Add subtle body bounce and arm swing
+5. Set faster frame rate for smoothness
+
+**Tool Calls:**
+```javascript
+mcp__aseprite__create_canvas({
+  width: 48,
+  height: 48,
+  colorMode: "rgb",
+  name: "smooth-walk"
+})
+
+// Frame 1: Contact - left foot forward
+mcp__aseprite__draw_pixels({
+  frame: 1,
+  pixels: [
+    // Character at lowest point, left foot planted
+    { x: 23, y: 10, color: { r: 139, g: 90, b: 43, a: 255 } },  // Head
+    { x: 24, y: 10, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 23, y: 16, color: { r: 50, g: 100, b: 200, a: 255 } },  // Body
+    { x: 24, y: 16, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Left arm back, right arm forward
+    { x: 21, y: 17, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 26, y: 17, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Left leg forward, right leg back extended
+    { x: 20, y: 20, color: { r: 101, g: 67, b: 33, a: 255 } },  // Left
+    { x: 27, y: 21, color: { r: 101, g: 67, b: 33, a: 255 } }   // Right
+  ]
+})
+
+// Frame 2: Recoil - absorbing impact
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (slight compression, legs slightly bent)
+
+// Frame 3: Passing 1 - beginning to rise
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (body starting to rise, legs coming together)
+
+// Frame 4: High point - apex of motion
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (body at highest, legs nearly together, vertical)
+
+// Frame 5: Contact - right foot forward
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (mirror of frame 1, right foot now forward)
+
+// Frame 6: Recoil - absorbing impact (right side)
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (slight compression on right side)
+
+// Frame 7: Passing 2 - beginning to rise
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (body rising again, legs coming together)
+
+// Frame 8: High point - apex returning to start
+mcp__aseprite__add_frame({ duration: 75 })
+// ... (body at high point, completing cycle)
+
+// Set consistent smooth timing
+for (let i = 1; i <= 8; i++) {
+  mcp__aseprite__set_frame_duration({ frame: i, duration: 75 })
+}
+
+mcp__aseprite__create_tag({
+  name: "smooth_walk",
+  fromFrame: 1,
+  toFrame: 8,
+  direction: "forward"
+})
+```
+
+**Result:**
+A fluid 8-frame walk cycle with smooth weight transfer and natural body movement.
+
+**Visual Description:**
+The animation shows detailed walking mechanics with the body rising and falling naturally. Arms swing opposite to legs, the torso compresses slightly on foot contact, and rises smoothly during passing poses. The extra frames create very smooth motion at 75ms per frame.
+
+---
+
+## Complex Animations
+
+### Example 6: Jump Sequence
+
+**User Request:**
+> "Create a jump animation - anticipation, takeoff, air, landing"
+
+**Approach:**
+1. Frame 1-2: Crouch (anticipation)
+2. Frame 3: Takeoff push
+3. Frame 4-6: Rising (different heights)
+4. Frame 7-8: Falling
+5. Frame 9: Land (compression)
+6. Frame 10: Return to idle
+
+**Tool Calls:**
+```javascript
+mcp__aseprite__create_canvas({
+  width: 32,
+  height: 48,
+  colorMode: "rgb",
+  name: "jump-animation"
+})
+
+// Frame 1: Start crouch anticipation
+mcp__aseprite__draw_pixels({
+  frame: 1,
+  pixels: [
+    // Character in normal standing position
+    { x: 15, y: 20, color: { r: 139, g: 90, b: 43, a: 255 } },  // Head
+    { x: 16, y: 20, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 24, color: { r: 50, g: 100, b: 200, a: 255 } },  // Body
+    { x: 16, y: 24, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 15, y: 28, color: { r: 101, g: 67, b: 33, a: 255 } },  // Legs
+    { x: 16, y: 28, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 2: Deep crouch
+mcp__aseprite__add_frame({ duration: 150 })
+
+mcp__aseprite__draw_pixels({
+  frame: 2,
+  pixels: [
+    // Character crouched lower (head down 4 pixels, legs compressed)
+    { x: 15, y: 24, color: { r: 139, g: 90, b: 43, a: 255 } },  // Head lower
+    { x: 16, y: 24, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 27, color: { r: 50, g: 100, b: 200, a: 255 } },  // Body lower
+    { x: 16, y: 27, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 14, y: 30, color: { r: 101, g: 67, b: 33, a: 255 } },  // Legs bent wide
+    { x: 15, y: 30, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 30, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 17, y: 30, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 3: Takeoff extension
+mcp__aseprite__add_frame({ duration: 100 })
+
+mcp__aseprite__draw_pixels({
+  frame: 3,
+  pixels: [
+    // Character extending upward, arms down
+    { x: 15, y: 22, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 22, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 25, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 25, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Legs extended downward, pushing off
+    { x: 15, y: 28, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 28, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 15, y: 29, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 29, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 4: Rising - low air
+mcp__aseprite__add_frame({ duration: 100 })
+
+mcp__aseprite__draw_pixels({
+  frame: 4,
+  pixels: [
+    // Character rising, arms starting to go up
+    { x: 15, y: 16, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 16, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 19, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 19, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Arms raised halfway
+    { x: 13, y: 19, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 18, y: 19, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Legs tucked
+    { x: 15, y: 22, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 22, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 5: Apex - highest point
+mcp__aseprite__add_frame({ duration: 150 })
+
+mcp__aseprite__draw_pixels({
+  frame: 5,
+  pixels: [
+    // Character at peak, arms fully raised
+    { x: 15, y: 10, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 16, y: 10, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 15, y: 13, color: { r: 50, g: 100, b: 200, a: 255 } },
+    { x: 16, y: 13, color: { r: 50, g: 100, b: 200, a: 255 } },
+    // Arms up
+    { x: 14, y: 9, color: { r: 139, g: 90, b: 43, a: 255 } },
+    { x: 17, y: 9, color: { r: 139, g: 90, b: 43, a: 255 } },
+    // Legs tucked compact
+    { x: 15, y: 16, color: { r: 101, g: 67, b: 33, a: 255 } },
+    { x: 16, y: 16, color: { r: 101, g: 67, b: 33, a: 255 } }
+  ]
+})
+
+// Frame 6: Falling - beginning descent
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Frame 7: Falling - mid descent
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Frame 8: Landing preparation
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Frame 9: Impact compression
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Frame 10: Recovery to idle
+mcp__aseprite__add_frame({ duration: 150 })
+
+// Create jump animation tag
+mcp__aseprite__create_tag({
+  name: "jump",
+  fromFrame: 1,
+  toFrame: 10,
+  direction: "forward"
+})
+```
+
+**Result:**
+A complete jump animation with anticipation, aerial phase, and landing recovery.
+
+**Visual Description:**
+The character crouches down in preparation (frames 1-2), explosively extends upward (frame 3), rises into the air with arms moving up (frames 4-5), hangs at the apex (frame 5), falls back down (frames 6-7), prepares for landing (frame 8), compresses on impact (frame 9), and recovers to standing (frame 10).
+
+---
+
+## Linked Cels
+
+### Example 7: Walking with Static Background
+
+**User Request:**
+> "Create a walk cycle but keep the background layer the same across all frames"
+
+**Approach:**
+1. Create background layer
+2. Draw static background on frame 1
+3. Link background cel across all frames
+4. Create character layer
+5. Animate character walk on character layer only
+
+**Tool Calls:**
+```javascript
+mcp__aseprite__create_canvas({
+  width: 64,
+  height: 48,
+  colorMode: "rgb",
+  name: "walk-with-background"
+})
+
+// Create background layer
+mcp__aseprite__add_layer({
+  name: "background"
+})
+
+// Draw static background on frame 1
+mcp__aseprite__draw_pixels({
+  layer: "background",
+  frame: 1,
+  pixels: [
+    // Sky - fill top half with blue
+    ...Array.from({ length: 64 * 20 }, (_, i) => ({
+      x: i % 64,
+      y: Math.floor(i / 64),
+      color: { r: 135, g: 206, b: 235, a: 255 }
+    })),
+    // Ground - fill bottom with green
+    ...Array.from({ length: 64 * 28 }, (_, i) => ({
+      x: i % 64,
+      y: 20 + Math.floor(i / 64),
+      color: { r: 34, g: 139, b: 34, a: 255 }
+    }))
+  ]
+})
+
+// Add frames for walk cycle
+mcp__aseprite__add_frame({ duration: 100 })
+mcp__aseprite__add_frame({ duration: 100 })
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Link background cel across all frames (background stays static)
+mcp__aseprite__link_cel({
+  layer: "background",
+  frame: 1,
+  targetFrames: [2, 3, 4]
+})
+
+// Create character layer for animation
+mcp__aseprite__add_layer({
+  name: "character"
+})
+
+// Animate character walk on character layer
+// Frame 1: Contact
+mcp__aseprite__draw_pixels({
+  layer: "character",
+  frame: 1,
+  pixels: [/* character pose 1 */]
+})
+
+// Frame 2: Passing
+mcp__aseprite__draw_pixels({
+  layer: "character",
+  frame: 2,
+  pixels: [/* character pose 2 */]
+})
+
+// Frame 3: Contact
+mcp__aseprite__draw_pixels({
+  layer: "character",
+  frame: 3,
+  pixels: [/* character pose 3 */]
+})
+
+// Frame 4: Passing
+mcp__aseprite__draw_pixels({
+  layer: "character",
+  frame: 4,
+  pixels: [/* character pose 4 */]
+})
+
+mcp__aseprite__create_tag({
+  name: "walk_with_bg",
+  fromFrame: 1,
+  toFrame: 4,
+  direction: "forward"
+})
+```
+
+**Result:**
+A walk cycle animation where the background remains static while the character animates.
+
+**Visual Description:**
+The background layer (sky and ground) remains identical across all frames thanks to linked cels. Only the character layer changes, showing the walk cycle. This is memory-efficient and typical for game animations.
+
+---
+
+## Multiple Animation Tags
+
+### Example 8: Character with Idle, Walk, and Attack
+
+**User Request:**
+> "Create a character spritesheet with separate idle, walk, and attack animations"
+
+**Approach:**
+1. Create canvas
+2. Frames 1-4: Idle animation
+3. Frames 5-8: Walk animation
+4. Frames 9-14: Attack animation
+5. Tag each animation sequence
+6. Set appropriate durations
+
+**Tool Calls:**
+```javascript
+mcp__aseprite__create_canvas({
+  width: 32,
+  height: 32,
+  colorMode: "rgb",
+  name: "character-animations"
+})
+
+// === IDLE ANIMATION (Frames 1-4) ===
+// Frame 1: Idle base
+mcp__aseprite__draw_pixels({
+  frame: 1,
+  pixels: [/* idle pose 1 */]
+})
+
+// Frame 2: Idle breath
+mcp__aseprite__add_frame({ duration: 500 })
+mcp__aseprite__draw_pixels({
+  frame: 2,
+  pixels: [/* idle pose 2 - slight body rise */]
+})
+
+// Frame 3: Hold
+mcp__aseprite__duplicate_frame({ sourceFrame: 2, duration: 300 })
+
+// Frame 4: Return
+mcp__aseprite__duplicate_frame({ sourceFrame: 1, duration: 200 })
+
+// Tag idle animation
+mcp__aseprite__create_tag({
+  name: "idle",
+  fromFrame: 1,
+  toFrame: 4,
+  direction: "forward"
+})
+
+// === WALK ANIMATION (Frames 5-8) ===
+// Frame 5: Left foot forward
+mcp__aseprite__add_frame({ duration: 100 })
+mcp__aseprite__draw_pixels({
+  frame: 5,
+  pixels: [/* walk pose 1 */]
+})
+
+// Frame 6: Passing
+mcp__aseprite__add_frame({ duration: 100 })
+mcp__aseprite__draw_pixels({
+  frame: 6,
+  pixels: [/* walk pose 2 */]
+})
+
+// Frame 7: Right foot forward
+mcp__aseprite__add_frame({ duration: 100 })
+mcp__aseprite__draw_pixels({
+  frame: 7,
+  pixels: [/* walk pose 3 */]
+})
+
+// Frame 8: Passing
+mcp__aseprite__add_frame({ duration: 100 })
+mcp__aseprite__draw_pixels({
+  frame: 8,
+  pixels: [/* walk pose 4 */]
+})
+
+// Tag walk animation
+mcp__aseprite__create_tag({
+  name: "walk",
+  fromFrame: 5,
+  toFrame: 8,
+  direction: "forward"
+})
+
+// === ATTACK ANIMATION (Frames 9-14) ===
+// Frame 9: Wind up
+mcp__aseprite__add_frame({ duration: 150 })
+mcp__aseprite__draw_pixels({
+  frame: 9,
+  pixels: [/* attack windup */]
+})
+
+// Frame 10: Anticipation
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Frame 11: Strike start
+mcp__aseprite__add_frame({ duration: 50 })
+
+// Frame 12: Strike peak
+mcp__aseprite__add_frame({ duration: 50 })
+
+// Frame 13: Follow through
+mcp__aseprite__add_frame({ duration: 100 })
+
+// Frame 14: Recovery
+mcp__aseprite__add_frame({ duration: 150 })
+
+// Tag attack animation
+mcp__aseprite__create_tag({
+  name: "attack",
+  fromFrame: 9,
+  toFrame: 14,
+  direction: "forward"
+})
+```
+
+**Result:**
+A complete character animation set with three distinct, tagged animations that can be called independently.
+
+**Visual Description:**
+The sprite file contains three separate animation sequences: frames 1-4 show idle breathing, frames 5-8 show walking, frames 9-14 show an attack. Each animation is tagged so game engines can play "idle", "walk", or "attack" on demand.
+
+---
+
+## Summary
+
+This examples collection demonstrates the pixel-art-animator skill's capabilities:
+
+- **Simple idle animations** (Examples 1-3): Basic 2-3 frame loops for breathing, bobbing, blinking
+- **Walk cycles** (Examples 4-5): Both simple 4-frame and detailed 8-frame walks
+- **Complex animations** (Example 6): Multi-phase sequences like jumping
+- **Linked cels** (Example 7): Efficient background management
+- **Multiple animations** (Example 8): Complete character animation sets with tags
+
+Each example shows complete MCP tool call syntax with frame-by-frame breakdowns, timing considerations, and tagging strategies for game-ready animations.

skills/pixel-art-animator/reference.md

@@ -0,0 +1,270 @@
+# Pixel Art Animator - Technical Reference
+
+## Frame Rate Conversions
+
+| FPS | Frame Duration (ms) | Use Case |
+|-----|-------------------|----------|
+| 60 | 16-17 | Smooth modern games, very fast animation |
+| 30 | 33 | Standard modern animation |
+| 24 | 42 | Film-like animation |
+| 20 | 50 | Smooth retro animation |
+| 15 | 67 | Retro game animation |
+| 12 | 83 | Traditional animation (on twos) |
+| 10 | 100 | Classic pixel art animation |
+| 8 | 125 | Slower animation |
+| 6 | 167 | Very slow animation |
+| 4 | 250 | Idle/breathing animations |
+| 2 | 500 | Very slow idle effects |
+
+## Classic Animation Cycles
+
+### Walk Cycle (4 frames)
+```
+Frame 1: Contact (right foot forward)
+Frame 2: Down (compression)
+Frame 3: Pass (left foot passing)
+Frame 4: Up (right foot pushes off)
+```
+
+### Run Cycle (8 frames)
+```
+Frame 1: Contact right
+Frame 2: Down right
+Frame 3: Pass
+Frame 4: Up left
+Frame 5: Contact left
+Frame 6: Down left
+Frame 7: Pass
+Frame 8: Up right
+```
+
+### Idle Breathing (2-4 frames)
+```
+2-frame:
+- Frame 1: Normal
+- Frame 2: Slight rise (+1-2 pixels vertically)
+
+4-frame:
+- Frame 1: Normal
+- Frame 2: Inhale (expand)
+- Frame 3: Hold (peak)
+- Frame 4: Exhale (contract)
+```
+
+## Animation Principles (applied to pixel art)
+
+### 1. Timing
+- Slow movements: more frames, longer durations
+- Fast movements: fewer frames, shorter durations
+- Impacts: very short duration (30-50ms)
+
+### 2. Anticipation
+- Windup before action (crouch before jump)
+- 1-2 frames of preparation
+- Makes action feel more powerful
+
+### 3. Follow-through
+- Continuation after main action
+- Hair, clothes continue moving after body stops
+- 1-2 frames of settling
+
+### 4. Ease In/Ease Out
+- Slow start, fast middle, slow end
+- Variable frame durations:
+  - Start: 150ms
+  - Middle: 50ms
+  - End: 150ms
+
+### 5. Arcs
+- Natural motion follows arcs, not straight lines
+- Jumping: arc trajectory
+- Swinging arms: arc motion
+
+### 6. Squash and Stretch
+- Exaggeration for impact
+- Ball bouncing: squash on impact, stretch in air
+- 1-2 pixels of deformation
+
+## Retro Console Frame Limitations
+
+### NES (Nintendo Entertainment System)
+- Typical: 60 FPS engine, animations at 10-15 FPS
+- Sprite flicker for >8 sprites/scanline
+- Limited sprite sizes influenced animation
+
+### Game Boy
+- 60 FPS capability, animations at 8-15 FPS
+- Simple animations due to small sprites
+- 2-4 frame cycles common
+
+### SNES (Super Nintendo)
+- 60 FPS capable, smoother animations possible
+- 8-16 frame animations for characters
+- More detailed animation than NES
+
+## Frame Count Guidelines
+
+| Animation Type | Frame Count | Typical FPS | Notes |
+|----------------|-------------|-------------|-------|
+| Idle | 2-4 | 4-6 | Subtle, looping |
+| Walk | 4-8 | 10-12 | Even, rhythmic |
+| Run | 6-12 | 12-15 | Faster than walk |
+| Jump | 4-8 | 12-15 | Arc motion |
+| Attack | 3-8 | 12-20 | Fast strike, slow recovery |
+| Death | 5-10 | 8-12 | Dramatic, doesn't loop |
+| Spell Cast | 4-10 | 10-15 | Buildup, release, recovery |
+| Item Use | 3-6 | 12-15 | Quick action |
+
+## Animation Tag Best Practices
+
+### Naming Conventions
+- Lowercase, descriptive names
+- Examples: "idle", "walk", "run", "attack", "jump", "death"
+- Variations: "walk_left", "walk_right", "attack_1", "attack_2"
+
+### Organization Strategies
+
+**Sequential Layout:**
+```
+Frames 1-2: idle
+Frames 3-6: walk
+Frames 7-12: run
+Frames 13-17: attack
+```
+
+**Grouped Layout:**
+```
+Frames 1-10: Player character animations
+Frames 11-20: Enemy character animations
+Frames 21-30: Special effects
+```
+
+### Playback Directions
+
+**Forward:**
+- Most animations (walk, run, attack)
+- Plays once through, then loops
+
+**Reverse:**
+- Rare, for special effects
+- Rewinding animations
+
+**Ping-pong:**
+- Idle breathing
+- Flickering effects
+- Oscillating animations
+- Plays forward, then backward, then repeats
+
+## Linked Cel Strategies
+
+### When to Use
+1. **Static backgrounds** across animated character
+2. **Unchanged parts** of character (e.g., hat while body animates)
+3. **Repeated frames** in cycle (exact duplicates)
+4. **Memory optimization** for large sprites
+
+### When NOT to Use
+1. **Every frame is different** (no shared data)
+2. **Small sprites** (minimal memory saved)
+3. **Experimental animations** (may need to edit each frame)
+
+### Workflow
+1. Create frames
+2. Identify repeated/static content
+3. Link cels for that content
+4. Edit linked cel once, updates all
+
+## Performance Considerations
+
+### Efficient Animation
+- **Batch operations:** Add multiple frames at once when possible
+- **Duplicate then edit:** Faster than creating from scratch
+- **Link static content:** Saves memory and editing time
+
+### Large Sprites
+- 128x128+ sprites with many frames can be slow
+- Consider breaking into smaller parts
+- Use layers and linked cels strategically
+
+## Common Timing Patterns
+
+### Even Timing (simplest)
+```
+All frames: 100ms
+```
+Predictable, easy to edit.
+
+### Hold First Frame
+```
+Frame 1: 200ms (starting pose)
+Frames 2-4: 100ms (action)
+```
+Emphasizes starting position.
+
+### Hold Last Frame
+```
+Frames 1-3: 100ms (action)
+Frame 4: 200ms (ending pose)
+```
+Emphasizes ending position.
+
+### Fast Action
+```
+Frame 1: 150ms (anticipation)
+Frame 2: 30ms (strike)
+Frame 3: 100ms (follow-through)
+```
+Creates snappy, impactful feel.
+
+### Slow Buildup
+```
+Frame 1: 200ms
+Frame 2: 150ms
+Frame 3: 100ms
+Frame 4: 50ms
+```
+Accelerating motion.
+
+## Sprite Sheet Export Considerations
+
+When planning animations for export:
+
+1. **Frame Layout:**
+   - Horizontal strip: all frames in one row
+   - Vertical strip: all frames in one column
+   - Grid: frames arranged in rows/columns
+
+2. **Frame Dimensions:**
+   - Keep all frames same size for easy parsing
+   - Padding between frames if needed
+
+3. **Animation Tags:**
+   - Export tags separately or together
+   - Game engines can reference tag names
+
+4. **File Format:**
+   - GIF for simple web animations (256 colors max)
+   - PNG sequence for high quality
+   - Sprite sheet for game engines
+
+## Integration with Game Engines
+
+### Unity
+- Import sprite sheet
+- Use Unity's animation system
+- Reference animation tags (if exported in metadata)
+
+### Godot
+- SpriteFrames resource
+- AnimationPlayer node
+- Import PNG sequences or sprite sheets
+
+### Phaser (JavaScript)
+- Load sprite sheet
+- Define animations with frame ranges
+- Play animations by name
+
+### GameMaker
+- Import sprite strip
+- Set frames per second
+- Automatic loop on last frame