New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Remotion Video Creation

by affaan-m in affaan-m/ECC

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

MITAuto-check passedMedia & Creative

Install Remotion Video Creation

skills CLI
$ npx skills add affaan-m/ECC --skill remotion-video-creation -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install affaan-m/ECC remotion-video-creation --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/docs/ja-JP/skills/remotion-video-creation .claude/skills/remotion-video-creation && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
remotion-video-creation
GitHub stars
276k
Token cost
~680 tokens
SKILL.md length
112 words
Files
1
Skills in repo
683
Repo updated
First seen
Licence
MIT

At a glance

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

  • Tasks that involve Video production
  • SKILL.md covers 使用場面 and 使い方
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Remotion Video Creation is an agent skill from affaan-m/ECC. Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

Its SKILL.md is about 680 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Video production. It works with Remotion, React, Tailwind CSS and Lottie. The repository describes itself as: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. The licence is MIT.

When your agent uses it

  • Tasks that involve Video production

Example prompts

  • “/remotion-video-creation”

What it can do on your machine

Read from SKILL.md and the folder at commit 4eb71d9. 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

    No scripts in the folder and no shell commands in SKILL.md.

    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

Remotion Video Creation loads about 680 tokens when it runs. Until then it costs about 28 tokens; SKILL.md has 112 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~28
When it runs · the whole SKILL.md, loaded when a task matches
~680

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from affaan-m/ECC at commit 4eb71d9, republished under its MIT licence (© affaan-m). 112 words, ~680 tokens.

Download SKILL.mdSave it as .claude/skills/remotion-video-creation/SKILL.md (or your agent's skills folder).
name
remotion-video-creation
description
Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。
metadata.tags
remotion, video, react, animation, composition, three.js, lottie

使用場面

Remotion のコードを扱い、ドメイン固有の知識が必要な場合にこのスキルを使用してください。

使い方

詳細な説明とコード例については、各ルールファイルをお読みください：

  • rules/3d.md - Three.js と React Three Fiber を使用して Remotion で 3D コンテンツを作成する
  • rules/animations.md - Remotion の基本的なアニメーションスキル
  • rules/assets.md - Remotion で画像、動画、音声、フォントをインポートする
  • rules/audio.md - Remotion での音声とサウンドの使用——インポート、トリミング、音量、速度、ピッチ
  • rules/calculate-metadata.md - コンポジションの長さ、サイズ、プロパティを動的に設定する
  • rules/can-decode.md - Mediabunny を使用してブラウザが動画をデコードできるか確認する
  • rules/charts.md - Remotion のチャートとデータビジュアライゼーションパターン
  • rules/compositions.md - コンポジション、静止画、フォルダー、デフォルトプロパティ、動的メタデータの定義
  • rules/display-captions.md - TikTok スタイルのページと単語ハイライトに対応した Remotion での字幕表示
  • rules/extract-frames.md - Mediabunny を使用して指定タイムスタンプの動画フレームを抽出する
  • rules/fonts.md - Remotion で Google フォントとローカルフォントを読み込む
  • rules/get-audio-duration.md - Mediabunny を使用して音声ファイルの長さ（秒）を取得する
  • rules/get-video-dimensions.md - Mediabunny を使用して動画ファイルの幅と高さを取得する
  • rules/get-video-duration.md - Mediabunny を使用して動画ファイルの長さ（秒）を取得する
  • rules/gifs.md - Remotion のタイムラインと同期した GIF を表示する
  • rules/images.md - Img コンポーネントを使用して Remotion に画像を埋め込む
  • rules/import-srt-captions.md - @remotion/captions を使用して .srt 字幕ファイルを Remotion にインポートする
  • rules/lottie.md - Remotion に Lottie アニメーションを埋め込む
  • rules/measuring-dom-nodes.md - Remotion で DOM 要素のサイズを測定する
  • rules/measuring-text.md - テキストサイズの測定、コンテナへのテキスト適合、オーバーフローの確認
  • rules/sequencing.md - Remotion のシーケンスパターン——遅延、トリミング、項目の長さ制限
  • rules/tailwind.md - Remotion で TailwindCSS を使用する
  • rules/text-animations.md - Remotion のタイポグラフィとテキストアニメーションパターン
  • rules/timing.md - Remotion の補間曲線——線形、イージング、スプリングアニメーション
  • rules/transcribe-captions.md - Remotion で字幕を生成するための音声文字起こし
  • rules/transitions.md - Remotion のシーントランジションパターン
  • rules/trimming.md - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
  • rules/videos.md - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ

© affaan-m, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in docs/ja-JP/skills/remotion-video-creation of affaan-m/ECC.

Open the folder on GitHubat commit 4eb71d9

Compare with similar skills

Remotion Video Creation 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.

Remotion Video Creation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Remotion Video Creation this skillaffaan-m/ECC276k—~680Automated safety check: PassMIT
Remotion Best Practicesbuainoai/remotion-skills123—~703Automated safety check: PassNone
Remotion Createremotion-dev/remotion63k—~699Automated safety check: PassCustom licence
Remotion Best Practicesguanyang/open-agent-hub977—~3.1kAutomated safety check: PassMIT
Remotion VideoMathews-Tom/armory329—~3.1kAutomated safety check: PassMIT
Remotion Createguanyang/open-agent-hub9771 repos~353Automated safety check: PassMIT

Similar skills

  • Remotion Best Practices

    buainoai/remotion-skills

    Remotion 最佳实践 - 使用 React 创建视频

    123 GitHub stars~703 tokensUpdated 8 mo ago
    Media & CreativeAuto-check passed

  • Remotion Create

    remotion-dev/remotion

    Official

    Create a new Remotion video

    63k GitHub stars~699 tokensUpdated 2 days ago
    Media & CreativeAuto-check passed

  • Remotion Best Practices

    guanyang/open-agent-hub

    Best practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to MP4).

    977 GitHub stars~3.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • Remotion Video

    Mathews-Tom/armory

    Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS.

    329 GitHub stars~3.1k tokensUpdated 5 days ago
    Media & CreativeAuto-check passed

  • Remotion Create

    guanyang/open-agent-hub

    Creating a new Remotion video

    977 GitHub starsUsed in 1 repo~353 tokens
    Media & CreativeAuto-check passed

  • Remotion Create

    sickn33/agentic-awesome-skills

    Create a new Remotion video

    47k GitHub starsUsed in 1 repo~785 tokens
    Media & CreativeAuto-check: notes

