본문으로 건너뛰기
cccskills
무료GitHub에 공개

Remotion

Create explainer clips, short videos, and animated overlays with React code. Define scenes and motion by frame number, then render an MP4 that can be regenerated after changes to the content, timing, or visual design.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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).

설치 방법 보기

이럴 때 유용합니다

  • Turn a process explanation into an animated video
  • Create a short video from supplied content
  • Build animated overlays for video
  • Update content and render the video again

포함된 파일(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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Compare a component's own design needs with the goals of the larger system through three structured passes. The result identifies conflicts, recommends an appropriate scope, and assesses whether the proposed design fits the whole.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Choosing between a service, a library, and inline code
  • Comparing feature requests with product goals
  • Checking how new components fit an existing system
danielmiessler/LifeOS2만2026년 9월 4일 업데이트

Aphorisms

무료

Find quotes that fit a text’s themes, with attribution and a short reason for each suggestion. Add sourced quotes, research thinkers, and organize a quote collection by theme and usage history to avoid repetition.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Finding a fitting quote for a newsletter
  • Saving sourced quotes without duplicates
  • Researching a thinker’s quotes by theme
danielmiessler/LifeOS2만2026년 9월 4일 업데이트

Apify

무료

Collect social posts, business listings, and product reviews through Apify actors, ready-made data collection tools. Filter results by date, rating, or engagement in code before sending relevant records to the AI for research or lead generation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Find competitors' most popular social posts
  • Build a contact list of local businesses
  • Extract recent negative Amazon reviews
danielmiessler/LifeOS2만2026년 9월 4일 업데이트

Art

무료

Create blog illustrations, technical diagrams, comparisons, comics, and icons through workflows tailored to each format. The skill guides composition, color, and model selection, then stages generated images for review before they are used in a project.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating blog header illustrations
  • Explaining a system with a technical diagram
  • Visualizing comparisons and timelines
danielmiessler/LifeOS2만2026년 9월 4일 업데이트

ArXiv

무료

Find arXiv papers by topic, research category, or paper ID. Retrieve titles, authors, abstracts, and links, check new submissions, and add AlphaXiv's AI-generated overviews when available to help decide which papers to read.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking new AI and machine learning papers
  • Finding papers on a specific research topic
  • Looking up a paper by its ID or arXiv URL
danielmiessler/LifeOS2만2026년 9월 4일 업데이트

Clean spoken recordings by transcribing words, identifying filler and false starts, and joining cuts with short audio fades. Preview proposed edits, reduce breaths, repair noise-gate clicks, and optionally use Cleanvoice for additional cloud processing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Removing filler words and long silences from a podcast
  • Reviewing proposed edits before applying them
  • Repairing clicks caused by a noise gate
danielmiessler/LifeOS2만2026년 9월 4일 업데이트

danielmiessler의 스킬 모두 보기

이 스킬의 문제 신고