Motion & Microinteraction Spec Designer

    1

    Durations, easing, choreography and reduced-motion fallbacks — implementation-ready, not vibes.

    $7

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Motion & Microinteraction Spec Designer

    Example session with this skill installed

    I need a motion spec for a modal drawer that slides in from the right on web. It contains a list of 5 items that should stagger in. Give me the Framer Motion code.

    • Read your context and instructions
    • Compiled the motion & microinteraction
    • Generated the UI component

    I have designed the motion spec for the side drawer. This interaction uses a

    Medium duration for the container to feel responsive, with a

    Small stagger to orient the user to the list content without delaying the task.

    Side Drawer Motion Spec

    ElementPropertyFromToDurationEasingDelay
    OverlayOpacity01250msLinear0ms
    DrawerX (Translate)100%0%320mscubic-bezier(0.2, 0, 0, 1)0ms
    List ItemsY + Opacity16px, 00, 1180mscubic-bezier(0.05, 0.7, 0.1, 1)40ms stagger

    Implementation: Framer Motion

    const drawerVariants = {
  hidden: { x: "100%" },
  visible: {
    x: 0,
    transition: {
      duration: 0.32,
      ease: [0.2, 0, 0, 1],
      when: "beforeChildren",
      staggerChildren: 0.04
    }
  },
  exit: {
    x: "100%",
    transition: {
      duration: 0.25,
      ease: [0.4, 0, 1, 1]
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 16 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.18, ease: [0.05, 0.7, 0.1, 1] }
  }
};

    Accessibility (Reduced Motion)

    For users with prefers-reduced-motion: reduce, the x and y transforms are disabled. The drawer and items will use a simple

    150ms opacity crossfade to signal the state change without causing vestibular distress.

    Next steps

    1. Apply will-change: transform to the drawer container to ensure GPU acceleration.
    2. Verify the 40ms stagger timing on mobile devices to ensure the total sequence finishes under 500ms.
    3. Ensure focus is trapped within the drawer only after the 320ms entrance animation completes.

    motion-microinteraction-spec-designer.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Define easing tokens and durations for a brand-new design system.Convert janky layout animations into performant GPU-accelerated transforms.Generate WCAG-compliant reduced motion fallbacks for all UI transitions.Spec precise microinteractions for buttons, toggles, and form validation.

    About this skill

    The problem

    UI animations are often added as afterthoughts, leading to sluggish interfaces, jarring transitions, and accessibility failures. Developers struggle to translate vague "make it pop" requests into precise easing curves and performance-safe code.

    What it does

    • Generates implementation-ready motion specs including duration tokens, cubic-bezier curves, and spring physics.
    • Provides production-grade code snippets for CSS, Framer Motion, SwiftUI, and Jetpack Compose.
    • Audits existing UIs to identify redundant animations that drain battery or trigger vestibular issues.
    • Defines reduced-motion fallbacks to ensure compliance with accessibility standards like WCAG.
    • Calculates choreography and stagger timings for complex list reveals and page transitions.

    Frameworks & tools

    CSS/Web Animations API, React (Framer Motion), SwiftUI, Jetpack Compose, Lottie, Adobe After Effects, and Figma Smart Animate.

    Why this beats prompting it yourself

    General LLMs often suggest long durations (500ms+) or layout-thrashing properties like width and height. This skill enforces strict performance rules, using only GPU-accelerated transforms and opacity while adhering to a specialized motion-token system for design consistency.

    Use cases

    • Creating a motion design system for a React-based component library.
    • Specifying a shared-element transition for a mobile app onboarding flow.
    • Debugging jank by converting layout animations to FLIP-based transforms.
    • Generating accessible alternatives for users with motion sensitivities.

    Known limitations

    Does not support complex 3D character animation or physics engines outside of standard UI springs. High-node count animations require manual performance testing on target hardware.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 7 days ago

    • Passed all security checks, Safe to install

    Listed7 days ago

    What's inside

    Frequently Asked Questions