# skills | Emil Kowalski | Knowledge Base | Instagit

Skills for Design Engineers.

GitHub Stars: 22k

Repository: https://github.com/emilkowalski/skills

---

## Articles

### [How to Secure AI Agents that Use emilkowalski/skills: Architecture and Implementation](/emilkowalski/skills/how-to-secure-ai-agents-use-emilkowalski-skills)

Learn to secure AI agents using emilkowalski/skills. Discover techniques for input validation, LLM output sanitization, and secure code execution to prevent prompt injection.

- Tags: security
- Published: 2026-08-09

### [Using Skills Directly vs. Via an AI Agent in emilkowalski/skills](/emilkowalski/skills/what-difference-between-using-these-skills-directly-via-ai-agent)

Discover the difference between direct skill usage and AI agent orchestration in emilkowalski/skills. Choose manual control or autonomous workflows for your projects.

- Tags: deep-dive
- Published: 2026-08-09

### [Using the Prototype Skill for UI Prototyping: Complete Examples and Workflow Guide](/emilkowalski/skills/are-there-specific-examples-using-these-skills-prototyping)

Explore UI prototyping with the Prototype skill from emilkowalski/skills. Generate production-ready variants safely in isolated environments. Learn workflow examples.

- Tags: how-to-guide
- Published: 2026-08-09

### [What AI Models Are Compatible with These Skills: A Model-Agnostic Guide to emilkowalski/skills](/emilkowalski/skills/what-ai-models-compatible-these-skills)

Discover which AI models are compatible with emilkowalski/skills. This guide explains how to use GPT-4, Claude, Gemini, and open-source LLMs with the skills framework.

- Tags: deep-dive
- Published: 2026-08-09

### [How to Test AI Agent Interactions with the emilkowalski/skills Library](/emilkowalski/skills/how-test-ai-agent-interactions-emilkowalski-skills-library)

Easily test AI agent interactions using the emilkowalski/skills library. Wrap markdown skill files for deterministic CLI output, verifying gate enforcement and step execution with standard testing tools.

- Tags: tutorial
- Published: 2026-08-09

### [Using the Skills Repository for Non-Animation UI Elements: A Complete Guide](/emilkowalski/skills/can-these-skills-used-non-animation-related-ui-elements)

Unlock the full potential of the emilkowalski/skills repository beyond animation. Discover how to leverage reusable modules for UI design, prototyping, and best practices for static elements.

- Tags: how-to-guide
- Published: 2026-08-09

### [How to Evaluate the Quality of UI Animations Generated by AI Agents with the Skills Library](/emilkowalski/skills/how-evaluate-quality-ui-animations-generated-ai-agents-using-library)

Learn to evaluate AI-generated UI animations using the review-animations skill. This framework ensures ten essential quality standards for responsive and accessible animations. Discover the emilkowalski/skills library.

- Tags: how-to-guide
- Published: 2026-08-09

### [Roadmap for Future Development of emilkowalski/skills: What's Next for the AI Skill Ecosystem](/emilkowalski/skills/is-there-roadmap-future-development-emilkowalski-skills)

Discover the future development roadmap for emilkowalski/skills. Explore catalog expansion, interface standardization, and CLI automation for the AI skill ecosystem.

- Tags: architecture
- Published: 2026-08-09

### [Animation Generation Algorithms in the Skills Repository: A Design-Engineered Decision Framework](/emilkowalski/skills/what-underlying-algorithms-animation-generation-these-skills)

Discover animation generation algorithms in the emilkowalski/skills repository. Learn how it maps UI scenarios to CSS transitions, Framer Motion, and Web Animations API using a decision-tree framework.

- Tags: deep-dive
- Published: 2026-08-09

### [How to Define Custom Animation Parameters for AI Agents: The emilkowalski/skills Standards](/emilkowalski/skills/how-to-define-custom-animation-parameters-ai-agents)

Learn to define custom animation parameters for AI agents using the emilkowalski/skills standards. Optimize performance with custom curves and durations under 300ms.

- Tags: how-to-guide
- Published: 2026-08-09

### [Troubleshooting Common Issues When Using emilkowalski/skills with AI Agents](/emilkowalski/skills/troubleshooting-common-issues-using-emilkowalski-skills-ai-agents)

Fix common emilkowalski/skills animation issues with AI agents. Learn how to adhere to decision trees for compliant and performant motion. Resolve frequency gate, CPU usage, and easing curve problems.

- Tags: how-to-guide
- Published: 2026-08-09

### [Best Practices for Prompting AI Agents Using UI Skills](/emilkowalski/skills/best-practices-prompting-ai-agents-using-ui-skills)

Master prompting AI agents with UI skills. Learn best practices for deterministic, high-quality output using emilkowalski/skills. Select skills, use absolute paths, and follow exact formats.

- Tags: best-practices
- Published: 2026-08-09

### [How emilkowalski/skills Handles Complex UI Animation Sequences: A Complete Design-First Workflow](/emilkowalski/skills/how-emilkowalski-skills-handle-complex-ui-animation-sequences)

Discover how emilkowalski/skills manages complex UI animation sequences using a design-first workflow, automated reviews, and systematic prototyping for efficient development.

- Tags: deep-dive
- Published: 2026-08-09

### [Performance Implications of Using AI Skills for UI Generation: A Technical Analysis](/emilkowalski/skills/what-performance-implications-using-ai-skills-ui-generation)

Analyze the performance of AI skills for UI generation. Learn how emilkowalski/skills ensures 60 fps UI performance with static code generation and zero runtime overhead.

- Tags: performance
- Published: 2026-08-09

### [How to Contribute New Skills to the emilkowalski/skills Project](/emilkowalski/skills/how-to-contribute-new-skills-emilkowalski-skills-project)

Learn to contribute new skills to the emilkowalski/skills project. Follow our guide to add skills, create documentation, and update the README for your contributions.

- Tags: how-to-guide
- Published: 2026-08-09

### [Do Pre-Built AI Agents Exist for the Emilkowalski Skills Library?](/emilkowalski/skills/are-there-pre-built-ai-agents-utilize-skills-library)

Discover if pre-built AI agents exist for the emilkowalski skills library. Learn how the repository offers skill definitions for frameworks like LangChain and LlamaIndex.

- Tags: getting-started
- Published: 2026-08-09

### [How to Customize or Extend Skills for Specific UI Animation Needs](/emilkowalski/skills/how-to-customize-extend-skills-specific-ui-animation-needs)

Customize and extend the emilkowalski/skills repository for unique UI animation needs. Add new recipes or create sub-skills inheriting core logic for GPU-accelerated, accessible motion.

- Tags: how-to-guide
- Published: 2026-08-09

### [AI Agent UI Design Workflows: Practical Examples Using the Skills Repository](/emilkowalski/skills/examples-ai-agent-ui-design-workflows-using-skills)

Explore practical AI agent UI design workflows using the emilkowalski/skills repository. Execute complete UI design tasks from ideation to improvement planning with simple markdown files.

- Tags: how-to-guide
- Published: 2026-08-09

### [Can AI Agents Generate UI Animations Using emilkowalski/skills?](/emilkowalski/skills/can-ai-agents-use-emilkowalski-skills-generate-ui-animations)

AI agents generate UI animations with emilkowalski/skills. Follow deterministic skill definitions for tool selection, easing curves, and accessibility. Get production-ready animations easily.

- Tags: how-to-guide
- Published: 2026-08-09

### [AI Agent Skills for UI Animation in the emilkowalski/skills Repository](/emilkowalski/skills/what-ai-agent-skills-available-for-ui-animation-repository)

Explore the emilkowalski/skills repository for AI agent skills in UI animation. Automate motion design, generate code, and conduct audits with these seven specialized tools.

- Tags: deep-dive
- Published: 2026-08-09

### [CSS Clip-Path Animation Techniques: Best Practices for Performant Interactions](/emilkowalski/skills/best-practices-clip-path-animation-css)

Master CSS clip-path animation techniques. Learn best practices for performant reveals using inset() values and hardware acceleration to avoid layout recalculations.

- Tags: best-practices
- Published: 2026-08-08

### [How Spring Animations Work: Physics-Based Motion for Interactive UIs](/emilkowalski/skills/how-spring-animations-work-and-when-to-use)

Discover how spring animations create fluid, physics-based motion for interactive UIs. Learn to implement natural, interruptible animations with velocity for responsive designs.

- Tags: deep-dive
- Published: 2026-08-08

### [How to Optimize Tooltip Delays on Subsequent Hovers: A Complete Implementation Guide](/emilkowalski/skills/tooltip-delay-recommendation-subsequent-hovers)

Optimize tooltip delays for subsequent hovers by skipping delays and animations. Implement an instant hover experience for seamless user flow. Learn how with this guide.

- Tags: how-to-guide
- Published: 2026-08-08

### [How to Make Popovers Origin-Aware in UI Animations](/emilkowalski/skills/how-to-make-popovers-origin-aware)

Learn how to make popovers origin-aware in UI animations. Scale animations from the trigger element using CSS transform-origin and dynamic custom properties for smoother interactions.

- Tags: how-to-guide
- Published: 2026-08-08

### [Why You Should Avoid Animating from scale(0): CSS Animation Best Practices](/emilkowalski/skills/why-avoid-animating-from-scale-0)

Discover why animating from scale(0) harms user experience and performance. Learn CSS animation best practices for smoother, more realistic interfaces.

- Tags: best-practices
- Published: 2026-08-08

### [How Should Buttons Be Animated for Responsiveness: Lessons from emilkowalski/skills](/emilkowalski/skills/how-should-buttons-be-animated-for-responsiveness)

Learn how to animate buttons for responsiveness using the emilkowalski/skills repo. Apply subtle scale transforms and custom easing for snappy, natural tactile feedback.

- Tags: best-practices
- Published: 2026-08-08

### [Custom Easing Curves in the Skills Repository: CSS Motion Tokens Explained](/emilkowalski/skills/custom-easing-curves-provided-by-skills-repository)

Discover custom easing curves like --ease-out in the emilkowalski/skills repository. Enhance UI interactions with refined CSS motion tokens.

- Tags: deep-dive
- Published: 2026-08-08

### [Recommended Animation Durations for UI Elements: The emilkowalski/skills Guide](/emilkowalski/skills/recommended-animation-durations-for-ui-elements)

Discover recommended animation durations for UI elements in the emilkowalski/skills guide. Learn optimal timings for buttons, tooltips, dropdowns, and modals to enhance user experience.

- Tags: best-practices
- Published: 2026-08-08

### [Why You Should Never Use Ease-In for UI Animations](/emilkowalski/skills/why-never-use-ease-in-for-ui-animations)

Avoid ease-in for UI animations. Discover why this timing function creates sluggish interfaces and harms user experience. Learn to create responsive and fluid designs.

- Tags: best-practices
- Published: 2026-08-08

### [How to Choose Easing Functions for Different UI Animation Scenarios](/emilkowalski/skills/what-easing-for-different-ui-animation-scenarios)

Learn how to choose the right easing functions for UI animations. Discover custom cubic bezier curves asymmetric easing and when to avoid ease-in for optimal user experience.

- Tags: best-practices
- Published: 2026-08-08

