К основному содержанию
скилл CX Codex

spatial-thinking — скилл для Claude Code: анимация в 3D

Скилл для ИИ-агента, который заставляет думать о кадре как о трёхмерном пространстве: глубина, перспектива, объём. Пригодится, когда персонаж плывёт над полом или камера едет не туда.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add dylantarre/animation-principles --skill spatial-thinking -a claude-code
Открыть на GitHub

Что делает spatial-thinking

Скилл задаёт агенту ментальную модель: экран — это окно, а не холст. Перед анимацией он спрашивает, где объект находится в 3D и как движется сквозь это пространство. Анимация тут считается четырёхмерной: три оси плюс время.

Внутри — разбор двенадцати принципов анимации через призму объёма. Solid Drawing требует знать, как выглядит спина объекта. Arcs превращаются в сферические траектории, а не плоские дуги. Staging работает с осью Z: передний план, средний, задний. Squash & Stretch сохраняет объём при деформации. Отдельно идёт чек-лист пространственной осведомлённости: где пол, где источник света, что что перекрывает, каков угол камеры.

Есть список типичных ошибок — парение персонажа, потеря глубины в сложных позах, дрейф масштаба, касания краёв, разная перспектива у элементов. Для каждого случая («плоско», «путано») даны шаги: добавить перекрытия, включить движение по Z, развести слои глубины. Скилл текстовый, ничего не запускает. Ставится одной командой через npx skills; для GitHub Copilot путь другой — gh skill install.

Какие задачи решает

  • заземлить персонажа, который висит над полом
  • разобраться, почему сцена выглядит плоской
  • выстроить порядок перекрытия объектов по глубине
  • поймать дрейф масштаба между кадрами
  • спланировать движение камеры по оси Z

Примеры запросов агенту

  • персонаж будто парит над землёй, проверь пространство сцены
  • сцена выглядит плоской, добавь глубины по чек-листу
  • камера едет на зрителя, распиши траекторию и перспективу

Как установить spatial-thinking

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/spatial-thinking/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о spatial-thinking

Как установить spatial-thinking в Claude?

Выполните npx skills add dylantarre/animation-principles --skill spatial-thinking -a claude-code. Файл скилла появится по пути ~/.claude/skills/spatial-thinking/SKILL.md.

Что делает spatial-thinking?

Учит агента думать об анимации в трёх измерениях: где объект в пространстве, как он движется по осям, что перекрывает что. Разбирает 12 принципов анимации через объём и перспективу.

Для каких платформ подходит скилл?

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой платформы своя команда установки и свой путь к файлу скилла.

Исходный текст

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

Похожие скиллы

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
spline-interactive freshtechbro Справочник по интеграции 3D-сцен Spline в веб-проекты. Помогает встроить интерактивную графику в React без ручного написания WebGL-кода. CX Codex +1 2 800установок meshy-3d-generation meshy-dev Создаёт 3D-модели, текстурирует меши и настраивает анимации через Meshy CLI 0.4.3. Пригодится при добавлении файлов GLB и glTF в проект прямо из терминала. CX Codex +1 2 300установок title-sequence-3d charlie947 Скилл собирает кинематографичный 3D-опенер на Three.js в одном HTML-файле. Пригодится, когда для видеоролика или рассылки нужна яркая заставка с неоновыми вывесками и логотипами. CX Codex +1 1 500установок threejs-towers MengTo Собирает пагоды, замки и купола из параметров вместо меш-файлов и показывает, как постройка растёт снизу вверх. CX Codex +1 1 200установок threejs-landscape MengTo Скилл собирает живой ландшафт на Three.js: холмы, трава, камни, небо и смена времени суток. Годится для hero-фонов и сцен, где объект должен стоять в месте, а не висеть на градиенте. CX Codex +1 1 200установок blender-animation RobLe3 Скилл для ИИ-агента, который ставит ключевые кадры, настраивает кривые и морф-таргеты в Blender через MCP-сервер. CX Codex +1 1 300установок

Из того же набора86

icons-badges Скилл для анимации иконок, бейджей, аватаров и статус-индикаторов. Пригодится, когда мелкие элементы интерфейса должны давать отклик и характер. CX Codex +1 535установок gesture-responses Скилл для анимации отклика на тап, свайп и перетаскивание: задаёт тайминги, кривые и паттерны для CSS и JS. CX Codex +1 533установок gaming-entertainment Скилл для анимаций в игровых приложениях, стриминговых сервисах и интерактивных медиа: раскладывает 12 принципов Disney по элементам интерфейса. CX Codex +1 532установок ux-researcher Помогает агенту планировать исследования о том, как анимация влияет на восприятие, ошибки и время выполнения задачи. CX Codex +1 525установок arc-mastery Скилл для анимации движения: объясняет, почему прямые линии выглядят механически, и как строить дуги в UI, персонажах и играх. CX Codex +1 523установок micro-100-200ms Скилл для микроанимаций длительностью 100–200 мс: подсказки, выпадающие меню, мелкая обратная связь. Помогает подобрать тайминг и кривые. CX Codex +1 518установок calm-relaxation Скилл для ИИ-кодинга, который задаёт правила плавных и тихих анимаций: длинные тайминги, мягкие кривые, никаких резких движений. CX Codex +1 519установок slow-in-out-mastery Скилл для ИИ-агента, который подсказывает, какую кривую ускорения и замедления выбрать в анимации интерфейса или персонажа. CX Codex +1 517установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой