solid-drawing-mastery
Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.
What this skill does
# 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.
Related in Image & Video
watch
IncludedWatch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.
physical-ai-defect-image-generation
IncludedUse when the user wants to orchestrate defect image generation, run associated setup, or handle outputs on OSMO. The Day 0 path handles cold-start with USD-to-ROI, image-edit augmentation, and AnomalyGen to create initial PCBA datasets. The Day 1 path performs inference and labeling on real images. This skill helps with first-time asset setup, creation of finetuning checkpoints, and configuring deployment. Trigger keywords: defect image generation, dig workflow, dig pipeline, defect image detection workflow, aoi pipeline, aoi anomalygen, usd2roi anomalygen, day 0 pcba, day 1 pcba, day 1 real-photo alignment, day 1 manual roi, metal surface anomaly, glass defect, anomalygen finetune, setup_pcb, setup_metal, setup_glass, setup_pretrained, dig setup, dig datasets, dig pretrained checkpoint, dig image-edit endpoint.
accelint-react-best-practices
IncludedReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimizing re-renders, memoization, state management; reviewing for performance; fixing hydration mismatches; debugging infinite re-renders, stale closures, input focus loss, animations restarting; preventing remounting; implementing transitions, lazy initialization, effect dependencies. Even simple React tasks benefit from these patterns. Covers React 19+ (useEffectEvent, Activity, ref props). Triggers - useEffect, useState, useMemo, useCallback, memo, inline components, nested components, components inside components, re-render, performance, hydration, SSR, Next.js, useDeferredValue, combined hooks.
elevenlabs-agents
IncludedBuild conversational AI voice agents with ElevenLabs Platform using React, JavaScript, React Native, or Swift SDKs. Configure agents, tools (client/server/MCP), RAG knowledge bases, multi-voice, and Scribe real-time STT. Use when: building voice chat interfaces, implementing AI phone agents with Twilio, configuring agent workflows or tools, adding RAG knowledge bases, testing with CLI "agents as code", or troubleshooting deprecated @11labs packages, Android audio cutoff, CSP violations, dynamic variables, or WebRTC config. Keywords: ElevenLabs Agents, ElevenLabs voice agents, AI voice agents, conversational AI, @elevenlabs/react, @elevenlabs/client, @elevenlabs/react-native, @elevenlabs/elevenlabs-js, @elevenlabs/agents-cli, elevenlabs SDK, voice AI, TTS, text-to-speech, ASR, speech recognition, turn-taking model, WebRTC voice, WebSocket voice, ElevenLabs conversation, agent system prompt, agent tools, agent knowledge base, RAG voice agents, multi-voice agents, pronunciation dictionary, voice speed control, elevenlabs scribe, @11labs deprecated, Android audio cutoff, CSP violation elevenlabs, dynamic variables elevenlabs, case-sensitive tool names, webhook authentication
humanizer
IncludedHumanize AI-generated text by detecting and removing patterns typical of LLM output. Rewrites text to sound natural, specific, and human. Uses 28 pattern detectors, 560+ AI vocabulary terms across 3 tiers, and statistical analysis (burstiness, type-token ratio, readability) for comprehensive detection. Use when asked to humanize text, de-AI writing, make content sound more natural/human, review writing for AI patterns, score text for AI detection, or improve AI-generated drafts. Covers content, language, style, communication, and filler categories.
generating-mermaid-diagrams
IncludedSalesforce architecture diagrams using Mermaid with ASCII fallback. Use this skill when generating text-based diagrams for Salesforce architecture, OAuth flows, ERDs, integration sequences, or Agentforce structure. TRIGGER when: user says "diagram", "visualize", "ERD", or asks for sequence diagrams, flowcharts, class diagrams, or architecture visualizations in Mermaid. DO NOT TRIGGER when: user wants PNG/SVG image output (use generating-visual-diagrams), or asks about non-Salesforce systems.