
appeal-mastery
Use when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch.
- Installs
- 520
- 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 appeal-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 appeal-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.
Appeal Mastery
The Magnetism Principle
Appeal is the quality that makes audiences want to watch. It's not about prettiness—villains need appeal too. It's about charisma, clarity, and design excellence that draws the eye and holds attention. Without appeal, technically perfect animation falls flat. With appeal, even simple motion becomes captivating.
Core Theory
Appeal ≠ Attractiveness: Appeal means compelling, not beautiful. A well-designed monster is appealing. A poorly designed hero is not. Appeal is about magnetic presence.
Clarity creates appeal: Audiences are drawn to what they can easily read and understand. Confused design repels attention.
Personality creates appeal: Distinctive character—whether in characters, objects, or UI elements—creates memorability and affection.
The Appeal Formula
Clarity (readable design and motion) × Distinctiveness (unique, memorable qualities) × Consistency (reliable personality and behavior) × Polish (refined execution without roughness) = Appeal
Components of Appeal
Shape language: Appealing designs use deliberate shape vocabulary
- Circles/curves: Friendly, approachable, soft
- Squares/rectangles: Stable, trustworthy, grounded
- Triangles/angles: Dynamic, dangerous, exciting
Proportional interest: Varied proportions create visual interest
- Contrast in sizes (big head, small body)
- Asymmetry within balance
- Unexpected combinations
Simplicity: Appealingly designed elements are as simple as possible while maintaining distinctiveness
Motion Appeal
Animation adds temporal appeal through:
- Distinctive timing: Signature rhythms that feel characteristic
- Personality in movement: How something moves reveals what it is
- Satisfying arcs: Pleasing motion paths
- Confident execution: Decisive, not tentative motion
Interaction with Other Principles
Solid drawing enables appeal: Poorly constructed forms can't be appealing.
Staging presents appeal: Even appealing designs fail with poor staging.
Exaggeration adds appeal: Pushed poses and timing create distinctiveness.
Timing defines appeal character: Snappy = energetic appeal; slow = contemplative appeal.
Domain Applications
UI/Motion Design
- Micro-interactions: Satisfying feedback loops that users want to trigger
- Loading states: Personality in wait moments (friendly, not frustrating)
- Empty states: Appealing illustrations and animations
- Transitions: Motions that feel intentional and polished
- Brand expression: Motion that embodies brand personality appealingly
Character Animation
- Character design: Silhouettes that read clearly, features that express distinctively
- Walk cycles: Movement that reveals personality before dialogue
- Idle animation: Appealing even when "doing nothing"
- Emotional range: Expressions that viewers connect with
Motion Graphics
- Logo animation: Movement that makes brands memorable
- Kinetic typography: Text that's pleasurable to watch
- Transitions: Seamless, satisfying scene changes
- Visual rhythm: Editing and pacing that holds attention
Product Design
- Onboarding: First impressions that delight
- Feature discovery: Motion that rewards exploration
- Error handling: Graceful, appealing failure states
- Celebration moments: Satisfying feedback for achievements
Common Mistakes
- Prioritizing realism over appeal: Technically accurate but visually boring
- Over-designing: Too complex to read clearly
- Generic motion: Nothing distinctive or memorable
- Inconsistent personality: Motion that feels random, not characteristic
- Rough execution: Unpolished details that undermine overall appeal
The Personality Test
Ask: "If this animation were a person, what would they be like?" If you can't answer, it lacks personality. If the answer is "bland" or "generic," appeal is missing.
The Repeat Test
Would users want to see this animation again? Appealing motion rewards repeated viewing. Unappealing motion becomes annoying on repetition.
The Apple/Pixar Standard
Study motion design from these studios:
- Every movement has personality
- Simplicity in service of clarity
- Polish in every detail
- Distinctiveness that's immediately recognizable
This represents appeal at the highest professional level.
Implementation Heuristic
Before finalizing animation: Is it clear? Is it distinctive? Is it consistent with the overall personality? Is it polished? If any answer is "no," appeal is compromised. Focus on motion that you personally find satisfying—your instinct for appeal is usually right. When motion feels "meh," it lacks appeal; push for something that creates genuine response, whether delight, intrigue, or satisfaction.
FAQ
What does the appeal-mastery skill do?
Use when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch.
How do I install appeal-mastery?
Run npx skills add https://github.com/dylantarre/animation-principles --skill appeal-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/appeal-mastery/ (personal) or .claude/skills/appeal-mastery/ (project).
Which AI agents can use appeal-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 appeal-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 appeal-mastery?
It is published by dylantarre in dylantarre/animation-principles. It has 520 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.