motion-design

Define UI motion specifications prioritizing performance and accessibility compliance.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/hb9397/ai-agent-harness-docs --skill motion-design-hb9397
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/hb9397/ai-agent-harness-docs/tree/main/plugins/ai-agent-harness/runtime/claude/skills/motion-design
Command: npx skills add https://github.com/hb9397/ai-agent-harness-docs --skill motion-design-hb9397

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the challenge of creating consistent, purposeful, and performant UI animations that enhance user experience without causing cognitive overload or performance degradation.

Core Features & Use Cases

  • Purpose-Driven Design: Classifies motion by intent (feedback, spatial relationship, brand expression) to ensure every animation serves a functional goal.
  • Performance Optimization: Enforces the use of GPU-accelerated properties like transform and opacity to maintain 60fps.
  • Use Case: When designing a complex dashboard, use this Skill to define the stagger patterns for widget entry and the specific easing curves for modal transitions, ensuring a premium, cohesive feel.

Quick Start

Use the motion-design skill to create a motion specification for the new modal component that follows the corporate personality guidelines.

Frequently Asked Questions about motion-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I define professional UI motion specifications for a component library?

Define professional UI motion specifications by prioritizing functional intent, performance-optimized properties like transform and opacity, and accessibility compliance to ensure consistent, purposeful animations across your component library.

What is purpose-driven design for UI animations?

Purpose-driven design for UI animations classifies motion by intent—such as feedback, spatial relationship, or brand expression—ensuring every animation serves a functional goal and enhances user experience without causing cognitive overload.

How do I optimize UI animation performance to maintain 60fps in design systems?

Optimize UI animation performance to maintain 60fps by enforcing the use of GPU-accelerated properties like transform and opacity, preventing performance degradation while executing complex choreography in interactive interface prototyping.

Does UI motion design support reduced-motion alternatives for accessibility compliance?

UI motion design satisfies requirements for reduced-motion alternatives for accessibility compliance, ensuring interactive interface prototyping and design systems remain inclusive without sacrificing consistent brand-aligned choreography.

What's the best way to create consistent state feedback and motion patterns for a dashboard?

The best way to create consistent state feedback and motion patterns for a dashboard is to classify motion by functional purpose, enforce GPU-accelerated properties, and apply brand-aligned choreography for a premium, cohesive feel.

When do I need to specify easing curves and stagger patterns for UI transitions?

You need to specify easing curves and stagger patterns for UI transitions when designing complex interfaces, ensuring that modal transitions and widget entries follow corporate personality guidelines and maintain cohesive spatial relationships.