Agent skill · software engineering · remotion-dev
add-effect
Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and builds.
Why this skill is useful
Adds a complete implementation guide for creating new WebGL2 effects in Remotion, including specific code structures and validation methods.
What it needs
Requires remotion installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 55,698 stars on the source repository.
What this skill does
Add a new @remotion/effects effect Use this skill when adding a new effect to @remotion/effects. 1. Pick the effect shape Prefer the WebGL2 backend for new effects. Use 2D only when WebGL cannot express the effect. Use a single file at packages/effects/src/<effect-name>.ts for simple effects. Use a folder at packages/effects/src/<effect-name>/ plus a top-level re-export file when the effect needs multiple shaders, runtime helpers, or multiple files. Follow naming already used by the package: File/subpath: kebab-case (chromatic-aberration) Function: camelCase (chromaticAberration) Type: PascalCase params (ChromaticAberrationParams) Effect type string: remotion/<kebab-case-name> 2. Implement the effect In the effect file: Import SequenceSchema and Internals from remotion. Use const {createEffect, createWebGL2ContextError} = Internals;. Define defaults as const values. Define a schema with satisfies SequenceSchema; these fields appear in Studio visual editing. Export the params type. Resolve defaults in a resolve() helper. Validate params using helpers from: packages/effects/src/validate-effect-param.ts packages/effects/src/color-utils.ts Throw createWebGL2ContextError('<effect name> effect') if WebGL2 cannot be acquired. Set documentationLink to https://www.remotion.dev/docs/effects/<slug>. Include every resolved parameter in calculateKey(). For WebGL2 effects, use this general structure: Look at existing WebGL2 effects such as halftone.ts, blur/blur-runtime.ts, chromatic-aberration/chromatic-aberration-runtime.ts, and wave/wave-runtime.ts before adding new helpers. In the template above, createMyEffectState() stands for the shader compilation, program linking, fullscreen-quad, texture, and uniform-location setup used by those files. 3. Register package entry points Update: packages/effects/bundle.ts — add the new src/<effect-name>.ts entrypoint. packages/effects/package.json: Add exports["./<effect-name>"]. Add the typesVersions entry. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/add-effect