emilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
- Installs
- 2.8K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/pproenca/dot-skills --skill emilkowal-animations- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads emilkowal-animations automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Emil Kowalski Animation Best Practices
Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his animations.dev course. Contains 58 rules across 8 categories, prioritized by impact.
When to Apply
Reference these guidelines when:
- Adding animations to React components
- Choosing easing curves or timing values
- Implementing gesture-based interactions (swipe, drag)
- Building toast notifications or drawer components
- Optimizing animation performance
- Ensuring animation accessibility
- Expressing any of the above with Tailwind CSS v4 utilities (see the
tw-category)
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Easing Selection | CRITICAL | ease- |
| 2 | Timing & Duration | CRITICAL | timing- |
| 3 | Property Selection | HIGH | props- |
| 4 | Transform Techniques | HIGH | transform- |
| 5 | Interaction Patterns | MEDIUM-HIGH | interact- |
| 6 | Strategic Animation | MEDIUM | strategy- |
| 7 | Accessibility & Polish | MEDIUM | polish- |
| 8 | Tailwind v4 Utilities | MEDIUM | tw- |
Quick Reference
1. Easing Selection (CRITICAL)
ease-out-default- Use ease-out as your default easingease-custom-curves- Use custom cubic-bezier over built-in CSSease-in-out-onscreen- Use ease-in-out for on-screen movementease-spring-natural- Use spring animations for natural motionease-spring-config- Configure springs with duration and bounceease-ios-drawer- Use iOS-style easing for drawer componentsease-context-matters- Match easing to animation context
2. Timing & Duration (CRITICAL)
timing-300ms-max- Keep UI animations under 300mstiming-faster-better- Faster animations improve perceived performancetiming-asymmetric- Use asymmetric timing for press and releasetiming-tooltip-delay- Delay initial tooltips, instant subsequent onestiming-drawer-500ms- Use 500ms duration for drawer animations
3. Property Selection (HIGH)
props-transform-opacity- Animate only transform and opacityprops-hardware-accelerated- Use hardware-accelerated animations when main thread is busyprops-will-change- Use will-change to prevent 1px shiftprops-avoid-css-variables- Avoid CSS variables for drag animationsprops-clip-path-performant- Use clip-path for layout-free reveals
4. Transform Techniques (HIGH)
transform-scale-097- Scale buttons to 0.97 on presstransform-never-scale-zero- Never animate from scale(0)transform-percentage-translate- Use percentage values for translateYtransform-origin-aware- Make animations origin-awaretransform-scale-children- Scale transforms affect childrentransform-3d-preserve- Use preserve-3d for 3D transform effectstransform-starting-style- Animate enter states with @starting-style
5. Interaction Patterns (MEDIUM-HIGH)
interact-interruptible- Make animations interruptibleinteract-momentum-dismiss- Use momentum-based dismissalinteract-damping- Damp drag at boundariesinteract-scroll-drag-conflict- Resolve scroll and drag conflictsinteract-snap-points- Implement velocity-aware snap pointsinteract-friction-upward- Allow upward drag with frictioninteract-pointer-capture- Use pointer capture for drag operationsinteract-multitouch- Ignore extra touch points during draginteract-touch-hover- Gate hover animations behind a pointer media query
6. Strategic Animation (MEDIUM)
strategy-keyboard-no-animate- Never animate keyboard-initiated actionsstrategy-frequency-matters- Consider interaction frequency before animatingstrategy-purpose-required- Every animation must have a purposestrategy-feedback-immediate- Provide immediate feedback on all actionsstrategy-marketing-exception- Marketing sites are the exceptionstrategy-cohesion- Match motion to the component's personalitystrategy-review-fresh-eyes- Review animations in slow motion and the next day
7. Accessibility & Polish (MEDIUM)
polish-reduced-motion- Respect prefers-reduced-motionpolish-opacity-fallback- Use opacity as reduced motion fallbackpolish-framer-hook- Use useReducedMotion hook in Framer Motionpolish-dont-remove-all- Keep gentle animation for reduced motionpolish-blur-bridge- Use blur to bridge animation statespolish-clip-path-tabs- Use clip-path for tab transitionspolish-toast-stacking- Implement toast stacking with scale and offsetpolish-scroll-reveal- Trigger scroll animations at appropriate thresholdpolish-hover-gap-fill- Fill gaps between hoverable elementspolish-stagger-children- Stagger child animations for orchestration
8. Tailwind v4 Utilities (MEDIUM)
Express the principles above with proper Tailwind CSS v4 utilities. Applies only to Tailwind v4 projects; the raw-CSS and Framer Motion rules above remain the source of truth.
tw-ease-duration-defaults- Set ease-out and a sub-300ms duration explicitlytw-custom-easing-theme- Register custom easing curves as @theme tokenstw-press-scale- Use active:scale-[0.97] for button press feedbacktw-asymmetric-timing- Split press and release timing with active:durationtw-starting-enter- Animate enter states with the starting: varianttw-reduced-motion- Gate movement behind motion-safe / motion-reducetw-origin-aware- Set transform-origin with origin-* utilitiestw-will-change- Scope will-change-transform to the active gesture
Key Values Reference
| Value | Usage |
|---|---|
cubic-bezier(0.23, 1, 0.32, 1) | Strong ease-out for UI interactions |
cubic-bezier(0.77, 0, 0.175, 1) | Strong ease-in-out for on-screen movement |
cubic-bezier(0.32, 0.72, 0, 1) | iOS-style drawer/sheet animation |
scale(0.97) | Button press feedback |
scale(0.95) | Minimum enter scale (never scale(0)) |
200ms ease-out | Standard UI transition |
300ms | Maximum duration for UI animations |
500ms | Drawer animation duration |
0.11 px/ms | Velocity threshold for momentum dismiss |
100px | Scroll-reveal viewport threshold |
14px | Toast stack offset |
Duration by Element
Pick duration by how often the element is seen and how much it moves. Keep UI animations under 300ms.
| Element | Duration |
|---|---|
| Button press feedback | 100–160ms |
| Tooltips, small popovers | 125–200ms |
| Dropdowns, selects | 150–250ms |
| Modals, drawers | 200–500ms |
| Marketing / explanatory | Can be longer |
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
FAQ
What does the emilkowal-animations skill do?
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
How do I install emilkowal-animations?
Run npx skills add https://github.com/pproenca/dot-skills --skill emilkowal-animations in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/emilkowal-animations/ (personal) or .claude/skills/emilkowal-animations/ (project).
Which AI agents can use emilkowal-animations?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is emilkowal-animations safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains emilkowal-animations?
It is published by pproenca in pproenca/dot-skills. It has 2,797 recorded installs.
More from pproenca/dot-skills
zod
pproenca/dot-skills
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
vitest
pproenca/dot-skills
Vitest testing framework patterns for test setup, async testing, mocking with vi., snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
react-hook-form
pproenca/dot-skills
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
nuqs
pproenca/dot-skills
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.
clean-architecture
pproenca/dot-skills
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
typescript
pproenca/dot-skills
TypeScript performance, tsconfig, type errors, async patterns — triggered when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "configure tsconfig.json", "fix type errors", "improve async patterns", or encounters TS errors (TS2322, TS2339, "is not assignable to"). Also triggers on .ts, .tsx, .d.ts file work involving type definitions, module organization, or memory management. Does NOT cover TypeScript basics, framework-specific patterns, or testing.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.