From e3d8ee2222f35fb59970f09bf3f323b7788b21e4 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 2 Jun 2026 09:57:59 +0000 Subject: [PATCH 1/2] Add remotion-best-practices skill https://claude.ai/code/session_01GvkWqmbCeFB3fPBpa9ygpu --- .../skills/remotion-best-practices/SKILL.md | 340 +++++++++++++ .../remotion-best-practices/rules/3d.md | 86 ++++ .../rules/assets/charts-bar-chart.tsx | 173 +++++++ .../assets/text-animations-typewriter.tsx | 100 ++++ .../assets/text-animations-word-highlight.tsx | 103 ++++ .../rules/audio-visualization.md | 198 ++++++++ .../remotion-best-practices/rules/audio.md | 169 +++++++ .../rules/calculate-metadata.md | 134 +++++ .../rules/compositions.md | 133 +++++ .../rules/display-captions.md | 184 +++++++ .../remotion-best-practices/rules/ffmpeg.md | 34 ++ .../rules/get-audio-duration.md | 58 +++ .../rules/get-video-dimensions.md | 68 +++ .../rules/get-video-duration.md | 60 +++ .../remotion-best-practices/rules/gifs.md | 141 ++++++ .../rules/google-fonts.md | 72 +++ .../rules/html-in-canvas.md | 122 +++++ .../remotion-best-practices/rules/images.md | 71 +++ .../rules/import-srt-captions.md | 69 +++ .../rules/light-leaks.md | 73 +++ .../rules/local-fonts.md | 65 +++ .../remotion-best-practices/rules/lottie.md | 70 +++ .../remotion-best-practices/rules/maplibre.md | 458 ++++++++++++++++++ .../rules/measuring-dom-nodes.md | 34 ++ .../rules/measuring-text.md | 140 ++++++ .../rules/parameters.md | 109 +++++ .../rules/sequencing.md | 144 ++++++ .../remotion-best-practices/rules/sfx.md | 30 ++ .../rules/silence-detection.md | 71 +++ .../rules/subtitles.md | 36 ++ .../remotion-best-practices/rules/tailwind.md | 11 + .../rules/text-animations.md | 20 + .../remotion-best-practices/rules/timing.md | 136 ++++++ .../rules/transcribe-captions.md | 70 +++ .../rules/transitions.md | 197 ++++++++ .../rules/transparent-videos.md | 106 ++++ .../remotion-best-practices/rules/trimming.md | 51 ++ .../remotion-best-practices/rules/videos.md | 171 +++++++ .../rules/voiceover.md | 99 ++++ skills-lock.json | 11 + 40 files changed, 4417 insertions(+) create mode 100644 .agents/skills/remotion-best-practices/SKILL.md create mode 100644 .agents/skills/remotion-best-practices/rules/3d.md create mode 100644 .agents/skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx create mode 100644 .agents/skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx create mode 100644 .agents/skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx create mode 100644 .agents/skills/remotion-best-practices/rules/audio-visualization.md create mode 100644 .agents/skills/remotion-best-practices/rules/audio.md create mode 100644 .agents/skills/remotion-best-practices/rules/calculate-metadata.md create mode 100644 .agents/skills/remotion-best-practices/rules/compositions.md create mode 100644 .agents/skills/remotion-best-practices/rules/display-captions.md create mode 100644 .agents/skills/remotion-best-practices/rules/ffmpeg.md create mode 100644 .agents/skills/remotion-best-practices/rules/get-audio-duration.md create mode 100644 .agents/skills/remotion-best-practices/rules/get-video-dimensions.md create mode 100644 .agents/skills/remotion-best-practices/rules/get-video-duration.md create mode 100644 .agents/skills/remotion-best-practices/rules/gifs.md create mode 100644 .agents/skills/remotion-best-practices/rules/google-fonts.md create mode 100644 .agents/skills/remotion-best-practices/rules/html-in-canvas.md create mode 100644 .agents/skills/remotion-best-practices/rules/images.md create mode 100644 .agents/skills/remotion-best-practices/rules/import-srt-captions.md create mode 100644 .agents/skills/remotion-best-practices/rules/light-leaks.md create mode 100644 .agents/skills/remotion-best-practices/rules/local-fonts.md create mode 100644 .agents/skills/remotion-best-practices/rules/lottie.md create mode 100644 .agents/skills/remotion-best-practices/rules/maplibre.md create mode 100644 .agents/skills/remotion-best-practices/rules/measuring-dom-nodes.md create mode 100644 .agents/skills/remotion-best-practices/rules/measuring-text.md create mode 100644 .agents/skills/remotion-best-practices/rules/parameters.md create mode 100644 .agents/skills/remotion-best-practices/rules/sequencing.md create mode 100644 .agents/skills/remotion-best-practices/rules/sfx.md create mode 100644 .agents/skills/remotion-best-practices/rules/silence-detection.md create mode 100644 .agents/skills/remotion-best-practices/rules/subtitles.md create mode 100644 .agents/skills/remotion-best-practices/rules/tailwind.md create mode 100644 .agents/skills/remotion-best-practices/rules/text-animations.md create mode 100644 .agents/skills/remotion-best-practices/rules/timing.md create mode 100644 .agents/skills/remotion-best-practices/rules/transcribe-captions.md create mode 100644 .agents/skills/remotion-best-practices/rules/transitions.md create mode 100644 .agents/skills/remotion-best-practices/rules/transparent-videos.md create mode 100644 .agents/skills/remotion-best-practices/rules/trimming.md create mode 100644 .agents/skills/remotion-best-practices/rules/videos.md create mode 100644 .agents/skills/remotion-best-practices/rules/voiceover.md create mode 100644 skills-lock.json diff --git a/.agents/skills/remotion-best-practices/SKILL.md b/.agents/skills/remotion-best-practices/SKILL.md new file mode 100644 index 00000000..829e1fdb --- /dev/null +++ b/.agents/skills/remotion-best-practices/SKILL.md @@ -0,0 +1,340 @@ +--- +name: remotion-best-practices +description: Best practices for Remotion - Video creation in React +metadata: + tags: remotion, video, react, animation, composition +--- + +## When to use + +Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. + +## New project setup + +When in an empty folder or workspace with no existing Remotion project, scaffold one using: + +```bash +npx create-video@latest --yes --blank --no-tailwind my-video +``` + +Replace `my-video` with a suitable project name. + +## Designing a video + +Animate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation. + +```tsx +import { useCurrentFrame, Easing } from "remotion"; + +export const FadeIn = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + + const opacity = interpolate(frame, [0, 2 * fps], [0, 1], { + extrapolateRight: "clamp", + extrapolateLeft: "clamp", + easing: Easing.bezier(0.16, 1, 0.3, 1), + }); + + return
Hello World!
; +}; +``` + +CSS transitions or animations are FORBIDDEN - they will not render correctly. +Tailwind animation class names are FORBIDDEN - they will not render correctly. + +Place assets in the `public/` folder at your project root. + +Use `staticFile()` to reference files from the `public/` folder. + +Add images using the `` component: + +```tsx +import { Img, staticFile } from "remotion"; + +export const MyComposition = () => { + return ; +}; +``` + +Add videos using the `