Emilkowalski Motion

This is a motion polish pass you run after your UI is already built. It adds micro-interactions, state transitions, and scroll reveals in the restrained, product-grade style Emil Kowalski is known for. The skill enforces practical animation discipline: transform and opacity only, 140-220ms for controls, one consistent easing language, and prefers-reduced-motion fallbacks baked in. It won't redesign your layout or add particle effects. Think of it as the difference between a working interface and one that feels considered. Works with plain CSS, React, or GSAP if you need sequencing. Best used when you want motion that clarifies hierarchy without becoming the main character.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 12
skills.sh installs: 2.4K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill emilkowalski-motion --agent claude-code

Installs into .claude/skills of the current project.

Files

Emil Kowalski Motion Follow-Up

Use this skill after a design artifact already exists. The goal is to make the interface feel alive without turning it into a motion demo.

Workflow

Inspect the current HTML, component, or selected page element before adding animation.
Pick the smallest set of motion moments that clarify state or hierarchy:
- entry reveal for the primary content
- hover / active feedback for important controls
- transition between UI states
- scroll reveal only when it helps the story
Prefer transform and opacity. Avoid animating layout properties such as top, left, width, or height.
Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics.
Add prefers-reduced-motion fallbacks for any automatic or scroll-linked motion.
Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.