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
Search the web, scrape URLs into markdown/HTML/screenshots/links/images, extract structured JSON with AI prompts, crawl multi-page sites, and monitor pages for changes on a schedule. Supports browser automation features like JavaScript rendering, stealth mode, cookies, and custom headers. Perfect for data engineers, researchers, and developers who need API-free web data collection without writing scrapers.
This comprehensive collection includes 79 dedicated agent skills for all major Azure services and operations. You can automate Azure resource deployment and management, query infrastructure and logs with natural language using Kusto Graph and IRQL, analyze security events and detect threats, configure identity and access management through Entra ID, monitor application performance with Application Insights, manage storage and messaging services, execute cloud migration workflows, validate compliance policies, and query Azure resources by metadata or properties.
This comprehensive skill collection guides you through creating professional videos programmatically using Remotion and React. Create new video projects, structure complex multi-scene compositions, and animate content with full interactivity. Add captions by transcribing audio, importing SRT files, or generating them programmatically. Build animated maps with Mapbox, MapLibre, or GeoJSON, including 3D geographic flyovers. Process multimedia by trimming, cropping, and extracting metadata from video and audio files.
Render dynamic videos directly from HTML/code using Puppeteer and ffmpeg, with built-in support for AI voiceover, caption overlays, and motion animation. Convert markdown changelogs into polished 45-60 second branded videos with animated UI mockups, captions, and AI narration. Create explainer videos, product demos, and animated visualizations using code-first workflows and motion doctrines that enforce consistency and quality.
by heygen-comRigorPilot 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.
Create production-ready mobile app designs by describing what you want in plain language. Use chat-based requests to design screens, iterate with follow-up messages, and export code implementations for HTML, React Native, and SwiftUI. Features include live design preview in the Sleek editor, component screenshot generation, and built-in design references to seed your visual style.
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.
This collection of skills improves code quality, architecture documentation, and team workflow coordination. Review Architecture Decision Records with fresh perspective and rewrite them for clarity, implement type-safe AST visitor patterns for robust code organization, automate Biome linting upgrades across monorepos, and generate well-structured GitHub pull requests integrated with Linear project tracking. Perfect for teams that care about maintainable code, clear decision documentation, and smooth development workflows.