mcpField
U
ui-animation

ui-animation

github.com/joelhooksDesign & UI6557 installsUpdated 3d ago
Repository

About ui-animation

ui-animation is a guide for developers designing and reviewing interface motion. It collects rules for timing, animated properties, accessibility, performance, and sequencing, with examples for reference.

Key features

  1. 01Timing and easing guidelines
  2. 02Limit properties to avoid layout animation
  3. 03Respect reduced-motion preferences
  4. 04Handle touch devices and theme changes
  5. 05Guidance on performance and interruption

Use cases

  1. 01Design entry motion for menus and dialogs
  2. 02Review accessibility of interface animations
  3. 03Reduce layout and performance issues from motion

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/joelhooks/joelclaw --skill ui-animation

After installing, type/ui-animationin Claude Code to confirm it loaded.

Bundled filesexamples.md

Details

From the project README

UI Animation

Core rules

  • Animate to clarify cause/effect or add deliberate delight.
  • Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
  • Never animate keyboard interactions (arrow-key navigation, shortcut responses, tab/focus).
  • Prefer CSS; use WAAPI or JS only when needed.
  • Make animations interruptible and input-driven.
  • Honor prefers-reduced-motion (reduce or disable).

What to animate

  • For movement and spatial change, animate only transform and opacity.
  • For simple state feedback, color, background-color, and opacity transitions are acceptable.
  • Never animate layout properties; never use transition: all.
  • Avoid filter animation for core interactions; if unavoidable, keep blur <= 20px.
  • SVG: apply transforms on a <g> wrapper with transform-box: fill-box; transform-origin: center.
  • Disable transitions during theme switches.

Spatial and sequencing

  • Set transform-origin at the trigger point.
  • For dialogs/menus, start around scale(0.85-0.9); avoid scale(0).
  • Stagger reveals <= 50ms.

Easing defaults

  • Enter and transform-based hover: cubic-bezier(0.22, 1, 0.36, 1).
  • Move: cubic-bezier(0.25, 1, 0.5, 1).
  • Simple hover colour/background/opacity: 200ms ease.
  • Avoid ease-in for UI (feels slow).

Accessibility

  • If transform is used, disable it in prefers-reduced-motion.
  • Disable hover transitions on touch devices via @media (hover: hover) and (pointer: fine).

Performance

  • Pause looping animations off-screen.
  • Toggle will-change only during heavy motion and only for transform/opacity.
  • Prefer transform over positional props in animation libraries.
  • Do not animate drag gestures using CSS variables.

Reference

Workflow

  1. Start with the core rules, then pick a reference snippet from examples.md.
  2. Keep motion functional; honor prefers-reduced-motion.
  3. When reviewing, cite file paths and line numbers and propose concrete fixes.

Comments

Markdown supported