Kinetic-typography/ロゴ/ブランドプロモーションモーショングラフィックス*asコード**とRemotion(React)をビルドし、MP4を出荷するためのクロードスキル。 全パスをカバーしています。参照クリップとブランドのSVGロゴ、再利用可能なアニメーションヘルパーとシーンごとのプロジェクト、認証によるコンタクトシートループ、1つのコードベースから9:16と16:9の出力、および調整のためのRemotion Studioを読みます。

参照promoの動作を100able.comにクローニングしながら構築 — ワークフローは一般的で、ビデオは含まれていません。

インストール

ロードコード(CLI /デスクトップアプリ) — スキルをあなたのスキルフォルダにクローンします。

1つのプロジェクトのみ:[skills/remotion-motion-graphics]を[ /.claude/skills/]にコピーします。

claude.ai / Cowork — ダウンロードdist/remotion-motion-graphics.skill(または最新のリリースからそれをつかむ)し、設定→機能→スキルにアップロードします。

それからちょうどモーションピースを尋ねます: スキルは、"このSVG"からアニメーションロゴを作る、“このビデオのようなプロモーションクリップを作る”、*“、”、または任意のリモーションコードの作業.

フォルダー構造

ワークフローの仕組み

1.**材料を最初に読みなさい.

Remotion Motion Graphics - Agent Skill

A Claude skill for building kinetic-typography / logo / brand promo motion graphics as code with Remotion (React) and shipping an MP4. It covers the whole path: reading a reference clip and a brand’s SVG logo, a scene-per-beat project with reusable animation helpers, a verify-by-contact-sheet loop, both 9:16 and 16:9 outputs from one codebase, and Remotion Studio for tweaks.

Built while cloning the motion of a reference promo for hundredable.com — the workflow is general, the video is not included.

Install

Claude Code (CLI / desktop app) — clone the skill into your skills folder:

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

Or for one project only: copy skills/remotion-motion-graphics into /.claude/skills/.

claude.ai / Cowork — download dist/remotion-motion-graphics.skill (or grab it from the latest release) and upload it in Settings → Capabilities → Skills.

Then just ask for a motion piece: the skill triggers on requests like “make an animated logo from this SVG”, “make a promo clip like this video”, “ทำโมชั่นโลโก้”, or any Remotion code work.

Folder Structure

skills/remotion-motion-graphics/
  SKILL.md                              # The workflow: read material → scaffold → scenes → verify → deliver
  assets/                               # Starter code to copy into src/
    theme.template.ts                   #   brand colours, PORTRAIT/LANDSCAPE presets, named scene durations
    layout.ts                           #   useLayout() — every position derives from the frame size
    anim.ts                             #   easing curves, prog(), springAt(), riseStyle(), typed()
    fonts.ts, Main.template.tsx, Root.template.tsx
    components/
      Backgrounds.tsx                   #   LightBg / DarkBg with brand glow
      Cursors.tsx                       #   arrow + dot cursors that spring between targets
      Words.tsx                         #   word-by-word reveal with optional exit
      SvgArt.tsx                        #   animate SVG artwork per path (letter pop, character bounce)
  scripts/
    analyze_reference.sh                # contact sheets from a reference video → beat map
    svg_to_paths.mjs                    # SVG → TypeScript path data + bounding-box report
    check_render.sh                     # low-res render + contact sheets for a composition
    still_frame.sh                      # one frame from an MP4 at a timestamp
  references/
    scene-patterns.md                   # 16 motion patterns with the timings that worked
    verification-and-gotchas.md         # the check loop and the traps met in practice