skills.rest
braswelljr
braswelljrCOMMUNITY
Explore all skills by this author →
Website𝕏@braswell_jnrGitHub

emilkowal-animations

Review React, CSS, and Framer Motion animations against 58 best practice rules.

8|Updated Aug 25, 2020
Search Tags:#accessibility#react#tailwind css#animations#easing#framer motion#ui motion
One-click install
npx skills add https://github.com/braswelljr/braswelljr --skill emilkowal-animations-braswelljr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: emilkowal-animations
Source: https://github.com/braswelljr/braswelljr/tree/main/.agents/skills/emilkowal-animations
Command: npx skills add https://github.com/braswelljr/braswelljr --skill emilkowal-animations-braswelljr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill eliminates the guesswork and inconsistency of building web animations that feel janky, unpolished, or inaccessible, ensuring your motion design meets professional quality standards and user needs.

Core Features & Use Cases

  • 58 Prioritized Best Practice Rules: Curated guidelines from animation expert Emil Kowalski, organized into 8 impact-ranked categories from critical easing selection to Tailwind v4 utility implementation.
  • Multi-Platform Support: Covers CSS, Framer Motion (React), and Tailwind v4 workflows for common components like toasts, drawers, buttons, and tab transitions.
  • Accessibility & Performance Focus: Includes rules for respecting reduced motion preferences, optimizing animation performance to avoid jank, and ensuring animations serve clear user-facing purposes.
  • Use Case Example: A frontend developer building a React drawer component can use this Skill to select the correct iOS-style easing curve, set the appropriate 500ms duration, and implement momentum-based dismissal and drag damping for a native-like feel.

Quick Start

Use the emilkowal-animations skill to review the animation implementation for your new React toast notification system, identify any performance or accessibility gaps, and suggest specific improvements aligned with the best practice rules.

Frequently Asked Questions about emilkowal-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for accessible web animations in React?▼

Web animations in React require respecting reduced motion preferences, selecting performant properties like transforms, and applying purposeful timing. This Skill provides 58 vetted rules across 8 categories to ensure motion design is inclusive and polished.

How do I build smooth Framer Motion drawer and toast components?▼

Building smooth Framer Motion components requires correct easing curves, durations like 500ms, and gesture interactions such as drag damping. This Skill guides you through these patterns to achieve native-like transitions.

Does this Skill support Tailwind v4 utility classes for transitions?▼

Yes, this Skill supports Tailwind v4 utility implementation for transitions and animations. It includes specific rules for applying Tailwind v4 utilities to ensure your motion design remains performant and consistent.

Why do my CSS animations feel janky and unpolished?▼

CSS animations often feel janky due to poor easing selection, animating non-performant properties, or excessive timing. This Skill eliminates guesswork by providing 58 prioritized rules covering property selection and easing to fix degraded user experience.

When should I use specific easing curves for UI motion?▼

You should use specific easing curves for UI motion to match native interactions, such as iOS-style curves for drawer components. This Skill helps you select the correct easing curve from 8 categorized rules for strategic animation.

Can I review existing React animation code for performance gaps?▼

Yes, you can review existing React animation code for performance and accessibility gaps. This Skill identifies issues in your implementation and suggests specific improvements aligned with expert-vetted best practice rules.

Related Skills

Explore More Software Engineering Skills→
a-chahala-chahal
4

openshop-frontend-skill

Generate React/Next.js UI components with Tailwind CSS v4 and Framer Motion.

Community
Advanced
remiconnessonremiconnesson

emilkowal-animations

Apply animation best practices to React and Framer Motion interfaces.

Community
Advanced
patricio0312revpatricio0312rev
5

animation-micro-interaction-pack

Apply reusable motion patterns to React, Vue, and vanilla JS components.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate