# Emilkowalski Skill

> Emil Kowalski's entire design engineering philosophy as a skill.

Emil Kowalski's entire design engineering philosophy as a skill. Creator of Sonner
(13M+ weekly npm downloads), Vaul, and animations.dev. Covers animation decision
framework, custom easing curves, component interaction principles, and typography rules.

- Page: https://ss33.ai/skills/podo/emilkowalski-skill-74592673281
- Publisher: podo
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: MIT
- Source: https://github.com/podo/design-agent-skills/blob/c3fac4cb09ba2ac92ebf0b35572b9e85e06db4f8/skills/emilkowalski-skill/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/podo/emilkowalski-skill-74592673281

# emilkowalski-skill

> Catalogue stub — full package: [emilkowalski/skill](https://github.com/emilkowalski/skill)

## Decision tree

Run this before any animation or design engineering work:

1. **Is the skill already installed?**
   Check: `~/.design-agent-skills/skills/emil-design-eng/SKILL.md` exists.
   - Yes → invoke `emil-design-eng` and proceed
   - No → go to step 2

2. **Do you have shell access?**
   - Yes → run the install command below, then invoke the skill
   - No → show the install command; in Claude Code, send it as a chat message starting with `!` — add `-g` for global install or omit for project-only

## Install command

```bash
npx skills add emilkowalski/skill --skill emil-design-eng
```

Or for all skills in the package:
```bash
npx skills add emilkowalski/skill
```

## Invoke after install

- Skill name: `emil-design-eng`
- Trigger phrases: "Emil Kowalski", "design engineering", "animation decision", "easing curves"

## What it does

Emil Kowalski's complete design engineering methodology — animation decision framework (4 steps: should it animate? purpose? easing? duration?), required custom CSS easing curves, component interaction principles (button scale on `:active`, `scale(0.95)` entry animations, origin-aware transforms), CSS transitions over keyframes for interruptibility, and strict typography rules (65ch cap, tabular-nums, `…` not `...`). Used by the creator of Sonner, Vaul, and animations.dev.

## When NOT to use

- Backend, APIs, data work
- When motion is already well-handled