### [When to Avoid Animating UI Elements Based on Frequency: A Complete Guide](/emilkowalski/skills/when-to-avoid-animating-ui-elements-based-on-frequency)

Avoid animating UI elements triggered over 100 times daily to prevent perceived latency and GPU strain. Learn when frequent animations hinder user experience.

- Tags: how-to-guide
- Published: 2026-08-08

### [Animation Decision Framework in the Skills Repository: A 7-Step Gate-Based Process](/emilkowalski/skills/what-is-animation-decision-framework)

Discover the animation decision framework in emilkowalski/skills. This 7-step process ensures UI elements animate correctly and meet code review standards.

- Tags: deep-dive
- Published: 2026-08-08

### [What Is the Prototype Skill and How to Use It in emilkowalski/skills](/emilkowalski/skills/what-is-prototype-skill-and-how-used)

Discover the prototype skill in emilkowalski/skills. This tool generates UI variants for live comparison, separating exploration from production code. Learn how to use it.

- Tags: how-to-guide
- Published: 2026-08-08

### [How to Use animation-vocabulary to Get Better Animations from AI](/emilkowalski/skills/how-to-use-animation-vocabulary-for-better-ai-animations)

Unlock superior AI animations with animation-vocabulary. This skill translates vague motion into precise animation terms for accurate code generation. Learn how now!

- Tags: how-to-guide
- Published: 2026-08-08

### [What Is the find-animation-opportunities Skill and How Does It Work?](/emilkowalski/skills/what-is-find-animation-opportunities-skill-for)

Discover the find-animation-opportunities skill. This audit tool scans UI code to find high-impact animation possibilities by filtering out low-value candidates using its four-question Gate.

- Tags: deep-dive
- Published: 2026-08-08

### [How the improve-animations Skill Audits Codebases for Motion Issues](/emilkowalski/skills/how-improve-animations-skill-audits-codebases)

Discover animation stacks and evaluate code against eight categories with the improve-animations skill. Get prioritized findings and implementation plans without code modification.

- Tags: how-to-guide
- Published: 2026-08-08

### [How to Build Animations from Scratch Using the 'animate' Skill](/emilkowalski/skills/how-to-build-animations-from-scratch-with-animate-skill)

Learn to build animations from scratch with the emilkowalski/skills animate skill. Transform motion requests into production-ready code using its 7-step decision sequence for efficient animation development.

- Tags: how-to-guide
- Published: 2026-08-08

### [What Is the emil-design-eng Skill? Emil Kowalski’s Design Engineering Philosophy for AI Agents](/emilkowalski/skills/what-is-emil-design-eng-skill)

Discover the emil-design-eng skill a framework guiding AI agents to build UI with disciplined taste invisible polish and precise animation. Learn Emil Kowalski's design engineering philosophy.

- Tags: deep-dive
- Published: 2026-08-08

### [How AI Agents Benefit from the Skills Repository: Structured Design Knowledge for Deterministic UI Generation](/emilkowalski/skills/how-do-ai-agents-benefit-from-skills-repository)

Discover how the emilkowalski/skills repository empowers AI agents to generate quality UI code with deterministic flows, transforming design intuition into machine-readable rules.

- Tags: architecture
- Published: 2026-08-08

### [What Is the emilkowalski/skills Repository? A Design Engineer's Knowledge Base](/emilkowalski/skills/what-is-emilkowalski-skills-repository-for)

Explore the emilkowalski/skills repository, a markdown knowledge base for AI agent design-engineering best practices. Install and use these modules with the skills CLI.

- Tags: getting-started
- Published: 2026-08-08

### [How the `pick-ui-library` Skill Streamlines Component Development in the Skills Framework](/emilkowalski/skills/how-does-the-pick-ui-library-skill-help-in-component-development)

Streamline component development with the pick-ui-library skill. It maps UI tasks to recommended libraries, preventing duplicate dependencies in your Skills Framework project.

- Tags: how-to-guide
- Published: 2026-08-07

### [What Is the 'Review-Animations' Skill's Purpose and Bias?](/emilkowalski/skills/what-is-the-review-animations-skills-purpose-and-bias)

Discover the purpose and bias of the review-animations skill. This agent rigorously checks animation code, prioritizing a 'feels right' motion standard and defaulting to flagging issues.

- Tags: deep-dive
- Published: 2026-08-07

### [Animation Duration Ranges for Different UI Element Types: A Complete Guide](/emilkowalski/skills/what-is-the-specified-duration-range-for-different-element-types-in-animations)

Discover optimal animation duration ranges for UI elements. Learn best practices for buttons, modals, and drawers to enhance user experience and application performance.

- Tags: best-practices
- Published: 2026-08-07

### [Recommended Easing Values for Professional UI Animations: A Practical Guide](/emilkowalski/skills/what-easing-values-are-recommended-for-professional-ui-animations)

Discover recommended cubic-bezier easing values for professional UI animations. Enhance responsiveness and create crisp motion with these expert-recommended curves.

- Tags: how-to-guide
- Published: 2026-08-07

### [What Is the GPU-Only Rule for Animation Properties? A Complete Guide to the Skills Performance Standard](/emilkowalski/skills/what-is-the-gpu-only-rule-for-animation-properties-in-these-skills)

Understand the GPU-only rule for animation properties. Learn how animating transform and opacity on the GPU boosts UI performance and avoids layout recalculations.

- Tags: deep-dive
- Published: 2026-08-07

### [Why CSS Animations Are Preferred Over JavaScript Animations Under Load](/emilkowalski/skills/why-are-css-animations-preferred-over-javascript-animations-under-load)

Discover why CSS animations outperform JavaScript animations under load. Learn how CSS leverages the compositor thread for smooth, stutter-free visuals even when your browser is busy.

- Tags: performance
- Published: 2026-08-07

### [Hierarchy of Tools Recommended by the `animate` Skill: From CSS Transitions to Motion](/emilkowalski/skills/what-is-the-hierarchy-of-tools-recommended-by-the-animate-skill)

Discover the animate skill's tool hierarchy: CSS transitions, @starting-style, CSS animations, WAAPI, and Motion for powerful animations. Learn when to use each.

- Tags: tutorial
- Published: 2026-08-07

### [How the Frequency Table in the *animate* Skill Guide Determines Animation Choices in Emil Kowalski's Skills Repository](/emilkowalski/skills/how-does-the-frequency-table-in-the-animate-skill-guide-animation-choices)

Learn how the frequency table in the animate skill guide prevents animation fatigue by dictating animation choices based on daily usage rates in emilkowalski skills.

- Tags: deep-dive
- Published: 2026-08-07

### [Hard Rules for the animate Skill: 5 Non-Negotiable Constraints in emilkowalski/skills](/emilkowalski/skills/what-are-the-hard-rules-for-the-animate-skill)

Discover the 5 hard rules for the animate skill in emilkowalski/skills. Understand sequential gating, preset-only values, token reuse, accessibility guards, and minimal tooling to prevent animation aborts.

- Tags: best-practices
- Published: 2026-08-07

### [Animate Skill Build Sequence: The 7-Step Motion Pipeline in emilkowalski/skills](/emilkowalski/skills/what-is-the-animate-skills-build-sequence-for-creating-motion)

Discover the 7-step animate skill build sequence in emilkowalski/skills. Transform motion design requests into production-ready code with this detailed motion pipeline.

- Tags: how-to-guide
- Published: 2026-08-07

### [How `clip-path` Is Used as an Animation Tool in the Skills Repository](/emilkowalski/skills/how-is-clip-path-used-as-an-animation-tool-in-these-skills)

Discover how clip-path animates reveals in emilkowalski/skills with asymmetric timing and declarative masking. Learn to create hardware-accelerated animations without layout work.

- Tags: deep-dive
- Published: 2026-08-07

### [CSS Transform Properties in the Emil Kowalski Skills Repository: A Complete Guide](/emilkowalski/skills/what-css-transform-properties-are-discussed-in-the-skills)

Explore CSS transform properties like scale rotate and translate from the emilkowalski skills repository. Optimize animations for 60 fps with GPU acceleration.

- Tags: deep-dive
- Published: 2026-08-07

### [Fundamental Animation Principles in emil-design-eng: A Complete Guide](/emilkowalski/skills/what-are-the-fundamental-animation-principles-covered-by-emil-design-eng)

Master fundamental animation principles like timing, momentum, and feedback with emil-design-eng. Learn how this skill enhances Sonner toast library's motion design for a polished user experience.

- Tags: how-to-guide
- Published: 2026-08-07

### [Animation Decision Framework in the emilkowalski/skills Repository: A Complete Guide](/emilkowalski/skills/what-is-the-animation-decision-framework-in-this-repository)

Explore the Animation Decision Framework in emilkowalski/skills. This guide helps you build purposeful, performant UI animations with a simple four-step process. Learn to animate effectively.

- Tags: deep-dive
- Published: 2026-08-07

### [Critical Review Patterns Recommended by emil-design-eng](/emilkowalski/skills/what-are-the-critical-review-patterns-recommended-by-emil-design-eng)

Discover emil-design-eng's critical review patterns. Learn to use single markdown tables and a 12-item checklist for superior UI code changes and interactions. Improve your code reviews today.

- Tags: best-practices
- Published: 2026-08-07

### [What Is the `emil-design-eng` Foundational Skill? A Deep Dive into Emil Kowalski's UI Philosophy](/emilkowalski/skills/what-is-the-emil-design-eng-foundational-skill-about)

Uncover the emil-design-eng foundational skill. Emil Kowalski's UI philosophy focuses on disciplined taste, invisible details, and precise animation for UIs that feel right.

- Tags: deep-dive
- Published: 2026-08-07

### [Where Does the Knowledge in the Emil Kowalski Skills Repository Come From?](/emilkowalski/skills/where-does-the-knowledge-encoded-in-these-skills-come-from)

Discover the sources behind Emil Kowalski's skills repository. Learn how personal philosophy, curated references, and audit templates shape its knowledge base.

- Tags: internals
- Published: 2026-08-07

### [How Skills Work Together and Hand Off Tasks in the emilkowalski/skills Repository](/emilkowalski/skills/how-do-skills-in-this-repository-work-together-or-hand-off-tasks)

Discover how skills in the emilkowalski/skills repository collaborate and hand off tasks using markdown cues parsed by the skills.sh CLI for efficient agent routing.

- Tags: how-to-guide
- Published: 2026-08-07

### [What Is the Purpose of the SKILL.md File in Each Skill Module?](/emilkowalski/skills/what-is-the-purpose-of-the-skillmd-file-in-each-skill-module)

Discover the purpose of SKILL.md files in the emilkowalski/skills repository. Learn how this manifest file combines YAML and markdown for machine and human understanding.

- Tags: deep-dive
- Published: 2026-08-07

### [How the emilkowalski/skills Repository is Structured: A Complete Guide](/emilkowalski/skills/how-is-the-emilkowalski-skills-repository-structured)

Explore the emilkowalski/skills repository structure. Learn how each UI animation and design skill is organized in its own directory with a canonical SKILL.md file for rules and workflows.

- Tags: how-to-guide
- Published: 2026-08-07

### [How AI Agents Can Use the 'skills' CLI Tool with Design Libraries](/emilkowalski/skills/how-can-ai-agents-use-the-skills-cli-tool-with-these-design-libraries)

Learn how AI agents leverage the skills CLI tool to access design library specs programmatically. Discover how to get UI primitives, motion specs, and interaction guidelines via JSON.

- Tags: how-to-guide
- Published: 2026-08-07

### [Emil Kowalski's Core Philosophy of Design Skills: 3 Principles Behind Polished UI](/emilkowalski/skills/what-is-the-core-philosophy-behind-emil-kowalskis-design-skills)

Discover Emil Kowalski's core philosophy of design skills. Learn his 3 principles: trained taste, compounding unseen details, and beauty as leverage for polished UI.

- Tags: deep-dive
- Published: 2026-08-07

### [How Emil Kowalski's Skills Help AI Agents Make Design Decisions: A Deep Dive into Executable UI/Animation Expertise](/emilkowalski/skills/how-do-emil-kowalskis-skills-help-ai-agents-make-design-decisions)

Discover how Emil Kowalski's executable UI animation expertise empowers AI agents to make autonomous design decisions. Learn more about these self-contained knowledge modules.

- Tags: deep-dive
- Published: 2026-08-07

### [Why `transform-origin: center` Is Wrong for Popovers (And What to Use Instead)](/emilkowalski/skills/why-transform-origin-center-wrong-for-popovers)

Discover why transform-origin center breaks popover animations and learn how to use trigger-aware origins with --transform-origin for a connected experience.

- Tags: best-practices
- Published: 2026-08-06

### [React Example: Button Press with Spring Transition — Full Implementation Guide](/emilkowalski/skills/react-example-button-press-spring-transition)

React button press spring transition guide. Animate scale on press with Motion for natural, interruptible interactions. Full implementation and example.

- Tags: tutorial
- Published: 2026-08-06

### [React Spring Mouse Tracking Example: Building Spring-Based Cursor Animations with Emil Kowalski's Skills](/emilkowalski/skills/react-example-spring-mouse-tracking)

Build physics-based cursor animations in React with @react-spring. Explore a React Spring mouse tracking example using useSpring and animated.div for smooth, engaging UI effects.

- Tags: tutorial
- Published: 2026-08-06

### [Recommended Bounce Value for UI Spring Animations: A Complete Guide](/emilkowalski/skills/recommended-bounce-value-ui-spring-animations)

Discover the recommended bounce value for UI spring animations in emilkowalski/skills. Learn the optimal 0.2 value and acceptable ranges to enhance your user interfaces.

- Tags: tutorial
- Published: 2026-08-06

### [How to Configure Spring Animations Using Traditional Physics Parameters in Motion](/emilkowalski/skills/configure-spring-animations-traditional-physics)

Configure spring animations using mass stiffness and damping for precise UI motion control. Learn to manipulate physical properties for advanced animation effects.

- Tags: how-to-guide
- Published: 2026-08-06

### [How to Configure Spring Animations Using Apple's Approach: Damping, Response, and Interruptibility](/emilkowalski/skills/configure-spring-animations-apple-approach)

Learn to configure spring animations with Apple's damping ratio and response parameters. Create interruptible springs that preserve velocity for smoother gesture reversals.

- Tags: how-to-guide
- Published: 2026-08-06

### [CSS Hover State with Custom Easing: Implementation Guide and Code Examples](/emilkowalski/skills/css-example-hover-state-custom-easing)

Learn to create smooth CSS hover states with custom cubic bezier easing. This guide provides implementation details and code examples for intuitive animations.

- Tags: how-to-guide
- Published: 2026-08-06

### [CSS Drawer Animation with Custom Easing: A Complete Implementation Guide](/emilkowalski/skills/css-example-drawer-animation-custom-easing)

Implement smooth iOS style drawer animations using CSS custom properties and transform transitions. Explore custom easing for enhanced user experience in web apps.

- Tags: how-to-guide
- Published: 2026-08-06

### [CSS Example: Modal Entry with Custom Easing in Instagit Skills](/emilkowalski/skills/css-example-modal-entry-custom-easing)

Learn how to create smooth modal entry animations using CSS custom properties and declarative state management. Explore this CSS example in the emilkowalski/skills repository for custom easing effects.

- Tags: tutorial
- Published: 2026-08-06

### [CSS Example: Button Press with Custom Easing in emilkowalski/skills](/emilkowalski/skills/css-example-button-press-custom-easing)

Learn how to create a custom button press animation in CSS using transform scale and cubic bezier easing for a tactile and responsive user experience.

- Tags: example
- Published: 2026-08-06

### [Where to Find Good Easing Curves for UI Development: A Guide From the Emil Kowalski Skills Repo](/emilkowalski/skills/where-to-find-good-easing-curves-for-ui)

Discover essential easing curves for UI development. Explore recommended resources like easing.dev and easings.co from the emilkowalski skills repo for production-ready presets.

- Tags: how-to-guide
- Published: 2026-08-06

### [Easing Decision Framework for Different UI Situations: A Complete Guide](/emilkowalski/skills/easing-decision-framework-for-ui-situations)

Master the easing decision framework for UI animations. Learn how to choose the right easing curves based on action type, impact, and product personality with clear rules for better UX.

- Tags: how-to-guide
- Published: 2026-08-06

### [Recommended Custom CSS Easing Curves for UI Animations: 3 Tokens for Deliberate Motion](/emilkowalski/skills/recommended-custom-css-easing-curves-for-ui)

Discover recommended custom CSS easing curves for UI animations. Learn 3 specific cubic-bezier tokens for entrances, symmetric motion, and drawer animations to enhance your user interface.

- Tags: best-practices
- Published: 2026-08-06

### [Why Built‑In CSS Easing Curves Are Insufficient for Professional UI Animation](/emilkowalski/skills/why-built-in-css-easing-curves-insufficient)

Discover why generic CSS easing curves like ease in and ease out fall short for professional UI animation. Learn how to achieve precision and brand alignment for superior interfaces.

- Tags: deep-dive
- Published: 2026-08-06

### [CSS Standard Animation on Modals: A Production-Ready Approach](/emilkowalski/skills/css-example-standard-animation-modals)

Implement production-ready CSS modal animations using opacity and transform transitions. Ensure smooth, accessible experiences with custom easing and prefers-reduced-motion support.

- Tags: tutorial
- Published: 2026-08-06

### [CSS Example: No Animation on Command Palette for High‑Frequency UI](/emilkowalski/skills/css-example-no-animation-command-palette)

Learn how to disable CSS animations on command palettes for instant UI rendering. Ensure high-frequency elements remain responsive and improve user experience.

- Tags: tutorial
- Published: 2026-08-06

### [What Are the Valid Purposes for Implementing UI Animations?](/emilkowalski/skills/valid-purposes-for-ui-animations)

Discover the valid purposes for UI animations. Learn how animations enhance user experience through feedback, state indication, and spatial consistency, not just decoration.

- Tags: best-practices
- Published: 2026-08-06

### [Why Frequently Used Elements Should Not Be Animated: Performance-Based Rules from emilkowalski/skills](/emilkowalski/skills/why-frequently-used-elements-should-not-be-animated)

Discover why animating frequently used UI elements degrades performance. Learn about latency, cumulative costs, and perceived speed issues from emilkowalski/skills.

- Tags: performance
- Published: 2026-08-06

### [Frequency-Based Decision Matrix for UI Animations: A Practical Guide](/emilkowalski/skills/frequency-based-decision-matrix-for-ui-animations)

Learn the frequency-based decision matrix for UI animations. Classify interactions into tiers to optimize animation use from never animate to adding delight.

- Tags: how-to-guide
- Published: 2026-08-06

### [How the Animation Decision Framework Decides What to Animate: A Complete Guide](/emilkowalski/skills/how-does-animation-decision-framework-decide-what-to-animate)

Discover how the Animation Decision Framework decides what to animate using its seven-step checklist for optimal UI performance. Learn its purpose, frequency, duration, and more.

- Tags: how-to-guide
- Published: 2026-08-06

### [CSS Animations vs JavaScript Spring Libraries: When to Use Each for UI Interactions](/emilkowalski/skills/when-to-use-css-animations-vs-javascript-spring-libraries)

Learn when to use CSS animations for frequent UI interactions and JavaScript spring libraries for dynamic, physics-driven motion. Optimize your UI animations today.

- Tags: comparison
- Published: 2026-08-05

### [Base-UI vs Radix vs Headless UI: How to Pick the Right React UI Library](/emilkowalski/skills/picking-right-ui-library-base-ui-radix-headless-ui)

Choose the best React UI library for your project: Base UI, Radix UI, or Headless UI. Compare their sizes, features, and Tailwind integration to make an informed decision.

- Tags: comparison
- Published: 2026-08-05

### [How to Implement Blur Transitions to Mask Imperfect Crossfades](/emilkowalski/skills/how-to-implement-blur-transitions-mask-imperfect-crossfades)

Implement blur transitions with a 2px CSS filter to mask imperfect crossfades. Soften edges and eliminate double vision glitches for smooth UI state changes.

- Tags: how-to-guide
- Published: 2026-08-05

### [Typography Best Practices for Tracking and Leading at Different Font Sizes: A CSS Implementation Guide](/emilkowalski/skills/typography-best-practices-tracking-leading-font-sizes)

Master typography with CSS tracking and leading best practices. Learn to adjust spacing for different font sizes to ensure optimal readability and visual appeal across your designs.

- Tags: best-practices
- Published: 2026-08-05

### [Using backdrop-filter for Translucent, Apple-Style Interfaces: A Complete Implementation Guide](/emilkowalski/skills/using-backdrop-filter-translucent-materials-apple-style)

Implement Apple-style translucent interfaces using backdrop-filter blur and rgba backgrounds. Learn to blur content scrolling underneath for performant, stunning UIs.

- Tags: how-to-guide
- Published: 2026-08-05

### [Implementing Velocity Handoff Between Gesture Drag and Spring Animation: A Complete Guide](/emilkowalski/skills/implementing-velocity-handoff-gesture-drag-spring-animation)

Implement velocity handoff between gesture drag and spring animation for fluid, momentum-driven interfaces. This guide ensures smooth transitions eliminating jarring stops.

- Tags: tutorial
- Published: 2026-08-05

### [Spring-Based Mouse Interactions for Decorative Effects: A Complete Implementation Guide](/emilkowalski/skills/spring-based-mouse-interactions-decorative-effects)

Implement dynamic spring based mouse interactions for decorative effects. Learn to create natural, GPU-optimized animations with useSpring and interpolate mouse position.

- Tags: how-to-guide
- Published: 2026-08-05

### [How to Implement 1:1 Pointer Tracking with Velocity Calculation for Gestures](/emilkowalski/skills/how-to-implement-1-to-1-pointer-tracking-velocity-gestures)

Implement 1:1 pointer tracking with velocity calculation for gestures. Use setPointerCapture, track position history, and compute release velocity for smooth animations in your emilkowalski/skills project.

- Tags: how-to-guide
- Published: 2026-08-05

### [Using @starting-style for CSS Entry Animations Without JavaScript](/emilkowalski/skills/using-starting-style-css-entry-animations-no-javascript)

