무료GitHub에 공개

remotion-best-practices

Get topic-specific guidance for creating videos with Remotion and React. The skill points to rules and code examples for compositions, animation, media assets, audio, captions, charts, transitions, and other common video tasks.

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

원문원문 설명 보기

Best practices for Remotion - Video creation in React

dp-archive/archive스타 1,107(GitHub 1,107 + cccskills 0)

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

Building an animated Remotion composition
Adding captions or subtitles to a video
Using audio, images, and video assets
Creating charts or scene transitions

포함된 파일(40)

SKILL.md4.0 KB
rules/3d.md2.2 KB
rules/animations.md778 B
rules/assets.md1.6 KB
rules/assets/charts-bar-chart.tsx3.8 KB
rules/assets/text-animations-typewriter.tsx2.3 KB
rules/assets/text-animations-word-highlight.tsx2.6 KB
rules/audio-visualization.md4.8 KB
rules/audio.md3.5 KB
rules/calculate-metadata.md3.2 KB
rules/can-decode.md1.5 KB
rules/charts.md2.9 KB
rules/compositions.md3.7 KB
rules/display-captions.md5.3 KB
rules/extract-frames.md5.4 KB
rules/ffmpeg.md998 B
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.6 KB
rules/images.md2.7 KB
rules/import-srt-captions.md2.2 KB
rules/light-leaks.md2.3 KB
rules/lottie.md1.8 KB
rules/maps.md11.0 KB
rules/measuring-dom-nodes.md973 B
rules/measuring-text.md2.7 KB
rules/parameters.md2.4 KB
rules/sequencing.md2.7 KB
rules/subtitles.md922 B
rules/tailwind.md420 B
rules/text-animations.md700 B
rules/timing.md3.9 KB
rules/transcribe-captions.md1.9 KB
rules/transitions.md5.7 KB
rules/transparent-videos.md2.2 KB
rules/trimming.md1.2 KB
rules/videos.md3.4 KB
rules/voiceover.md3.3 KB

SKILL.md(원문)

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

When to use

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

Captions

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.

Using FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./rules/ffmpeg.md file for more information.

Audio visualization

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.

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 (bar, pie, line, stock charts)
rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
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/light-leaks.md - Light leak overlay effects using @remotion/light-leaks
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/transitions.md - Scene transition patterns for Remotion
rules/transparent-videos.md - Rendering out a video with transparency
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
rules/parameters.md - Make a video parametrizable by adding a Zod schema
rules/maps.md - Add a map using Mapbox and animate it
rules/voiceover.md - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS

리뷰

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

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

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

같은 저장소의 스킬

ai-writing-detection

무료

Review text for patterns associated with AI-generated writing, including vocabulary, structure, formatting, citations, and model-specific artifacts. The skill combines multiple signals, weighs context and mitigating evidence, and presents a cautious assessment with confidence and caveats.

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

Review an essay for multiple AI-writing signals
Explain which text patterns may suggest AI authorship
Assess a draft while accounting for false-positive risks

dp-archive/archive1.1천2026년 3월 4일 업데이트

audio-extractor

무료

Extract audio from videos or download audio from supported websites with yt-dlp, then save it as MP3, M4A, FLAC, WAV, or OPUS. The workflow can embed track metadata and cover art, and process playlists or podcast episodes in batches.

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

Save a video's audio as MP3 or FLAC
Download podcast episodes as audio files
Convert a playlist into numbered audio tracks

dp-archive/archive1.1천2026년 3월 4일 업데이트

biopython

무료

Use Biopython to process DNA, RNA, and protein sequences, read and convert common biology file formats, run alignments or BLAST searches, access NCBI records, and work with protein structures and phylogenetic trees in Python.

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

Reading and converting FASTA, GenBank, or PDB files
Calculating sequence statistics or translating DNA
Searching NCBI and PubMed records in batches

dp-archive/archive1.1천2026년 3월 4일 업데이트

brand-identity

무료

Turn a project description into a coordinated visual identity package. Define logo variants, color palettes, and typography, then create layouts for business cards and social media covers along with a brand specification document for consistent use.

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

Creating a logo system and brand kit
Choosing colors and typography for a new project
Designing a business card and social media cover

dp-archive/archive1.1천2026년 3월 4일 업데이트

canvas-design

무료

Create original posters and static artwork by first defining a visual direction for color, shape, space, and typography. Receive a Markdown design philosophy alongside a PNG or PDF artwork that communicates primarily through visuals.

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

Create an original poster
Express a theme through abstract artwork
Develop a visual direction and finished artwork

dp-archive/archive1.1천2026년 3월 4일 업데이트

code-to-diagram

무료

Turn a codebase into Mermaid diagrams such as architecture, ER, sequence, class, and flow diagrams. It analyzes relevant files, writes diagram source, renders SVG and PNG images, and checks the rendered result for readability and correctness.

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

Visualize a codebase architecture
Create an ER diagram from database models
Show an API flow as a sequence diagram

dp-archive/archive1.1천2026년 3월 4일 업데이트

dp-archive의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/dp-archive/archive --skill remotion-best-practices

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/dp-archive/archive/tree/main/seed_skills/remotion-best-practices

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

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

GitHub에서 소스 보기

저장소: dp-archive/archive
스타: 1,107
포크: 99
카테고리: 동영상·이미지·음성
라이선스: Apache-2.0
원문 언어: 영어
최종 업데이트: 2026년 3월 4일

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