Animation Mastery for Designers and Engineers
Build, review, and master animations with Emil's proven design philosophy
What You Can Do
Design and build animations using a proven decision sequence covering when to animate, which tools to use (CSS, WAAPI, Motion.dev), property selection, easing curves, and accessibility. Review existing animations and audit codebases for quality issues. Understand and name motion effects using a comprehensive vocabulary glossary. Learn from Emil Kowalski's opinionated motion design philosophy built on decades of interface engineering experience.
Features
Seven-step workflow from decision gate through implementation: should it animate, what purpose does it serve, which tool, what properties, easing or springs, how it interrupts, and reduced motion support
Production cubic-bezier curves and duration ranges for buttons, tooltips, dropdowns, modals, drawers, and every common UI pattern
Choose between CSS transitions, @starting-style, CSS animations, WAAPI, and Motion.dev based on performance needs and control requirements
Learn why only transform and opacity should animate, and how to avoid layout thrashing and expensive paint operations
Reverse-lookup reference that converts vague descriptions (bouncy, slides off, draws itself) into precise animation terminology like Pop in, Rubber-banding, and Stagger
Critique existing animations and identify violations of best practices through Emil's opinionated lens and philosophy
Every animation includes prefers-reduced-motion compliance and hover and pointer gating for keyboard and touch safety
Audit entire projects for animation opportunities and quality issues across all components and interactions
Example Output
Building a responsive dropdown animation
Build an entrance animation for a dropdown select that feels snappy and responsive.
The animate skill applies the sequence: quick interaction (tens per day), feedback as the purpose, CSS transition as the tool, transform with opacity for properties, ease-out 150-250ms for timing. Returns production code with reduced motion support and transform-origin gating for anchor-based triggers.
Identifying a motion effect
What do you call that effect where a popover bounces into place from the button that opened it?
The animation-vocabulary skill identifies this as Pop in with origin-aware animation, explains it uses a slight overshoot on scale, and contrasts it with plain Scale in (which lacks the trigger awareness and bounce). Gives you the precise term for briefs and design discussions.
Reviewing animation code quality
Review this animation for violations of best practices and suggest improvements.
The review skill audits against Emil's philosophy: checking for unnecessary animations on high-frequency actions (keyboard shortcuts), misused easing curves, GPU-unfriendly properties like width/height/margin, missing accessibility support, and durations that feel sluggish or jarring.
What's Included
- animate skill: Build animations from scratch using a proven decision sequence and opinionated best practices
- animation-vocabulary skill: Reference glossary for understanding and naming motion effects, entrances, exits, and animation terminology
- Review and audit skills: Critique animations and audit projects for quality issues, accessibility gaps, and improvement opportunities
- Easing curve tables: Precision cubic-bezier values and duration ranges tuned for every UI component and interaction pattern
- Recipe templates: Ready-to-build implementations for buttons, tooltips, modals, drawers, toasts, accordions, and stagger patterns
Who It's For
- Frontend engineers building interactive user interfaces
- UI/UX designers implementing motion design systems
- Design engineers balancing performance with delight
- Product designers reviewing animation quality
Best For
- Building smooth, performant, accessible animations
- Deciding when and how to animate interactions
- Understanding and naming motion effects
- Reviewing animation code for quality and philosophy
- Learning animation best practices from first principles
You might also like
Present users with an adaptive 24-question personality assessment that uses Bayesian active learning to efficiently map their psychological profile. The skill automatically maps user responses (1-7 scales or natural language) to archetype classifications based on a 5-color psychological model, tracks probability distributions in real-time, and delivers detailed personality insights including core strengths, weaknesses, and top archetype matches.
Access Vercel's official collection of agent skills for building and deploying modern web applications. Optimize React component architecture using composition patterns to avoid boolean prop proliferation and build scalable component libraries. Deploy applications to Vercel with flexible workflows supporting git integration, CLI authentication, and multiple fallback methods. Apply React and Next.js performance guidelines from Vercel Engineering to write efficient code and improve Core Web Vitals.
The Lark CLI is the official command-line interface for Lark (飞书), packed with 35+ AI agent skills and 200+ commands. Automate workflows across your entire Lark workspace: manage approvals and attendance, develop custom applications with Miaoda, query and analyze multi-dimensional base tables, handle documents and sheets, schedule meetings, send messages, manage mail and tasks, and integrate with external APIs. Built for both humans and AI agents with comprehensive business domain coverage.
This is a comprehensive engineering workflow system designed to guide you from an initial idea all the way to shipped code. It includes a main flow (idea → grill → spec → tickets → implement → review → ship), specialized skills for handling bugs, triage, and large architectural challenges, and foundational vocabulary skills for domain modeling and codebase design. Each skill works independently or as part of the larger workflow, giving you flexibility to adapt to your project's needs.
Generate batches of proven viral hooks across named-creator frameworks (MrBeast, Hormozi, Brunson, Koe, Welsh, Bush, Galloway). Write and audit short-form scripts with platform-specific pacing. Optimize Instagram Reels for sends-per-reach using Trial Reels testing. Craft captions and CTAs that match video payoff. Diagnose why openings flop and rewrite weak hooks against anti-patterns. The skills encode what patterns tend to lift retention in the first 1 to 3 seconds, then repurpose across platforms.
RigorPilot is a comprehensive skill suite for deep learning research, providing auditable repository analysis, README-first reproducibility workflows, bounded exploration with evidence-based ranking, and publication-ready scientific documentation. Each skill enforces rigor through documented assumptions, comparability tracking, and explicit decision checkpoints. Use these skills to understand ML repository internals, faithfully reproduce published results, systematically explore novel ideas with proper baselines, and generate standardized research artifacts.
Discover Reddit threads where people are genuinely shopping for what you sell, then draft replies that sound like a helpful community member (not an ad). The skill runs two moves: discovery scans target subreddits for recommendation asks, expressed pain, and competitor mentions, ranking threads by signal, product fit, and timing; drafting writes experience-based replies that respect community norms, disclose your affiliation honestly, and only mention your product when it truly answers the question.
Elevate your interface design from strategy to pixel-perfect execution. Shape layouts and user flows before coding, critique designs against established heuristics, audit for accessibility and performance gaps, and polish for production. Enhance with purposeful animation, strategic color, harmonious spacing, and delightful moments. Includes comprehensive guidance for websites, dashboards, apps, components, forms, onboarding, and design systems across web and native platforms.
by pbakaus