Back to marketplace

Motion Polish Pass

Add Emil Kowalski-style animation and micro-interaction guidance to any Claude Code UI pass.

Designp4
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Add smooth animations to my button components”
Beforegeneric AI agent
Animation is a nice way to make interfaces feel more polished. You could add some hover effects and transitions to buttons. The speed and easing curve matter - you want animations to feel snappy but not jarring. It really depends on your design system and what kind of feel you're going for.
Afterwith Motion Polish Pass
MOTION POLISH: BUTTON COMPONENTS

TIMING SCALE
• Micro (feedback): 120ms
• Macro (navigation): 180ms
• Entrances: 220ms

BUTTON STATES - ANIMATION CHECKLIST

REST → HOVER
→ Scale: 1.0 to 1.04 (4% growth)
→ Duration: 120ms
→ Easing: cubic-bezier(0.34, 1.56, 0.64, 1) [Apple bounce]
→ Shadow: add 8px blur, rgba(0,0,0,0.12)

HOVER → ACTIVE (click)
→ Scale: 1.04 to 0.96 (press-down feel)
→ Duration: 60ms
→ Easing: ease-out
→ Opacity: text stays 1.0

FOCUS (keyboard)
→ Outline: 3px solid accent-color
→ Offset: 2px
→ No scale change (accessibility requirement)

DISABLED
→ No animations; opacity 0.5, cursor not-allowed
→ Hover/focus states removed

REDUCED MOTION FALLBACK
→ Detect: prefers-reduced-motion: reduce
→ Apply: Remove scale animations; keep focus outline only
→ Duration: 0ms (instant state change)

FRAMEWORK: Framer Motion
Variants: rest, hover, active
Transition: type:"spring", stiffness:300, damping:20

TESTING: Verify smooth at 60fps on mid-range phones; test prefers-reduced-motion in system settings.

About this skill

name: motion-polish-pass description: Add Emil Kowalski-style animation and micro-interaction guidance to any Claude Code UI pass. Use when working on motion polish pass.

Motion Polish Pass

Packages a working design engineer's principles (animation curves, timing, hover/active/focus states) into an on-demand skill. Meant to be invoked per component when elevating from functional to refined rather than always-on. Cross-agent compatible. Use during the last polish stage after layout and typography are locked.

What you get

  • Timing scale
  • Easing recipes
  • Hover/focus/active checklist
  • Before-and-after preview
  • Reduced-motion fallback
  • Framework-specific snippets

Customize your output

  • Motion intensity: subtle, expressive
  • Reduced-motion respect: on, off
  • Framework: Framer Motion, CSS transitions, GSAP, SwiftUI
  • Component scope: single, page, whole app
  • Default duration: 120ms, 180ms, 220ms
  • Easing profile: material, apple, custom

Example output

'A card component gains a 180 ms scale-and-lift on hover with reduced-motion fallback.'

Best for

Design engineers, front-end devs.

Note: One-person authored (Emil Kowalski). Attribution matters. High confidence.

SKILL.md preview

SKILL.md
---
name: motion-polish-pass
description: Use during the final polish stage of a UI build, after layout and typography are locked, to add animation and micro-interaction guidance.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - p4
---

# Motion Polish Pass

Applies a working design engineer's approach to animation and micro-interactions, covering curves, timing, and state feedback, as an on-demand pass invoked per component.

## When to use
- Layout and typography are locked and the UI is ready for its final polish stage

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill