HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
Generates a single-file HTML animation in which white argument cards pop up in turn, older ones stack to the left and data widgets animate in, timed to a voiceover.
SKILL.md written in Chinese; this summary is our English description.
Install Stacked Data Cards Animation
$ npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Unclecheng-li/AI_Animation stacked-data-cards --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/stacked-data-cards .claude/skills/stacked-data-cards && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "stacked-data-cards" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cards into .claude/skills/stacked-data-cards/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stacked-data-cards", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cardsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Unclecheng-li/AI_Animation stacked-data-cards --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/stacked-data-cards .agents/skills/stacked-data-cards && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "stacked-data-cards" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cards into .agents/skills/stacked-data-cards/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stacked-data-cards", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Unclecheng-li/AI_Animation stacked-data-cards --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/stacked-data-cards .cursor/skills/stacked-data-cards && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "stacked-data-cards" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cards into .cursor/skills/stacked-data-cards/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stacked-data-cards", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Unclecheng-li/AI_Animation.git --path skills/stacked-data-cards--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Unclecheng-li/AI_Animation stacked-data-cards --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/stacked-data-cards .gemini/skills/stacked-data-cards && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "stacked-data-cards" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cards into .gemini/skills/stacked-data-cards/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stacked-data-cards", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Unclecheng-li/AI_Animation stacked-data-cardsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/stacked-data-cards .github/skills/stacked-data-cards && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "stacked-data-cards" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cards into .github/skills/stacked-data-cards/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stacked-data-cards", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Unclecheng-li/AI_Animation stacked-data-cards --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/stacked-data-cards .opencode/skills/stacked-data-cards && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "stacked-data-cards" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/stacked-data-cards into .opencode/skills/stacked-data-cards/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stacked-data-cards", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
stacked-data-cards- GitHub stars
- 1.5k
- Token cost
- ~1.1k tokens
- SKILL.md length
- 305 words
- Files
- 9 (incl. references, assets)
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generates a single-file HTML animation in which white argument cards pop up in turn, older ones stack to the left and data widgets animate in, timed to a voiceover.
- Works in 4 steps: 确认参数 → 规划卡片与时间线 → 生成标准 → …
- Presenting data arguments or research conclusions in a video
- SKILL.md covers 你是什么, 支持的卡片内容类型, 核心工作流 and 参考示例
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
This skill produces a self-playing HTML animation for data-driven arguments in videos. Cards enter from the bottom of a dark stage, each new card pushes earlier ones into a shrinking, tilted stack on the left, and each card holds data components that appear on a millisecond timeline: line charts that draw themselves, counting numbers, ring gauges, comparison bars, tables and icon card groups. The total length is set to match the narration, so a screen recording becomes the finished clip.
The agent first confirms the topic, number of points and time budget, asking for the card count (two to five, with three suggested), narration seconds, accent color and whether the stack should slide out at the end, and it generates straight away when enough is given. Timeline rules reserve at least 1.5 seconds of still reading time per card and suggest roughly six to fifteen seconds each. A template, two example scenes and component and prompt references are included. The skill text is in Chinese.
When your agent uses it
- Presenting data arguments or research conclusions in a video
- Revealing a counterintuitive point with animated charts
- Timing an animation to match narration seconds
Example prompts
- “Make a three-card stacked animation about scaling laws, with a blue theme and a line chart on the first card.”
- “Build a stacked data cards page from my narration script, assigning each card's duration from its sentences.”
- “Add a ring gauge and a comparison bar to the second card of the animation.”
Requirements
- A browser and a screen recorder to capture the animation
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d9c521f. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are yaml and css).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Stacked Data Cards Animation loads about 1.1k tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 43 tokens; SKILL.md has 305 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Unclecheng-li/AI_Animation at commit d9c521f, republished under its MIT licence (© Unclecheng-li). 305 words, ~1,140 tokens.
Download SKILL.mdSave it as
.claude/skills/stacked-data-cards/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- stacked-data-cards
- description
- 生成「叠放式数据论点卡」自动播放动画的单文件 HTML：白色论点卡从底部依次弹入居中，旧卡向左叠成牌堆，卡内数据组件（折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组）按毫秒级时间线级联入场，整段时长对齐口播/旁白秒数，录屏即成片。适合视频中的数据论证、研究结论展示、观点陈列、反直觉点揭示等场景。
- version
- 0.1.0
- triggers
- 叠放卡片, 卡片叠放, 数据卡片, 论点卡片, 数据论证动画, 自动播放卡片, 论点展示, 数据观点, stacked cards, stacked data cards, card deck animation, auto-playing cards
Stacked Data Cards Skill
你是什么
你是一个专门生成叠放式数据论点卡自动播放动画的专家。每次被激活，你会根据用户给出的论点/数据材料，生成一个完整的单文件 HTML：一个深色舞台中央，白色数据卡一张张从底部弹入；每当新卡弹入，旧卡向左侧叠放成逐渐缩小、倾斜的牌堆；每张卡内部是一组数据可视化组件，按毫秒级时间线依次入场。
核心视觉特征：
- 深色舞台 —
#0b0f19背景 + 主题色径向光晕，衬托白色大卡 - 三态卡片 —
upcoming（底部屏外待命）→active（弹入居中）→stacked（左叠成牌堆，缩小 + 旋转 + 降透明） - 序号徽章 — 卡面左上角超大半透明数字（01 / 02 / 03）
- 时间线自动播放 — 每张卡有固定驻留时长，对齐口播秒数，无需任何交互
- 数据组件级联入场 — 折线描边、数字滚动、环形仪表、对比条、表格行、图标卡按 stagger 延迟依次出现
与其他 Skill 的区别：
ppt-animation→ 手动翻页的 PPT，无时间线、无牌堆层叠card-theater→ 手动交互的 3D 卡片轮播 + 侧边栏解说，重探索而非自动叙事video-shot-demos→ 整辑分镜 + 播放器底盘的重量级方案；本 Skill 是其中一个"数据论证镜头"的轻量独立形态stacked-data-cards→ 单场景、自动播放、时长精确对齐口播，卡片即论点，数据即证据
支持的卡片内容类型
| 组件 | 说明 | 适用论点 |
|---|---|---|
| 折线对比图 | SVG 双线（趋势线 vs 水平线），trim-paths 描边入场 + 数据点弹性弹出 + 末端标注 | "A 飙升但 B 停滞"类趋势论证 |
| 大数字 + 环形仪表 | 超大渐变数字 count-up 滚动 + SVG 环形进度条 | 震撼比例数字（如 45%） |
| 对比条 | 双条横向填充对比（AI vs 人类 / 方案 A vs B） | 两方差距论证 |
| 数据表格 | 行依次淡入 + 单元格内迷你条形图 + 数值滚动 | 多维数据明细 |
| 图标卡组 | 3 栏图标卡弹入，配标题 + 描述 + 细节列表 | 并列的 N 个要点/陷阱 |
| 金句横幅 | 底部通栏色块弹入，承载一句结论 | 每卡收尾的观点句 |
| 角色小场景 | 头像 + 气泡 + 流程箭头 + 逻辑链，微型叙事 | 因果链、行为对比 |
| 角注 | 右下角 mono 字体数据来源标注 | 增强可信度 |
核心工作流
Step 1 — 确认参数
从用户输入中识别：主题、论点数量、时间预算。如不明确，询问：
- "这组内容有几个论点/卡片？（推荐 2~5 张，3 张最佳）"
- "整段对应口播多少秒？每张卡大约驻留几秒？"
- "主题色偏好？（默认橙红警示色
#ff5f3c，可选蓝#3b82f6/ 绿#10b981/ 紫#8b5cf6）" - "结尾需要整副牌堆滑出退场吗？（用于衔接下一镜头）"
如果信息充足，直接生成。 用户给了口播稿时，按口播句读自动分配每卡时长。
Step 2 — 规划卡片与时间线
为每张卡规划内容结构：
卡片:
序号: "01"
标题: "一句话论点（不超过 18 字）"
副标题: "补充说明（可选）"
主组件: "折线对比图 / 大数字+仪表 / 图标卡组 ..."
辅助组件: "数据表格 / 对比条 / 金句横幅 ..."
角注: "来源 · 样本量"
驻留时长: 7000ms时间线规划铁律：
- 卡片在
T=0弹入，卡内组件在T+300ms起开始级联入场 - 卡内最后一个动画必须在驻留时长内完成，至少预留 1.5s 静止阅读时间
- 卡间切换间隔 = 当前卡驻留时长；建议 6~15s/卡
- 可选结尾：整副牌堆
translateX(-120vw)滑出 + 淡出（1s）
Step 3 — 生成标准
视觉规范：
- 舞台：
#0b0f19深色底 +radial-gradient主题色光晕（透明度 ≤0.12） - 卡片：
rgba(255,255,255,0.97)白底、圆角clamp(18px, 2.5vw, 28px)、大投影、宽min(92vw, 900~980px) - 字体：系统字体栈（
-apple-system, 'PingFang SC', 'Microsoft YaHei'），数字/角注用'SF Mono', 'JetBrains Mono', Consolas - 色彩全部走
:rootCSS 变量：--accent（主色）、--accent-light、--green（对照组/正面）、--muted、--text - 缓动：
--ease-out: cubic-bezier(0.16, 1, 0.3, 1)（入场）、--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1)（弹性弹出）
三态切换（必须精确实现）：
.card { transform: translate(-50%, 60vh) scale(0.82); opacity: 0; } /* upcoming */
.card.active { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 10; }
.card.stacked { /* 第 i 张叠放卡： */
transform:
translate(calc(-110% - var(--stack-i, 0) * 22%), -50%)
scale(calc(0.76 - var(--stack-i, 0) * 0.07))
rotate(calc(-4deg - var(--stack-i, 0) * 5deg));
opacity: 0.72;
}- 切换通过 JS
activate(index)统一改写 class 与--stack-i/z-index - transition：
transform 0.8s var(--ease-out), opacity 0.55s ease
卡内动画规范（必须包含至少 3 种）：
- 数字滚动
count-up：ease-out cubic，支持data-target / data-prefix / data-suffix / data-decimals / data-delay / data-duration - 折线描边：
getTotalLength()初始化stroke-dasharray/offset，卡片激活后过渡到 0（1.2~1.6s）；先强制重绘防止初帧闪完整线 - 条形填充：CSS 变量
--target-width驱动，transition: width 1s，配合.delay-1/2/3级联 - 表格行 / 图标卡：
nth-childtransition-delay 级联淡入（间隔 100~200ms） - 弹性元素（徽章、气泡、数据点）：
scale(0)→scale(1)+var(--ease-elastic)
音效（可选）：
- WebAudio 合成低音 thud（sine 80Hz→40Hz，0.35s 衰减），用于关键揭示时刻
- 必须 try/catch 静默失败（浏览器自动播放策略）
- 零音频文件
代码规范：
- 单文件 HTML，内联 CSS/JS，零外部依赖（无 CDN、无外部图片，除非用户明确提供）
- 代码量 400~900 行
- 时间线常量集中在
TIMING对象，单位毫秒，注释标注对应口播时间点 - 响应式断点：
760px（网格降单列、叠卡位移收紧）、520px（字号/间距收紧） - 图标全部内联 SVG
Step 4 — 检查点
生成完成后逐项自检并向用户报告：
- 每张卡最后一个动画的结束时刻 < 该卡切换时刻 - 1.5s（留足阅读时间）
- 叠放卡的
--stack-i从 0 开始递增（越新的叠卡越靠前） - 所有
count-up元素初始文本为目标格式下的 0 值（防闪烁） - 时间线总时长 = 各卡驻留时长之和（+ 可选退场 1s），与口播对齐
- 输出：文件路径、卡片数、时间线总时长、主题色
参考示例
- 起步骨架：
assets/template.html（3 卡标准骨架：折线卡 + 大数字卡 + 图标卡） - 成片实例 A：
assets/examples/scene-scaling-law-orange.html（橙红主题 · 表格/仪表/图标组 · CSS 级联驱动） - 成片实例 B：
assets/examples/scene-ai-code-security-blue.html（蓝紫主题 · 角色小场景/逻辑链 · JS reveal 驱动 · 含 thud 音效与整副退场） - Prompt 参考：
references/prompts.md - 组件规格：
references/components.md
© Unclecheng-li, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (references, assets) in skills/stacked-data-cards of Unclecheng-li/AI_Animation.
- SKILL.md
- README.md
- assets/examples/png/muzimi.jpg
- assets/examples/png/muzimi2.jpg
- assets/examples/scene-ai-code-security-blue.html
- assets/examples/scene-scaling-law-orange.html
- assets/template.html
- references/components.md
- references/prompts.md
Open the folder on GitHubat commit d9c521f
Compare with similar skills
Stacked Data Cards Animation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Stacked Data Cards Animation this skillUnclecheng-li/AI_Animation | 1.5k | — | ~1.1k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 59k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Anidoodlealexgreensh/anidoodle | 865 | — | ~2.7k | Automated safety check: Pass | Apache-2.0 | |
| HyperFrames Keyframesheygen-com/hyperframes | 59k | 1 repos | ~4.1k | Automated safety check: Pass | Apache-2.0 | |
| AnalyzeKumarSashank/motiscope | 122 | — | ~3.1k | Automated safety check: Notes | MIT | |
| Awwwards Motion DesignYu-369/VibeCurb | 979 | — | ~13k | Automated safety check: Pass | MIT |
Similar skills
Anidoodle
alexgreensh/anidoodle
Code-drawn stills, drawing timelapses, films, explainers and interactive web animations in 31 styles, with composed scores.
HyperFrames Keyframes
heygen-com/hyperframes
Writes seek-safe 2D and 3D keyframes for HyperFrames video compositions, covering punch-ins, zooms, reframes and camera moves without touching clip assembly.
Analyze
KumarSashank/motiscope
Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code.
Awwwards Motion Design
Yu-369/VibeCurb
Motion design pipeline for building Awwwards/Apple-tier animations, micro-interactions, scroll sequences, page transitions, and kinetic typography.
Yuv Viral Video
hoodini/ai-agents-skills
Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…
More from Unclecheng-li/AI_Animation
All 12 skills in this repoArchify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Video Shot Demo Pages
Unclecheng-li/AI_Animation
Produces one self-contained HTML animation page per video shot, sharing a cinematic player base but giving each page its own visual style, sound cues and characters.
Card Theater
Unclecheng-li/AI_Animation
Generates a single-file HTML presentation that pairs a narrated sidebar with a 3D card carousel, for walking through protocols, product features or step-by-step processes.
Phone UI Demo Animations
Unclecheng-li/AI_Animation
Turns a product, lesson or script into a cinematic web animation staged inside a realistic phone interface, with lock screens, chats, settings and a virtual-clock player.
Plotbeat Data Videos
Unclecheng-li/AI_Animation
Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.
Swiss Shot Demos
Unclecheng-li/AI_Animation
制作"瑞士国际主义风格（Swiss Style）+ 图表驱动"的视频分镜演示动画——纸灰底/炭黑墨/发丝线/唯一强调橙的编辑部级排版，每页用匹配内容的可视化图表（时间线/循环环/流程链/对照表/点阵计数/热力矩阵…）代替文字堆砌，一镜一 HTML，电影化播放器全屏录屏即成片。只要用户提到：瑞士风格演示页、Swiss Style…
Related
Categories
Questions about Stacked Data Cards Animation
What does Stacked Data Cards Animation do?
Generates a single-file HTML animation in which white argument cards pop up in turn, older ones stack to the left and data widgets animate in, timed to a voiceover. This skill produces a self-playing HTML animation for data-driven arguments in videos. Cards enter from the bottom of a dark stage, each new card pushes earlier ones into a shrinking, tilted stack on the left, and each card holds data components that appear on a millisecond timeline: line charts that draw themselves, counting numbers, ring gauges, comparison bars, tables and icon card groups.
When should I use Stacked Data Cards Animation?
Stacked Data Cards Animation fits situations like: presenting data arguments or research conclusions in a video; revealing a counterintuitive point with animated charts; timing an animation to match narration seconds.
How do I install Stacked Data Cards Animation in Claude Code?
Run `npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a claude-code`. Or copy the skill folder (skills/stacked-data-cards in Unclecheng-li/AI_Animation) into .claude/skills/stacked-data-cards in your project. Claude Code loads it when a task matches its description.
How do I install Stacked Data Cards Animation in Codex?
Run `npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a codex`. Or copy the skill folder (skills/stacked-data-cards in Unclecheng-li/AI_Animation) into .agents/skills/stacked-data-cards in your project. Codex loads it when a task matches its description.
Can I use Stacked Data Cards Animation in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Unclecheng-li/AI_Animation --skill stacked-data-cards -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/stacked-data-cards, .gemini/skills/stacked-data-cards, .github/skills/stacked-data-cards and .opencode/skills/stacked-data-cards in your project.
What does Stacked Data Cards Animation need to run?
SKILL.md names no scripts, command-line tools or credentials: Stacked Data Cards Animation is instructions for the agent only. Our summary lists: A browser and a screen recorder to capture the animation.
Does Stacked Data Cards Animation access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Stacked Data Cards Animation safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Stacked Data Cards Animation use?
Stacked Data Cards Animation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Stacked Data Cards Animation use?
About 1.1k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.
What are the alternatives to Stacked Data Cards Animation?
Skills that share tags, products or a category with Stacked Data Cards Animation: HyperFrames Animation (heygen-com/hyperframes, 59k stars), Anidoodle (alexgreensh/anidoodle, 865 stars), HyperFrames Keyframes (heygen-com/hyperframes, 59k stars) and Analyze (KumarSashank/motiscope, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Stacked Data Cards Animation?
Unclecheng-li (a GitHub user) maintains it in Unclecheng-li/AI_Animation, which has 1,469 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 5, 2026.
Source: Unclecheng-li/AI_Animation on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.