E Commerce Retail

This teaches you how to apply Disney's 12 animation principles to e-commerce interfaces. You get specific timing recommendations (add to cart in 200ms, checkout steps at 350ms) and concrete examples for each principle, like making products arc into the cart icon or having price updates follow image loads. The focus is ruthlessly practical: animations should never slow down the purchase flow. Best for when you're building shopping experiences and want motion that feels premium without getting in the way. The timing standards table alone is worth having on hand if you're implementing any cart or checkout interactions.

skills.sh installs: 690
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill e-commerce-retail --agent claude-code

Installs into .claude/skills of the current project.

Files

E-Commerce & Retail Animation Principles

Apply Disney's 12 principles to create shopping experiences that feel premium, trustworthy, and encourage conversion.

The 12 Principles Applied

1. Squash & Stretch

Add to Cart: Button compresses on tap, product thumbnail squishes into cart icon
Quantity Badges: Numbers stretch when incrementing quickly
Sale Tags: Pulse with slight stretch to draw attention