Master CSS entry animations with @starting-style. Achieve dynamic entrance effects without JavaScript and simplify your frontend development.

- Tags: how-to-guide
- Published: 2026-08-05

### [How to Implement Staggered Animations for List Items with Optimal Delays](/emilkowalski/skills/how-to-implement-staggered-animations-list-items-delays)

Master staggered animations for list items with optimal delays. Learn the formula to animate items sequentially and enhance your UI's visual flow.

- Tags: tutorial
- Published: 2026-08-05

### [How to Build Interruptible Toast and Notification Animations: Best Practices from emilkowalski/skills](/emilkowalski/skills/best-practices-toast-notification-animation-interruptibility)

Learn best practices for interruptible toast and notification animations. Use CSS transitions, short durations, and animate transform and opacity for smooth UX.

- Tags: best-practices
- Published: 2026-08-05

### [Implementing Asymmetric Enter/Exit Timing for Deliberate vs Responsive Interactions](/emilkowalski/skills/implementing-asymmetric-enter-exit-timing)

Master asymmetric enter exit timing in CSS for UI elements. Learn to use longer transitions for deliberate actions and quick fades for responsive design to enhance user experience.

- Tags: how-to-guide
- Published: 2026-08-05

### [How to Implement Origin-Aware Animations that Scale from Trigger Elements in Skilled-Based UIs](/emilkowalski/skills/how-to-implement-origin-aware-animations-scale-from-trigger)

Learn to implement origin-aware animations that scale from trigger elements. Use CSS custom properties to control transform origin for dynamic UI effects. Read the guide now.

- Tags: tutorial
- Published: 2026-08-05

### [Framer Motion Hardware Acceleration Caveats with `x` / `y` / `scale` Shorthands](/emilkowalski/skills/framer-motion-hardware-acceleration-caveats-shorthands)

Discover Framer Motion hardware acceleration caveats. Learn why x/y/scale shorthands use the main thread while transform strings leverage GPU acceleration for smoother animations.

- Tags: deep-dive
- Published: 2026-08-05

### [How to Animate `transform` and `opacity` Only for Maximum Performance](/emilkowalski/skills/performance-optimization-animating-transform-opacity-vs-layout)

Animate transform and opacity only for maximum browser performance. Learn why these properties skip layout and paint for smoother, faster animations.

- Tags: performance
- Published: 2026-08-05

### [How to Handle `prefers-reduced-motion` and `prefers-reduced-transparency` for Accessibility](/emilkowalski/skills/how-to-handle-prefers-reduced-motion-transparency-accessibility)

Master prefers-reduced-motion and prefers-reduced-transparency with CSS media queries. Enhance accessibility by respecting user preferences and reducing motion and transparency.

- Tags: how-to-guide
- Published: 2026-08-05

### [CSS clip-path Techniques for UI Animations: Tabs, Hold-to-Delete, and Reveals Explained](/emilkowalski/skills/css-clip-path-techniques-ui-animations)

Master CSS clip-path techniques for stunning UI animations. Learn GPU-accelerated reveals, hold-to-delete, and tab effects with inset() for seamless user experiences.

- Tags: tutorial
- Published: 2026-08-05

### [How to Implement Rubber-Band Boundary Effects for Draggable Interfaces in JavaScript](/emilkowalski/skills/implementing-rubber-band-boundary-effects-draggable-interfaces)

Implement rubber-band boundary effects for draggable interfaces with the rubberband() helper from emilkowalski/skills. Achieve natural elastic resistance and smooth snapping.

- Tags: how-to-guide
- Published: 2026-08-05

### [How to Implement Velocity‑Based Gesture Dismissal with Momentum Projection](/emilkowalski/skills/how-to-implement-velocity-based-gesture-dismissal-momentum-projection)

Implement velocity-based gesture dismissal with momentum projection using exponential decay for fluid, interruptible animations. Learn how to pass release velocity to spring animations.

- Tags: how-to-guide
- Published: 2026-08-05

### [Transform-Origin Best Practices for Popovers, Dropdowns, and Modals in the Skills Repository](/emilkowalski/skills/best-practices-transform-origin-popovers-dropdowns-modals)

Master transform-origin for UI elements. Learn best practices for popovers, dropdowns, and modals to create smooth, anchored animations. Optimize your user experience today.

- Tags: best-practices
- Published: 2026-08-05

### [How to Configure Spring Animations for Drag, Gesture, and Momentum Interactions](/emilkowalski/skills/how-to-configure-spring-animations-for-interaction-types)

Master spring animations for drag, gesture, and momentum interactions. Achieve natural feel with velocity carry-over and interruptible springs for seamless UI control.

- Tags: how-to-guide
- Published: 2026-08-05

### [Why Ease-Out Is Preferred Over Ease-In for UI Animations: A Complete Guide to Custom Cubic-Bezier Curves](/emilkowalski/skills/why-ease-out-preferred-over-ease-in-ui-animations-custom-cubic-bezier)

Discover why ease-out beats ease-in for responsive UI animations. Learn how custom cubic-bezier curves create polished, brand-specific motion.

- Tags: deep-dive
- Published: 2026-08-05

### [How to Implement Interruptible Animations with CSS Transitions vs Keyframes: A Complete Guide](/emilkowalski/skills/how-to-implement-interruptible-animations-with-css-transitions-vs-keyframes)

Learn how to implement interruptible CSS animations using transitions vs keyframes. Discover which method offers built-in interruptibility and when to use JavaScript workarounds.

- Tags: how-to-guide
- Published: 2026-08-05

### [How to Use translateY with Percentages for Positioning in CSS](/emilkowalski/skills/how-to-use-translatey-with-percentages-for-positioning)

Master CSS translateY with percentages for precise, resolution-independent positioning. Learn to move elements by their own height for adaptable, dynamic layouts. Enhance your web designs today.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Implement Blur Transitions to Mask Crossfades in UI Animations](/emilkowalski/skills/how-to-implement-blur-transitions-to-mask-crossfades)

Learn how to implement blur transitions for smooth UI crossfades. Discover CSS techniques to eliminate double-vision glitches and create seamless animations.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Implement 3D Transforms with preserve-3d in CSS](/emilkowalski/skills/how-to-implement-3d-transforms-with-preserve-3d)

Learn to implement 3D transforms with preserve-3d in CSS. Create realistic depth effects for child elements with this parent container style. Pure CSS solutions.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Specify Exact Properties for CSS Transitions: A Complete Guide](/emilkowalski/skills/how-to-specify-exact-properties-for-css-transitions)

Learn to specify exact CSS properties for transitions, avoiding the all keyword. Optimize for GPU acceleration, prevent bugs, and ensure smooth animations. Your complete guide.

- Tags: deep-dive
- Published: 2026-08-04

### [Why `transition: all` Is Problematic in CSS: Performance & Best Practices](/emilkowalski/skills/why-transition-all-is-problematic-in-css)

Avoid transition: all in CSS. Discover why it causes performance issues and learn best practices for smoother, more efficient animations. Understand the impact on GPU, layout, and interruptibility.

- Tags: performance
- Published: 2026-08-04

### [When to Use WAAPI Instead of Animation Libraries: A Performance-First Guide](/emilkowalski/skills/when-to-use-waapi-instead-of-animation-libraries)

Learn when to use WAAPI over animation libraries for high performance. Control CSS animations with JavaScript, preserving hardware acceleration and reducing bundle size.

- Tags: performance
- Published: 2026-08-04

### [How to Debug Animations with Slow Motion Testing: A Complete Guide](/emilkowalski/skills/how-to-debug-animations-with-slow-motion-testing)

Debug animations effectively using slow motion testing. This guide reveals how to identify and fix timing issues, easing flaws, and performance bottlenecks for smoother user experiences.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Implement Asymmetric Enter/Exit Timing in UI Animations](/emilkowalski/skills/how-to-implement-asymmetric-enter-exit-timing)

Learn to implement asymmetric enter/exit timing for UI animations. Create intuitive interactions with slower user-driven animations and faster system responses.

- Tags: tutorial
- Published: 2026-08-04

### [How to Use @starting-style for CSS-Only Entry Animations](/emilkowalski/skills/how-to-use-starting-style-for-css-only-entry-animations)

Learn to create CSS-only entry animations using @starting-style. Define an element's initial state for smooth transitions without JavaScript.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Implement Swipe-to-Dismiss with Velocity Detection in React](/emilkowalski/skills/how-to-implement-swipe-to-dismiss-with-velocity-detection)

Implement swipe-to-dismiss with velocity detection in React. Learn to dismiss elements based on drag distance or pointer release velocity for a smooth user experience.

- Tags: how-to-guide
- Published: 2026-08-04

### [CSS Animations vs Framer Motion for Performance: Which Is Faster?](/emilkowalski/skills/css-animations-vs-framer-motion-for-performance)

Compare CSS animations vs Framer Motion for performance. Discover which animation method offers faster frame rates and understand their impact on CPU usage for your web projects.

- Tags: performance
- Published: 2026-08-04

### [How to Implement Staggered Animations with Delays in Modern Web Apps](/emilkowalski/skills/how-to-implement-staggered-animations-with-delays)

Learn how to implement staggered animations with delays for smooth UI entrances. Explore techniques to enhance user experience without blocking interaction. See emilkowalski/skills repository for examples.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Implement Button Press Feedback with scale(0.97) on :active State](/emilkowalski/skills/how-to-implement-button-press-feedback-with-scale-0-97-on-active-state)

Implement button press feedback with scale(0.97) on the :active state using a short transition. Provide immediate tactile feedback for a responsive UI.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Start Entrance Animations from scale(0.95): CSS and React Implementation](/emilkowalski/skills/how-to-start-entrance-animations-from-scale-0-95)

Learn to create subtle pop-in entrance animations starting from scale(0.95) and opacity 0 using CSS and React. Achieve a smooth transition with ease-out curves for a polished UI effect.

- Tags: how-to-guide
- Published: 2026-08-04

### [How to Implement Interruptible Animations with CSS Transitions: A Complete Guide](/emilkowalski/skills/how-to-implement-interruptible-animations-with-css-transitions)

Learn to implement interruptible CSS animations. CSS transitions smoothly adjust mid-flight, avoiding jump-back issues common with keyframes. Master fluid animation control.

- Tags: how-to-guide
- Published: 2026-08-04

### [Transform-Origin on Popovers vs Modals: Best Practices from Emil Kowalski's Design System](/emilkowalski/skills/best-practices-for-transform-origin-on-popovers-vs-modals)

Learn transform origin best practices for popovers and modals. Emil Kowalski's design system offers clear guidance for centered popovers and modals, ensuring consistency and visual balance.

- Tags: best-practices
- Published: 2026-08-04

### [How to Implement Spring Animations with Framer Motion: A Complete Guide](/emilkowalski/skills/how-to-implement-spring-animations-with-framer-motion)

Master spring animations in Framer Motion using the useSpring hook. Control motion with customizable mass, stiffness, and damping for dynamic UI elements.

- Tags: how-to-guide
- Published: 2026-08-04

