Remotion Best Practices
This covers toolkit-specific patterns for a Remotion video generation setup, not core framework knowledge. You get a library of custom transitions (glitch, light leak, clock wipe, checkerboard) beyond what ships with Remotion, plus shared components like AnimatedBackground, SlideTransition, and NarratorPiP. The transition examples are concrete with parameter guidance, and there's real timing advice (30fps standard, 150 words/minute for voiceover pacing). Most useful if you're extending an existing video toolkit and need to match its conventions rather than learning Remotion from scratch. The separation between toolkit patterns and framework fundamentals is clean, which prevents clutter but means you'll need the official skill alongside this one.
- skills.sh installs
- 1.1K
- GitHub stars
- 2.5K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add digitalsamba/claude-code-video-toolkit --skill remotion-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
Preserve user changes
Users may make edits in the code outside of the conversation.
If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.
Creating a video
If the user asks to make, create, or build a new video or composition, load Create a new Remotion video, whether or not a Remotion project already exists.
New project setup
If no Remotion project currently exists, load Create a new Remotion project
React Markup Best Practices
If you are writing Remotion React Markup, load Remotion Markup Best Practices
Maps
For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load Remotion Maps.
Multimedia
For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load Remotion Multimedia
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/digitalsamba/claude-code-video-toolkit
- Categories
- Frontend Development, Generative Media
- First seen
- Jun 3, 2026
More from digitalsamba/claude-code-video-toolkit
All 12Recommended
More Frontend Development
mobile-friendlykostja94/marketing-skillsWhen the user wants to optimize for mobile-first indexing or fix mobile usability. Also use when the user mentions "mobile-friendly," "mobile-first indexing," "1.1Kskills.sh installs
eslint-prettier-configpatricio0312rev/skillsConfigures ESLint and Prettier for consistent code quality with TypeScript, React, and modern best practices. Use when users request "ESLint setup", "Prettier c1.1Kskills.sh installs
create-assistantvapiai/skillsCreate Vapi voice AI assistant payloads or assistants through the Vapi API. Use when building phone or web call agents, generating assistant JSON, choosing safe1.1Kskills.sh installs
remotion-videowshuyi/remotion-video-skill使用 Remotion 框架以编程方式创建视频。Remotion 让你用 React 组件定义视频内容，支持动画、字幕、音乐可视化等。 触发词： - "用代码做视频"、"编程视频"、"React 视频" - "Remotion"、"remotion" - "/remotion-video" 适用场景： - 程序化视频：1.1Kskills.sh installssocial-share-generatorkostja94/marketing-skillsWhen the user wants to add, optimize, or audit social share buttons (share article to X, LinkedIn, Facebook, etc.). Also use when the user mentions "share butto1.1Kskills.sh installs
react19-concurrent-patternsgithub/awesome-copilotPreserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.1.1Kskills.sh installs