Agent skill · software engineering · davila7
motion-canvas
Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript
Why this skill is useful
Adds detailed setup templates and critical ESM/CommonJS workarounds for Motion Canvas that are not commonly found in public documentation.
What it needs
Requires typescript, vite installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Motion Canvas - Production-Ready Video Creation with TypeScript Complete production-ready skill for creating programmatic videos using Motion Canvas, including critical ESM/CommonJS workarounds, full configuration templates, and comprehensive troubleshooting. ⚠️ CRITICAL: ESM/CommonJS Interoperability Issue IMPORTANT: The @motion-canvas/vite-plugin package is distributed as CommonJS, which causes import errors in modern ESM projects. The standard import motionCanvas from '@motion-canvas/vite-plugin' WILL NOT WORK. You MUST use the createRequire workaround documented in the Setup section below. When to use Use this skill whenever you are dealing with Motion Canvas code to obtain domain-specific knowledge about: Creating animated videos using TypeScript and generator functions Building animations with signals and reactive values Working with vector graphics and Canvas API Synchronizing animations with voice-overs and audio Using the real-time preview editor for instant feedback Implementing procedural animations with flow control Creating informative visualizations and diagrams Animating text, shapes, and custom components Setting up Motion Canvas projects from scratch with correct configuration Troubleshooting common setup and build errors Core Concepts Motion Canvas allows you to create videos using: Generator Functions: Describe animations using JavaScript generators with yield syntax Signals: Reactive values that automatically update dependent properties Real-time Preview: Live editor with instant preview powered by Vite TypeScript-First: Write animations in TypeScript with full IDE support Canvas API: Leverage 2D Canvas for high-performance vector rendering Audio Synchronization: Sync animations precisely with voice-overs Complete Setup Guide Step 1: Initialize Project Step 2: Configure package.json for ESM CRITICAL: Add "type": "module" to enable ESM imports. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/motion-canvas