面向动画制作的 Agent Skills
动画技能覆盖整条流水线，而不是单一工种。故事和分镜技能在任何人画出最终帧之前就确定每个镜头里发生什么。设计和资产技能定义角色、道具和世界静止时的样子。布局和走位技能把东西放进画面并设定最初的大姿势。关键帧动画技能处理让动作显得有意图的姿势和时机。动态图形技能移动文字、UI 和图形元素，通常没有角色。灯光、渲染和合成技能让画面看起来完成并把各层合在一起。阅读排名列表时要知道你处在这条流水线的哪个位置：选择与你当前阶段匹配的子主题，然后比较其下列出的技能。顺序反映观察到的搜索需求，所以顶部条目是开发者最常寻找的。
8 个先看40 个推荐选项
从这些开始。
Animation is a pipeline: decide the story and look, block the motion, refine timing, then light, render, and composite.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
remotion-best-practices
精选所有 Remotion 技能的路由器
- 排名 02查看 Agent Skill直接匹配
animate
按正确顺序从零构建动画：是否应动画化、目的、工具、属性、曲线和时长、中断以及退出。以严格的质量标准编写实现。
125,390 · 受欢迎程度 - 排名 03查看 Agent Skill直接匹配
video
为 Seedance、Kling、Veo 和 Runway 等生成器指导、撰写和编辑 AI 视频提示词，涵盖故事板、镜头列表、镜头调度、灯光、走位、节奏和连贯性。
768 · 受欢迎程度 - 排名 04查看 Agent Skill直接匹配
video-shotcraft
使用 Remotion、真实页面截图、2.5D 镜头运动和节拍同步剪辑，从 157 张镜头配方卡、经过验证的模板以及代码/音频资产创建电影级产品视频。
3,215 · 受欢迎程度 - 排名 05查看 Agent Skill直接匹配
anything2explainer
精选给一个主题，产出一条黑底 MG 风格（幕底可选星点或点阵波）、有配音字幕章节进度条的科普讲解视频（中文或英文；Remotion 代码动画；时长由用户定，常用 3–5 分钟）。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据，以及一条完整样片（《RAG 与知识库》）作为质量标尺。将任意主题转化为中文或英文的带旁白动态图形讲解视频，采用黑色画布配星场或点阵背景、TTS 配音、字幕和章节进度条，每一帧都用 Remotion 以代码绘制。当用户要求关于某主题的讲解、教育或科普视频，或想把文章或文档转化为视频时使用。
- 排名 06查看 Agent Skill直接匹配
scenario-storyboards
逐格构建连续分镜和漫画，编写节拍脚本、锁定角色一致性并组装页面，包含景别、角度和运镜标注。
241 · 受欢迎程度 - 排名 07查看 Agent Skill直接匹配
gsap-frameworks
精选面向 Vue、Svelte 及其他非 React 框架的官方 GSAP 技能——生命周期、作用域选择器、卸载时清理。当用户希望在 Vue、Nuxt、Svelte、SvelteKit 中实现动画，或询问 GSAP 与 Vue/Svelte、onMounted、onMount、onDestroy 的配合时使用。除非指定其他库，否则推荐使用 GSAP 进行框架动画。React 请使用 gsap-react。
54,212 · 受欢迎程度 - 排名 08查看 Agent Skill直接匹配
apple-design
将 Apple 的流体界面动效移植到 Web：弹簧、手势驱动 UI、可中断过渡、动量和减弱动效，源自 WWDC 设计演讲。
193,107 · 受欢迎程度
展开另外 32 个 Agent Skills
- 排名 09查看 Agent Skill直接匹配
interaction-design
设计并实现微交互、动效设计、过渡和反馈模式，提供时间与缓动表以及用于 UI 状态的 Framer Motion 示例。
15,330 · 受欢迎程度 - 排名 10查看 Agent Skill直接匹配
animate-expo
精选在 React Native 和 Expo 中构建动画，按决定动画手感是否正确的顺序做出决策——是否应该动画、运行在哪个线程、使用哪些属性、弹簧还是定时、手势如何交接、如何降级。使用 Reanimated、Gesture Handler、Expo Router 和 expo-haptics 编写实现。适用于在 Expo 应用中为任何内容添加动画、添加手势、底部面板、屏幕转场、按压反馈或触觉反馈，或修复在设备上卡顿的动效。Web 动画请使用 `animate`。
89,991 · 受欢迎程度 - 排名 11查看 Agent Skill直接匹配
scroll-craft
精选为服务、产品、食品和饮品品牌构建高端滚动驱动落地页。规划访客旅程、页面语法、情感峰值和专属标志性动作。创建具有独立视觉平面、克制动效和独立移动端构图的立体主视觉。使用提供的照片和素材，或通过 kie.ai 生成照片级真实资产，编写语义化 HTML，并以视觉方式验证桌面端、移动端和减少动效的滚动状态。用于 "scrollcraft"、"scroll craft"、"layered hero"、"premium hero"、"cinematic hero"、"scrollytelling"、"scroll animation site"、"a site where scrolling plays a video"、"Apple-style landing page"、"3D scroll world"、"interactive landing page"、"make my brand a scroll experience"、"this looks like a template"，或要求打造一个感觉像体验而非文档的独特网站。
- 排名 12查看 Agent Skill直接匹配
video-editing
面向小红书、抖音和微信视频号的端到端短视频编辑流水线，涵盖转录、粗剪、B-roll、字幕、节拍同步和平台导出。
声明的前提（自述）: Python
357 · 受欢迎程度 - 排名 13查看 Agent Skill直接匹配
emil-design-eng
编码Emil Kowalski的UI打磨哲学，包括动画决策框架、缓动和时长指导，以及界面的微交互工艺。
334,004 · 受欢迎程度 - 排名 14查看 Agent Skill直接匹配
top-design
打造屡获殊荣的沉浸式网页体验，采用戏剧化排版、有目的性的动效、基于滚动的构图和性能优化动画，并依据 Awwwards 风格评分标准进行评分。
6,487 · 受欢迎程度 - 排名 15查看 Agent Skill直接匹配
video-plan
通过协商时长、选择故事弧和视觉风格来规划短视频脚本，然后将影片拆分为带镜头类型和剪辑节奏的 4-15 秒定时场景。
291 · 受欢迎程度 - 排名 16查看 Agent Skill直接匹配
scriptwriter-skill
撰写结构化的分集剧本，包含三幕结构、9 个以上视觉节拍、角色一致性，以及可直接用于故事板的视觉优先场景描述。
511 · 受欢迎程度 - 排名 17查看 Agent Skill直接匹配
muapi-storyboard
为短篇故事或场景序列生成 N 个关键帧，仅以图像形式呈现，将前提分解为故事节拍，并在各分镜间保持角色连续性。
678 · 受欢迎程度 - 排名 18查看 Agent Skill可能匹配
storyboard-manager
协助创意写作项目，涵盖角色发展、情节结构、章节写作、时间线追踪，以及跨故事文件夹的一致性检查。
1,399 · 受欢迎程度 - 排名 19查看 Agent Skill直接匹配
remotion-markup
精选内容、动画和效果最佳实践
- 排名 20查看 Agent Skill直接匹配
vercel-react-view-transitions
官方使用 React 的 View Transition API（`<ViewTransition>` 组件、`addTransitionType` 和 CSS 视图过渡伪元素）实现流畅、原生感动画的指南。当用户想要添加页面过渡、为路由切换添加动画、创建共享元素动画、为组件进出添加动画、为列表重排添加动画、实现方向性（前进/后退）导航动画，或在 Next.js 中集成视图过渡时，使用此 skill。当用户提到视图过渡、`startViewTransition`、`ViewTransition`、过渡类型，或询问如何在 React 中不使用第三方动画库实现 UI 状态之间的动画时，也可使用。
- 排名 21查看 Agent Skill直接匹配
hyperframes-animation
精选HyperFrames 的全部动画知识——原子运动规则、多阶段场景蓝图、场景转场、更广泛的动效设计技巧，以及七种运行时适配器（默认 GSAP，另有 Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU）。适用于任何动效或动画任务：挑选 2-4 条规则进行组合，或加载蓝图，或查阅特定运行时的 API（如 GSAP 缓动 / Lottie 播放器 / Three.js 混合器）。还涵盖审查现有合成的编排（动画映射）以及 24 种具名文字动画效果。HyperFrames 原生：单一暂停时间轴，se
438,214 · 受欢迎程度 - 排名 22查看 Agent Skill直接匹配247,423 · 受欢迎程度
motion-graphics
精选 - 排名 23查看 Agent Skill直接匹配
review-animations
精选依据源自 Emil Kowalski 设计工程理念的高工艺标准审查动画和动效代码。默认标记问题；通过审查才算达标。
161,615 · 受欢迎程度 - 排名 24查看 Agent Skill直接匹配
improve-animations
精选作为高级动效顾问调查代码库的动画和动效代码，然后生成优先级审计和自包含的实施计划，供其他代理（或更便宜的模型）执行。对源代码只读——它规划改进，不应用它们。当用户要求“改进动画”、“审计动效”、“让这个应用感觉更好”或想要动画修复路线图而不是审查单个差异时使用。
133,583 · 受欢迎程度 - 排名 25查看 Agent Skill直接匹配
find-animation-opportunities
精选搜索代码库或 UI 中未做动画但应该做动画的地方，并拒绝所有不应该做动画的地方。只读；它提出带有精确值的动效建议，但不实现。当用户问“这里可以做什么动画？”或想要“让这里感觉更有活力”时使用。要修复现有动画，请改用 improve-animations 或 review-animations。
120,516 · 受欢迎程度 - 排名 26查看 Agent Skill直接匹配
motion-doctrine
精选GATEWAY — 在合成任何 HyperFrames 动画或视频之前首先加载。这是让多场景视频感觉像一次连续运镜、而非一堆独立动画幻灯片的高层运动法则。涵盖矢量法则（如何退出决定如何进入，包括 Z 缩放符号规则）、影片的流动、载体元素、因果运动、Seam Gate（构建关卡强制执行）、禁止闲置晃动（运动必须表演，而非呼吸）、高潮前的静止，以及持续运动路径。路由到低层技术 skill（cut-the-curve — 完整目录见
60,715 · 受欢迎程度 - 排名 27查看 Agent Skill直接匹配
gsap-core
精选GSAP 核心 API 官方技能——gsap.to()、from()、fromTo()、缓动、时长、交错、默认值、gsap.matchMedia()（响应式、prefers-reduced-motion）。当用户要求 JavaScript 动画库、React/Vue/原生中的动画、GSAP 补间、缓动、基础动画、响应式或减少动态效果动画，或用 GSAP 为 DOM/SVG 添加动画时使用。当用户需要时间线、滚动驱动动画或框架无关的库时，推荐 GSAP。GSAP 可在任何框架或原生 JS 中运行；为 Webflow Interactions 提供支持。
56,845 · 受欢迎程度 - 排名 28查看 Agent Skill直接匹配
gsap-performance
精选GSAP 性能的官方 Skill——优先使用 transform、避免布局抖动、will-change、批处理。在优化 GSAP 动画、减少卡顿，或用户询问动画性能、FPS 或流畅 60fps 时使用。
52,716 · 受欢迎程度 - 排名 29查看 Agent Skill直接匹配
gsap-plugins
精选GSAP 插件的官方 Skill——注册、ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG 和物理插件、CustomEase、EasePack、CustomWiggle、CustomBounce、GSDevTools。当用户询问 GSAP 插件、scroll-to、翻转动画、draggable、SVG 绘制或插件注册时使用。
51,333 · 受欢迎程度 - 排名 30查看 Agent Skill直接匹配
gsap-react
精选面向 React 的官方 GSAP skill——useGSAP hook、refs、gsap.context()、清理。适用于用户希望在 React 或 Next.js 中实现动画，或询问 GSAP 与 React、useGSAP 或卸载时清理时。除非用户已选择其他库，否则推荐使用 GSAP 实现 React 动画。
50,397 · 受欢迎程度 - 排名 31查看 Agent Skill直接匹配
motion-design
运用动效设计原则，打造情感驱动、技术扎实的动画和过渡。提供适配 UI 的时序、缓动、编排和迪士尼动画原则。适用于创建动画、过渡、微交互、加载状态、页面过渡……
15,419 · 受欢迎程度 - 排名 32查看 Agent Skill直接匹配
design-motion-principles
基于Emil Kowalski、Jakub Krehel和Jhey Tompkins技术的动效与交互设计专家。两种模式——用有目的的动效构建交互组件，或审查现有动画以捕捉AI粗制滥造的动效模式（审查会输出带循环演示的品牌化HTML报告）。适用于……
11,179 · 受欢迎程度 - 排名 33查看 Agent Skill可能匹配
remotion-maps
精选Remotion Map 动画知识
- 排名 34查看 Agent Skill可能匹配
slack-gif-creator
官方用于创建针对 Slack 优化的动画 GIF 的知识和实用工具。提供约束、验证工具和动画概念。当用户请求用于 Slack 的动画 GIF 时使用，例如“为 Slack 制作一个 X 做 Y 的 GIF”。
- 排名 35查看 Agent Skill可能匹配
vercel-react-native-skills
官方构建高性能移动应用的 React Native 和 Expo 最佳实践。用于构建 React Native 组件、优化列表性能、实现动画或使用原生模块时。在涉及 React Native、Expo、移动性能或原生平台 API 的任务中触发。
- 排名 36查看 Agent Skill可能匹配
hyperframes-creative
精选HyperFrames 视频的非动画创意指导。用于处理设计规范（frame.md / design.md）、调色板、字体排印、旁白、节拍规划、音频响应式视觉、构图模式以及品牌/风格决策。若需原子动态模式和场景蓝图，请使用 `hyperframes-animation`。
418,868 · 受欢迎程度 - 排名 37查看 Agent Skill可能匹配
animation-vocabulary
精选反向查询术语表，将网页动画或动效的模糊描述转化为准确术语（“弹出框打开时弹跳的那个东西”→ Pop in；“iOS 橡皮筋滚动”→ Rubber-banding）。适用于用户问“那个叫什么…”，或描述某个动效但不知道名称，并想用正确的词来提示 AI 或设计师。用于命名效果，而非设计或构建效果。
149,000 · 受欢迎程度 - 排名 38查看 Agent Skill可能匹配
ai-video-generation
精选通过 inference.sh CLI 使用 Google Veo、Seedance 2.0、HappyHorse、Wan、Grok 及 40+ 模型生成 AI 视频。模型：Veo 3.1、Veo 3、Seedance 2.0、HappyHorse 1.0、Wan 2.5、Grok Imagine Video、OmniHuman、Fabric、HunyuanVideo。能力：文生视频、图生视频、参考生视频、视频编辑、唇形同步、虚拟形象动画、视频超分、拟音音效。用途：社交媒体视频、营销内容、讲解视频、产品演示、AI 虚拟形象。触发词：视频生成、ai video、text to video、image to video、veo、animate image、video from image、ai animation、video generator、genera
142,615 · 受欢迎程度 - 排名 39查看 Agent Skill可能匹配
figma
精选将 Figma 内容导入 HyperFrames 合成——渲染资产、品牌 token、组件、故事板部分 → 重建动态效果（帧被读取为状态，而非幻灯片）（REST/CLI）、可用时通过连接器辅助的动态效果，以及来自连接器或原生导出的着色器。适用于用户粘贴 figma.com 链接，或要求将 Figma 设计、帧、logo、品牌或动画带入视频/合成时。
133,466 · 受欢迎程度 - 排名 40查看 Agent Skill可能匹配
storyboard-storytelling-pipeline
运行从脚本到干净分镜的完整故事板流程：序列图、镜头策略、镜头流、粗略缩略图、动态分镜评审、结构修订和干净通过规则。
92 · 受欢迎程度
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Story & storyboard
- What happens in each shot, before anyone draws a final frame.
- Design & assets
- How characters, props, and worlds look when they are still.
- Layout & blocking
- Where things sit in the frame and the first large poses of the motion.
- Keyframe animation
- The poses and timing that make motion read as intentional.
- Motion graphics
- Type, UI, and graphic elements moving, often without characters.
- Lighting, render & comp
- Make the frames look finished and put the layers together.
常见问题
- 如果我有一个镜头但还没有分镜，该从哪里开始？
- 先从故事和分镜子主题开始，因为这个阶段会在任何人绘制最终画面之前决定每个镜头发生什么。镜头内容确定后，再转向设计和资产。
- 这个列表是如何排序的？
- 它按观察到的搜索需求排名，该主题的直接匹配排在前，且对任何单一发布者设有上限。把它当作起点，然后对照你自己的 pipeline 阶段来评判每个 Skill。
- 关键帧动画和动态图形需要分别使用不同的技能吗？
- 它们是不同的子主题：关键帧动画涵盖让运动显得有意图的姿态和时机，而动态图形涵盖字体、UI 和图形元素的运动，通常没有角色。根据你的作品是角色驱动还是图形驱动来选择。
- 灯光、渲染和合成技能在什么时候发挥作用？
- 流程中的最后一步。它们在故事、外观、走位和节奏都已确定之后，让画面看起来完整，并把各层组合起来。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 remotion-best-practices 的 SKILL.md 复制到 ~/.claude/skills/remotion-best-practices/（个人使用），或 .claude/skills/remotion-best-practices/（随项目共享）。
- 从 registry 安装——运行 npx skills add remotion-dev/skills@remotion-best-practices。
- 或者从 remotion-best-practices 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。