### [Why Ease-In Animation Feels Sluggish: Perceptual Psychology and CSS Solutions](/emilkowalski/skills/why-ease-in-animation-feels-sluggish)

Discover why ease-in animations feel sluggish and learn CSS solutions. Understand perceptual psychology behind animation timing for responsive interfaces.

- Tags: deep-dive
- Published: 2026-08-04

### [When to Use Ease-Out vs Ease-In for UI Animations: A Design Engineering Guide](/emilkowalski/skills/when-to-use-ease-out-vs-ease-in-for-ui-animations)

Master UI animations with ease-out vs ease-in. Learn when to use each for entering, exiting, and interactive elements to enhance user experience and visual feedback.

- Tags: best-practices
- Published: 2026-08-04

### [How to Create Cohesive Animation Experiences that Match Component Personality](/emilkowalski/skills/creating-cohesive-animation-experiences-that-match-component-personality)

Create cohesive animation experiences by mapping animation properties to component personalities. Ensure motion aligns with user expectations and interaction frequency for seamless UI.

- Tags: tutorial
- Published: 2026-08-03

### [How to Review Animation Code Against Design Standards in the Emilkowalski Skills Repository](/emilkowalski/skills/how-to-review-animation-code-against-design-standards)

Review animation code against design standards using the emilkowalski/skills repository. Execute the review-animations skill for audits, violations, and remediation guidance.

- Tags: how-to-guide
- Published: 2026-08-03

### [Using WAAPI for Programmatic Animations: A Guide to the Web Animations API in Modern Frontend Development](/emilkowalski/skills/using-waapi-for-programmatic-animations)

Master programmatic animations with WAAPI. Leverage the Web Animations API for smooth, GPU-accelerated UI interactions in modern frontend development. Optimize your web animations today.

- Tags: tutorial
- Published: 2026-08-03

### [How to Build Comparison Sliders with clip-path](/emilkowalski/skills/how-to-implement-comparison-sliders-with-clip-path)

Learn to build dynamic before-and-after comparison sliders using CSS clip-path. Update image clips with drag position for smooth, hardware-accelerated comparisons.

- Tags: how-to-guide
- Published: 2026-08-03

### [Best Practices for Modal vs Popover Transform Origins](/emilkowalski/skills/best-practices-for-modal-vs-popover-transform-origins)

Learn best practices for modal vs popover transform origins. Ensure coherent animations by setting popover transform origin to the trigger center and modal transform origin to center.

- Tags: best-practices
- Published: 2026-08-03

### [How to Implement Hold-to-Delete with clip-path: A CSS-First Approach](/emilkowalski/skills/how-to-implement-hold-to-delete-with-clip-path)

Implement hold-to-delete with CSS clip-path. Animate clip-path inset over 2 seconds on press for a smooth, hardware-accelerated effect. Learn this CSS-first approach today.

- Tags: how-to-guide
- Published: 2026-08-03

### [When to Use Asymmetric Enter/Exit Animation Timing: A Complete Guide](/emilkowalski/skills/when-to-use-asymmetric-enter-exit-animation-timing)

Master asymmetric enter/exit animation timing. Discover when to use it for deliberate actions, providing slow visual feedback during decisions and instant feedback upon completion.

- Tags: how-to-guide
- Published: 2026-08-03

### [How to Use CSS Variables vs Direct Transform Manipulation for Performance](/emilkowalski/skills/how-to-use-css-variables-vs-direct-transform-manipulation-for-performance)

Optimize UI animations by using direct transform manipulation over CSS variables for dynamic motion. Learn when to use each for better browser performance and faster rendering.

- Tags: performance
- Published: 2026-08-03

### [Tooltip Delay and Instant Subsequent Opens: Best Practices from the Skills Repository](/emilkowalski/skills/best-practices-for-tooltips-with-delay-and-instant-subsequent-opens)

Learn best practices for tooltip delay and instant subsequent opens. Prevent accidental activation with a 150ms delay, then speed up your toolbar experience.

- Tags: best-practices
- Published: 2026-08-03

### [How to Debug Animations Using Slow Motion and Frame Inspection](/emilkowalski/skills/how-to-debug-animations-using-slow-motion-and-frame-inspection)

Debug animations effectively with slow motion and frame inspection in Chrome DevTools. Uncover timing and easing errors invisible at normal speed.

- Tags: how-to-guide
- Published: 2026-08-03

### [How to Implement Gesture-Based Drag with Momentum in Web Interfaces](/emilkowalski/skills/how-to-implement-gesture-based-drag-with-momentum)

Learn to implement gesture based drag with momentum in web interfaces. Capture pointer events, calculate velocity, and use physics for fluid, interruptible motion. Get started today!

- Tags: how-to-guide
- Published: 2026-08-03

### [When to Remove Animations for Keyboard Actions and High-Frequency UI Events](/emilkowalski/skills/when-to-remove-animations-for-keyboard-actions-or-high-frequency-ui)

Remove animations for keyboard actions and high-frequency UI when they cause delays jank or accessibility issues Opt for instant state changes or subtle visual cues for a better user experience.

- Tags: best-practices
- Published: 2026-08-03

### [Spring Animation Configuration for Natural Motion: A Complete Guide to the Skills Repository](/emilkowalski/skills/spring-animation-configuration-for-natural-motion)

Discover spring animation configuration for natural motion in the emilkowalski/skills repository. Learn Apple-style presets and physics parameters for fluid animations.

- Tags: tutorial
- Published: 2026-08-03

### [How to Use `clip-path` for Tab Transitions and Reveals in CSS](/emilkowalski/skills/how-to-use-clip-path-for-tab-transitions-and-reveals)

Animate tab transitions and reveals with CSS clip-path inset() for hardware-accelerated effects. Achieve smooth reveals without extra DOM or JavaScript.

- Tags: how-to-guide
- Published: 2026-08-03

### [Button Press Feedback Animations: Best Practices from the Skills Repository](/emilkowalski/skills/best-practices-for-button-press-feedback-animations)

Master button press feedback animations with expert best practices. Achieve tactile, interruptible UI elements for an immediate and natural feel. Learn from the emilkowalski/skills repository.

- Tags: best-practices
- Published: 2026-08-03

### [How to Implement Interruptible Animations for Dynamic UI](/emilkowalski/skills/how-to-implement-interruptible-animations-for-dynamic-ui)

Implement interruptible animations for dynamic UI using CSS transitions for state changes and JavaScript for physics-based gesture interactions. Learn how to optimize user experience.

- Tags: how-to-guide
- Published: 2026-08-03

### [How to Make Animations Accessible with prefers-reduced-motion: CSS and React Implementation Patterns](/emilkowalski/skills/how-to-make-animations-accessible-with-prefers-reduced-motion)

Make animations accessible with prefers-reduced-motion CSS. Learn React patterns to disable jarring motion for a better user experience. Ensure UI feedback is smooth and inclusive.

- Tags: how-to-guide
- Published: 2026-08-03

### [Best Practices for Transform-Origin in Popovers and Dropdowns](/emilkowalski/skills/best-practices-for-transform-origin-in-popovers-and-dropdowns)

Master transform-origin for popovers & dropdowns. Use CSS custom properties & JS for trigger-based animations. Keep modals centered with transform-origin center.

- Tags: best-practices
- Published: 2026-08-03

### [How to Animate Enter and Exit States with `@starting-style` in CSS](/emilkowalski/skills/how-to-animate-enter-exit-states-with-starting-style-in-css)

Animate enter and exit states with @starting-style in CSS. Define initial visual states before first paint to enable entry animations without JavaScript. Learn how to transition styles smoothly.

- Tags: how-to-guide
- Published: 2026-08-03

### [How to Implement Proper Easing Curves for UI Animations: A Complete Guide](/emilkowalski/skills/how-to-implement-proper-easing-curves-for-ui-animations)

Master UI animations with custom cubic-bezier curves. Discover how to implement proper easing for engaging and performant user interfaces. Learn best practices for durations and interactive elements.

- Tags: how-to-guide
- Published: 2026-08-03

### [3D Transforms Using rotateX/rotateY and transform-style: A Complete Guide for Depth Effects in CSS](/emilkowalski/skills/3d-transforms-rotatex-rotatey-transform-style-depth-effects)

Create stunning CSS 3D transforms with rotateX rotateY and transform-style preserve-3d. Achieve hardware-accelerated depth effects efficiently without JavaScript.

- Tags: tutorial
- Published: 2026-08-02

### [Reviewing Animation Code Against High Craft Standards: The Ten Non-Negotiable Rules Explained](/emilkowalski/skills/reviewing-animation-code-against-high-craft-standards-ten-non-negotiable-rules)

Master animation code with ten non-negotiable rules. Learn how to review animations for high craft standards using deterministic checks and GPU-only constraints.

- Tags: best-practices
- Published: 2026-08-02

### [Sonner Principles for Building Loved Components: Naming, Defaults, and Cohesion](/emilkowalski/skills/sonner-principles-building-loved-components-naming-defaults)

Learn Sonner principles for building loved components: memorable naming, opinionated defaults, and invisible edge-case handling. Build UI components developers will love using.

- Tags: best-practices
- Published: 2026-08-02

### [CSS Variable Performance Pitfalls When Updating Parent Variables: A Deep Dive](/emilkowalski/skills/css-variable-performance-pitfalls-updating-parent-variables)

Discover CSS variable performance pitfalls when updating parent variables. Learn how subtree style recalculation impacts performance, even with GPU animations.

- Tags: deep-dive
- Published: 2026-08-02

### [Why Only Transform and Opacity Are GPU-Accelerated in CSS Animations: Complete Performance Guide](/emilkowalski/skills/performance-rules-css-animations-why-transform-opacity-gpu-accelerated)

Discover why only transform and opacity are GPU-accelerated in CSS animations. Learn how these properties bypass layout and paint stages for faster performance in this complete guide.

- Tags: performance
- Published: 2026-08-02

### [Tooltip Optimization Patterns: Skip Delay on Subsequent Hovers with the Skills Design System](/emilkowalski/skills/tooltip-optimization-patterns-skipping-delay-on-subsequent-hovers)

Optimize tooltips with Skills design system. Skip hover delay on subsequent hovers for instant feedback, improving user experience and performance.

- Tags: best-practices
- Published: 2026-08-02

### [How to Use Blur Filters to Mask Imperfect Crossfade Transitions](/emilkowalski/skills/using-blur-filters-to-mask-imperfect-crossfade-transitions)

Smooth imperfect crossfade transitions with a 2px blur filter applied only during UI state changes. Eliminate jarring double-image effects and create seamless animations.

- Tags: how-to-guide
- Published: 2026-08-02

### [Asymmetric Enter/Exit Timing: Deliberate Press Actions vs. System Response Animations](/emilkowalski/skills/asymmetric-enter-exit-timing-for-deliberate-press-actions-vs-system-responses)

Master asymmetric enter exit timing. Learn how to use deliberate press actions and system response animations to create a clear cause-effect hierarchy and improve user experience.

- Tags: how-to-guide
- Published: 2026-08-02

### [Stagger Animation Timing for Lists: How to Use 30–80 ms Delays Without Blocking Interaction](/emilkowalski/skills/stagger-animation-timing-for-lists-and-when-delays-are-counterproductive)

