MCPInstall

solid-drawing-mastery

Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.

Installs
538
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/dylantarre/animation-principles --skill solid-drawing-mastery
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads solid-drawing-mastery automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the solid-drawing-mastery skill do?

Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.

How do I install solid-drawing-mastery?

Run npx skills add https://github.com/dylantarre/animation-principles --skill solid-drawing-mastery in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/solid-drawing-mastery/ (personal) or .claude/skills/solid-drawing-mastery/ (project).

Which AI agents can use solid-drawing-mastery?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is solid-drawing-mastery safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains solid-drawing-mastery?

It is published by dylantarre in dylantarre/animation-principles. It has 538 recorded installs.

More from dylantarre/animation-principles

View all →

video-motion-graphics

dylantarre/animation-principles

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.

Media & Creative2.4K installs

mobile-touch

dylantarre/animation-principles

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

Mobile2.4K installs

framer-motion

dylantarre/animation-principles

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

Frontend & Design1.7K installs

motion-designer

dylantarre/animation-principles

Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.

Frontend & Design1.6K installs

micro-interactions

dylantarre/animation-principles

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

Frontend & Design1.4K installs

web-motion-design

dylantarre/animation-principles

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.

Frontend & Design1.3K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs