跳到正文
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(原文)

安装前可以查看交给 AI 代理的指令内容。

🚨 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 / 1000 字

此表单受 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 的全部技能

报告此技能的问题