Emilkowal Animations
Apply Emil Kowalski–style motion rules when polishing React, CSS, or Tailwind interfaces so animations feel intentional instead of janky.
Overview
emilkowal-animations is an agent skill most often used in Build (also Validate prototype, Ship perf) that applies 58 Emil Kowalski–style web animation rules with before/after code for easing, timing, and Tailwind v4.
Install
npx skills add https://github.com/pproenca/dot-skills --skill emilkowal-animationsWhat is this skill?
- 58 prioritized animation rules across 8 impact tiers from easing/timing through blur bridging and stagger orchestration
- Incorrect vs correct code pairs in CSS, TSX, and TypeScript with production-realistic diffs
- References emilkowal.ski, animations.dev, Sonner, and Vaul patterns aligned with emil-design-eng
- Dedicated Tailwind CSS v4 category mapping principles to utility classes
- When-NOT-to-use exceptions per rule so agents avoid over-animating or wrong contexts
- 58 animation rules across 8 categories
- Impact tiers from CRITICAL easing/timing through polish techniques
- Tailwind CSS v4 mapping category included
Adoption & trust: 1.3k installs on skills.sh; 157 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent adds transitions that look cheap—wrong easing, sloppy timing, or patterns that break layout—because generic UI advice ignores how motion should feel.
Who is it for?
Solo builders polishing React/Next or Tailwind UIs who want course-grade motion discipline without re-watching animations.dev.
Skip if: Teams needing a runtime animation library install guide only, native iOS/Android motion APIs, or projects that must ship zero motion under strict reduced-motion-only policies without review.
When should I use this skill?
Polishing web UI motion, fixing transition feel, or implementing Tailwind/React animations where Emil Kowalski–style rules apply.
What do I get? / Deliverables
You get impact-prioritized, copy-paste-correct animation patterns with explicit exceptions so shipped interfaces feel deliberate and consistent.
- Rule-guided animation fixes with incorrect/correct code diffs
- Documented exceptions and reference links per pattern
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill ships as concrete CSS/TSX patterns for shipped UI, even though motion decisions also matter at validate prototype and ship perf checks. Frontend is the primary home: easing, duration, stagger, and Tailwind v4 mappings are implementation-facing interface work.
Where it fits
Tune prototype button and sheet motion so stakeholders feel production quality before you commit to the design system.
Refactor modal enter/exit and toast timing using incorrect/correct pairs instead of one-off agent guesses.
Audit expensive blur and layout animations against the skill’s when-not-to-use lists before release.
Polish landing-page hero motion for launch without breaking CLS or over-animating above-the-fold content.
How it compares
Use as a rule-backed motion style guide for agents, not as a generic "add framer-motion everywhere" generator.
Common Questions / FAQ
Who is emilkowal-animations for?
Indie and solo front-end builders using Claude Code, Cursor, or Codex who want Emil Kowalski–aligned CSS and React animation patterns while shipping web products.
When should I use emilkowal-animations?
During Build frontend work on components and pages, when validating a prototype’s interaction feel, and before Ship perf polish when you are tuning transition cost and perceived speed.
Is emilkowal-animations safe to install?
It is documentation-style procedural knowledge without mandated shell or network access; review the Security Audits panel on this Prism page before trusting any third-party skill package in your repo.
SKILL.md
READMESKILL.md - Emilkowal Animations
## {Rule Title} {1-3 sentences explaining WHY this matters. Focus on animation feel and user experience implications.} **Incorrect ({what's wrong}):** ```{css|tsx|typescript} {Bad code example - production-realistic, not strawman} {/* Comments explaining the problem */} ``` **Correct ({what's right}):** ```{css|tsx|typescript} {Good code example - minimal diff from incorrect} {/* Comments explaining the benefit */} ``` {Optional sections as needed:} **Alternative ({context}):** {Alternative approach when applicable} **When NOT to use this pattern:** - {Exception 1} - {Exception 2} Reference: [{Reference Title}]({Reference URL from emilkowal.ski, animations.dev, or Emil's GitHub}) { "name": "emilkowal-animations", "version": "1.2.0", "organization": "Emil Kowalski", "technology": "Web Animations", "date": "May 2026", "abstract": "Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), his animations.dev course, and his official emil-design-eng skill. Contains 58 rules across 8 categories, prioritized by impact from critical (easing selection, timing) to polish (blur bridging, stagger orchestration), plus a Tailwind CSS v4 category that maps each principle to the proper v4 utilities (@theme easing tokens, the starting: variant, active:/motion-reduce: variants, transform-origin and will-change utilities). Each rule includes detailed explanations, production-realistic code examples comparing incorrect vs. correct implementations, and specific values to guide animation decisions.", "references": [ "https://emilkowal.ski/ui/great-animations", "https://emilkowal.ski/ui/good-vs-great-animations", "https://emilkowal.ski/ui/7-practical-animation-tips", "https://emilkowal.ski/ui/css-transforms", "https://emilkowal.ski/ui/the-magic-of-clip-path", "https://emilkowal.ski/ui/building-a-drawer-component", "https://emilkowal.ski/ui/building-a-toast-component", "https://emilkowal.ski/ui/building-a-hold-to-delete-component", "https://emilkowal.ski/ui/you-dont-need-animations", "https://animations.dev/", "https://github.com/emilkowalski/vaul", "https://github.com/emilkowalski/sonner", "https://github.com/emilkowalski/skill", "https://tailwindcss.com/blog/tailwindcss-v4", "https://tailwindcss.com/docs/upgrade-guide" ] } # Sections This file defines all sections, their ordering, impact levels, and descriptions. The section ID (in parentheses) is the filename prefix used to group rules. --- ## 1. Easing Selection (ease) **Impact:** CRITICAL **Description:** Easing is the most important part of any animation—it can make a bad animation feel great and vice versa. Wrong easing choice propagates poor feel throughout the entire interaction. ## 2. Timing & Duration (timing) **Impact:** CRITICAL **Description:** Animations over 300ms feel slow and disconnected from user actions. Duration directly affects perceived performance and interface responsiveness. ## 3. Property Selection (props) **Impact:** HIGH **Description:** Animating transform and opacity triggers only the composite rendering step; animating layout properties causes expensive reflows and visual jank. ## 4. Transform Techniques (transform) **Impact:** HIGH **Description:** CSS transforms are the foundation of most web animations. Proper scale, translate, rotate, and transform-origin usage defines animation quality. ## 5. Interaction Patterns (interact) **Impact:** MEDIUM-HIGH **Description:** Momentum-based gestures, interruptibility, and responsive feedback make interfaces feel alive and connected to user actions. ## 6. Strategic Animation (strategy) **Impact:** MEDIUM **Description:** Knowi