skills.rest
tommy771004
tommy771004COMMUNITY
Explore all skills by this author →
GitHub

ui-animation

Design and debug UI animations for web applications using transform/opacity constraints.

Updated Aug 23, 2026
Search Tags:#performance review#framer motion#spring physics#ui animation#css transitions#gesture drag#easing timing
One-click install
npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill ui-animation-tommy771004
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-animation
Source: https://github.com/tommy771004/StockAnalyzeAIConnectV2/tree/main/skills/ui-animation
Command: npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill ui-animation-tommy771004

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and debug UI animations so interactions feel responsive, polished, and performant instead of janky or disorienting.

Core Features & Use Cases

  • Motion decision-making: Determines when to animate and selects purpose-driven easing and duration for predictable UX (feedback, orientation, continuity, delight).
  • Animation implementation guidance: Uses the right primitives (transform/opacity, CSS transitions, springs, clip-path, gesture-driven motion) while avoiding common anti-patterns like transition: all, layout-property animation, and symmetric enter/exit timing.
  • Review and troubleshooting framework: Provides a repeatable checklist and a Before/After/Why format to catch performance and interaction issues during implementation.

Quick Start

Ask for a review: “Review my UI animation and tell me what to change to make it interruptible, performant, and directionally consistent, using transform/opacity only.”

Frequently Asked Questions about ui-animation

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

FAQPage Schema
How do I make UI animation interruptible and performant using transform and opacity?▼

To make UI animation interruptible and performant, constrain animations to transform and opacity properties, apply purpose-driven easing, use asymmetric timing, and avoid transition: all to prevent janky rendering.

When should I use spring physics versus CSS transitions for web interactions?▼

Use spring physics for gesture-driven drag or swipe interactions requiring natural momentum, and CSS transitions for predictable feedback, orientation, and continuity motions across drawers, modals, and tooltips.

How do I debug janky modal and drawer transitions in framer motion?▼

Debug modal and drawer transitions by checking for layout-property animation, symmetric enter/exit timing, and verifying transform/opacity constraints using a structured before/after review workflow to catch anti-patterns.

What is the best way to add stagger effects to list animations without causing jank?▼

Add stagger effects by animating transform and opacity sequentially per list item, applying correct easing and asymmetric timing, and running anti-pattern checks to ensure gestures remain interruptible on touch devices.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

Community
Advanced
darkroomengineeringdarkroomengineering
41

qa

Validate UI visuals and accessibility with agent-browser in QA workflows.

Official
Intermediate
markus41markus41
18

Spring Physics Skill

Generate physics-based spring animations for user interfaces with Framer Motion and React Spring.

Community
Intermediate
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate