Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

emilkowalski-motion — Claude Code skill: what it does, how to install

Adds micro-interactions, state transitions and motion to an existing interface. Use it after the layout or component is already built.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill emilkowalski-motion -a claude-code
Open on GitHub

What emilkowalski-motion does

The skill inspects the current HTML or component and picks the smallest set of motion moments that clarify state or hierarchy. Entry reveal for primary content, hover and active feedback for controls, transitions between UI states, scroll reveal when it helps the story. Animates via transform and opacity, avoids width, height or left.

UI transitions feel quick: 140–220ms for most controls. Larger page reveals can be slower but must not block reading. One motion language across the artifact—no mixing unrelated easings, durations or physics. Adds prefers-reduced-motion fallbacks for any automatic or scroll-linked motion.

Works with plain HTML, CSS keyframes and small JavaScript observers. For React or framework code, uses the local stack already present in the repo. If GSAP is available and the motion needs sequencing, pair with gsap-core, gsap-timeline or gsap-scrolltrigger. Always cleans up observers, timers and animation instances.

What it helps with

  • add hover feedback to buttons and controls
  • animate state transitions without layout shift
  • reveal content on scroll with accessibility fallbacks
  • polish existing UI with micro-interactions
  • add entry animations to page sections

Example prompts for the agent

  • Use emilkowalski-motion on the current HTML artifact: add restrained micro-interactions and state transitions without changing the core layout
  • Polish the animation of this component with emilkowalski-motion, keep the prefers-reduced-motion fallback
  • Apply emilkowalski-motion: add entry reveal for the main content and hover feedback for buttons

How to install emilkowalski-motion

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill emilkowalski-motion -a claude-code

2Manually: put the files in place

~/.claude/skills/emilkowalski-motion/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/emilkowalski-motion/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

react-native-testing callstack Skill for writing and reviewing React Native component tests with Testing Library. Covers queries, user interactions, async patterns, and supports v13 (React 18) and v14 (React 19+). Claude Code CX Codex Cursor +1 5,300installs threejs-geometry CloudAI-X Teaches your coding agent how to build standard geometries, generate 3D text, and construct custom vertex buffers in three.js. Claude Code CX Codex Cursor +1 14,400installs expo-project-structure expo Sets up a starter folder layout for a new Expo Router project. Helps place routes, screen bodies, and server files where they belong. Claude Code CX Codex Cursor +1 21,700installs threejs-interaction CloudAI-X Teaches your agent how to set up raycasting, camera controls, and object dragging in three.js for WebGL and WebGPU. Claude Code CX Codex Cursor +1 14,100installs antislop-human miqdadbadjuber An accessibility skill for AI agents that checks UI contrast, keyboard focus, and control states. Ships with a WCAG AA contrast checker script. Claude Code CX Codex Cursor +1 5,800installs expo-dom expo Runs web code in a webview on native platforms and renders as-is on web. Lets you use web libraries like recharts or react-syntax-highlighter in Expo without rewriting. Claude Code CX Codex Cursor +1 20,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about emilkowalski-motion

How to install emilkowalski-motion in Claude Code?

Run npx skills add nexu-io/open-design --skill emilkowalski-motion -a claude-code, the skill will appear in ~/.claude/skills/emilkowalski-motion/SKILL.md.

What does emilkowalski-motion do?

Adds micro-interactions, state transitions and motion to an interface that already exists. Inspects the HTML or component, picks the smallest set of motion moments and applies one consistent motion language with prefers-reduced-motion support.

When to use emilkowalski-motion?

After the interface or component is ready. The skill does not change layout or data—it adds motion to what already exists.

Source text

SKILL.md · Apache-2.0 
---
name: emilkowalski-motion
description: |
  Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.
triggers:
  - "emil kowalski"
  - "motion polish"
  - "micro interaction"
  - "interaction animation"
  - "tasteful animation"
  - "动效润色"
od:
  mode: prototype
  surface: web
  platform: desktop
  category: animation-motion
  upstream: "https://emilkowal.ski/skill"
  preview:
    type: html
  design_system:
    requires: true
  craft:
    requires:
      - animation-discipline
      - accessibility-baseline
  example_prompt: |
    Use emilkowalski-motion on the current HTML artifact: add restrained micro-interactions, state transitions, and reduced-motion fallbacks without changing the core layout.
---

# 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`, or `gsap-scrolltrigger`.
- Always clean up observers, timers, and animation instances.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor