Emilkowalski Motion
- 1.1k installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
emilkowalski-motion is a web motion-design agent skill that adds Emil Kowalski–style micro-interactions, page transitions, and restrained animation polish to existing interfaces for developers who need product-grade UI m
About
emilkowalski-motion is an open-design agent skill from nexu-io/open-design inspired by Emil Kowalski's animation guidance. The skill runs after a web interface already exists, adding tasteful micro-interactions, state transitions, and page motion with product-grade restraint on desktop web surfaces. It requires an established design system and upstream craft skills including animation-discipline and accessibility-baseline, and references guidance from emilkowal.ski/skill. Developers reach for emilkowalski-motion when a functional UI needs motion polish—hover states, route transitions, loading feedback—without bloated custom animation libraries. Trigger phrases include motion polish, micro interaction, interaction animation, and tasteful animation. The skill outputs HTML preview prototypes and integrates with open-design prototype mode for web desktop targets.
- Micro-interactions
- Page transitions
- Easing patterns
- Premium feel
- React-friendly motion
Emilkowalski Motion by the numbers
- 1,094 all-time installs (skills.sh)
- +101 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #368 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill emilkowalski-motionAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you add tasteful web UI motion?
Add Emil Kowalski–style micro-interactions, page transitions, and polished motion to web UIs without hand-rolling animation code from scratch.
Who is it for?
Frontend developers with an existing design system who want Emil Kowalski–style motion polish on web desktop UIs.
Skip if: Greenfield layouts without a design system or teams needing native mobile animation frameworks instead of web HTML motion.
When should I use this skill?
A developer asks for motion polish, micro-interactions, page transitions, or Emil Kowalski–style animation on an existing web interface.
What you get
HTML motion prototypes, micro-interaction specs, and accessible page transition patterns
- HTML motion prototypes
- Micro-interaction specifications
By the numbers
- Requires 2 upstream craft skills: animation-discipline and accessibility-baseline
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
1. Inspect the current HTML, component, or selected page element before adding animation. 2. 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
3. Prefer transform and opacity. Avoid animating layout properties such as top, left, width, or height. 4. Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics. 5. Add prefers-reduced-motion fallbacks for any automatic or scroll-linked motion. 6. Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.
Motion Rules
- Default UI transitions should feel quick and useful: 140-220ms for most controls.
- Larger page reveals can be slower, but must not block reading.
- Avoid endless decorative loops unless they communicate status or progress.
- Do not add custom cursors, noisy particle effects, or motion that competes with content.
- Stagger only small groups. Long staggered lists make interfaces feel slow.
Implementation Notes
- For plain HTML, CSS keyframes and small JavaScript observers are enough.
- For React or framework code, use the local stack already present in the repo.
- If GSAP is available and the motion needs sequencing, pair this with
gsap-core,gsap-timeline, orgsap-scrolltrigger. - Always clean up observers, timers, and animation instances.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Pick emilkowalski-motion over generic CSS animation snippets when a design system exists and motion must stay restrained and accessible.
FAQ
When should emilkowalski-motion be used?
emilkowalski-motion applies after a web interface and design system already exist. The skill adds micro-interactions, state transitions, and page motion rather than building layouts from scratch.
What prerequisites does emilkowalski-motion require?
emilkowalski-motion requires a design system and upstream craft skills animation-discipline and accessibility-baseline. Without those, motion additions may violate product constraints or accessibility baselines.