e-commerce-retail — Claude Code skill: retail animation rules
A skill that maps Disney's 12 animation principles onto shopping interfaces: product cards, cart, checkout. Useful when the store should feel premium without slowing the buy.
npx skills add dylantarre/animation-principles --skill e-commerce-retail -a claude-codeWhat e-commerce-retail does
The skill walks through Disney's 12 animation principles as they apply to an online store. Each one lands on a specific spot in the UI: the button compressing on add-to-cart, the product thumbnail arcing toward the cart icon, the buy button lifting before confirmation, search results revealing in a stagger. A timing table sets durations and easing — add to cart at 200ms ease-out, cart update at 150ms, checkout step at 350ms ease-in-out, image zoom at 300ms ease-out.
Everything lives in a single SKILL.md file with a section per principle plus the timing table. No scripts, no config, so it does not run anything or touch your build. The agent reads the descriptions and pulls the right values when you ask it to animate a cart drawer or a product card.
The skill's own rule is that motion must never slow the path to purchase. That is why the durations stay short and every movement hangs off a user action. If your project already has a design system with its own easing curves, expect to reconcile the two — otherwise transitions on neighbouring screens will feel like they came from different apps.
What it helps with
- pick a duration and easing for add-to-cart feedback
- connect the product thumbnail's motion to the cart icon
- make a product grid appear after search without a hard jump
- show a discount without it fighting the price for attention
- tighten checkout step transitions while keeping them readable
Example prompts for the agent
- animate the add-to-cart flow using the e-commerce-retail skill
- use the skill's timings for the transition between checkout steps
- suggest an animation for the low-stock badge
How to install e-commerce-retail
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill e-commerce-retail -a claude-code2Manually: put the files in place
~/.claude/skills/e-commerce-retail/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/e-commerce-retail/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill e-commerce-retail -a codex2Manually: put the files in place
.agents/skills/e-commerce-retail/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill e-commerce-retail -a cursor2Manually: put the files in place
.cursor/skills/e-commerce-retail/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles e-commerce-retail2Manually: put the files in place
.github/skills/e-commerce-retail/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill e-commerce-retail -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/08-by-industry/e-commerce-retailManually: put the files in place
.devin/skills/e-commerce-retail/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill e-commerce-retail -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about e-commerce-retail
How do I install e-commerce-retail in Claude?
Run npx skills add dylantarre/animation-principles --skill e-commerce-retail -a claude-code. The skill file then lands at ~/.claude/skills/e-commerce-retail/SKILL.md.
What does e-commerce-retail do?
It applies Disney's 12 animation principles to store interfaces — cart, product cards, checkout, search — and supplies a table of durations and easing functions for common actions.
Does the skill need extra libraries?
It ships as one SKILL.md file and runs nothing. It gives you the principles and timings; you write the animation code with whatever the project already uses.
Source text
SKILL.md · MIT
--- name: e-commerce-retail description: Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences --- # 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 ### 2. Anticipation - **Buy Button**: Subtle lift before purchase confirmation - **Image Zoom**: Brief pause before expanding product image - **Checkout Steps**: Progress indicator hints at next section ### 3. Staging - **Product Hero**: Center product with dimmed background - **Price Display**: Animate price prominently, discounts secondary - **CTA Hierarchy**: Primary actions draw eye first ### 4. Straight Ahead & Pose to Pose - **Browse Flow**: Smooth scroll for catalog browsing (straight ahead) - **Checkout**: Defined steps with clear transitions (pose to pose) - **Search Results**: Staggered reveal for product grid ### 5. Follow Through & Overlapping Action - **Product Cards**: Image settles before price text - **Cart Drawer**: Items slide in, total updates after - **Filters**: Tags animate before results refresh ### 6. Slow In & Slow Out - **Modal Opens**: Ease-out for product quick-view - **Image Carousel**: Smooth deceleration between slides - **Checkout Transitions**: 300-400ms with ease-in-out ### 7. Arc - **Add to Cart**: Product thumbnail arcs toward cart icon - **Wishlist**: Heart icon arcs to saved section - **Drag to Compare**: Items follow natural curved path ### 8. Secondary Action - **Purchase Success**: Confetti while confirmation loads - **Review Stars**: Sparkle while rating saves - **Discount Applied**: Price crosses out while new price appears ### 9. Timing - **Quick Add**: 150-200ms for snappy cart additions - **Checkout Steps**: 300-400ms for confident transitions - **Loading States**: Skeleton screens for perceived speed ### 10. Exaggeration - **Flash Sales**: Urgent countdown with bold pulses - **Low Stock**: Warning badge with attention-grabbing shake - **Big Discounts**: Strike-through with dramatic reveal ### 11. Solid Drawing - **Product Images**: Maintain aspect ratios during zoom - **3D Views**: Consistent lighting and perspective - **Icons**: Uniform weight across cart, search, menu ### 12. Appeal - **Micro-Delights**: Subtle bounce on successful actions - **Brand Personality**: Premium = smooth, Playful = bouncy - **Trust Signals**: Gentle animations for security badges ## Industry Timing Standards | Action | Duration | Easing | |--------|----------|--------| | Add to Cart | 200ms | ease-out | | Quick View | 250ms | ease-in-out | | Checkout Step | 350ms | ease-in-out | | Cart Update | 150ms | ease-out | | Image Zoom | 300ms | ease-out | ## Key Principle Never let animation slow the path to purchase. Every motion should feel efficient and build buying confidence.
© dylantarre · MIT · dylantarre/animation-principles
