Skip to main content
skill CX Codex

spatial-thinking — Claude Code skill for 3D animation

A skill that makes the AI agent treat every frame as a three-dimensional space: depth, perspective, volume. Useful when a character floats above the floor or the camera drifts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add dylantarre/animation-principles --skill spatial-thinking -a claude-code
Open on GitHub

What spatial-thinking does

The skill hands the agent a mental model: the screen is a window, not a canvas. Before animating anything, it asks where the object sits in 3D and how it travels through that space. Animation counts as four-dimensional here — three axes plus time.

Inside is a walkthrough of the twelve animation principles seen through volume. Solid Drawing means knowing what the back of a form looks like. Arcs become spherical paths instead of flat curves. Staging works along the Z-axis: foreground, midground, background. Squash & Stretch keeps volume while deforming. A spatial awareness checklist follows: where is the floor, where is the light, what overlaps what, what is the camera angle.

There is a list of common spatial errors — floating characters, flattening in complex poses, scale drift, tangents, mismatched perspective. For each symptom ("flat", "confusing") the skill gives steps: add overlapping elements, include Z-axis movement, separate depth layers. It is a text skill and runs nothing on its own. Install goes through npx skills; GitHub Copilot uses gh skill install instead.

What it helps with

  • ground a character that floats above the floor
  • find out why a scene reads flat
  • set the overlap order of objects by depth
  • catch scale drift between frames
  • plan a camera move along the Z-axis

Example prompts for the agent

  • the character seems to float above the ground, check the scene space
  • this scene looks flat, add depth using the checklist
  • the camera moves toward the viewer, work out the path and foreshortening

How to install spatial-thinking

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill spatial-thinking -a claude-code

2Manually: put the files in place

~/.claude/skills/spatial-thinking/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/spatial-thinking/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about spatial-thinking

How do I install spatial-thinking in Claude?

Run npx skills add dylantarre/animation-principles --skill spatial-thinking -a claude-code. The skill file lands at ~/.claude/skills/spatial-thinking/SKILL.md.

What does spatial-thinking do?

It teaches the agent to think about animation in three dimensions: where an object sits, how it moves along each axis, what overlaps what. It walks through the 12 animation principles via volume and perspective.

Which platforms does the skill support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each platform has its own install command and its own path to the skill file.

Source text

SKILL.md · MIT
---
name: spatial-thinking
description: Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
---

# Spatial Thinking

Think like a sculptor working in time. Your characters exist in three-dimensional space, even on a 2D screen. Every frame is a frozen moment in a world with depth.

## Core Mental Model

Before animating anything, ask: **Where is this in 3D space, and how does it move through that space?**

Animation is 4D: three spatial dimensions plus time. Characters have fronts and backs. Rooms have depth. Actions travel along vectors through real (imagined) environments.

## The 12 Principles Through Dimension

**Solid Drawing** — The foundation of spatial thinking. Every object has volume. Turn it around in your mind. Know what the back looks like. Draw through forms, not around them.

**Arcs** — All movement happens in 3D space. An arm swinging traces a curve through depth, not just across the screen. Think spherical paths, not flat shapes.

**Staging** — Spatial composition. Where in the Z-axis is each element? Foreground, midground, background create depth. Overlap establishes position in space.

**Squash & Stretch** — Deformation happens in 3D. When a ball squashes, it spreads outward in all directions, not just sideways. Maintain volume in depth.

**Anticipation** — Movement into the screen reads differently than across it. Anticipation toward camera: foreshortening increases. Away: forms recede.

**Follow Through & Overlapping Action** — Trailing elements exist in 3D. Hair doesn't just swing left-right; it wraps around forms, falls with gravity, catches on shoulders.

**Secondary Action** — Supporting elements occupy their own spatial positions. A cape occupies the space behind a character. Spatial consistency sells reality.

**Timing** — Depth affects perceived timing. Objects moving toward/away from camera have different visual rhythms than horizontal movement. Foreshortening compresses distance.

**Slow In & Slow Out** — Acceleration reads differently in depth. Objects approaching camera grow rapidly at the end (looming effect). Factor Z-axis speed changes.

**Exaggeration** — Spatial exaggeration includes depth. Characters can lean impossibly far into frame. Environments can stretch beyond physical possibility while maintaining spatial logic.

**Appeal** — Dynamic spatial composition is appealing. Interesting angles, depth variation, and dimensional poses create visual interest.

**Straight Ahead & Pose to Pose** — 3D motion paths are easier to plan (pose to pose). Complex spatial action benefits from knowing key positions in space before animating between them.

## Practical Application

**Spatial Awareness Checklist:**
- [ ] Where is the floor? Characters need grounding.
- [ ] Where is the light source? It defines form.
- [ ] What overlaps what? Establish depth order.
- [ ] What's the camera angle? Affects all foreshortening.
- [ ] What exists off-screen? Implied space matters.

**Common Spatial Errors:**
- Floating: Characters not connected to environment
- Flattening: Losing depth in complex poses
- Scale drift: Objects changing size unintentionally
- Tangents: Edges aligning in ways that flatten depth
- Perspective inconsistency: Elements not sharing the same spatial grid

When animation feels "flat":
1. Add overlapping elements to establish depth
2. Include Z-axis movement (toward/away from camera)
3. Use perspective in posing (near hand bigger than far hand)
4. Add environmental shadows grounding characters

When space feels "confusing":
1. Simplify depth layers
2. Establish clear foreground/background separation
3. Use staging to clarify spatial relationships
4. Add establishing shots before complex action

**Thinking in Depth:**
- Turn poses 45 degrees in your mind
- Imagine the camera orbiting your scene
- Consider what's behind every surface
- Track objects through continuous 3D paths

## The Golden Rule

**The screen is a window, not a canvas.** You're not decorating a flat surface—you're revealing a world that extends in all directions. Every element occupies a position in that world. Honor the space.

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set86

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor