remotion-best-practices

Files (137)

• SKILL.md
• openai.yaml · agents/
• remotion-icon.png · assets/
• REFERENCE.md · remotion-captions/
• openai.yaml · remotion-captions/agents/
• remotion-icon.png · remotion-captions/assets/
• display-captions.md · remotion-captions/
• import-srt-captions.md · remotion-captions/
• transcribe-captions.md · remotion-captions/
• REFERENCE.md · remotion-create/
• openai.yaml · remotion-create/agents/
• remotion-icon.png · remotion-create/assets/
• tailwind.md · remotion-create/
• video-layout.md · remotion-create/
• REFERENCE.md · remotion-docs/
• openai.yaml · remotion-docs/agents/
• remotion-icon.png · remotion-docs/assets/
• REFERENCE.md · remotion-interactivity/
• openai.yaml · remotion-interactivity/agents/
• remotion-icon.png · remotion-interactivity/assets/
• REFERENCE.md · remotion-maps/
• openai.yaml · remotion-maps/agents/
• remotion-icon.png · remotion-maps/assets/
• TECHNIQUE.md · remotion-maps/techniques/cesium/
• CesiumFlythrough.tsx · remotion-maps/techniques/cesium/assets/
• cesium-path.json · remotion-maps/techniques/cesium/assets/
• city-path.json · remotion-maps/techniques/cesium/assets/
• example-Root.tsx · remotion-maps/techniques/cesium/assets/
• flight-path.ts · remotion-maps/techniques/cesium/assets/
• sample-river.geojson · remotion-maps/techniques/cesium/assets/
• 3d-data-sources.md · remotion-maps/techniques/cesium/references/
• 3d-flyover-architecture.md · remotion-maps/techniques/cesium/references/
• 3d-troubleshooting.md · remotion-maps/techniques/cesium/references/
• prep-cesium-path.mjs · remotion-maps/techniques/cesium/scripts/
• TECHNIQUE.md · remotion-maps/techniques/mapbox/
• render-stability.md · remotion-maps/techniques/mapbox/references/
• TECHNIQUE.md · remotion-maps/techniques/maplibre/
• render-stability.md · remotion-maps/techniques/maplibre/references/
• TECHNIQUE.md · remotion-maps/techniques/maptiler/
• CountryLabel.tsx · remotion-maps/techniques/maptiler/assets/
• MapTilerVectorElement.ts · remotion-maps/techniques/maptiler/assets/
• RiverReveal.tsx · remotion-maps/techniques/maptiler/assets/
• example-Root.tsx · remotion-maps/techniques/maptiler/assets/
• country-meta.json · remotion-maps/techniques/maptiler/assets/sample-data/
• yarlung-flow.json · remotion-maps/techniques/maptiler/assets/sample-data/
• tokens.ts · remotion-maps/techniques/maptiler/assets/
• map-data-sources.md · remotion-maps/techniques/maptiler/references/
• map-explainer-architecture.md · remotion-maps/techniques/maptiler/references/
• map-geo-prep.md · remotion-maps/techniques/maptiler/references/
• render-stability.md · remotion-maps/techniques/maptiler/references/
• prep-geo.mjs · remotion-maps/techniques/maptiler/scripts/
• TECHNIQUE.md · remotion-maps/techniques/static-map/
• 3d.md · remotion-markup/
• REFERENCE.md · remotion-markup/
• openai.yaml · remotion-markup/agents/
• remotion-icon.png · remotion-markup/assets/
• audio-visualization.md · remotion-markup/
• audio.md · remotion-markup/
• calculate-metadata.md · remotion-markup/
• compositions.md · remotion-markup/
• …and 77 more

SKILL.md (first lines)

## 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](./remotion-create/REFERENCE.md), whether or not a Remotion project already exists.

## New project setup

If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/REFERENCE.md)

## React Markup Best Practices

If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/REFERENCE.md)

## Maps

For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).

## Multimedia

For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/REFERENCE.md)

## Improving Interactivity

By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/REFERENCE.md)

## Rendering

For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.md)

## Opening Remotion Studio

To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/REFERENCE.md).

## Captions

When working with Captions, load [Remotion Captions](./remotion-captions/REFERENCE.md).

## Creating a SaaS, automation or application

Use the [Remotion SaaS skill](./remotion-saas/REFERENCE.md) for knowledge about Remotion-powered SaaS apps, such as `<Player>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.

## Looking up Remotion APIs and documentation

To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/REFERENCE.md).

## Upgrading

To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/REFERENCE.md).

From harperaa/hermes-plugin-short-form, MIT.

More from harperaa/hermes-plugin-short-form