Master stagger animation timing for lists using 30–80 ms delays. Learn when longer delays harm UI performance and block interactions for a smoother user experience.

- Tags: deep-dive
- Published: 2026-08-02

### [How Damping at Boundaries Creates Gesture Resistance in Drawers](/emilkowalski/skills/how-damping-at-boundaries-creates-gesture-resistance-in-drawers)

Learn how boundary damping creates gesture resistance in drawers. Discover how proportional spring damping slows motion, providing a fluid barrier feel for a better user experience.

- Tags: how-to-guide
- Published: 2026-08-02

### [Momentum-Based Swipe Dismissal with Velocity Calculations: A Complete Implementation Guide](/emilkowalski/skills/implementing-momentum-based-swipe-dismissal-with-velocity-calculations)

Implement momentum-based swipe dismissal with velocity calculations. This guide explains how physics-inspired interactions create natural swipe dismissals for your app.

- Tags: how-to-guide
- Published: 2026-08-02

### [How to Use TranslateY Percentage Values for Position-Independent Animations](/emilkowalski/skills/translatey-percentage-values-for-position-independent-animations)

Learn how to use TranslateY percentage values for position-independent animations. The skills repository computes pixel offsets for consistent animation behavior across layouts.

- Tags: tutorial
- Published: 2026-08-02

### [Using @starting-style for CSS-Only Element Entry Animations: A Complete Guide](/emilkowalski/skills/using-starting-style-for-css-only-element-entry-animations)

Learn how to create CSS-only element entry animations with @starting-style. Define initial states for smooth, JavaScript-free entrance effects. Get the complete guide.

- Tags: tutorial
- Published: 2026-08-02

### [When to Use Transform Strings Over Shorthand Props in Framer Motion](/emilkowalski/skills/when-to-use-transform-strings-over-shorthand-props-in-framer-motion)

Learn when to use CSS transform strings over Framer Motion shorthand props like x and y. Ensure GPU acceleration and smooth animations by avoiding main thread rendering under heavy load.

- Tags: best-practices
- Published: 2026-08-02

### [How Clip-Path Enables Advanced UI Animations: A Deep Dive into GPU-Accelerated Effects](/emilkowalski/skills/how-clip-path-enables-advanced-ui-animations)

Discover how clip-path powers advanced UI animations with hardware-accelerated clipping. Learn to control visibility states efficiently and boost performance with pixel-perfect precision.

- Tags: deep-dive
- Published: 2026-08-02

### [How to Implement the Prefers-Reduced-Motion Accessibility Pattern in CSS and JavaScript](/emilkowalski/skills/implementing-prefers-reduced-motion-accessibility-pattern-in-css-and-js)

Learn to implement the prefers-reduced-motion accessibility pattern using CSS and JavaScript. Disable animations for users sensitive to motion, improving user experience.

- Tags: how-to-guide
- Published: 2026-08-02

### [Spring Animation Configuration for Gesture-Driven Interactions](/emilkowalski/skills/spring-animation-configuration-for-gesture-driven-interactions)

Master spring animation configuration for gesture driven interactions. Learn to preserve velocity and avoid the brick wall effect for smoother user experiences.

- Tags: how-to-guide
- Published: 2026-08-02

### [CSS Transitions vs Keyframes for Interruptible UI Animations: When to Use Each](/emilkowalski/skills/css-transitions-vs-keyframes-for-interruptible-ui-animations)

Choose between CSS transitions and @keyframes for UI animations. Learn when to use each for smooth, interruptible animations versus restarting ones.

- Tags: deep-dive
- Published: 2026-08-02

### [How to Implement Responsive Button Press Feedback with Proper Transform Scale Values](/emilkowalski/skills/how-to-implement-responsive-button-press-feedback-with-proper-transform-scale-values)

Implement responsive button press feedback using transform scale with a 160ms ease-out transition for performant accessible interactions. Learn proper scale values.

- Tags: how-to-guide
- Published: 2026-08-02

### [Why `scale(0)` Creates Unnatural Entrance Animations (And the Correct Alternative)](/emilkowalski/skills/why-scale-0-creates-unnatural-entrance-animations-and-correct-alternative)

Avoid unnatural entrance animations with scale(0). Discover the correct alternative using scale(0.95) and opacity: 0 for a smooth, realistic UI element transition.

- Tags: best-practices
- Published: 2026-08-02

### [Animation Decision Framework: Mapping Usage Frequency to Animation Intensity in UI Design](/emilkowalski/skills/how-animation-decision-framework-determines-animation-based-on-usage-frequency)

Discover how the Animation Decision Framework maps UI usage frequency to animation intensity. Optimize user experience with subtle, medium, or pronounced motion.

- Tags: deep-dive
- Published: 2026-08-02

### [When to Use Custom cubic-bezier Easing Curves Instead of Built-in CSS Easings](/emilkowalski/skills/when-to-use-custom-cubic-bezier-easing-curves-instead-of-built-in-css-easings)

Elevate UI animations with custom cubic-bezier easing curves. Discover when to use them over built-in options for snappier, more responsive interactions and impactful enter/exit animations.

- Tags: best-practices
- Published: 2026-08-02

### [Framer Motion Spring Animation Configurations for Bounce, Stiffness, and Damping](/emilkowalski/skills/framer-motion-spring-animation-config-bounce-stiffness-damping)

Master Framer Motion spring animations! Explore bounce, stiffness, and damping configurations for fluid Apple-style UI or precise physics control. Optimize your React animations.

- Tags: deep-dive
- Published: 2026-08-01

### [How to Build Comparison Sliders Using `clip-path`: A Complete Implementation Guide](/emilkowalski/skills/how-to-build-comparison-sliders-clip-path)

Build performant comparison sliders using clip-path. Learn how to clip images with inset() and update drag position for GPU-accelerated effects.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Use `translateY` with Percentages for Responsive Animations](/emilkowalski/skills/how-to-use-translatey-percentages-responsive-animations)

Learn how to use translateY with percentages for responsive animations. This CSS technique makes animations adapt to any screen size without JavaScript.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Implement Asymmetric Enter/Exit Timing for Interactions in CSS](/emilkowalski/skills/how-to-implement-asymmetric-enter-exit-timing-interactions)

Master asymmetric enter and exit timing in CSS for intuitive micro-interactions. Learn to create slow enter and fast exit transitions for a snappier user experience.

- Tags: how-to-guide
- Published: 2026-08-01

### [When to Use Framer Motion versus Native CSS Animations: A Performance Guide](/emilkowalski/skills/when-to-use-framer-motion-vs-native-css-animations)

Choose Framer Motion for interactive animations or native CSS for static effects. Learn when to use each for optimal performance in your web projects.

- Tags: performance
- Published: 2026-08-01

### [How to Implement Hold‑to‑Delete with a Clip‑Path Overlay: A Complete CSS Guide](/emilkowalski/skills/how-to-implement-hold-to-delete-clip-path-overlay)

Learn to implement hold-to-delete using a CSS clip-path overlay. This guide details the animation for revealing and snapping back for a smooth user experience.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Calculate Velocity for Swipe-to-Dismiss Gestures: A Complete Implementation Guide](/emilkowalski/skills/how-to-calculate-velocity-swipe-to-dismiss-gestures)

Learn how to calculate swipe velocity for dismiss gestures. Divide distance by time (px/ms) and compare to a 0.11 px/ms threshold for smooth implementations.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Use CSS @starting-style for Element Entry Animations](/emilkowalski/skills/how-to-use-css-starting-style-element-entry)

Learn how to use CSS @starting-style to create elegant element entry animations purely with CSS. Define initial states for stunning entrance effects without JavaScript.

- Tags: how-to-guide
- Published: 2026-08-01

### [Tooltip Delay and Instant Subsequent Hovers: Best Practices for Faster UI](/emilkowalski/skills/best-practices-tooltip-delay-instant-subsequent-hovers)

Optimize tooltip delay for faster UI. Use a 200-250ms initial delay, then enable instant subsequent hovers to improve user flow and prevent accidental activations.

- Tags: best-practices
- Published: 2026-08-01

### [How to Implement Origin‑Aware Dropdown and Tooltip Animations](/emilkowalski/skills/how-to-implement-origin-aware-dropdown-tooltip-animations)

Learn how to implement origin-aware dropdown and tooltip animations. Style trigger elements, animate scale and opacity for smooth UI effects.

- Tags: how-to-guide
- Published: 2026-08-01

### [Why Ease-in Feels Sluggish Compared to Ease-out for UI Animations](/emilkowalski/skills/why-ease-in-feels-sluggish-vs-ease-out-ui)

Discover why ease-in animations feel sluggish in UI design. Learn how ease-out provides immediate feedback by starting fast and decelerating for a better user experience.

- Tags: deep-dive
- Published: 2026-08-01

### [How to Debug Animations Using Slow Motion and Frame Inspection](/emilkowalski/skills/how-to-debug-animations-slow-motion-frame-inspection)

Debug animations with slow motion and frame inspection in Chrome DevTools. Uncover timing flaws and jitter invisible at normal speed. Enhance your animation quality today.

- Tags: how-to-guide
- Published: 2026-08-01

### [When to Avoid Animating Keyboard‑Initiated Actions: A Frequency‑Based Design Rule](/emilkowalski/skills/when-to-avoid-animating-keyboard-initiated-actions)

Avoid animating keyboard-initiated actions that repeat often. Learn why frequent interactions feel slow with animation and how to design for speed and responsiveness.

- Tags: best-practices
- Published: 2026-08-01

### [How to Implement Stagger Animations for List Items: A Complete Guide](/emilkowalski/skills/how-to-implement-stagger-animations-list-items)

Learn to implement stagger animations for list items with this guide. Achieve a cascading entrance effect using Emil Design Engineering standards. Boost user engagement today.

- Tags: how-to-guide
- Published: 2026-08-01

### [Performance Optimization Techniques for Animating Transform and Opacity](/emilkowalski/skills/performance-optimization-animate-transform-opacity)

Boost animation performance by animating only transform and opacity. Keep animations GPU-accelerated and prevent frame drops by avoiding layout and paint operations.

- Tags: performance
- Published: 2026-08-01

### [How to Implement Gesture-Based Drag Dismissal with Momentum in React](/emilkowalski/skills/how-to-implement-gesture-drag-dismissal-momentum)

Implement gesture-based drag dismissal with momentum in React. Learn to use pointer capture for velocity tracking and apply spring animations that preserve momentum on release.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Use `clip-path` for Advanced Animation Effects: 5 Production Patterns from the Emil Design Engineering Skill Set](/emilkowalski/skills/how-to-use-clip-path-advanced-animation-effects)

Master clip-path CSS with inset() for GPU-accelerated reveals overlays & sliders. Discover 5 production patterns from Emil Design Engineering without layout or paint triggers.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Create Interruptible Animations for Rapidly Triggered UI Elements](/emilkowalski/skills/how-to-create-interruptible-animations-rapidly-triggered-ui)

Learn how to create interruptible animations for UI elements. Prevent jarring resets by interpolating from live values, preserving the current visual state.

- Tags: how-to-guide
- Published: 2026-08-01

