Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
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.
SKILL.md written in Chinese; this summary is our English description.
Install Card Theater
$ npx skills add Unclecheng-li/AI_Animation --skill card-theater -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Unclecheng-li/AI_Animation card-theater --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/card-theater .claude/skills/card-theater && 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 "card-theater" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/card-theater into .claude/skills/card-theater/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "card-theater", 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/card-theaterType 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 card-theater -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Unclecheng-li/AI_Animation card-theater --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/card-theater .agents/skills/card-theater && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "card-theater" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/card-theater into .agents/skills/card-theater/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "card-theater", 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 card-theater -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Unclecheng-li/AI_Animation card-theater --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/card-theater .cursor/skills/card-theater && 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 "card-theater" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/card-theater into .cursor/skills/card-theater/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "card-theater", 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/card-theater--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 card-theater -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Unclecheng-li/AI_Animation card-theater --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/card-theater .gemini/skills/card-theater && 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 "card-theater" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/card-theater into .gemini/skills/card-theater/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "card-theater", 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 card-theaterInstalls 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 card-theater -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/card-theater .github/skills/card-theater && 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 "card-theater" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/card-theater into .github/skills/card-theater/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "card-theater", 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 card-theater -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 card-theater --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/card-theater .opencode/skills/card-theater && 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 "card-theater" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/card-theater into .opencode/skills/card-theater/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "card-theater", 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
card-theater- GitHub stars
- 1.5k
- Token cost
- ~877 tokens
- SKILL.md length
- 263 words
- Files
- 10 (incl. references, assets)
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- MIT
At a glance
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.
- Works in 4 steps: 确认主题与模板 → 规划卡片内容 → 生成标准 → …
- Explaining a network protocol flow one step at a time
- SKILL.md covers 你是什么, 5 种内置模板, 核心工作流 and 参考示例
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
The agent builds one self-contained HTML page with a narrative column on the left, holding a title, commentary on the current card and key points, and a stage on the right where glass-style cards are arranged as a Coverflow, an orbit or a scrolling stack. Five templates ship in `assets/`: `scroll-3d-tilt`, `apple-aurora-track`, `coverflow-classic`, `coverflow-watermark` and `coverflow-focus`. With no preference stated it defaults to `coverflow-classic`.
Cards can be switched between modes, for example IPsec transport mode and tunnel mode, with cards inserted or removed as you toggle. Selected cards get a highlighter sweep over key fields, and navigation works by arrow keys, click and mouse wheel. The stated output rules are a dark technical look, inline CSS and JavaScript in 300-800 lines, and CDN links for Tailwind CSS, Font Awesome and Swiper for the coverflow templates. The SKILL.md is written in Chinese.
When your agent uses it
- Explaining a network protocol flow one step at a time
- Presenting product features as a browsable 3D card carousel
- Comparing two modes of a process in an interactive page
Example prompts
- “Make a card theater page that explains the IPsec packet structure step by step.”
- “Build a coverflow demo comparing transport mode and tunnel mode.”
- “Create an aurora-style card track presenting our five product features.”
Requirements
- A browser to open the generated HTML file
- Internet access for the Tailwind, Font Awesome and Swiper CDN links
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).
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
Card Theater loads about 877 tokens when it runs, and up to ~1.5k if it reads all its reference files. Until then it costs about 33 tokens; SKILL.md has 263 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). 263 words, ~877 tokens.
Download SKILL.mdSave it as
.claude/skills/card-theater/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.- name
- card-theater
- description
- 生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML 页面。支持滚动翻页、Coverflow 3D、Focus 展开等多种交互模式，内置模式切换（如传输/隧道）、荧光笔高亮、水印图标等效果。适合协议流程演示、产品特性展示、分步讲解场景。
- version
- 0.1.0
- triggers
- 卡片演示, 卡片轮播, 侧边栏演示, 协议流程演示, 分步讲解, card theater, card showcase, coverflow 演示, 3D 卡片, 翻卡片
Card Theater Skill
你是什么
你是一个专门生成侧边栏叙事 + 3D 卡片轮播演示动画的专家。每次被激活，你会根据用户描述的主题，生成一个完整的单文件 HTML，用 3D 卡片轮播 + 侧边栏解说的方式逐步展示流程、概念或协议。
核心视觉特征：
- 左侧叙事栏 — 标题 + 当前卡片的解说文字 + 关键要点提示
- 右侧 3D 卡片舞台 — 玻璃拟态卡片以 Coverflow / 轨道 / 滚动方式排列
- 模式切换 — 可动态插入/移除卡片（如"传输模式 ↔ 隧道模式"）
- 荧光笔高亮 — 选中卡片的关键字段被荧光笔划过动画高亮
- 键盘 / 滚轮 / 点击 — 多种导航方式
与其他 Skill 的区别：
ppt-animation→ 全屏翻页 PPT，每页独立，无 3D 卡片flowchart→ 节点 + 连线的流程图，无侧边栏叙事card-theater→ 侧边栏 + 3D 卡片轮播，重叙事感，适合"分步讲解 + 模式对比"
5 种内置模板
| 模板 | 文件 | 交互方式 | 视觉特点 | 适合场景 |
|---|---|---|---|---|
scroll-3d-tilt | assets/scroll-3d-tilt.html | 垂直滚动 + 鼠标 3D 倾斜 | 动态网格背景 + 单卡片居中 + 鼠标跟随 3D 透视 | 单页滚动型演示，沉浸感强 |
apple-aurora-track | assets/apple-aurora-track.html | 键盘 ←→ + 点击卡片 | Apple 极光背景 + 液态玻璃卡片轨道 + 非选中卡片模糊后退 | 产品特性展示，高级感 |
coverflow-classic | assets/coverflow-classic.html | Swiper Coverflow + 键盘 + 滚轮 | 经典 3D Coverflow 旋转 + 侧边栏解说 + 荧光笔 | 协议流程分步讲解，最通用 |
coverflow-watermark | assets/coverflow-watermark.html | Swiper Coverflow + 键盘 + 滚轮 | 巨型水印图标 + 卡片内大段文字 + 极简侧边栏 | 内容密度高的技术讲解 |
coverflow-focus | assets/coverflow-focus.html | Swiper Coverflow + 键盘 + 滚轮 | 选中卡片展开详情 + 未选中仅显示标题 + 总结卡片 | 由浅入深的渐进式讲解 |
核心工作流
Step 1 — 确认主题与模板
从用户输入中识别要演示的主题。如不明确，询问：
- "你想演示什么流程 / 协议 / 概念？"
- "有几个步骤 / 卡片？"
- "需要模式切换吗？（如传输模式 / 隧道模式）"
模板选择建议：
- 用户未指定 → 默认
coverflow-classic（最通用） - 强调沉浸感 →
scroll-3d-tilt - 强调高级感 →
apple-aurora-track - 内容密度高 →
coverflow-watermark - 渐进式讲解 →
coverflow-focus
如果信息充足，直接生成。
Step 2 — 规划卡片内容
每张卡片包含以下要素：
卡片:
序号: "01"
标题: "应用数据"
副标题: "Payload" # mono 字体，带颜色
图标: "fa-file-code" # Font Awesome 图标名
图标颜色: "#FFD60A"
解说: "这是用户产生的原始明文数据..." # 侧边栏叙述文字
要点: "此时数据尚未被任何协议包裹" # 侧边栏底部提示
高亮文本: "CLEAR TEXT / HTTP" # 荧光笔高亮内容
高亮颜色: "#FFD60A"
水印图标: "fa-file-code" # coverflow-watermark 用模式切换卡片（可选）：
- 用户可定义"模式A ↔ 模式B"，切换时动态插入/移除卡片
- 如 IPsec 的"传输模式"（4卡片）↔"隧道模式"（5卡片，多一张新 IP 头卡片）
Step 3 — 生成标准
视觉规范（暗色科技风）：
- 背景：纯黑
#000或极深#030508 - 卡片：玻璃拟态（
backdrop-filter: blur(30px) saturate(150%)） - 卡片尺寸：280px
400px 宽，380px580px 高 - 侧边栏：280px~350px 宽，半透明背景 + 模糊
- 字体：
Inter（正文）+JetBrains Mono（代码/高亮）+Noto Sans SC（中文） - 配色：Apple 系色彩（
#0A84FF蓝 /#30D158绿 /#FFD60A黄 /#BF5AF2紫）
动画规范（必须包含）：
- 卡片切换：3D 透视变换 + 缓动函数（
cubic-bezier(0.25, 0.8, 0.25, 1)） - 选中卡片：放大 + 提亮 + 清晰；非选中：缩小 + 变暗 + 模糊
- 荧光笔：选中卡片的高亮文本播放划线动画（
background-size: 0% → 100%） - 侧边栏文字：切换时淡出 → 更新内容 → 淡入（300ms）
- 模式切换：新卡片插入/移除带过渡动画
交互规范（必须全部包含）：
- 键盘 ←→ 切换卡片
- 鼠标点击卡片跳转
- 鼠标滚轮翻页（Swiper 模板用
mousewheel: { thresholdDelta: 50 }） - 模式切换按钮（如有）
代码规范：
- 单文件 HTML，内联 CSS/JS
- 代码量 300-800 行
- 依赖：Tailwind CSS CDN + Font Awesome CDN + Swiper CDN（coverflow 模板用）
- 图标统一使用 Font Awesome（
fa-solid fa-xxx） - 不依赖外部图片
Step 4 — 输出
生成后输出：
- 文件保存路径
- 使用的模板名称 + 卡片数量
- 是否包含模式切换
- 询问用户是否需要调整
参考示例
详见 assets/ 目录：
assets/scroll-3d-tilt.html— 滚动 + 3D 鼠标跟随assets/apple-aurora-track.html— Apple 极光轨道assets/coverflow-classic.html— 经典 Coverflowassets/coverflow-watermark.html— 水印图标版assets/coverflow-focus.html— Focus 展开版
Prompt 参考见 references/prompts.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 9 other files (references, assets) in skills/card-theater of Unclecheng-li/AI_Animation.
- SKILL.md
- README.md
- assets/ai-vulnerability-showcase.html
- assets/apple-aurora-track.html
- assets/coverflow-classic.html
- assets/coverflow-focus.html
- assets/coverflow-watermark.html
- assets/scroll-3d-tilt.html
- assets/vulnclaw-security-showcase.html
- references/prompts.md
Open the folder on GitHubat commit d9c521f
Compare with similar skills
Card Theater 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 |
|---|---|---|---|---|---|---|
| Card Theater this skillUnclecheng-li/AI_Animation | 1.5k | — | ~877 | Automated safety check: Pass | MIT | |
| Baseline UIibelick/ui-skills | 9.6k | 8 repos | ~855 | Automated safety check: Pass | MIT | |
| Single-File UI Design ExplorationJayZeeDesign/awesome-claude-skills | 171 | — | ~493 | Automated safety check: Pass | None | |
| SVG Hand-Drawn Animation Previewshaom/svg-hand-drawn-skill | 264 | — | ~1.3k | Automated safety check: Pass | None | |
| Phantom Motionpixelxzen/phantom-motion | 185 | — | ~1k | Automated safety check: Pass | Apache-2.0 | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 |
Similar skills
Single-File UI Design Exploration
JayZeeDesign/awesome-claude-skills
Produces one self-contained HTML and Tailwind mockup for UI inspiration, with detailed rules on fonts, icons, dark versus light mode and chart handling.
SVG Hand-Drawn Animation Preview
shaom/svg-hand-drawn-skill
Turns an SVG file or URL into a hand-drawn animation: a standalone preview.html plus a reusable player.js that draws paths first and fills afterward.
Phantom Motion
pixelxzen/phantom-motion
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。
- Official
Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
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.
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.
Stacked Data Cards Animation
Unclecheng-li/AI_Animation
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.
Swiss Shot Demos
Unclecheng-li/AI_Animation
制作"瑞士国际主义风格（Swiss Style）+ 图表驱动"的视频分镜演示动画——纸灰底/炭黑墨/发丝线/唯一强调橙的编辑部级排版，每页用匹配内容的可视化图表（时间线/循环环/流程链/对照表/点阵计数/热力矩阵…）代替文字堆砌，一镜一 HTML，电影化播放器全屏录屏即成片。只要用户提到：瑞士风格演示页、Swiss Style…
Related
Works with
Categories
Questions about Card Theater
What does Card Theater do?
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. The agent builds one self-contained HTML page with a narrative column on the left, holding a title, commentary on the current card and key points, and a stage on the right where glass-style cards are arranged as a Coverflow, an orbit or a scrolling stack. Five templates ship in `assets/`: `scroll-3d-tilt`, `apple-aurora-track`, `coverflow-classic`, `coverflow-watermark` and `coverflow-focus`.
When should I use Card Theater?
Card Theater fits situations like: explaining a network protocol flow one step at a time; presenting product features as a browsable 3D card carousel; comparing two modes of a process in an interactive page.
How do I install Card Theater in Claude Code?
Run `npx skills add Unclecheng-li/AI_Animation --skill card-theater -a claude-code`. Or copy the skill folder (skills/card-theater in Unclecheng-li/AI_Animation) into .claude/skills/card-theater in your project. Claude Code loads it when a task matches its description.
How do I install Card Theater in Codex?
Run `npx skills add Unclecheng-li/AI_Animation --skill card-theater -a codex`. Or copy the skill folder (skills/card-theater in Unclecheng-li/AI_Animation) into .agents/skills/card-theater in your project. Codex loads it when a task matches its description.
Can I use Card Theater 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 card-theater -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/card-theater, .gemini/skills/card-theater, .github/skills/card-theater and .opencode/skills/card-theater in your project.
What does Card Theater need to run?
SKILL.md names no scripts, command-line tools or credentials: Card Theater is instructions for the agent only. Our summary lists: A browser to open the generated HTML file; Internet access for the Tailwind, Font Awesome and Swiper CDN links.
Does Card Theater 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 Card Theater 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 Card Theater use?
Card Theater 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 Card Theater use?
About 877 tokens (SKILL.md is roughly 3.5k 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 590 tokens, read only when the agent opens those files.
What are the alternatives to Card Theater?
Skills that share tags, products or a category with Card Theater: Baseline UI (ibelick/ui-skills, 9.6k stars), Single-File UI Design Exploration (JayZeeDesign/awesome-claude-skills, 171 stars), SVG Hand-Drawn Animation Preview (shaom/svg-hand-drawn-skill, 264 stars) and Phantom Motion (pixelxzen/phantom-motion, 185 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Card Theater?
Unclecheng-li (a GitHub user) maintains it in Unclecheng-li/AI_Animation, which has 1,478 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.