研究检索权限需确认github未标认证来源可访问clear审计通过

e-commerce-retail（电子商务零售）

Agent Skill

e-commerce-retail 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

总安装

5,064

周安装

211

GitHub Stars

下载量

1,688

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：e-commerce-retail（电子商务零售）
来源仓库：https://github.com/dylantarre/animation-principles
仓库路径：skills/e-commerce-retail
安装命令：
npx skills add https://github.com/dylantarre/animation-principles --skill e-commerce-retail
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异；本站展示可直接复制的安装命令，安装前请核对来源页面。

skills.shnpx skills

npx skills add https://github.com/dylantarre/animation-principles --skill e-commerce-retail

简介

将迪士尼动画十二原则应用于电商界面动效设计，提升用户体验与转化信心。

涵盖加购按钮反馈、商品图缩放、进度指示器等高频交互的微动效方案。
强调信任感营造与操作预期管理，避免过度动画干扰核心购买路径。
需配合 Figma 或原型工具落地，纯文本建议仅作概念参考而非直接实施。
e-commerce-retail 属于研究检索类 Skill，可作为该场景下的辅助能力补充。

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.

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Antigravity

26.94%

按下载量换算455

Claude Code

21.93%

按下载量换算370

Codex

17.94%

按下载量换算303

OpenCode

11.47%

按下载量换算194

Gemini CLI

7.26%

按下载量换算123

windsurf

2.89%

按下载量换算49

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

权限需确认

当前来源未能明确判断权限范围，默认进入异常复核队列。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

GitHub 仓库

github.com

/dylantarre/animation-principles

SKILL.md 来源

github.com

/dylantarre/animation-principles/tree/main/skills/e-commerce-retail

skills-sh

skills.sh

/dylantarre/animation-principles/e-commerce-retail

agentskills-to

agentskills.to

/dylantarre/animation-principles/e-commerce-retail

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

e-commerce-manager（电子商务经理）

e-commerce-manager 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

e-commerce-storefront（电子商务店面）

e-commerce-storefront 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。