Skip to content
cccskills
FreePublished on GitHub

remotion-best-practices

Build videos in React with Remotion using task-specific rules and code examples. The skill covers animation timing, captions, audio, scene transitions, and media assets, helping guide implementation across common video creation tasks.

OriginalShow the original description

Best practices for Remotion - Video creation in React

See how to install

Good for

  • Add word-highlighted captions to videos
  • Create text animations and scene transitions
  • Trim audio and adjust volume or playback speed
  • Build videos with animated charts

Files included (32)

  • SKILL.md3.4 KB
  • rules/3d.md2.2 KB
  • rules/animations.md790 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.md974 B
  • rules/measuring-text.md2.9 KB
  • rules/sequencing.md2.3 KB
  • rules/tailwind.md422 B
  • rules/text-animations.md700 B
  • rules/timing.md3.8 KB
  • rules/transcribe-captions.md850 B
  • rules/transitions.md3.6 KB
  • rules/trimming.md1.2 KB
  • rules/videos.md3.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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:

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

ab-test-setup

FreeSummary

Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

accessibility

FreeSummary

Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

See all skills by davila7

Report a problem with this skill