design-motion-principles

Why we included this project

UI work in an AI coding assistant rarely moves well, and this skill addresses that directly. Install it into Claude Code, Cursor, Windsurf, or similar assistants and it shapes motion work two ways. A create mode generates React, Framer Motion, CSS, or HTML components with deliberate animation, while an audit mode flags animations that are missing or read as generic AI output. The real strength is the weighting logic, which maps your project type to three deliberately disagreeing design philosophies drawn from the published work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins, so a productivity tool and a playful kids app are not judged by the same standard. The audit reports are self-contained HTML pages with looping demo clips next to each finding, which makes recommended motion visible rather than abstract, and both modes already account for accessibility and reduced-motion defaults.