무료GitHub에 공개

remotion-video-creation

Create videos in React with Remotion using focused implementation guidance and code examples. The skill covers animation, audio, captions, charts, 3D content, and scene transitions, along with handling media assets and timing.

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

원문원문 설명 보기

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more. Use when building video in React with Remotion — animations, audio, captions, charts, or transitions.

affaan-m/ECC

설치 방법 보기

이럴 때 유용합니다

Creating animated text and scene transitions
Adding audio and subtitles to videos
Showing charts and 3D content in videos
Adjusting media timing and playback

포함된 파일(32)

SKILL.md3.6 KB
rules/3d.md2.2 KB
rules/animations.md784 B
rules/assets.md1.6 KB
rules/assets/charts-bar-chart.tsx3.3 KB
rules/assets/text-animations-typewriter.tsx2.1 KB
rules/assets/text-animations-word-highlight.tsx2.3 KB
rules/audio.md3.7 KB
rules/calculate-metadata.md2.9 KB
rules/can-decode.md1.5 KB
rules/charts.md1.7 KB
rules/compositions.md3.4 KB
rules/display-captions.md3.6 KB
rules/extract-frames.md5.4 KB
rules/fonts.md3.4 KB
rules/get-audio-duration.md1.3 KB
rules/get-video-dimensions.md1.6 KB
rules/get-video-duration.md1.3 KB
rules/gifs.md3.8 KB
rules/images.md2.7 KB
rules/import-srt-captions.md2.1 KB
rules/lottie.md1.7 KB
rules/measuring-dom-nodes.md973 B
rules/measuring-text.md2.9 KB
rules/sequencing.md2.3 KB
rules/tailwind.md423 B
rules/text-animations.md700 B
rules/timing.md3.8 KB
rules/transcribe-captions.md856 B
rules/transitions.md3.6 KB
rules/trimming.md1.2 KB
rules/videos.md3.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

How to use

Read individual rule files for detailed explanations and code examples:

rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
rules/animations.md - Fundamental animation skills for Remotion
rules/assets.md - Importing images, videos, audio, and fonts into Remotion
rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
rules/charts.md - Chart and data visualization patterns for Remotion
rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
rules/display-captions.md - Displaying captions in Remotion with TikTok-style pages and word highlighting
rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
rules/fonts.md - Loading Google Fonts and local fonts in Remotion
rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
rules/images.md - Embedding images in Remotion using the Img component
rules/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captions
rules/lottie.md - Embedding Lottie animations in Remotion
rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
rules/tailwind.md - Using TailwindCSS in Remotion
rules/text-animations.md - Typography and text animation patterns for Remotion
rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
rules/transcribe-captions.md - Transcribing audio to generate captions in Remotion
rules/transitions.md - Scene transition patterns for Remotion
rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch

리뷰

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

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

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

같은 저장소의 스킬

accessibility

무료

Design and audit interfaces for Web, iOS, and Android using WCAG 2.2 accessibility guidance. Check screen-reader labels, keyboard navigation, contrast, and control sizes to identify barriers and guide implementation for people using assistive technology.

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

Adding descriptive labels to icon-only buttons
Reviewing keyboard navigation and modal focus
Checking contrast and control sizes

affaan-m/ECC28.3만2026년 10월 16일 업데이트

agent-architecture-audit

무료

Investigate unreliable AI agents across 12 layers, including instructions, memory, tool execution, and display. Use code and logs to trace failures, rank findings by severity, and produce an ordered repair plan that prioritizes code changes.

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

Investigating failures that appear only inside an agent application
Tracing old conversation content leaking into new sessions
Checking skipped or falsely claimed tool execution

affaan-m/ECC28.3만2026년 10월 16일 업데이트

agent-eval

무료

Compare coding agents on tasks from your own codebase. Define success checks, run agents in separate Git working directories, and report pass rates, available API costs, completion time, and consistency across repeated trials.

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

Comparing coding agents on real development tasks
Evaluating a new tool or model before adoption
Checking performance after agent updates

affaan-m/ECC28.3만2026년 10월 16일 업데이트

agent-harness-construction

무료

Design and refine an AI agent’s available actions, tool inputs, and result formats. Define recovery steps for errors, manage the information kept in context, and evaluate changes through completion rates, retries, and cost per successful task.

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

Define an AI agent’s tool set and input formats
Make tool results and next steps easier to interpret
Specify safe retries and stopping conditions

affaan-m/ECC28.3만2026년 10월 16일 업데이트

agent-introspection-debugging

무료

Diagnose failed AI agent runs by capturing errors, checking likely causes, and choosing small, reversible recovery actions. The workflow produces a structured report of the failure, recovery steps, and evidence, helping explain repeated retries or stalled progress.

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

Diagnosing repeated tool calls with no progress
Investigating quality loss as context grows
Checking file paths and environment mismatches

affaan-m/ECC28.3만2026년 10월 16일 업데이트

agent-introspection-debugging

무료

Diagnose AI agent runs that fail repeatedly, loop through tools, or lose track of the task. Capture errors and environment details, test a focused recovery action, and produce a report explaining the evidence and outcome.

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

Diagnosing repeated failures in an agent run
Investigating loops through the same tool calls
Reviewing output degradation as context grows

affaan-m/ECC28.3만2026년 10월 5일 업데이트

affaan-m의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/affaan-m/ECC --skill remotion-video-creation

터미널에 붙여 넣고 실행합니다(Node.js 필요).

Claude에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/affaan-m/ECC/tree/main/skills/remotion-video-creation

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 ~/.claude/skills/remotion-video-creation/ 에 배치해 주세요.

이 문장을 그대로 Claude Code에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: affaan-m/ECC
스타: 283,230
포크: 42,072
카테고리: 동영상·이미지·음성
라이선스: MIT
원문 언어: 영어
최종 업데이트: 2026년 10월 16일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.