### [Best Practices for Button Press Feedback Using Scale Transforms](/emilkowalski/skills/best-practices-button-press-feedback-scale-transform)

Enhance UX with button press feedback. Apply a subtle scale transform and ease out transition for tactile GPU accelerated feedback that mimics real world button compression.

- Tags: best-practices
- Published: 2026-08-01

### [How to Handle prefers-reduced-motion for Accessibility in Animations](/emilkowalski/skills/how-to-handle-prefers-reduced-motion-accessibility-animations)

Learn to handle prefers-reduced-motion for accessibility by disabling animation effects. Preserve essential feedback for a better user experience.

- Tags: best-practices
- Published: 2026-08-01

### [How to Implement transform-origin Correctly for Popovers](/emilkowalski/skills/how-to-implement-transform-origin-correctly-for-popovers)

Learn to implement transform-origin correctly for popovers. Scale popovers from their anchor point using CSS custom properties for precise positioning and a better user experience.

- Tags: how-to-guide
- Published: 2026-08-01

### [How to Implement Velocity-Based Swipe Dismissal in Web UI](/emilkowalski/skills/how-to-implement-velocity-based-swipe-dismissal)

Implement velocity-based swipe dismissal in web UI. Learn how to combine distance and velocity thresholds for intuitive drag and flick gestures to dismiss elements.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Create Asymmetric Enter/Exit Timing in UI Animations](/emilkowalski/skills/how-to-create-asymmetric-enter-exit-timing)

Learn to create asymmetric enter/exit timing in UI animations. Craft intentional and responsive interactions with custom animation durations for user actions and system responses.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Use Blur to Mask Imperfect Transitions in CSS](/emilkowalski/skills/how-to-use-blur-to-mask-imperfect-transitions)

Learn how to use CSS blur to mask imperfect transitions. Soften cross-fade animations and eliminate jarring double image effects for smoother visuals.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Implement a Hold-to-Delete Pattern: Complete Guide with CSS and JavaScript](/emilkowalski/skills/how-to-implement-hold-to-delete-pattern)

Learn how to implement a hold-to-delete pattern with CSS and JavaScript. Prevent accidental deletions using timed overlays and animation for a safer user experience.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Handle Hover States on Touch Devices: CSS Media Query Solution](/emilkowalski/skills/how-to-handle-hover-states-on-touch-devices)

Master hover states on touch devices with a CSS media query solution. Prevent false activations and enhance desktop interactions for a seamless user experience.

- Tags: how-to-guide
- Published: 2026-07-31

### [Performance Optimization: Why You Should Only Animate Transform and Opacity](/emilkowalski/skills/performance-optimization-transform-and-opacity-only)

Boost web performance by animating only transform and opacity. Keep rendering on the GPU for smooth 60 FPS animations and avoid costly layout and paint processes.

- Tags: performance
- Published: 2026-07-31

### [How to Choose the Correct Animation Duration for UI Interactions](/emilkowalski/skills/how-to-choose-correct-animation-duration)

Master animation duration for UI. Learn optimal speeds for buttons, tooltips, and dropdowns to boost perceived performance and user experience.

- Tags: best-practices
- Published: 2026-07-31

### [How to Implement Drag Interactions with Momentum: A Complete Technical Guide](/emilkowalski/skills/how-to-implement-drag-interactions-with-momentum)

Implement drag interactions with momentum. Capture pointers, track velocity, and animate springs for smooth, responsive UI. A complete technical guide.

- Tags: tutorial
- Published: 2026-07-31

### [How to Use @starting-style for CSS Enter Animations](/emilkowalski/skills/how-to-use-starting-style-for-css-enter-animations)

Master CSS enter animations with @starting-style. Define initial element states for seamless transitions without JavaScript. Learn this powerful technique today.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Debug Animations in Slow Motion: A Step-by-Step Guide](/emilkowalski/skills/how-to-debug-animations-in-slow-motion)

Debug animations effectively in slow motion using Chrome DevTools. Uncover timing flaws, easing issues, and frame drops with this step-by-step guide.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Create Stagger Animations for Lists in CSS](/emilkowalski/skills/how-to-create-stagger-animations-for-lists)

Learn how to create CSS stagger animations for lists. Apply incremental delays using nth-child selectors or JavaScript for fluid cascading entrances and interactive UI.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Implement Button Press Feedback with Scale: A Complete Guide](/emilkowalski/skills/how-to-implement-button-press-feedback-with-scale)

Implement responsive button press feedback with scale using CSS transitions. Achieve a satisfying user experience within 300ms UI animation budget. Learn how now.

- Tags: how-to-guide
- Published: 2026-07-31

### [How to Implement Transform-Origin for Popovers Correctly](/emilkowalski/skills/how-to-implement-transform-origin-for-popovers-correctly)

Learn how to implement transform-origin for popovers correctly using CSS variables for seamless animations and better spatial consistency. Improve your UI.

- Tags: how-to-guide
- Published: 2026-07-31

### [When to Use Spring Animations vs CSS Transitions: A Complete Decision Guide](/emilkowalski/skills/when-to-use-spring-animations-vs-css-transitions)

Decide between spring animations vs CSS transitions. Use CSS for static fades and hovers, springs for dynamic drag interactions that retain velocity. Optimize your UI.

- Tags: best-practices
- Published: 2026-07-31

### [How to Choose the Right Easing Curve for UI Animations](/emilkowalski/skills/how-to-choose-right-easing-curve-ui-animations)

Master UI animations with custom cubic-bezier curves and asymmetric easings. Learn to choose the right easing curve for natural, consistent motion that impresses users.

- Tags: tutorial
- Published: 2026-07-31

### [Sonner Principles for Building Loved Components: 6 Design Rules from the emilkowalski/skills Repository](/emilkowalski/skills/sonner-principles-building-loved-components)

Discover the Sonner principles for building loved components. Learn 6 design rules from emilkowalski/skills for creating exceptional user experiences through intentional design.

- Tags: best-practices
- Published: 2026-07-30

### [How to Implement Momentum-Based Swipe Dismissal with Velocity](/emilkowalski/skills/momentum-swipe-dismissal-velocity-calculation)

Learn to implement momentum based swipe dismissal with velocity. Calculate velocity and trigger dismissal using drag distance and elapsed time for smooth UX.

- Tags: how-to-guide
- Published: 2026-07-30

### [How to Implement Staggered Animations with Correct Delay Intervals](/emilkowalski/skills/staggered-animations-delay-intervals)

Implement staggered animations with 30-80ms delays for a smooth cascade effect. Ensure animations enhance UI without hindering user interaction. Learn best practices for delay intervals.

- Tags: how-to-guide
- Published: 2026-07-30

### [Best Practices for prefers-reduced-motion Accessibility in Modern Animations](/emilkowalski/skills/prefers-reduced-motion-accessibility-animations)

Implement prefers-reduced-motion accessibility in modern animations. Learn best practices to eliminate transform animations and preserve feedback with opacity and color changes.

- Tags: best-practices
- Published: 2026-07-30

### [How to Use @starting‑style for CSS‑Only Entry Animations](/emilkowalski/skills/use-starting-style-css-only-entry-animations)

Master CSS only entry animations with @starting-style. Define initial states for smooth transitions without JavaScript. Learn this powerful CSS feature today.

- Tags: tutorial
- Published: 2026-07-30

### [Correct Transform-Origin for Modals: Center Positioning in CSS](/emilkowalski/skills/correct-transform-origin-for-modals)

Learn the correct transform-origin for modals. Discover how to center position CSS modals in the viewport for a seamless user experience. Optimize your modal animations today.

- Tags: how-to-guide
- Published: 2026-07-30

### [How to Implement Spring Animations with Traditional Physics Parameters in the Skills Repository](/emilkowalski/skills/implement-spring-animations-traditional-physics)

Learn how to implement spring animations using traditional physics parameters like mass stiffness and damping. Create natural motion with Emil Kowalski's skills repository.

- Tags: how-to-guide
- Published: 2026-07-30

### [How to Implement Spring Animations with Apple-Style Config in React](/emilkowalski/skills/implement-spring-animations-apple-style-config)

Implement Apple-style spring animations in React using the Motion library. Create natural, interruptible animations with velocity and smooth retargeting. Learn how today!

- Tags: tutorial
- Published: 2026-07-30

### [The Ten Non-Negotiable Standards for Reviewing Animations in UI Development](/emilkowalski/skills/ten-non-negotiable-standards-for-reviewing-animations)

Master UI animation reviews with ten essential standards from emilkowalski/skills. Ensure purpose driven motion performance and accessibility for better UI development. Learn the rules now.

- Tags: best-practices
- Published: 2026-07-30

### [Achieving Cohesion Between Animation Style and Component Personality in UI Systems](/emilkowalski/skills/cohesion-between-animation-style-and-component-personality)

Achieve cohesion between animation style and component personality to make your UI motion reflect product character. Create intentional, not disjointed interfaces with user-friendly motion.

- Tags: best-practices
- Published: 2026-07-29

### [How to Implement Button Press Feedback with Scale Transform: A Complete Guide](/emilkowalski/skills/button-press-feedback-with-scale-transform)

Learn how to implement button press feedback with scale transform using a 160ms ease out transition for smooth GPU accelerated tactile feedback. Get the complete guide.

- Tags: how-to-guide
- Published: 2026-07-29

### [How Frequency of Use Should Drive Animation Decisions in UI Development](/emilkowalski/skills/how-frequency-of-use-should-drive-animation-decisions)

Learn how frequency of use should drive UI animation decisions. Prioritize user experience by animating only less frequent interactions and keeping high-frequency ones unanimated.

- Tags: best-practices
- Published: 2026-07-29

### [Percentage-Based translateY for Responsive Animations: A Complete Guide](/emilkowalski/skills/percentage-based-translatey-for-responsive-animations)

Master percentage-based translateY for responsive animations. Learn how to create dynamic, scalable animations by avoiding hardcoded pixel values and adapting to element height.

- Tags: tutorial
- Published: 2026-07-29

### [How to Create Depth Effects with 3D CSS Transforms](/emilkowalski/skills/3d-css-transforms-for-depth-effects)

Create stunning depth effects with 3D CSS transforms. Learn how to use rotateX, rotateY, preserve-3d, and perspective for amazing JavaScript-free visuals.

- Tags: how-to-guide
- Published: 2026-07-29

### [Using Blur to Mask Imperfect State Transitions: A CSS Technique for Smoother UI](/emilkowalski/skills/using-blur-to-mask-imperfect-state-transitions)

Smooth UI state transitions with CSS blur. Learn how filter blur masks imperfect changes for a seamless user experience. Improve your web animations now.

- Tags: tutorial
- Published: 2026-07-29

### [How to Add Stagger Delays to List Animations in CSS and React](/emilkowalski/skills/how-to-add-stagger-delays-to-list-animations)

Learn how to add stagger delays to list animations in CSS and React. Achieve cascading entrance effects with simple techniques like nth-child selectors or Framer Motion.

- Tags: how-to-guide
- Published: 2026-07-29

### [How to Implement prefers-reduced-motion Correctly: CSS and JavaScript Guide](/emilkowalski/skills/how-to-implement-prefers-reduced-motion-correctly)

