Official Remotion skills are the implementation authority
Check current Remotion documentation instead of relying on remembered APIs. Install the official skills with the command published at https://www.remotion.dev/docs/ai/skills.
The official set routes twelve jobs:
/remotion-best-practices/remotion-create/remotion-markup/remotion-studio/remotion-render/remotion-maps/remotion-captions/remotion-saas/remotion-interactivity/remotion-docs/remotion-upgrade/remotion-multimedia
Use Better Design for brand, hierarchy, story, pacing, product framing and review. Use the official skills for current Remotion setup, APIs and rendering behavior.
The skills route work; they do not replace the full documentation. Use /remotion-docs when an API, package, codec, browser, deployment or licensing detail might have changed. Keep every Remotion package on the exact same version and use the Zod version reported by the current Remotion CLI.
Community component sources are optional
RemotionUI
https://remotionui.com/ is a source-copy registry with primitives, scenes, transitions, compositions and recipes. Its CLI supports search, inspection, add, update, diff, diagnostics and custom registries. Commands can return structured JSON and structured errors, which makes agent behavior easier to test than prose-only instructions. Its read-only discovery MCP lists, searches and explains components, then returns an install command instead of writing files itself.
Use it when dependency-aware source installation, compatibility metadata, per-component props, update/diff support or a private registry matters. Its recipes are useful starting points for social clips, creator reels, data stories, podcast clips, product intros and lower thirds. Adopt its visual review habit too: inspect early, middle and late frames, scene boundaries, multiple aspect ratios and contact sheets. Treat it as a component and delivery layer; Better Design still owns the brand and the argument.
remocn
https://remocn.dev/ is a shadcn-style source registry with animation components, timeline-driven UI primitives, icons, shaders and complete compositions. Its strongest idea is routing before installation: choose a complete template when the story already fits, compose a few primitives when it nearly fits, and write a new scene when the product moment is specific.
Use it for creative direction, natural component lengths and archetype beat maps. Its product-demo spine includes hook, positioning, product reveal, features, proof and CTA. This is the default Better Design brief. Its broader archetypes cover changelogs, feature announcements, terminal demos, open-source launches, testimonials, year-in-review films, pricing and bumpers. Vibe tags can help shortlist a pattern, but they never override derived brand tokens. Separate decorative animation components from state-driven product UI; the latter must show a credible action and result.
Remotion Bits
https://remotion-bits.dev/ and https://github.com/av/remotion-bits provide a smaller set of reusable components and working examples through a package registry, jsrepo, a skill, CLI and a two-tool read-only MCP server. The MCP finds relevant bits and returns the complete source for a selected bit.
Use it when a working example explains a specialized effect faster than an API reference. Its most transferable practices are responsive geometry, measuring against the active viewport, explicit animation stages and camera-aware 3D scenes. Text, particles, gradients and 3D effects remain supporting material. Do not let an effect replace the product interaction or determine the video's visual identity. The project is independent and not endorsed by Remotion.
Choose the smallest useful source
| Need | Start with | Reason |
|---|---|---|
| Current Remotion API, Studio, media or render behavior | Official Remotion skill and docs | Canonical and version-aware |
| Brand, story, format, product proof or review | Better Design video system | One source of truth across the film |
| Searchable source components with install/update tooling | RemotionUI | Strongest agent and registry plumbing |
| A complete creative direction or product-video archetype | remocn | Strongest routing and beat maps |
| One specialized visual technique with a working example | Remotion Bits | Small, example-first source retrieval |
Begin with the first two rows. Add one community source only when the brief names a gap.
Safe use of community code
- Search Better Design's video system first
- When a specialized pattern is missing, show a small source-labelled shortlist
- Ask before installing an external skill, MCP server, package or copied component
- Record the source, license, version and install method
- Adapt the source to the active video tokens instead of importing its demo style unchanged
- Review it against
/remotion-markupand/remotion-interactivity - Render-test it in every target format
Pin copied code to a source URL and revision when possible. Community catalogs change, so link to their live indexes instead of copying their inventory counts into guidance. Run the official skill review after adaptation; a component rendering successfully does not prove its timing, responsive layout, accessibility or license is right for the project.
Do not mirror a community catalog into Better Design. Link to its live machine-readable index so component metadata does not become stale.
Remotion itself has separate license terms. Link users to https://github.com/remotion-dev/remotion/blob/main/LICENSE.md and ask commercial teams to confirm their eligibility.