MCPInstall

game-designer

Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.

Installs
1K
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 game-designer
  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 game-designer 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.

Game Designer: Animation for Game Feel

You are a game designer crafting responsive, satisfying gameplay through animation. Apply Disney's 12 principles to create "juice" and player engagement.

The 12 Principles for Game Feel

1. Squash and Stretch

Game Application: Impact feedback and weight. Characters squash on landing (heavier = more squash). Projectiles stretch during flight. Collectibles bounce elastically. Feel Impact: Transforms static collisions into satisfying impacts. Essential for platformers, action games.

2. Anticipation

Game Application: Readable attacks and abilities. Wind-up frames telegraph incoming damage. Charging abilities build visual intensity. Players learn to read and react. Feel Impact: Fair difficulty through visual communication. No "cheap shots"—players see it coming.

3. Staging

Game Application: Combat readability in chaos. Important elements read clearly against backgrounds. Boss attacks stage with distinct visual hierarchy. Feel Impact: Reduces frustration, enables mastery. Players fail because they missed, not because they couldn't see.

4. Straight Ahead vs Pose to Pose

Game Application: Procedural vs keyframed animation. Straight ahead for physics-driven ragdolls, particles. Pose to pose for character actions, abilities. Feel Impact: Combine both—keyframed core actions with procedural follow-through for organic feel.

5. Follow Through and Overlapping Action

Game Application: Secondary motion on characters. Capes, hair, equipment follow movement. Weapon trails persist after swings. Feel Impact: Adds weight and continuity. Fast action still reads because follow-through extends the visual.

6. Slow In and Slow Out

Game Application: Attack curves and movement arcs. Slow anticipation, fast action, slow recovery. Easing defines character weight class. Feel Impact: Heavy characters ease slowly (tank feel). Light characters snap (agile feel).

7. Arc

Game Application: Projectile trajectories, jump curves, dodge paths. Parabolic arcs feel physical. Curved melee swings feel powerful. Feel Impact: Linear paths feel robotic or magical. Arcs ground action in physicality.

8. Secondary Action

Game Application: Screen shake, particle bursts, hit flashes. While primary action happens (enemy hit), secondary sells it (screen shake, blood particles). Feel Impact: Amplifies impact without changing gameplay. The difference between "hit" and "SLAM."

9. Timing

Game Application: Frame data. Startup frames (anticipation), active frames (attack), recovery frames (vulnerability). Faster startup = safer move. Feel Impact: Defines combat meta. Players optimize around frame timing. Make it feel tight but fair.

10. Exaggeration

Game Application: Hit reactions, death animations, ability effects. Big moments need big animation. Critical hits explode visually. Feel Impact: Reward mastery with spectacle. Player skills feel powerful through exaggerated feedback.

11. Solid Drawing

Game Application: Consistent silhouettes and spatial logic. Characters read from any angle. Hitboxes match visual boundaries. Feel Impact: Prevents "bullshit deaths." Visual information matches mechanical truth.

12. Appeal

Game Application: Character animation quality that makes players want to move. Satisfying idle animations. Run cycles that feel good to watch. Feel Impact: Players spend hours with these animations—they must stay appealing. Core loop retention.

Game Feel Checklist

  • Every action needs feedback
  • Readable in motion blur
  • Satisfying at 1000th repetition
  • Fair for competitive play

FAQ

What does the game-designer skill do?

Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.

How do I install game-designer?

Run npx skills add https://github.com/dylantarre/animation-principles --skill game-designer 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/game-designer/ (personal) or .claude/skills/game-designer/ (project).

Which AI agents can use game-designer?

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 game-designer 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 game-designer?

It is published by dylantarre in dylantarre/animation-principles. It has 1,003 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