spatial-thinking
Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
Works with
--- 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. license: MIT --- # 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.
More Testing skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
agent-browser
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
setup-pre-commit
mattpocock/skills
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.

