From 87671ce02658fcfc7a72587c9db1c5f9722fe176 Mon Sep 17 00:00:00 2001 From: sck_0 Date: Wed, 21 Jan 2026 13:01:36 +0100 Subject: [PATCH] feat: add remotion-best-practices skill from remotion-dev/skills MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Imported official Remotion skill for video creation in React: - 28 modular rule files covering animations, audio, video, captions, 3D, etc. - Added author (remotion-dev) and version (1.0) metadata - Updated skill count: 224 → 225 - Regenerated skills_index.json Source: https://github.com/remotion-dev/skills --- README.md | 11 +- skills/remotion-best-practices/SKILL.md | 45 ++++ skills/remotion-best-practices/rules/3d.md | 86 +++++++ .../rules/animations.md | 29 +++ .../remotion-best-practices/rules/assets.md | 78 ++++++ .../rules/assets/charts-bar-chart.tsx | 173 +++++++++++++ .../assets/text-animations-typewriter.tsx | 100 ++++++++ .../assets/text-animations-word-highlight.tsx | 108 +++++++++ skills/remotion-best-practices/rules/audio.md | 172 +++++++++++++ .../rules/calculate-metadata.md | 104 ++++++++ .../rules/can-decode.md | 75 ++++++ .../remotion-best-practices/rules/charts.md | 58 +++++ .../rules/compositions.md | 146 +++++++++++ .../rules/display-captions.md | 126 ++++++++++ .../rules/extract-frames.md | 229 ++++++++++++++++++ skills/remotion-best-practices/rules/fonts.md | 152 ++++++++++++ .../rules/get-audio-duration.md | 58 +++++ .../rules/get-video-dimensions.md | 68 ++++++ .../rules/get-video-duration.md | 58 +++++ skills/remotion-best-practices/rules/gifs.md | 138 +++++++++++ .../remotion-best-practices/rules/images.md | 130 ++++++++++ .../rules/import-srt-captions.md | 67 +++++ .../remotion-best-practices/rules/lottie.md | 68 ++++++ .../rules/measuring-dom-nodes.md | 35 +++ .../rules/measuring-text.md | 143 +++++++++++ .../rules/sequencing.md | 106 ++++++++ .../remotion-best-practices/rules/tailwind.md | 11 + .../rules/text-animations.md | 20 ++ .../remotion-best-practices/rules/timing.md | 179 ++++++++++++++ .../rules/transcribe-captions.md | 19 ++ .../rules/transitions.md | 122 ++++++++++ .../remotion-best-practices/rules/trimming.md | 53 ++++ .../remotion-best-practices/rules/videos.md | 171 +++++++++++++ skills_index.json | 6 + 34 files changed, 3139 insertions(+), 5 deletions(-) create mode 100644 skills/remotion-best-practices/SKILL.md create mode 100644 skills/remotion-best-practices/rules/3d.md create mode 100644 skills/remotion-best-practices/rules/animations.md create mode 100644 skills/remotion-best-practices/rules/assets.md create mode 100644 skills/remotion-best-practices/rules/assets/charts-bar-chart.tsx create mode 100644 skills/remotion-best-practices/rules/assets/text-animations-typewriter.tsx create mode 100644 skills/remotion-best-practices/rules/assets/text-animations-word-highlight.tsx create mode 100644 skills/remotion-best-practices/rules/audio.md create mode 100644 skills/remotion-best-practices/rules/calculate-metadata.md create mode 100644 skills/remotion-best-practices/rules/can-decode.md create mode 100644 skills/remotion-best-practices/rules/charts.md create mode 100644 skills/remotion-best-practices/rules/compositions.md create mode 100644 skills/remotion-best-practices/rules/display-captions.md create mode 100644 skills/remotion-best-practices/rules/extract-frames.md create mode 100644 skills/remotion-best-practices/rules/fonts.md create mode 100644 skills/remotion-best-practices/rules/get-audio-duration.md create mode 100644 skills/remotion-best-practices/rules/get-video-dimensions.md create mode 100644 skills/remotion-best-practices/rules/get-video-duration.md create mode 100644 skills/remotion-best-practices/rules/gifs.md create mode 100644 skills/remotion-best-practices/rules/images.md create mode 100644 skills/remotion-best-practices/rules/import-srt-captions.md create mode 100644 skills/remotion-best-practices/rules/lottie.md create mode 100644 skills/remotion-best-practices/rules/measuring-dom-nodes.md create mode 100644 skills/remotion-best-practices/rules/measuring-text.md create mode 100644 skills/remotion-best-practices/rules/sequencing.md create mode 100644 skills/remotion-best-practices/rules/tailwind.md create mode 100644 skills/remotion-best-practices/rules/text-animations.md create mode 100644 skills/remotion-best-practices/rules/timing.md create mode 100644 skills/remotion-best-practices/rules/transcribe-captions.md create mode 100644 skills/remotion-best-practices/rules/transitions.md create mode 100644 skills/remotion-best-practices/rules/trimming.md create mode 100644 skills/remotion-best-practices/rules/videos.md diff --git a/README.md b/README.md index db1cfbd7..cc14c077 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# 🌌 Antigravity Awesome Skills: 224+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More +# 🌌 Antigravity Awesome Skills: 225+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More -> **The Ultimate Collection of 224+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode** +> **The Ultimate Collection of 225+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode** [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Claude Code](https://img.shields.io/badge/Claude%20Code-Anthropic-purple)](https://claude.ai) @@ -11,7 +11,7 @@ [![OpenCode](https://img.shields.io/badge/OpenCode-CLI-gray)](https://github.com/opencode-ai/opencode) [![Antigravity](https://img.shields.io/badge/Antigravity-DeepMind-red)](https://github.com/anthropics/antigravity) -**Antigravity Awesome Skills** is a curated, battle-tested library of **224 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants: +**Antigravity Awesome Skills** is a curated, battle-tested library of **225 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants: - 🟣 **Claude Code** (Anthropic CLI) - 🔵 **Gemini CLI** (Google DeepMind) @@ -55,7 +55,7 @@ git clone https://github.com/sickn33/antigravity-awesome-skills.git .agent/skill @brainstorming help me design a todo app ``` -That's it! Your AI assistant now has 224 specialized skills. 🎉 +That's it! Your AI assistant now has 225 specialized skills. 🎉 **Additional Resources:** @@ -109,7 +109,7 @@ The repository is organized into several key areas of expertise: --- -## Full Skill Registry (224/224) +## Full Skill Registry (225/225) Below is the complete list of available skills. Each skill folder contains a `SKILL.md` that can be imported into Antigravity or Claude Code. @@ -267,6 +267,7 @@ Below is the complete list of available skills. Each skill folder contains a `SK | **Research Engineer** | Academic Research Engineer persona with scientific rigor, zero hallucinations, and optimal language selection for high-precision engineering tasks. | `skills/research-engineer` | | **Receiving Code Review** | Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation. | `skills/receiving-code-review` | | **Red Team Tactics** | Red team tactics principles based on MITRE ATT&CK. Attack phases, detection evasion, reporting. | `skills/red-team-tactics` | +| **Remotion Best Practices** | Best practices for Remotion - Video creation in React. Includes 28 modular rules for animations, audio, video, captions, 3D, charts, transitions, and more. | `skills/remotion-best-practices` | | **Red Team Tools and Methodology** | This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters. | `skills/red-team-tools` | | **Referral Program** | Design referral programs, affiliate programs, and word-of-mouth strategies. | `skills/referral-program` | | **Requesting Code Review** | Use when completing tasks, implementing major features, or before merging to verify work meets requirements. | `skills/requesting-code-review` | diff --git a/skills/remotion-best-practices/SKILL.md b/skills/remotion-best-practices/SKILL.md new file mode 100644 index 00000000..bf16885b --- /dev/null +++ b/skills/remotion-best-practices/SKILL.md @@ -0,0 +1,45 @@ +--- +name: remotion-best-practices +description: Best practices for Remotion - Video creation in React +author: remotion-dev +version: "1.0" +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. + +## How to use + +Read individual rule files for detailed explanations and code examples: + +- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber +- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion +- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion +- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch +- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props +- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny +- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion +- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata +- [rules/display-captions.md](rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting +- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny +- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion +- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny +- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny +- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny +- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline +- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component +- [rules/import-srt-captions.md](rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions +- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion +- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion +- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow +- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items +- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion +- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion +- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations +- [rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion +- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion +- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations +- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch diff --git a/skills/remotion-best-practices/rules/3d.md b/skills/remotion-best-practices/rules/3d.md new file mode 100644 index 00000000..31fa5c67 --- /dev/null +++ b/skills/remotion-best-practices/rules/3d.md @@ -0,0 +1,86 @@ +--- +name: 3d +description: 3D content in Remotion using Three.js and React Three Fiber. +metadata: + tags: 3d, three, threejs +--- + +# Using Three.js and React Three Fiber in Remotion + +Follow React Three Fiber and Three.js best practices. +Only the following Remotion-specific rules need to be followed: + +## Prerequisites + +First, the `@remotion/three` package needs to be installed. +If it is not, use the following command: + +```bash +npx remotion add @remotion/three # If project uses npm +bunx remotion add @remotion/three # If project uses bun +yarn remotion add @remotion/three # If project uses yarn +pnpm exec remotion add @remotion/three # If project uses pnpm +``` + +## Using ThreeCanvas + +You MUST wrap 3D content in `` and include proper lighting. +`` MUST have a `width` and `height` prop. + +```tsx +import { ThreeCanvas } from "@remotion/three"; +import { useVideoConfig } from "remotion"; + +const { width, height } = useVideoConfig(); + + + + + + + + + +``` + +## No animations not driven by `useCurrentFrame()` + +Shaders, models etc MUST NOT animate by themselves. +No animations are allowed unless they are driven by `useCurrentFrame()`. +Otherwise, it will cause flickering during rendering. + +Using `useFrame()` from `@react-three/fiber` is forbidden. + +## Animate using `useCurrentFrame()` + +Use `useCurrentFrame()` to perform animations. + +```tsx +const frame = useCurrentFrame(); +const rotationY = frame * 0.02; + + + + + +``` + +## Using `` inside `` + +The `layout` prop of any `` inside a `` must be set to `none`. + +```tsx +import { Sequence } from "remotion"; +import { ThreeCanvas } from "@remotion/three"; + +const { width, height } = useVideoConfig(); + + + + + + + + + +``` \ No newline at end of file diff --git a/skills/remotion-best-practices/rules/animations.md b/skills/remotion-best-practices/rules/animations.md new file mode 100644 index 00000000..7e15623f --- /dev/null +++ b/skills/remotion-best-practices/rules/animations.md @@ -0,0 +1,29 @@ +--- +name: animations +description: Fundamental animation skills for Remotion +metadata: + tags: animations, transitions, frames, useCurrentFrame +--- + +All animations MUST be driven by the `useCurrentFrame()` hook. +Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`. + +```tsx +import { useCurrentFrame } from "remotion"; + +export const FadeIn = () => { + const frame = useCurrentFrame(); + const { fps } = useVideoConfig(); + + const opacity = interpolate(frame, [0, 2 * fps], [0, 1], { + extrapolateRight: 'clamp', + }); + + 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. \ No newline at end of file diff --git a/skills/remotion-best-practices/rules/assets.md b/skills/remotion-best-practices/rules/assets.md new file mode 100644 index 00000000..04c8ad59 --- /dev/null +++ b/skills/remotion-best-practices/rules/assets.md @@ -0,0 +1,78 @@ +--- +name: assets +description: Importing images, videos, audio, and fonts into Remotion +metadata: + tags: assets, staticFile, images, fonts, public +--- + +# Importing assets in Remotion + +## The public folder + +Place assets in the `public/` folder at your project root. + +## Using staticFile() + +You MUST use `staticFile()` to reference files from the `public/` folder: + +```tsx +import {Img, staticFile} from 'remotion'; + +export const MyComposition = () => { + return ; +}; +``` + +The function returns an encoded URL that works correctly when deploying to subdirectories. + +## Using with components + +**Images:** + +```tsx +import {Img, staticFile} from 'remotion'; + +; +``` + +**Videos:** + +```tsx +import {Video} from '@remotion/media'; +import {staticFile} from 'remotion'; + +