Menu

Not in the top 1,000 by GitHub stars

Boriwatopal/agent-skill-remotion-motion-graphics

Claude agent skill: build kinetic-typography / logo / brand promo motion graphics as code with Remotion (React) and ship an MP4 — 9:16 and 16:9 from one codebase

DesignMarketing

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/remotion-motion-graphics/SKILL.md

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 682f725e0ec9

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 682f725e0ec98eaff2de512f53972cb37e28c447

20GitHub stars
0stars in 7 days
1skill in this repository
0commits in 30 days

Heat

0.3
  • Star growth, last 7 daysNot available
  • Star growth, last 24 hoursNot available
  • Rank movement, last 7 daysNot available
  • Commits, last 30 daysNot available
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Oct 25, 2026Oct 25, 202620

30-day change not yet available: not enough history.

Individual skills in this repository

How it works

remotion-motion-graphics

When your agent uses it

Build kinetic-typography / logo / brand promo motion graphics as code with Remotion (React) and ship an MP4. Covers analysing a reference clip and the brand SVG logo, build a scene-per-beat project with reusable animation helpers, verify by contact sheet, output 9:16 and 16:9, tweak in Remotion Studio. Use this whenever the user wants a "motion", "motion graphics", "animated logo", "logo reveal", "kinetic text", "promo clip", "intro/outro", "Reels/TikTok/YouTube video" made from a brand, a website, an SVG, or "like this video" — including Thai asks such as "ทำ motion", "ทำโมชั่นโลโก้", "ทำคลิปโปรโมท", "อนิเมทโลโก้", "ทำวิดีโอแบบนี้" — and whenever Remotion code needs writing or fixing. Trigger even if they never say Remotion; if they hand over an .svg logo and a sample .mp4 and say "make one like this", this is the skill. (For a 6-scene product-demo built from a website's screenshots, product-demo-video is the narrower fit; for captioning talking-head clips use hyperframes-captioned-video.)

What it loads into context

Frontmatter

272 tokens

Always available to the agent

SKILL.md

2,426 tokens

When the skill is activated

Reference documents

12,776 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. 0. Ground rules from Remotion (read before writing scenes)
  2. 1. Read the brief and the material (before any code)
  3. 2. Scaffold and skeleton
  4. 3. Write the scenes
  5. 4. Verify like an editor, not a compiler
  6. 5. Deliver
  7. Files

Scripts executed separately

  • assets/Main.template.tsx
  • assets/Root.template.tsx
  • assets/anim.ts
  • assets/components/Backgrounds.tsx
  • assets/components/Cursors.tsx
  • assets/components/SvgArt.tsx
  • assets/components/Words.tsx
  • assets/fonts.ts
  • assets/layout.ts
  • assets/theme.template.ts
  • scripts/analyze_reference.sh
  • scripts/check_render.sh
  • scripts/still_frame.sh
  • scripts/svg_to_paths.mjs

Files

  • SKILL.mdcore9,180 bytes
  • SKILL.mdcore9,180 bytes
  • SKILL.mdcore9,180 bytes
  • SKILL.mdcore9,180 bytes
  • assets/Main.template.tsxruns1,150 bytes
  • assets/Root.template.tsxruns554 bytes
  • assets/anim.tsruns1,728 bytes
  • assets/components/Backgrounds.tsxruns1,340 bytes
  • assets/components/Cursors.tsxruns1,355 bytes
  • assets/components/SvgArt.tsxruns4,330 bytes
  • assets/components/Words.tsxruns1,413 bytes
  • assets/fonts.tsruns266 bytes
  • assets/layout.tsruns994 bytes
  • assets/theme.template.tsruns1,578 bytes
  • references/remotion-rules/animations.mddoc1,089 bytes
  • references/remotion-rules/audio.mddoc3,625 bytes
  • references/remotion-rules/charts.mddoc2,942 bytes
  • references/remotion-rules/compositions.mddoc3,794 bytes
  • references/remotion-rules/fonts.mddoc3,484 bytes
  • references/remotion-rules/images.mddoc2,791 bytes
  • references/remotion-rules/light-leaks.mddoc2,305 bytes
  • references/remotion-rules/sequencing.mddoc2,746 bytes
  • references/remotion-rules/sfx.mddoc867 bytes
  • references/remotion-rules/text-animations.mddoc700 bytes
  • references/remotion-rules/timing.mddoc4,470 bytes
  • references/remotion-rules/transitions.mddoc5,816 bytes
  • references/remotion-rules/videos.mddoc3,509 bytes
  • references/scene-patterns.mddoc7,376 bytes
  • references/verification-and-gotchas.mddoc3,386 bytes
  • scripts/analyze_reference.shruns1,100 bytes
  • scripts/check_render.shruns951 bytes
  • scripts/still_frame.shruns277 bytes
  • scripts/svg_to_paths.mjsruns3,643 bytes
Read SKILL.md

# Motion graphics with Remotion

Code-driven video: every frame is a React render of `useCurrentFrame()`, so
timing is exact, edits are cheap, and the same scenes can output any aspect
ratio. The craft is in three places: **reading the source material well**,
**a project skeleton that keeps timing and layout in one place**, and **a
verification loop that looks at real frames**. This file is the workflow;
the details live in `references/` and reusable code in `assets/` and
`scripts/`.

## 0. Ground rules from Remotion (read before writing scenes)
`references/remotion-rules/` holds the official rule files (animations,
timing, text-animations, sequencing, transitions, compositions, fonts,
images, charts, audio, sfx, videos, light-leaks). Load `animations.md`,
View the complete source on GitHub

Skills included

  • remotion-motion-graphics

Repository facts

License
MIT
Created
Sep 13, 2026
Last pushed
Sep 13, 2026
Forks
2
Open issues
0
Project activity
Active

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 3 notes
  • skills/remotion-motion-graphics/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/remotion-motion-graphics/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/remotion-motion-graphics/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 38 signals by file

skills/remotion-motion-graphics/SKILL.md

  • Network accessline 40
    with one scene component per beat. Match its rhythm; you are cloning    motion, not content. 2. **Brand**: fetch the site (`curl -sL -A "Mozilla/5.0" <url>`) for the
  • Network accessline 41
    motion, not content. 2. **Brand**: fetch the site (`curl -sL -A "Mozilla/5.0" <url>`) for the    tagline, product names, real numbers, and font (`grep -oi "inter\|prompt\|kanit"`),
  • Network accessline 42
    2. **Brand**: fetch the site (`curl -sL -A "Mozilla/5.0" <url>`) for the

skills/remotion-motion-graphics/assets/Main.template.tsx

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/Root.template.tsx

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/anim.ts

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/components/Backgrounds.tsx

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/components/Cursors.tsx

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/components/SvgArt.tsx

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/components/Words.tsx

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/fonts.ts

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/layout.ts

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/assets/theme.template.ts

  • Executable scriptline 1
    Executable file

skills/remotion-motion-graphics/references/remotion-rules/audio.md

  • Network accessline 35
    <Audio src="https://remotion.media/audio.mp3" />

skills/remotion-motion-graphics/references/remotion-rules/charts.md

  • Network accessline 60
    Install: `npx remotion add @remotion/paths`   Docs: https://remotion.dev/docs/paths.md
  • Network accessline 61
    Docs: https://remotion.dev/docs/paths.md

skills/remotion-motion-graphics/references/remotion-rules/compositions.md

  • Network accessline 111
    MyCompositionProps > = async ({ props, abortSignal }) => {   const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
  • Network accessline 112
    > = async ({ props, abortSignal }) => {   const data = await fetch(`https://api.example.com/video/${props.videoId}`, {     signal: abortSignal,
  • Network accessline 113
    const data = await fetch(`https://api.example.com/video/${props.videoId}`, {

skills/remotion-motion-graphics/references/remotion-rules/images.md

  • Network accessline 57
    <Img src="https://example.com/image.png" />

skills/remotion-motion-graphics/references/remotion-rules/sfx.md

  • Network accessline 13
    <Audio src={"https://remotion.media/whoosh.wav"} />;
  • Network accessline 18
    - `https://remotion.media/whoosh.wav`
  • Network accessline 19
    - `https://remotion.media/whip.wav`
  • Network accessline 20
    - `https://remotion.media/page-turn.wav`
  • Network accessline 21
    - `https://remotion.media/switch.wav`
  • Network accessline 22
    - `https://remotion.media/mouse-click.wav`
  • Network accessline 23
    - `https://remotion.media/shutter-modern.wav`
  • Network accessline 24
    - `https://remotion.media/shutter-old.wav`
  • Network accessline 25
    - `https://remotion.media/ding.wav`
  • Network accessline 26
    - `https://remotion.media/bruh.wav`
  • Network accessline 27
    - `https://remotion.media/vine-boom.wav`
  • Network accessline 28
    - `https://remotion.media/windows-xp-error.wav`
  • Network accessline 30
    For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

skills/remotion-motion-graphics/references/remotion-rules/videos.md

  • Network accessline 36
    <Video src="https://remotion.media/video.mp4" />

skills/remotion-motion-graphics/scripts/analyze_reference.sh

  • Executable scriptline 1
    #!/usr/bin/env bash

skills/remotion-motion-graphics/scripts/check_render.sh

  • Executable scriptline 1
    #!/usr/bin/env bash

skills/remotion-motion-graphics/scripts/still_frame.sh

  • Executable scriptline 1
    #!/usr/bin/env bash

skills/remotion-motion-graphics/scripts/svg_to_paths.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Signal confidence: 38 facts

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md skills/remotion-motion-graphics/SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md skills/remotion-motion-graphics/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/remotion-motion-graphics/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/remotion-motion-graphics/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/remotion-motion-graphics/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/remotion-motion-graphics/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

Vincentwei1021/video-shotcraft

Create cinematic product videos from frontend projects or webpages with Remotion, real page captures, shot cards, the Ink Press template, beat sync and sound design. Use for full …

17.5kGitHub stars

Vincentwei1021/video-talkcraft

终极口播视频 skill：中文口播稿 + 成品配音 → CPU 字级时间戳 → SHOTBOOK 层矩阵分镜 → Remotion 电影感成片（横屏默认/竖屏）。当用户要"做口播视频"、"解说/科普视频"、"把文案变成视频"、"…

2.1kGitHub stars

talsiach/take-one

Claude Code skill that makes launch videos, ads and music videos from one line: idea, script, visuals, voice, music, edit and review, then a review room where your notes make the …

213GitHub stars

BubbleBrainBB/BB-Video

An agent skill that makes videos in pure code — narrated explainers and product promos in 32 visual styles (whiteboard, ink-wash, shadow puppets, pixel art, isometric worlds, movi…

145GitHub stars

frankxai/awesome-motion-design-agent-skills

Curated motion design agent skills: GSAP, Motion, Remotion, Lottie and Rive for web animation, programmatic video and motion QA. Installable in Claude Code, Codex, Copilot.

98GitHub stars

Mort1d/motion-graphics-skills

Showreel-grade motion graphics from code, with an original soundtrack for every video. An Agent Skill for Claude Code, Codex, Cursor and other agents.

78GitHub stars