Skip to main content
skill CX Codex

solid-drawing-mastery — Claude Code skill: volume in motion

A skill for anyone animating UI or characters who wants objects to read as solid forms in space instead of flat shapes sliding around.

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

What solid-drawing-mastery does

The skill walks through solid drawing as it applies to digital motion: transforms and movement should feel grounded in physical space, not like flat manipulation of 2D shapes. It covers volume, perspective, weight distribution and construction consistency.

There is a list of common mistakes — objects changing size without intent, X-axis scaling passed off as rotation, forms warping mid-motion, heavy objects behaving light. Separate sections cover UI motion, character animation, motion graphics and game sprites. The advice is to set transform origins at the object's logical center of mass and test rotations with true 3D transforms before falling back to 2D approximations.

The payoff shows up during review. When motion feels flat or wrong, the skill gives you a checklist: scale, perspective, weight. It also flags tangencies — edges that accidentally line up and kill the sense of depth.

What it helps with

  • check whether an object changes size while rotating
  • set a transform origin at the center of mass
  • tell a real 3D rotation from an X-axis scale
  • diagnose why an animation reads as flat
  • keep volume intact through squash and stretch

Example prompts for the agent

  • Check this card animation — the rotation looks flat, what's wrong?
  • Set the transform origin for this element at its center of mass and explain the choice
  • Find the solid drawing violations in this animation

How to install solid-drawing-mastery

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/solid-drawing-mastery/

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

Questions about solid-drawing-mastery

How do I install solid-drawing-mastery in Claude?

Run npx skills add dylantarre/animation-principles --skill solid-drawing-mastery -a claude-code. The skill file then lands at ~/.claude/skills/solid-drawing-mastery/SKILL.md.

What does solid-drawing-mastery do?

It applies the solid drawing principle to digital animation: volume, perspective, weight and structural integrity. It helps you spot the mistakes that make motion look flat.

Which platforms does the skill support?

Besides Claude, install commands are provided for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Source text

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

Similar skills

Everything for Design →

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