# 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/library/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](https://omgskills.com/library/remotion-dev/remotion/dot-claude/skills/pr/index.md) — Open a pull request for the current feature
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 73k stars
- [pr-name](https://omgskills.com/library/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) · 69k stars
- [remotion-best-practices](https://omgskills.com/library/remotion-dev/remotion/remotion-best-practices/index.md) — Router for all Remotion skills
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 69k stars