本文へ移動
cccskills
無料GitHub で公開

Remotion

Creates programmatic video with React via Remotion — compositions, sequences, and motion graphics animated with useCurrentFrame() and rendered to MP4. USE WHEN video, animation, motion graphics, video rendering, React video, render video, animate content, make a short, create animations, video overlay, explainer video, animated explainer, content to video, programmatic video. NOT FOR static images, diagrams, or illustrations (use Art), tight-cut filler removal from raw talking-head recordings (that is video editing, not motion graphics), or audio-only podcast cleaning (use AudioEditor).

インストール方法を見る

含まれるファイル(41)

  • SKILL.md5.2 KB
  • ArtIntegration.md2.8 KB
  • CriticalRules.md4.4 KB
  • Patterns.md3.4 KB
  • Tools/package.json582 B
  • Tools/Ref-3d.md2.1 KB
  • Tools/Ref-ai-pipeline.md4.4 KB
  • Tools/Ref-animations.md790 B
  • Tools/Ref-assets.md1.6 KB
  • Tools/Ref-audio.md3.6 KB
  • Tools/Ref-calculate-metadata.md2.9 KB
  • Tools/Ref-can-decode.md1.5 KB
  • Tools/Ref-charts.md1.7 KB
  • Tools/Ref-compositions.md3.4 KB
  • Tools/Ref-display-captions.md3.5 KB
  • Tools/Ref-elevenlabs-captions.md2.2 KB
  • Tools/Ref-extract-frames.md5.4 KB
  • Tools/Ref-fonts.md3.2 KB
  • Tools/Ref-get-audio-duration.md1.3 KB
  • Tools/Ref-get-video-dimensions.md1.6 KB
  • Tools/Ref-get-video-duration.md1.3 KB
  • Tools/Ref-gifs.md3.8 KB
  • Tools/Ref-images.md2.9 KB
  • Tools/Ref-import-srt-captions.md1.9 KB
  • Tools/Ref-lambda.md3.7 KB
  • Tools/Ref-lottie.md1.6 KB
  • Tools/Ref-measuring-dom-nodes.md974 B
  • Tools/Ref-measuring-text.md2.8 KB
  • Tools/Ref-sequencing.md2.3 KB
  • Tools/Ref-tailwind.md422 B
  • Tools/Ref-text-animations.md614 B
  • Tools/Ref-timing.md4.1 KB
  • Tools/Ref-transcribe-captions.md850 B
  • Tools/Ref-transitions.md3.5 KB
  • Tools/Ref-trimming.md1.2 KB
  • Tools/Ref-videos.md3.8 KB
  • Tools/Render.ts13.3 KB
  • Tools/Theme.ts4.5 KB
  • Tools/tsconfig.json459 B
  • Workflows/ContentToAnimation.md23.3 KB
  • Workflows/GeneratedContentVideo.md4.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

🚨 MANDATORY: Voice Notification (REQUIRED BEFORE ANY ACTION)

You MUST send this notification BEFORE doing anything else when this skill is invoked.

  1. Send voice notification:

    curl -s -X POST http://localhost:31337/notify \
      -H "Content-Type: application/json" \
      -d '{"message": "Running the WORKFLOWNAME workflow in the Remotion skill to ACTION"}' \
      > /dev/null 2>&1 &
    
  2. Output text notification:

    Running the **WorkflowName** workflow in the **Remotion** skill to ACTION...
    

This is not optional. Execute this curl command immediately upon skill invocation.

Remotion

What It Does

Creates video programmatically with React. You describe the composition in code; Remotion renders it to MP4. Every frame is driven by useCurrentFrame() rather than CSS animation, so the output is deterministic and reproducible. It pulls LifeOS theme constants and Art-skill aesthetics for visual consistency, and stages output to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) for preview first.

The Problem

Making a short explainer or motion-graphics clip the usual way means a video editor, a timeline, and a lot of manual keyframing — slow, hard to version, and impossible to regenerate when the content changes. If the script changes, you redo the edit by hand. Building video as code fixes that: the composition is a React component, animation is a function of the frame number, and re-rendering after an edit is one command. This skill is the code path for video, the way the Art skill is the code path for images.

How It Works

Define a composition as React, animate with useCurrentFrame(), render with bunx remotion render. Rendering is CPU-intensive, so it runs in the background. See the Quick Reference and Tools below for the render command, theme integration, and pattern files.

Customization

Before executing, check for user customizations at: ~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Remotion/

Workflow Routing

WorkflowTriggerFile
ContentToAnimation"animate this", "create animations for", "video overlay"Workflows/ContentToAnimation.md
GeneratedContentVideo"generate video", "AI video", "content to video", "make a short"Workflows/GeneratedContentVideo.md

Quick Reference

  • Theme: Always use LIFEOS_THEME from Tools/Theme.ts
  • Art Integration: Load Art preferences before creating content
  • Critical: NO CSS animations - use useCurrentFrame() only
  • Output: Always to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) first
  • CLI: bunx always (never npx)

Render command:

bunx remotion render {composition-id} "${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}"/{name}.mp4

Full Documentation

  • Art integration: ArtIntegration.md - theme constants, color mapping
  • Common patterns: Patterns.md - code examples, presets
  • Critical rules: CriticalRules.md - what NOT to do
  • Detailed reference: Tools/Ref-*.md - 31 pattern files covering core Remotion + Lambda + ElevenLabs captions + AI pipeline

Tools

