Agent skill
e-commerce-retail
Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/e-commerce-retail-dylantarre-animation-principles-ee1fb8bf
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?