dylantarre/animation-principles
5 skills4.2k installs220 starsGitHub
Install
npx skills add https://github.com/dylantarre/animation-principlesSkills in this repo
1Mobile Touchmobile-touch is a design-oriented agent skill that applies Disney’s twelve animation principles to iOS and Android touch, haptics, and native motion. Solo and indie builders shipping mobile apps install it when they need rubber-banding, pull-to-refresh stretch, long-press anticipation, sheet presentations, and swipe-to-dismiss curves that feel intentional rather than default system jitter. The skill gives a principle-by-principle implementation guide—from slow-in/slow-out via iOS springs and Material easing to secondary actions that pair haptic pulses with UI feedback—so agents do not guess timing or break gesture continuity. It fits Claude Code, Cursor, and similar workflows where you are coding animations alongside layout, not outsourcing to a separate motion team. Use it during frontend mobile implementation when gestures, focus states, or scroll limits need polish that reads as premium native UX.1.8kinstalls2Video Motion GraphicsVideo Motion Graphics is a procedural design skill that translates classic animation craft into modern After Effects and Premiere Pro decisions for solo builders making explainers, app promos, and title sequences. The agent is steered through a principle-by-principle checklist—squash and stretch, anticipation, staging, follow-through, slow in/out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal—so motion feels intentional instead of default linear keyframes. Highlights call out practical implementations such as overshoot expressions, 2–4 frame anticipatory wind-ups, graph-editor curves, delayed layer expressions for overlap, and frame-rate-aware timing. Invoke it when you are composing broadcast-style motion, product walkthrough overlays, or hero video sections where emotional readability matters as much as brand polish. It does not replace storyboarding or sound design, but it gives indie teams a shared vocabulary between designer and coding agent when iterating comps before Ship-phase review.951installs3Motion DesignerMotion Designer is an agent skill that teaches visual animation craft for solo builders and designers shipping SaaS, mobile, or marketing surfaces. It walks through Disney’s twelve principles—squash and stretch, anticipation, staging, follow-through, overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal—and maps each to interface motion so movement feels intentional rather than decorative. Use it when you need animation specifications, micro-interaction direction, or brand-aligned motion systems before handing work to implementation or prototype tools. It complements static UI work by giving agents vocabulary for duration, easing, hierarchy, and rhythm, which reduces rework when engineers animate in CSS, React Spring, or native transitions. The skill is methodology-heavy rather than code-specific, so it pairs well with design tokens and component libraries across Claude Code, Cursor, and similar agents.807installs4Micro InteractionsMicro-interactions is a Design & UI/UX agent skill for solo builders shipping web or mobile interfaces who want small moments—hover, press, toggle, validation, loading—to feel intentional rather than default-browser flat. It reframes Disney's twelve animation principles as practical UI guidance: squash on button press, anticipation in hover states, staging for focused form fields, arcs for switches, and follow-through for ripples and settling motion. The quick-reference table gives a scannable checklist so you can audit a screen in one pass. Timing defaults (roughly one hundred to three hundred milliseconds) keep motion snappy without stealing attention from task completion. Use it during frontend implementation when you are choosing transition curves, state classes, and motion tokens, especially for SaaS dashboards, marketing sites, and extensions where delight supports comprehension, not distraction.623installs5Game DesignerGame Designer is an agent skill that coaches you through Disney’s twelve animation principles as practical game-feel rules. Solo indie devs use it when tuning platformer landings, attack wind-ups, boss readability, and collectible bounce so motion communicates weight and fairness. The skill positions you as a designer focused on responsive feedback rather than cinematic cutscenes alone. It walks principle-by-principle with game applications—squash on landings, anticipation before damage, staging in chaotic fights—and notes when to use procedural versus keyframed motion. Invoke early when prototyping a new mechanic and again during Ship polish when playtests say hits feel cheap or dull. It does not replace engine-specific animation graphs or asset pipelines; it gives decision language your agent can apply across Unity, Godot, or custom engines.1installs