More from affaan-m/ECC

All 682 skills in this repo

  • Skill Stocktake

    affaan-m/ECC

    Audits your installed Claude skills and commands for quality, with a quick mode for recently changed skills and a full mode that evaluates all of them through subagents.

    277k GitHub starsUsed in 5 repos~3.1k tokens
    Auto-check passed

  • VideoDB Video Search and Editing

    affaan-m/ECC

    Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.

    277k GitHub starsUsed in 3 repos~3.5k tokens
    Auto-check: notes

  • Docs Governance

    affaan-m/ECC

    Route broad documentation-governance requests to existing ECC skills and run an opt-in, read-only audit of mapped documentation roles, links, ADR indexes, and evidence references.

    277k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Rules Distillation

    affaan-m/ECC

    Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.

    277k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed

  • Master Agreement Generator

    affaan-m/ECC

    Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.

    277k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Frontend Design Direction

    affaan-m/ECC

    Set an ECC-specific frontend design direction for production UI work.

    277k GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed

Works with

Categories

Questions about Remotion Video Creation

What does Remotion Video Creation do?

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。. Remotion Video Creation is an agent skill from affaan-m/ECC.

When should I use Remotion Video Creation?

Remotion Video Creation fits situations like: tasks that involve Video production.

How do I install Remotion Video Creation in Claude Code?

Run `npx skills add affaan-m/ECC --skill remotion-video-creation -a claude-code`. Or copy the skill folder (docs/ja-JP/skills/remotion-video-creation in affaan-m/ECC) into .claude/skills/remotion-video-creation in your project. Claude Code loads it when a task matches its description.

How do I install Remotion Video Creation in Codex?

Run `npx skills add affaan-m/ECC --skill remotion-video-creation -a codex`. Or copy the skill folder (docs/ja-JP/skills/remotion-video-creation in affaan-m/ECC) into .agents/skills/remotion-video-creation in your project. Codex loads it when a task matches its description.

Can I use Remotion Video Creation 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 affaan-m/ECC --skill remotion-video-creation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/remotion-video-creation, .gemini/skills/remotion-video-creation, .github/skills/remotion-video-creation and .opencode/skills/remotion-video-creation in your project.

What does Remotion Video Creation need to run?

SKILL.md names no scripts, command-line tools or credentials: Remotion Video Creation is instructions for the agent only.

Does Remotion Video Creation 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 Remotion Video Creation 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. Review the folder before installing.

What licence does Remotion Video Creation use?

Remotion Video Creation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Remotion Video Creation use?

About 680 tokens (SKILL.md is roughly 2.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Remotion Video Creation?

Skills that share tags, products or a category with Remotion Video Creation: Remotion Best Practices (buainoai/remotion-skills, 123 stars), Remotion Create (remotion-dev/remotion, 63k stars), Remotion Best Practices (guanyang/open-agent-hub, 977 stars) and Remotion Video (Mathews-Tom/armory, 329 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Remotion Video Creation?

affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 276,111 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 10, 2026.

Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.