ToolPurpose
Tools/Render.tsRender, list compositions, create projects
Tools/Theme.tsLifeOS theme constants derived from Art

Links

Gotchas

  • React-based video — component patterns differ from web React. Remotion has specific composition, sequence, and timing APIs.
  • Rendering is CPU-intensive. Use run_in_background: true for render commands.
  • Output goes to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) first for preview. Same as images.
  • NOT for static images — use Art skill for illustrations, diagrams, thumbnails.

Examples

Example 1: Create animated explainer

User: "create a video showing how the Algorithm works"
→ Builds React composition with Remotion
→ Defines sequences, animations, timing
→ Renders to MP4 in background
→ Output to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) for preview

Execution Log

After completing any workflow, append a single JSONL entry:

echo '{"ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","skill":"Remotion","workflow":"WORKFLOW_USED","input":"8_WORD_SUMMARY","status":"ok|error","duration_s":SECONDS}' >> ~/.claude/LIFEOS/MEMORY/SKILLS/execution.jsonl

Replace WORKFLOW_USED with the workflow executed, 8_WORD_SUMMARY with a brief input description, and SECONDS with approximate wall-clock time. Log status: "error" if the workflow failed.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

3-pass scope oscillation that holds a question constant while shifting zoom — narrow/tactical, wide/strategic, then synthesis — to surface design tensions, scope recommendations, and coherence assessments invisible at any single zoom level. USE WHEN aperture oscillation, oscillate scope, zoom in and out, tactical vs strategic, scope framing, design tension, system coherence check, local vs global design, wrong scope, scope negotiation. NOT FOR lens rotation across angles (use IterativeDepth).

日本語の概要は準備中です。原文の説明を表示しています。

danielmiessler/LifeOS1.9万2026年9月4日 更新

Aphorisms

無料

Curated aphorism collection with CRUD — content-based matching, themed search, thinker research, DB maintenance. Quotes organized by author/theme/context/usage to prevent repetition. Four workflows: FindAphorism, AddAphorism, ResearchThinker, SearchAphorisms. Themes: Stoicism, Wisdom, Truth-seeking, Excellence, Resilience, Curiosity. USE WHEN aphorism, quote, find a quote, research thinker, add aphorism, quote for newsletter, what did X say about, quote bank. NOT FOR creative writing or social posts.

日本語の概要は準備中です。原文の説明を表示しています。

danielmiessler/LifeOS1.9万2026年9月4日 更新

Apify

無料

Scrapes social platforms, business data, and e-commerce via Apify actors — Instagram, LinkedIn, TikTok, YouTube, Facebook, Google Maps, Amazon, and web crawls — filtering in code. USE WHEN scrape Instagram, scrape LinkedIn, scrape TikTok, scrape YouTube, scrape Facebook, Google Maps leads, Amazon reviews, business intelligence, multi-platform social listening, competitive analysis, lead generation, social monitoring, Apify actors, web crawl, extract contacts. NOT FOR X/Twitter account operations like posting, threads, or bookmarks (those need a dedicated X API client), 4-tier progressive scraping with proxy escalation (use BrightData), or real-Chrome bot bypass and computer use (use Interceptor).

日本語の概要は準備中です。原文の説明を表示しています。

danielmiessler/LifeOS1.9万2026年9月4日 更新

Art

無料

Static visual content across 20+ formats — diagrams, mermaid, infographics, D3 dashboards, comics, icons, wallpaper — via Nano Banana Pro (default), Nano Banana, and Flux. USE WHEN art, illustration, diagram, flowchart, infographic, header image, blog social thumbnail, visualize, generate image, mermaid, architecture diagram, comic, icon, blog art, framework diagram, D3 chart, remove background, wallpaper. NOT FOR locked house-style YouTube/channel/video thumbnails, video or animation (use Remotion), or web UI design and integrated frontend layout (use Webdesign).

日本語の概要は準備中です。原文の説明を表示しています。

danielmiessler/LifeOS1.9万2026年9月4日 更新

ArXiv

無料

Search and retrieve arXiv academic papers by topic, category, or paper ID — with AlphaXiv-enriched AI-generated overviews. Uses arXiv Atom API across cs.AI/cs.LG/cs.CL/cs.CR/cs.MA/cs.SE/cs.IR. Three workflows: Latest, Search, Paper. USE WHEN arxiv, papers, latest papers, research papers, recent ML papers, paper lookup, summarize paper, latest LLM papers, AI safety papers, cs.AI latest. NOT FOR general research (Research), URL parsing, or annual reports.

日本語の概要は準備中です。原文の説明を表示しています。

danielmiessler/LifeOS1.9万2026年9月4日 更新

AI audio editing pipeline: Whisper word-level transcription → Claude segment classification (KEEP/CUT_FILLER/CUT_FALSE_START/CUT_STUTTER/CUT_DEAD_AIR) → ffmpeg with 40ms qsin crossfades and room-tone fill → optional Cleanvoice cloud polish; plus GateScan/GateRepair for noise-gate ticking artifacts. Modes: --preview, --aggressive, --polish. Workflow: Clean. USE WHEN clean audio, edit audio, remove filler words, clean podcast, remove ums, cut dead air, polish audio, trim recording, cut stutters, ticking audio, clicking audio, audio clicks, gate artifacts, popping audio. NOT FOR video composition (use Remotion).

日本語の概要は準備中です。原文の説明を表示しています。

danielmiessler/LifeOS1.9万2026年9月4日 更新

danielmiessler のスキルをすべて見る

このスキルの問題を報告する