Communitygithub.com

podo/design-agent-skills

使用 React 创建程序化视频。官方 Remotion 技能包——通过 React 组件组合视频序列,利用弹簧物理动画并渲染为 MP4/GIF。非常适合产品演示、讲解视频和数据驱动视频。

design-agent-skills 是什么?

该技能包是 Remotion 的官方技能合集(名为 podo/design-agent-skills),专为在 AI 代理(如 Claude Code、Cursor 等)中使用而设计。它允许开发者使用 React 组件构建和渲染程序化视频,支持弹簧物理动画、插值以及导出为 MP4、WebM 或 GIF 格式。技能包包含多个子技能,分别涵盖最佳实践、项目脚手架创建、渲染、字幕、交互性、标记、SaaS 集成和版本升级。这对于需要代码控制的精确性的产品演示、数据驱动可视化和讲解动画特别有用。该包通过 `npx skills add remotion-dev/skills` 安装,并根据是否已安装来指导用户使用,提供决策树以简化流程。

兼容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/podo/design-agent-skills/tree/HEAD/skills/remotion

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

remotion

目录存根——完整包:remotion-dev/skills

注意: 上游已将单个 remotion 技能重组为一系列聚焦的子技能包——remotion-best-practices、remotion-create、remotion-render、remotion-captions、remotion-docs、remotion-interactivity、remotion-markup、remotion-saas、remotion-upgrade,以及 mediabunny。安装此包即可获得全部内容。

决策树

  1. 是否已安装该包? 检查:你的代理技能目录是否包含包含非存根内容的 remotion-* 技能。

    • 是 → 调用相关的 remotion-* 技能并继续
    • 否 → 转到步骤 2
  2. 你使用的是哪个代理?

    • Claude Code → npx skills add remotion-dev/skills — 或者以聊天消息形式发送 ! npx skills add …(添加 -g 表示全局安装,省略则为仅项目安装)
    • Cursor → npx skills add remotion-dev/skills
    • 其他 → npx skills add remotion-dev/skills 或参见 GitHub README

安装命令

npx skills add remotion-dev/skills

安装所有 Remotion 子技能。若要仅安装一个,请在其后添加名称,例如 npx skills add remotion-dev/skills --skill remotion-best-practices。

安装后调用

  • 技能名称:remotion-best-practices、remotion-create、remotion-render、remotion-captions、remotion-docs、remotion-interactivity、remotion-markup、remotion-saas、remotion-upgrade、mediabunny
  • 触发短语:“remotion”、“程序化视频”、“React 视频”、“动画视频”、“渲染视频”

功能说明

官方 Remotion 技能包,用于使用 React 创建程序化视频。将视频序列组合为 React 组件,利用弹簧物理和插值进行动画处理,并渲染为 MP4、WebM 或 GIF。子技能涵盖最佳实践、新项目脚手架搭建(remotion-create)、渲染(remotion-render)、字幕、交互性、标记、SaaS 集成和版本升级。最适合需要代码控制精确性的产品演示、数据驱动可视化和讲解动画。

何时不使用

  • 无需视频导出的简单 CSS/JS 动画(使用 gsap-skills 或 framer-motion-skills)
  • 非 React 视频管线(对于 HTML 转视频,使用 hyperframes)

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能