Frontend UI Animator
julianromli/opencode-template
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects.
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。
Install Phantom Motion
$ npx skills add pixelxzen/phantom-motion --skill phantom-motion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pixelxzen/phantom-motion phantom-motion --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "phantom-motion" agent skill from https://github.com/pixelxzen/phantom-motion/tree/main into .claude/skills/phantom-motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phantom-motion", 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.
$ npx skills add pixelxzen/phantom-motion --skill phantom-motion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pixelxzen/phantom-motion phantom-motion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "phantom-motion" agent skill from https://github.com/pixelxzen/phantom-motion/tree/main into .agents/skills/phantom-motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phantom-motion", 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 pixelxzen/phantom-motion --skill phantom-motion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pixelxzen/phantom-motion phantom-motion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "phantom-motion" agent skill from https://github.com/pixelxzen/phantom-motion/tree/main into .cursor/skills/phantom-motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phantom-motion", 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.
$ npx skills add pixelxzen/phantom-motion --skill phantom-motion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pixelxzen/phantom-motion phantom-motion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "phantom-motion" agent skill from https://github.com/pixelxzen/phantom-motion/tree/main into .gemini/skills/phantom-motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phantom-motion", 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 pixelxzen/phantom-motion phantom-motionInstalls 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 pixelxzen/phantom-motion --skill phantom-motion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "phantom-motion" agent skill from https://github.com/pixelxzen/phantom-motion/tree/main into .github/skills/phantom-motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phantom-motion", 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 pixelxzen/phantom-motion --skill phantom-motion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pixelxzen/phantom-motion phantom-motion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "phantom-motion" agent skill from https://github.com/pixelxzen/phantom-motion/tree/main into .opencode/skills/phantom-motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phantom-motion", 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
phantom-motion- GitHub stars
- 185
- Token cost
- ~1k tokens
- SKILL.md length
- 333 words
- Files
- 247 (incl. scripts, references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。
- Tasks that involve 3D graphics and WebGL
- SKILL.md covers 🏗️ 混合动力架构 (Hybrid Drive…, 💎 核心美学铁律 (The Odyssey…, 越级演算模型 (Overdrive Execution… and 🎵 影视级音画同步铁律 (Audio-Visual…, plus 2 more sections
- Runs JavaScript scripts from its folder
- Tasks that involve Web animation and motion
What it does
Phantom Motion is an agent skill from pixelxzen/phantom-motion. 交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。 当用户提到「幻象」「phantom」「motion graphic」「代码动画」「HTML 动画」 「视觉叙事」「动态视觉」「生成动画」「motiongraphic」或表达 「生成一个关于 XXX 的动画」「做一个 XXX 的视觉体验」意图时触发此技能。 （支持 MIT 协议的 SVGL 库，内置 1500+ 品牌 Logo 资产）
Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 251 other files, including scripts, reference files and assets (for example `.github/PULL_REQUEST_TEMPLATE.md`, `.github/workflows/security-scan.yml` and `README.md`).
It sits in Frontend & Design, covering 3D graphics and WebGL, Web animation and motion and CSS and styling. It works with React, GSAP, Tailwind CSS and Python. The repository describes itself as: Phantom-Motion is an incredibly powerful, epic interactive dynamic visual storytelling generator. Its capabilities are limited only by the bounds of your imagination!…. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve 3D graphics and WebGL
- Tasks that involve Web animation and motion
- Tasks that involve CSS and styling
Example prompts
- “/phantom-motion”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit b8ccb0d. 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
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
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
Phantom Motion loads about 1k tokens when it runs, and up to ~40k if it reads all its reference files. Until then it costs about 86 tokens; SKILL.md has 333 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); the scripts in this folder are not scanned.
SKILL.md
The full file from pixelxzen/phantom-motion at commit b8ccb0d, republished under its Apache-2.0 licence (© pixelxzen). 333 words, ~1,020 tokens.
Download SKILL.mdSave it as
.claude/skills/phantom-motion/SKILL.md (or your agent's skills folder). This skill also uses 246 other files; get the full folder from GitHub.- name
- phantom-motion
- description
- 交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。 当用户提到「幻象」「phantom」「motion graphic」「代码动画」「HTML 动画」 「视觉叙事」「动态视觉」「生成动画」「motiongraphic」或表达 「生成一个关于 XXX 的动画」「做一个 XXX 的视觉体验」意图时触发此技能。 （支持 MIT 协议的 SVGL 库，内置 1500+ 品牌 Logo 资产）
幻象 MotionGraphic 智能体 v11.0.0 (The Minimalist Director)
世界顶级视觉设计大师与动态图形艺术家工作流。融合乔布斯对产品直觉的偏执、 迪特·拉姆斯「少，却更好」的功能纯粹主义、以及 《Monocle》杂志人文美学 的终极路演系统。 v11.0 引入了 「混合动力架构 (Hybrid Drive)」：将生成的视频渲染引擎与 Minimal Mono 风格的编辑器 UI 彻底物理隔离，实现了影视级冲击力与极致操控感的跨界融合。
🏗️ 混合动力架构 (Hybrid Drive Architecture)
[!IMPORTANT] 你生成的系统必须遵循以下物理隔离原则，以确保影视级性能：
- Stage (舞台层): 运行在隔离的
<iframe>中。使用原生 JS + GSAP + Three.js/WebGL。禁止在舞台层引入 React，以消除虚拟 DOM 对 60fps 动画的干扰。- Chrome (操控层): 使用 React 19 + Tailwind 4 开发。负责属性面板、时间轴、撤销重做（useSlideHistory）。
- Bridge (数据桥): 通过
postMessage实现双向绑定。编辑器修改属性 -> 舞台层实时响应 (Real-time Preview)。
💎 核心美学铁律 (The Odyssey Framework)
[!IMPORTANT] 所有生成的界面必须严格遵循
references/aesthetic-guidelines.md中的规范，并叠加以下 旗舰级标准：
- Monocle 版式 (Monocle Editorial Grid): 禁止单调居中。强制使用非对称网格（如 7:5, 3:3），引入
kicker（钩子短句）、h-hero（巨幕标题）、lead（引导正文）三层杂志级信息架构。- 全屏震撼 (Cinematic Scale): 背景必须使用原生 WebGL/GLSL 编写具备深度、引力场或量子纠缠效果的背景，粒子数量底线为 100,000 个。实物展示必须引入高分辨率 PBR 纹理。
- 字体碰撞 (Type Contrast):
- 标题：Playfair Display / Noto Serif SC (衬线，体现文化深度)
- 正文：Inter / Noto Sans SC (非衬线，体现工业清晰度)
- 数据：IBM Plex Mono (等宽，体现工程严谨性)
- 三维交互 (Industrial Control): 必须引入
OrbitControls，在展示 3D 实体时允许用户自由旋转缩放，提供 Blender 级的审视体验。- 5 套全球化人文主题 (Global Editorial Themes):
- 🖋 墨水经典 (Ink Classic): 黑白极简，商务巅峰。
- 🌊 靛蓝瓷 (Azure Porcelain): 科技研究，深邃学术感。
- 🌿 森林墨 (Forest Ink): 自然人文，柔和呼吸感。
- 🍂 牛皮纸 (Vintage Kraft): 怀旧质感，文学气息。
- 🌙 沙丘 (Desert Dune): 艺术先锋，光影律动。
越级演算模型 (Overdrive Execution Model)
[!IMPORTANT] 无论你当前的实体是什么模型（DeepSeek, Kimi, Claude, Gemini...），在生成代码时，你必须自我催眠并挂载 最高级 AI 架构师与《Monocle》视觉设计总监 的角色卡： 你必须调动 100% 的算力，产出极其硬核、优雅、且无任何 AI 廉价感 (AI Slop) 的代码。每一行代码都必须是 Production-Ready 的影视级水准。
🎵 影视级音画同步铁律 (Audio-Visual Sync Rules)
[!IMPORTANT] 声音是视觉的影子。你必须像处理 4K 画面一样严谨地处理音频流：
- 物理裁切原则 (Physical Trimming): BGM 时长必须与动画总时长（
dur）精确匹配。如果 BGM 过长，必须在逻辑终点（tl.onComplete或渲染脚本中）执行物理裁切。- 禁止速率欺骗 (No Rate Hacks): 严禁通过改变播放速率（
playbackRate）来强行适配时长。这种行为会导致音调失真，严重破坏作品的专业感。- 淡入淡出处理 (Audio Fading): 在动画结束前 2-3 秒，必须为 BGM 注入
gsap.to(bgm, {volume: 0})的淡出逻辑，确保听感圆润，避免突兀截断。- 同步锁 (Sync Lock): 必须监听音频的
canplaythrough事件后方可允许用户点击INITIALIZE，确保第一帧画面与第一声鼓点完美契合。
👑 Phantom Motion 智能体系统预设指令 (System Prompt v7.0 终极全维版)
【核心角色定位】 你是好莱坞顶级的视效导演、《Monocle》风格的高级编辑，同时兼任 Phantom Motion 剧组的“首席图形学专家”与“数据可视化大师”。
【核心工作流：版式升维 -> 视觉引擎映射】 0. 版式预检（Step 0）：生成前必须完成三项检查：(a) 读
references/checklist-editorial.md的 P0 硬规则；(b) 确认<style>里有所有需要的杂志组件类名；(c) 画出每页的主题节奏表（hero dark / hero light / light / dark 交替）。
- 强制排版预检：在生成 HTML 之前，必须先规划网格比例（7:5 或 3:3），确保每一页都有
kicker钩子和衬线大标题。字号必须使用min(Xvw, Yvh)双约束公式（Y ≥ X × 1.6）。- 3D 实体强实装：展示行星或产品时，严禁仅使用粒子。必须加载 PBR 贴图，配置太阳中心点光源（PointLight）和相机跟随补光。
- 全能导航绑定：必须通过 JS 原生
addEventListener绑定滚轮切换、侧边点击和键盘左右键，确保交互 100% 稳健。🎬 视觉组件调度铁律：
- [GPGPU 粒子引擎]: 涉及背景星云，强制调用 FBO 计算 26 万+ 粒子。
- [FBM 燃烧太阳]: 涉及恒星，必须编写多层分形噪声着色器，模拟日冕喷发。
- [PBR 行星系统]: 涉及行星，必须配置本地高清纹理、Bump 贴图和大气层散射 Shader。
- [Magic Move 转场]: 跨页元素必须绑定
data-flip-id，由 GSAP Flip 驱动空间转换。
交互式工作流（5 步）
...（此处省略后续步骤，保持原有逻辑）...
references/components-interactions.md: 🆕 顶级交互标准与微动效规范 (Magic Move / Raycaster 物理弹态)references/layouts-editorial.md: 🆕 10 套 Monocle 级杂志布局骨架 (Hero Cover / Data Grid / Pipeline)references/themes-humanities.md: 🆕 5 套全球化预设人文主题定义references/components-editorial.md: 🆕 杂志级 UI 组件手册 (Typography / Chrome / Callout / Stat / Figure / Ghost / Icons)references/checklist-editorial.md: 🆕 P0-P3 质量检查清单（字号双约束 / 画布对齐 / 主题节奏 / 图片规范）
© pixelxzen, Apache-2.0. 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 246 other files (scripts, references, assets) in the repository root of pixelxzen/phantom-motion.
- SKILL.md
- .github/PULL_REQUEST_TEMPLATE.md
- .github/workflows/security-scan.yml
- .gitignore
- LICENSE
- README.md
- README_EN.md
- assets/phantom-motion-poster-v2.jpg
- assets/sponsor-qrcode.png
- dist/assets/stage-B5Qt9EMX.js
- dist/engine.js
- dist/index.html
- dist/stage.html
- index.html
- logo.svg
- package-lock.json
- … and 231 more
Open the folder on GitHubat commit b8ccb0d
Compare with similar skills
Phantom Motion 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 |
|---|---|---|---|---|---|---|
| Phantom Motion this skillpixelxzen/phantom-motion | 185 | — | ~1k | Automated safety check: Pass | Apache-2.0 | |
| Frontend UI Animatorjulianromli/opencode-template | 144 | — | ~1.2k | Automated safety check: Pass | None | |
| Oma Designfirst-fluke/oh-my-agent | 1.3k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Lottie Animation Integrationfreshtechbro/claudedesignskills | 986 | — | ~4.5k | Automated safety check: Pass | MIT | |
| Inspira UIsecondsky/claude-skills | 227 | — | ~2.6k | Automated safety check: Pass | MIT | |
| Mira Offlinesandeco/mira-animator | 218 | — | ~1.3k | Automated safety check: Pass | Custom licence |
Similar skills
Oma Design
first-fluke/oh-my-agent
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.
Lottie Animation Integration
freshtechbro/claudedesignskills
Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.
Inspira UI
secondsky/claude-skills
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js.
Mira Offline
sandeco/mira-animator
Converte um deck do Mira já criado para modo OFFLINE (self-contained, sem CDN em runtime), para abrir por file:// mesmo atrás do firewall corporativo que bloqueia as CDNs (Tailwind, AOS, Lucide, D3…
Silk Design
bendrape1-byte/silk-design
Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.
Related
Works with
Questions about Phantom Motion
What does Phantom Motion do?
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。. Phantom Motion is an agent skill from pixelxzen/phantom-motion.
When should I use Phantom Motion?
Phantom Motion fits situations like: tasks that involve 3D graphics and WebGL; tasks that involve Web animation and motion; tasks that involve CSS and styling.
How do I install Phantom Motion in Claude Code?
Run `npx skills add pixelxzen/phantom-motion --skill phantom-motion -a claude-code`. Or copy the skill folder (the pixelxzen/phantom-motion repository) into .claude/skills/phantom-motion in your project. Claude Code loads it when a task matches its description.
How do I install Phantom Motion in Codex?
Run `npx skills add pixelxzen/phantom-motion --skill phantom-motion -a codex`. Or copy the skill folder (the pixelxzen/phantom-motion repository) into .agents/skills/phantom-motion in your project. Codex loads it when a task matches its description.
Can I use Phantom Motion 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 pixelxzen/phantom-motion --skill phantom-motion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/phantom-motion, .gemini/skills/phantom-motion, .github/skills/phantom-motion and .opencode/skills/phantom-motion in your project.
What does Phantom Motion need to run?
Going by SKILL.md and its folder, Phantom Motion needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Phantom Motion 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 Phantom Motion 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Phantom Motion use?
Phantom Motion is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Phantom Motion use?
About 1k tokens (SKILL.md is roughly 4.1k 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 39k tokens, read only when the agent opens those files.
What are the alternatives to Phantom Motion?
Skills that share tags, products or a category with Phantom Motion: Frontend UI Animator (julianromli/opencode-template, 144 stars), Oma Design (first-fluke/oh-my-agent, 1.3k stars), Lottie Animation Integration (freshtechbro/claudedesignskills, 986 stars) and Inspira UI (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Phantom Motion?
pixelxzen (a GitHub user) maintains it in pixelxzen/phantom-motion, which has 185 GitHub stars. The repository was last updated on May 14, 2026.
Source: pixelxzen/phantom-motion on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.