# add-effect

> Claude/Codex skill by [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars · Updated 2026-10-22

Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, formatting, and builds.

Tags: javascript, react, video

## Install

```sh
git clone https://github.com/remotion-dev/remotion /tmp/remotion && ln -s /tmp/remotion/.agents/skills/add-effect ~/.claude/skills/add-effect
```

## From README

Add a new @remotion/effects effect Use this skill when adding a new effect to @remotion/effects. 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/ .ts for simple effects. Use a folder at packages/effects/src/ / 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/ 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.

## Links

- HTML page: https://omgskills.com/skills/remotion-dev/remotion/add-effect/
- GitHub: https://github.com/remotion-dev/remotion
- Author: [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md)

## More from this repo

- [pr-name](https://omgskills.com/skills/remotion-dev/remotion/pr-name/index.md) — Used to review or correct a Remotion pull request title
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars
- [add-cli-option](https://omgskills.com/skills/remotion-dev/remotion/add-cli-option/index.md) — Used to add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring...
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars
- [add-new-package](https://omgskills.com/skills/remotion-dev/remotion/add-new-package/index.md) — Used to add a new package to the Remotion monorepo, including package scaffolding, monorepo registration,...
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars