
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads solid-drawing-mastery automatically when relevant.
- 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
- Inconsistent scale: Objects changing size without intent
- Flat rotation: X-axis scale instead of perspective rotation
- Broken construction: Forms distorting incorrectly during motion
- Weight contradiction: Heavy objects acting light, or vice versa
- Spatial discontinuity: Objects existing in impossible spatial relationships
The Construction Approach
For any animated object, understand:
- What is its basic form? (sphere, cylinder, box, combination)
- Where is its center of mass?
- How does it exist in 3D space?
- 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
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
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.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular frontend & design skills
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-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.
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.
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.
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.