Learn to implement prefers reduced motion with CSS and JavaScript. Apply CSS media queries and a React hook to disable animations for users sensitive to motion, enhancing accessibility.

- Tags: how-to-guide
- Published: 2026-07-29

### [Framer Motion Hardware Acceleration Gotchas with x/y/scale: Performance Guide](/emilkowalski/skills/framer-motion-hardware-acceleration-gotchas-with-x-y-scale)

Avoid Framer Motion hardware acceleration gotchas with x/y/scale. Learn how to achieve smooth 60fps animations by using CSS transform for better performance.

- Tags: performance
- Published: 2026-07-29

### [Why Only Animate Transform and Opacity for Performance: The Complete Guide](/emilkowalski/skills/why-only-animate-transform-and-opacity-for-performance)

Unlock smooth 60fps animations by only animating transform and opacity. Learn how these properties leverage the GPU to bypass layout and paint, boosting web performance.

- Tags: performance
- Published: 2026-07-29

### [How to Calculate Velocity for Momentum-Based Swipe Dismissal](/emilkowalski/skills/how-to-calculate-velocity-for-momentum-based-swipe-dismissal)

Learn how to calculate velocity for momentum-based swipe dismissal. Divide drag distance by elapsed time to exceed 0.11 px/ms and trigger dismissal.

- Tags: how-to-guide
- Published: 2026-07-29

### [Implementing Clip-Path Animations for Reveal Effects in the Skills Repository](/emilkowalski/skills/implementing-clip-path-animations-for-reveal-effects)

Learn to implement clip path animations for reveal effects using CSS inset() and asymmetric timing. Achieve performant reveals and deliberate press interactions.

- Tags: tutorial
- Published: 2026-07-29

### [Using @starting-style for CSS-Only Enter Animations: A Zero-JavaScript Approach](/emilkowalski/skills/using-starting-style-for-css-only-enter-animations)

Master CSS-only enter animations with @starting-style. Define initial states for smooth, zero-JavaScript transitions directly in CSS for faster web performance.

- Tags: tutorial
- Published: 2026-07-29

### [How to Optimize Tooltip Performance with a Delayed First Show](/emilkowalski/skills/how-to-optimize-tooltip-performance-with-delayed-first-show)

Optimize tooltip performance with a delayed first show. Learn how to use CSS transitions and data attributes to eliminate latency for a smoother user experience.

- Tags: performance
- Published: 2026-07-29

### [Why scale(0) Entry Animations Look Unnatural: Physics-Based UI Motion Guidelines](/emilkowalski/skills/why-scale-0-entry-animations-look-unnatural)

Discover why scale(0) entry animations look unnatural. Learn UI motion guidelines for organic, physics-based transitions that avoid jarring materialization and enhance user experience.

- Tags: deep-dive
- Published: 2026-07-29

### [How to Implement transform-origin for Popovers and Dropdowns](/emilkowalski/skills/how-to-implement-transform-origin-for-popovers-and-dropdowns)

Learn to implement transform-origin for popovers and dropdowns by setting a CSS custom property via JavaScript. Achieve animations originating from the trigger's position.

- Tags: how-to-guide
- Published: 2026-07-29

### [Why Ease-In Should Never Be Used for UI Interactions: Lessons from the emilkowalski/skills Repository](/emilkowalski/skills/why-ease-in-should-never-be-used-for-ui-interactions)

Discover why ease-in animations hinder UI responsiveness. Learn from the emilkowalski/skills repository why ease-out is the superior choice for fluid user interfaces.

- Tags: best-practices
- Published: 2026-07-29

### [How to Choose the Right Easing Curve for UI Animations: A Standards-Driven Guide](/emilkowalski/skills/how-to-choose-the-right-easing-curve-for-ui-animations)

Master UI animation easing curves with this guide. Learn to choose the right cubic bezier for expressive, standardized animations and avoid common anti-patterns.

- Tags: deep-dive
- Published: 2026-07-29

### [A Decision Framework for Selecting UI Libraries: The Emil Kowalski Skills Method](/emilkowalski/skills/what-is-a-decision-framework-for-selecting-ui-libraries)

Discover a decision framework for selecting UI libraries using the emilkowalski/skills method. Get curated recommendations for your project tasks.

- Tags: best-practices
- Published: 2026-07-28

### [How to Adapt Apple's Human Interface Guidelines for the Web: Motion, Gestures, and Accessibility](/emilkowalski/skills/how-to-adapt-apples-human-interface-guidelines-for-the-web)

Learn how to adapt Apple's Human Interface Guidelines for the web by implementing essential UI/UX principles like direct manipulation, spring animations, and accessibility.

- Tags: how-to-guide
- Published: 2026-07-28

### [How to Communicate Animation Intent Precisely with AI Using the Skills Framework](/emilkowalski/skills/how-to-communicate-animation-intent-precisely-with-ai)

Learn how to communicate animation intent precisely with AI. Map descriptions to structured terms, validate against standards, and eliminate prompt ambiguity using gated checklists from Emil Kowalski's skills framework.

- Tags: how-to-guide
- Published: 2026-07-28

### [How to Discover UI Elements That Would Benefit From Motion: A Systematic Guide](/emilkowalski/skills/how-to-discover-ui-elements-that-would-benefit-from-motion)

Discover UI elements that benefit from motion. Map your UI, sweep for seam classes, and validate candidates using the four Gate questions from the Find Animation Opportunities skill.

- Tags: getting-started
- Published: 2026-07-28

### [How to Identify and Prioritize Animation Improvements in a Codebase: A 4-Phase Workflow](/emilkowalski/skills/how-to-identify-and-prioritize-animation-improvements-in-a-codebase)

Learn to identify and prioritize animation improvements in your codebase with a 4-phase workflow. Map motion, audit, rank by leverage, and create implementation plans for better performance.

- Tags: how-to-guide
- Published: 2026-07-28

### [How to Review Animation Quality Against Non-Negotiable Standards: A Complete Guide](/emilkowalski/skills/how-to-review-animation-quality-against-non-negotiable-standards)

Master animation quality review with emilkowalski/skills. Audit code against ten strict standards using a deterministic framework for accurate findings and verdicts.

- Tags: how-to-guide
- Published: 2026-07-28

### [Common Animation Mistakes Made by AI Agents: 11 Critical Standards Violations](/emilkowalski/skills/what-are-common-animation-mistakes-made-by-ai-agents)

Discover common animation mistakes AI agents make. Learn how to avoid violating performance, accessibility, and timing standards for better user experiences.

- Tags: best-practices
- Published: 2026-07-28

### [The Compounding Principle in UI Design: How Micro-Details Create Polished Interfaces](/emilkowalski/skills/what-is-the-compounding-principle-in-ui-design)

Discover the compounding principle in UI design. Learn how small details add up to create polished, high-quality user interfaces that delight users.

- Tags: deep-dive
- Published: 2026-07-28

### [Emil Kowalski's Design Engineering Philosophy: A Complete Guide to Building Polished Interfaces](/emilkowalski/skills/what-is-emil-kowalskis-design-engineering-philosophy)

Explore Emil Kowalski's design engineering philosophy. Learn his approach to crafting polished, intuitive interfaces through visual taste, invisible details, and animation.

- Tags: deep-dive
- Published: 2026-07-28

### [How to Configure Spring Animations Effectively in React Applications](/emilkowalski/skills/how-to-configure-spring-animations-effectively)

Configure spring animations effectively in React. Choose Apple-style or physics-based parameters and pass gesture velocity for seamless continuity. Optimize your UI animations today.

- Tags: how-to-guide
- Published: 2026-07-28

### [When to Use Spring Animations in UI Design: Complete Guidelines from the Skills Repository](/emilkowalski/skills/when-are-spring-animations-appropriate-for-ui)

Learn when to use spring animations in UI design. Discover principles for gesture-driven motion, interruptibility, and velocity preservation. Avoid them for high-frequency or decorative fades.

- Tags: best-practices
- Published: 2026-07-28

### [How Animation Duration Affects Perceived Speed: The Sub-300ms Rule for UI Animations](/emilkowalski/skills/how-does-animation-duration-affect-perceived-speed)

Discover how <300ms animation duration with ease-out easing creates perceived speed in UIs. Learn the sub-300ms rule to boost responsiveness.

- Tags: deep-dive
- Published: 2026-07-28

### [Recommended Duration Budgets for UI Animations: A Standards-Based Guide](/emilkowalski/skills/what-are-recommended-duration-budgets-for-ui-animations)

Discover recommended UI animation duration budgets from 100ms to 500ms. Emil Kowalski's guide sets a 300ms global limit for quicker, more engaging user experiences.

- Tags: best-practices
- Published: 2026-07-28

### [Why Custom Easing Beats Built-In CSS Easings: A Technical Guide](/emilkowalski/skills/why-is-custom-easing-better-than-built-in-css-easings)

Unlock expressive motion with custom cubic bezier curves. This guide shows why custom easing outperforms built-in CSS options for design consistency and performance.

- Tags: deep-dive
- Published: 2026-07-28

### [How to Choose the Right Easing Function for UI Animations: A Standards-Based Guide](/emilkowalski/skills/how-to-choose-the-right-easing-function-for-ui-animations)

Master UI animation easing with custom cubic bezier curves. Leverage design system tokens and avoid ease-in for interactive elements. Optimize your animations today.

- Tags: how-to-guide
- Published: 2026-07-28

### [What Are the Purposes of UI Animations? A Guide to Purposeful Motion in Interfaces](/emilkowalski/skills/what-are-the-purposes-of-ui-animations)

Discover the purposes of UI animations. Learn how purposeful motion enhances spatial consistency, provides feedback, and explains states effectively for better user experiences.

- Tags: deep-dive
- Published: 2026-07-28

### [When Should You Animate UI Elements Based on Frequency of Use? High-Frequency vs Low-Frequency Guidelines](/emilkowalski/skills/when-should-ui-elements-be-animated-based-on-frequency-of-use)

Learn when to animate UI elements based on frequency. Use short transitions for low-frequency interactions and avoid animating high-frequency elements for a smoother user experience.

- Tags: best-practices
- Published: 2026-07-28

### [How the Animation Decision Framework Works in emilkowalski/skills](/emilkowalski/skills/how-does-the-animation-decision-framework-work)

Understand the Animation Decision Framework in emilkowalski/skills. This four-step checklist ensures purposeful, performant, and accessible motion before animation implementation.

- Tags: deep-dive
- Published: 2026-07-28

### [Core Skill Categories in emil-design-eng: The Complete Design Engineering Framework](/emilkowalski/skills/what-are-the-core-skill-categories-in-emil-design-eng)

Discover the 13 core skill categories in emil-design-eng, covering design engineering philosophy from foundational principles to performance optimization.

- Tags: deep-dive
- Published: 2026-07-28

### [How to Install Skills for AI Coding Assistants Using the Emil Kowalski Skills Repository](/emilkowalski/skills/how-to-install-skills-for-ai-coding-assistants)

Easily install AI coding assistant skills from emilkowalski/skills in seconds. Clone markdown definitions and get instant domain-specific guidance. Learn how to add skills now.

- Tags: how-to-guide
- Published: 2026-07-28