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

solid-drawing-mastery — скилл для Claude Code: объём в анимации

Скилл для тех, кто делает анимацию и хочет, чтобы объекты в движении выглядели объёмными, а не плоскими. Помогает ловить ошибки перспективы и веса.

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

Что делает solid-drawing-mastery

Скилл объясняет принцип solid drawing применительно к цифровой анимации: трансформации и перемещения должны ощущаться как движения тел в пространстве, а не как манипуляции плоскими фигурами. Внутри — разбор объёма, перспективы, распределения массы и согласованности конструкции.

Отдельно разобраны частые ошибки: объект меняет размер без причины, вращение подменяется масштабированием по X, форма ломается в движении, тяжёлый предмет ведёт себя как лёгкий. Есть разделы по UI-анимации, персонажам, моушн-графике и игровым спрайтам. Советует задавать точку отсчёта трансформаций по центру массы объекта и проверять вращения настоящими 3D-трансформациями, прежде чем заменять их 2D-приближением.

Практическая польза проявляется на этапе правок: когда движение кажется «плоским» или «неправильным», скилл даёт список того, что проверить — масштаб, перспективу, вес. Отдельно предупреждает про касания контуров: если края элементов случайно совпадают, глубина пропадает.

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

  • проверить, не меняет ли объект размер при вращении
  • настроить точку отсчёта трансформации по центру массы
  • отличить настоящий 3D-поворот от масштабирования по X
  • разобраться, почему анимация выглядит плоской
  • сохранить объём при squash и stretch

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

  • Проверь анимацию карточки: вращение выглядит плоским, что не так?
  • Задай точку отсчёта для этого элемента по центру массы и объясни выбор
  • Найди в этой анимации нарушения solid drawing

Как установить solid-drawing-mastery

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill solid-drawing-mastery -a claude-code

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

~/.claude/skills/solid-drawing-mastery/SKILL.md

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

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

Вопросы о solid-drawing-mastery

Как установить solid-drawing-mastery в Claude?

Выполните npx skills add dylantarre/animation-principles --skill solid-drawing-mastery -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/solid-drawing-mastery/SKILL.md.

Что делает solid-drawing-mastery?

Разбирает принцип solid drawing для цифровой анимации: объём, перспектива, вес и целостность конструкции. Помогает находить ошибки, из-за которых движение кажется плоским.

С какими платформами работает скилл?

Кроме Claude, установка предусмотрена для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

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

SKILL.md · MIT
---
name: solid-drawing-mastery
description: Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.
---

# Solid Drawing Mastery

## The Dimensional Principle

Solid drawing means creating the illusion of three-dimensional form, weight, and volume. In traditional animation, it meant understanding anatomy, perspective, and form. In digital motion, it means ensuring transforms and movements feel grounded in physical space, not flat manipulations of 2D shapes.

## Core Theory

**Form over symbol**: Beginning animators draw symbols (a circle for a head, lines for arms). Master animators draw forms—volumes that exist in space with weight and dimension.

**Construction consistency**: Objects must maintain consistent volume and proportions throughout motion. A character's head shouldn't grow when they turn. A box shouldn't warp into a trapezoid.

## The Three-Dimensional Challenge

Animation exists in time, but also in space. Solid drawing ensures:
- **Volume consistency**: Objects don't accidentally grow or shrink
- **Perspective accuracy**: Rotations follow dimensional rules
- **Weight presence**: Forms feel like they have mass occupying space
- **Structural integrity**: Objects don't collapse or warp incorrectly

## Elements of Solidity

**Construction**: Understanding what's beneath the surface—skeleton, structure
**Perspective**: Proper foreshortening, vanishing points, spatial relationships
**Volume**: Maintaining 3D mass during 2D representation
**Weight distribution**: How mass shifts and settles in space
**Lighting consistency**: Shadows and highlights that reinforce form

## Interaction with Other Principles

**Squash/stretch must maintain volume**: The core solid drawing constraint—deformation without mass change.

**Arcs exist in 3D space**: Paths must make dimensional sense, not just screen-space sense.

