design-motion-principles

The design-motion-principles skill is a motion and interaction design assistant focused on creating and reviewing UI animations for web and app interfaces. It helps teams avoid ineffective or distracting motion patterns by applying structured design principles inspired by the public work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins. The skill operates in two distinct modes: Create mode for building purposeful animations and interactive components, and Audit mode for reviewing existing motion systems and identifying low-quality or inconsistent animation behavior. It emphasizes context-aware motion design rather than universal rules, adapting recommendations based on the type of product being designed.

The skill provides workflow-driven guidance for motion implementation across technologies such as HTML, CSS, React, Framer Motion, and mobile application transitions. It includes a context-to-perspective weighting framework that changes motion priorities depending on the product category, such as SaaS dashboards, productivity tools, marketing pages, or kids applications. Core capabilities include evaluating transitions, hover states, micro-interactions, enter and exit animations, and broader interaction systems. In Audit mode, it can generate branded HTML reports with looping demos to highlight motion issues and refinement opportunities.

This skill is designed for design engineers, frontend developers, UI designers, and product teams working on modern digital interfaces. It is especially useful for teams building polished consumer applications, productivity software, design systems, interactive marketing experiences, or animation-heavy interfaces. The skill is appropriate for both creating new motion systems and reviewing existing implementations for usability, polish, and consistency.