Back to marketplace

Emil Kowalski Skill

A Claude skill based on designer/engineer Emil Kowalski interaction and animation design principles.

Designstandard
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“How should I design a button hover interaction that feels premium and refined?”
Beforegeneric AI agent
A hover state for a button should provide visual feedback that it's interactive. You could add a color change, maybe a slight scale effect, or an underline. There are lots of ways to approach it depending on your design system. Subtle animations are good practice. You might want to consider things like duration and easing to make it feel polished. Would you like some examples of common hover patterns?
Afterwith Emil Kowalski Skill
MICRO-INTERACTION SPEC: Button Hover

REST STATE
  - Background: #0066FF (solid blue)
  - Text: white, weight 500
  - Scale: 1.0
  - Opacity: 1.0

HOVER STATE (on mouseenter)
  - Background: #0052CC (darker blue, 10% shift)
  - Scale: 1.04 (4% enlarge, from center point)
  - Opacity: 0.95 (slight transparency)
  - Duration: 140ms
  - Easing: cubic-bezier(0.34, 1.56, 0.64, 1) // overshoot for delight
  - Shadow: 0 8px 24px rgba(0,0,0,0.12) // lift off page

ACTIVE STATE (on mousedown)
  - Scale: 0.98 (press inward)
  - Duration: 60ms
  - Easing: ease-out
  - Shadow: 0 2px 8px rgba(0,0,0,0.08) // settle down

EXIT (on mouseleave)
  - Animate all properties back to rest
  - Duration: 200ms
  - Easing: ease-out (gentle deceleration)

TOUCH FALLBACK
  - Skip hover on mobile (no :hover)
  - Active state on tap, hold 100ms, then reset
  - No shadow on touch (reduce motion overload)

PRINCIPLE: Movement originates from button center, uses tension curves for anticipation, then ease-out for satisfaction.

About this skill

name: emil-kowalski-skill description: Use when A Claude skill based on designer/engineer Emil Kowalski interaction and animation design principles.

Emil Kowalski Skill

Covered in the original author Claude Skills for Designers (Part 2) roundup. the original author

What you get

  • Animation/interaction design guidance sourced from Emil Kowalski design philosophy.

Customize your output

  • N/A

Example output

N/A

Best for

Designers wanting more refined micro-interactions and motion in AI-built UI.

SKILL.md preview

SKILL.md
---
name: emil-kowalski-skill
description: Use when reviewing or designing UI interactions and animations and you want them evaluated against a refined, restraint-first motion design standard.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - standard
---

# Emil Kowalski Skill

Applies a refined interaction and animation standard focused on restraint and physical plausibility so UI motion feels intentional rather than decorative.

## When to use

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

More design skills

View all Design skills →

shadcn/ui Skill

The official shadcn/ui component-library skill for Claude.

Design

UI UX Pro Max

A Claude skill that adds design intelligence for multi-platform UI/UX builds.

Design

UI Polish Slash Commands

Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project.

Design

Motion Polish Pass

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

Design