**Follow through respects physics**: Secondary elements move as 3D forms, not flat graphics.

**Staging considers depth**: Solid drawing enables clear spatial relationships.

## Domain Applications

### UI/Motion Design
- **3D transforms**: Rotations must respect perspective and vanishing points
- **Depth layers**: Z-space relationships remain consistent during motion
- **Scale animations**: Objects scale from logical center points, not arbitrary origins
- **Card flips**: Perspective-accurate rotations, not flat X-axis scales
- **Shadows**: Move consistently with object position in 3D space

### Character Animation
- **Turn-arounds**: Consistent model through all angles
- **Foreshortening**: Limbs approaching camera handled correctly
- **Weight acting**: Characters feel like they have mass
- **Solid posing**: Balanced, weighted poses that could exist physically

### Motion Graphics
- **3D object animation**: Proper lighting, perspective, occlusion
- **Isometric design**: Consistent projection rules maintained
- **Pseudo-3D effects**: Parallax and depth that feel spatially correct
- **Logo dimension**: Flat logos given dimensional treatment consistently

### Game Design
- **Sprite animation**: Implied 3D form in 2D representation
- **Camera moves**: Spatial relationships maintained during sweeps
- **Environmental animation**: Objects existing convincingly in game space

## Common Mistakes

1. **Inconsistent scale**: Objects changing size without intent
2. **Flat rotation**: X-axis scale instead of perspective rotation
3. **Broken construction**: Forms distorting incorrectly during motion
4. **Weight contradiction**: Heavy objects acting light, or vice versa
5. **Spatial discontinuity**: Objects existing in impossible spatial relationships

## The Construction Approach

For any animated object, understand:
1. What is its basic form? (sphere, cylinder, box, combination)
2. Where is its center of mass?
3. How does it exist in 3D space?
4. What happens to its structure during motion?

This mental model prevents dimensional accidents.

## Digital Solidity Techniques

**Transform origins**: Set pivot points that match object's logical center of mass
**Perspective transforms**: Use true 3D transforms, not 2D approximations
**Z-index management**: Consistent depth layering throughout animation
**Shadow animation**: Shadows move and scale with object position
**Parallax rates**: Consistent depth perception through motion

## The Tangent Trap

Beware of tangencies—where edges accidentally align, destroying depth perception. In motion, this means ensuring overlapping elements maintain clear spatial separation throughout animation.

## Implementation Heuristic

Before animating, define the object's 3D form and origin point. During animation, periodically check: does this still feel like a solid object in space? Test rotations with true 3D transforms before approximating with 2D shortcuts. When motion feels "flat" or "wrong," check for solid drawing violations—inconsistent scale, broken perspective, or weightless movement.

© dylantarre · MIT · dylantarre/animation-principles

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

Всё по теме «Дизайн» →
animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок spline-interactive freshtechbro Справочник по интеграции 3D-сцен Spline в веб-проекты. Помогает встроить интерактивную графику в React без ручного написания WebGL-кода. CX Codex +1 2 800установок 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установок motion-design LottieFiles Скилл помогает проектировать анимации интерфейса: выбирать длительность, easing и последовательность движения. Пригодится для микровзаимодействий, загрузки и переходов между страницами. CX Codex +1 19 900установок

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

navigation-menus Скилл для анимации навбаров, меню и сайдбаров: тайминги, кривые и состояния переходов по принципам Disney. CX Codex +1 554установок buttons-ctas Скилл для ИИ-кодинга, который подсказывает агенту, как анимировать кнопки и CTA: состояния, тайминги, CSS-переходы. CX Codex +1 550установок figma-prototyping Скилл подсказывает агенту, как собрать прототип в Figma по 12 принципам анимации Диснея — через Smart Animate и варианты компонентов. CX Codex +1 548установок motion-one Скилл показывает, как собрать 12 принципов анимации Диснея на библиотеке Motion One — от squash and stretch до stagger и scroll. CX Codex +1 541установок 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установок

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

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