[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AFYC75XP7Z466R7Q3AWG68":3,"skill-same:01M6AFYC75XP7Z466R7Q3AWG68":118},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":29,"publishedAt":57,"linkOnly":58,"markdownContent":59,"markdownBody":60,"frontMatter":61,"refName":80,"commitSha":81,"skillDirectory":82,"forksCount":83,"repositoryHtmlUrl":84,"repositoryHomepageUrl":85,"ownerHtmlUrl":86,"ownerBlogUrl":87,"ownerDescription":88,"updatedAt":89,"install":90,"resources":103},"01M6AFYC75XP7Z466R7Q3AWG68","motion-canvas",null,"Complete production-ready guide for Motion Canvas with ESM\u002FCommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33481,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fvideo\u002Fmotion-canvas\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56],"motion","canvas","motion canvas","api","production-ready","programmatic","creation","full","signals","canvas api","ready","guide","Audio","Animation","Video","esm","templates","Production","ui","https","vector","core","plugin","setup","sync","github","typescript","2026-11-10 10:12:30",false,"---\nname: motion-canvas\ndescription: Complete production-ready guide for Motion Canvas with ESM\u002FCommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript\nlicense: MIT\nmetadata:\n  version: 2.0.0\n  author: motion-canvas\n  repo: https:\u002F\u002Fgithub.com\u002Fmotion-canvas\u002Fmotion-canvas\n  tags: [Video, TypeScript, Animation, Motion Canvas, Signals, Generators, Canvas API, Vector, Audio Sync, Vite, ESM]\n  dependencies: [\"@motion-canvas\u002Fcore>=3.0.0\", \"@motion-canvas\u002F2d>=3.0.0\", \"@motion-canvas\u002Fui>=3.0.0\", \"@motion-canvas\u002Fvite-plugin>=3.0.0\"]\n---\n\n# Motion Canvas - Production-Ready Video Creation with TypeScript\n\nComplete production-ready skill for creating programmatic videos using Motion Canvas, including critical ESM\u002FCommonJS workarounds, full configuration templates, and comprehensive troubleshooting.\n\n## ⚠️ CRITICAL: ESM\u002FCommonJS Interoperability Issue\n\n**IMPORTANT**: The `@motion-canvas\u002Fvite-plugin` package is distributed as CommonJS, which causes import errors in modern ESM projects. The standard `import motionCanvas from '@motion-canvas\u002Fvite-plugin'` **WILL NOT WORK**.\n\nYou MUST use the `createRequire` workaround documented in the Setup section below.\n\n## When to use\n\nUse this skill whenever you are dealing with Motion Canvas code to obtain domain-specific knowledge about:\n\n- Creating animated videos using TypeScript and generator functions\n- Building animations with signals and reactive values\n- Working with vector graphics and Canvas API\n- Synchronizing animations with voice-overs and audio\n- Using the real-time preview editor for instant feedback\n- Implementing procedural animations with flow control\n- Creating informative visualizations and diagrams\n- Animating text, shapes, and custom components\n- **Setting up Motion Canvas projects from scratch with correct configuration**\n- **Troubleshooting common setup and build errors**\n\n## Core Concepts\n\nMotion Canvas allows you to create videos using:\n- **Generator Functions**: Describe animations using JavaScript generators with `yield*` syntax\n- **Signals**: Reactive values that automatically update dependent properties\n- **Real-time Preview**: Live editor with instant preview powered by Vite\n- **TypeScript-First**: Write animations in TypeScript with full IDE support\n- **Canvas API**: Leverage 2D Canvas for high-performance vector rendering\n- **Audio Synchronization**: Sync animations precisely with voice-overs\n\n## Complete Setup Guide\n\n### Step 1: Initialize Project\n\n```bash\n# Create project directory\nmkdir my-motion-canvas-project\ncd my-motion-canvas-project\n\n# Initialize package.json\nnpm init -y\n```\n\n### Step 2: Configure package.json for ESM\n\n**CRITICAL**: Add `\"type\": \"module\"` to enable ESM imports.\n\n```json\n{\n  \"name\": \"my-motion-canvas-project\",\n  \"version\": \"1.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  }\n}\n```\n\n### Step 3: Install ALL Required Dependencies\n\n**CRITICAL**: Must include `@motion-canvas\u002Fui` - the plugin will fail without it.\n\n```bash\nnpm install --save-dev @motion-canvas\u002Fcore @motion-canvas\u002F2d @motion-canvas\u002Fvite-plugin @motion-canvas\u002Fui vite typescript\n```\n\n### Step 4: Create Project Structure\n\n```\nmy-motion-canvas-project\u002F\n├── package.json          # \"type\": \"module\" required\n├── vite.config.js        # Use .js NOT .ts (see Step 5)\n├── tsconfig.json         # TypeScript configuration\n├── index.html            # HTML entry point\n└── src\u002F\n    ├── project.ts        # Project configuration with scenes\n    └── scenes\u002F\n        └── example.tsx   # Animation scene\n```\n\n### Step 5: Create vite.config.js with ESM\u002FCommonJS Workaround\n\n**CRITICAL**: Use `vite.config.js` (NOT `.ts`) with the `createRequire` workaround.\n\n**File: `vite.config.js`**\n```javascript\nimport {defineConfig} from 'vite';\nimport {createRequire} from 'module';\n\n\u002F\u002F WORKAROUND: @motion-canvas\u002Fvite-plugin is CommonJS, must use require\nconst require = createRequire(import.meta.url);\nconst motionCanvasModule = require('@motion-canvas\u002Fvite-plugin');\nconst motionCanvas = motionCanvasModule.default || motionCanvasModule;\n\nexport default defineConfig({\n  plugins: [\n    motionCanvas({\n      project: '.\u002Fsrc\u002Fproject.ts',\n    }),\n  ],\n});\n```\n\n**Why .js instead of .ts?**\n- Vite config runs before TypeScript compilation\n- The `createRequire` workaround works reliably in plain JavaScript\n- Avoids additional type resolution complexity\n\n### Step 6: Create tsconfig.json\n\n**CRITICAL**: Include `esModuleInterop` and `allowSyntheticDefaultImports`.\n\n**File: `tsconfig.json`**\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"module\": \"ES2020\",\n    \"lib\": [\"ES2020\", \"DOM\"],\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"@motion-canvas\u002F2d\u002Flib\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\"src\u002F**\u002F*\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### Step 7: Create index.html\n\n**File: `index.html`**\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Motion Canvas Project\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n  \u003Cscript type=\"module\" src=\"\u002Fsrc\u002Fproject.ts\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Step 8: Create src\u002Fproject.ts\n\n**File: `src\u002Fproject.ts`**\n```typescript\nimport {makeProject} from '@motion-canvas\u002Fcore';\nimport example from '.\u002Fscenes\u002Fexample?scene';\n\nexport default makeProject({\n  scenes: [example],\n});\n```\n\n### Step 9: Create First Animation Scene\n\n**File: `src\u002Fscenes\u002Fexample.tsx`**\n```typescript\nimport {makeScene2D} from '@motion-canvas\u002F2d\u002Flib\u002Fscenes';\nimport {Circle} from '@motion-canvas\u002F2d\u002Flib\u002Fcomponents';\nimport {createRef} from '@motion-canvas\u002Fcore\u002Flib\u002Futils';\nimport {all} from '@motion-canvas\u002Fcore\u002Flib\u002Fflow';\n\nexport default makeScene2D(function* (view) {\n  const circleRef = createRef\u003CCircle>();\n\n  view.add(\n    \u003CCircle\n      ref={circleRef}\n      size={70}\n      fill=\"#e13238\"\n    \u002F>,\n  );\n\n  \u002F\u002F Animate circle size and position\n  yield* circleRef().size(140, 1);\n  yield* circleRef().position.x(300, 1);\n  yield* circleRef().fill('#e6a700', 1);\n\n  \u002F\u002F Parallel animations\n  yield* all(\n    circleRef().scale(1.5, 0.5),\n    circleRef().rotation(360, 1)\n  );\n});\n```\n\n### Step 10: Run Development Server\n\n```bash\nnpm run dev\n```\n\nOpen browser at `http:\u002F\u002Flocalhost:5173` to see the Motion Canvas editor.\n\n## Troubleshooting\n\n### Error: `TypeError: motionCanvas is not a function`\n\n**Cause**: ESM\u002FCommonJS interoperability issue with `@motion-canvas\u002Fvite-plugin`\n\n**Solution**: Use the `createRequire` workaround in `vite.config.js` (see Step 5)\n\n```javascript\n\u002F\u002F ❌ WRONG - Will not work\nimport motionCanvas from '@motion-canvas\u002Fvite-plugin';\n\n\u002F\u002F ✅ CORRECT - Use createRequire\nimport {createRequire} from 'module';\nconst require = createRequire(import.meta.url);\nconst motionCanvasModule = require('@motion-canvas\u002Fvite-plugin');\nconst motionCanvas = motionCanvasModule.default || motionCanvasModule;\n```\n\n### Error: `Cannot find module '@motion-canvas\u002Fui'`\n\n**Cause**: Missing required dependency\n\n**Solution**: Install the UI package:\n```bash\nnpm install --save-dev @motion-canvas\u002Fui\n```\n\n### Error: `Property 'default' does not exist on type ...`\n\n**Cause**: TypeScript configuration missing ESM interop settings\n\n**Solution**: Add to `tsconfig.json`:\n```json\n{\n  \"compilerOptions\": {\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true\n  }\n}\n```\n\n### Warning: `The CJS build of Vite's Node API is deprecated`\n\n**Status**: This is a known warning and can be safely ignored. It appears because `@motion-canvas\u002Fvite-plugin` is CommonJS. The workaround ensures functionality despite the warning.\n\n### Error: `Failed to resolve import \"*.tsx?scene\"`\n\n**Cause**: Vite plugin not properly loaded or configured\n\n**Solution**:\n1. Verify `vite.config.js` has the correct workaround\n2. Check `project` path points to correct file: `'.\u002Fsrc\u002Fproject.ts'`\n3. Ensure scene imports use `?scene` suffix: `import example from '.\u002Fscenes\u002Fexample?scene';`\n\n### Build fails with TypeScript errors\n\n**Solution**:\n1. Verify `tsconfig.json` includes all required options (see Step 6)\n2. Check `jsxImportSource` is set to `@motion-canvas\u002F2d\u002Flib`\n3. Ensure all dependencies are installed\n\n## How to use\n\nRead individual rule files for detailed explanations and code examples:\n\n### Core Animation Concepts\n- **[references\u002Fgenerators.md](references\u002Fgenerators.md)** - Generator functions for describing animations\n- **[references\u002Fsignals.md](references\u002Fsignals.md)** - Reactive signals for dynamic properties and dependencies\n- **[references\u002Fanimations.md](references\u002Fanimations.md)** - Tweening properties and creating smooth animations\n\nFor additional topics like scenes, shapes, text rendering, audio synchronization, and advanced features, refer to the comprehensive [Motion Canvas official documentation](https:\u002F\u002Fmotioncanvas.io\u002Fdocs).\n\n## Complete Working Example\n\nThis is a complete, tested project structure that works out of the box:\n\n```\nmy-motion-canvas-project\u002F\n├── package.json\n│   {\n│     \"name\": \"my-motion-canvas-project\",\n│     \"type\": \"module\",\n│     \"scripts\": {\n│       \"dev\": \"vite\",\n│       \"build\": \"vite build\"\n│     },\n│     \"devDependencies\": {\n│       \"@motion-canvas\u002Fcore\": \"^3.0.0\",\n│       \"@motion-canvas\u002F2d\": \"^3.0.0\",\n│       \"@motion-canvas\u002Fvite-plugin\": \"^3.0.0\",\n│       \"@motion-canvas\u002Fui\": \"^3.0.0\",\n│       \"vite\": \"^5.0.0\",\n│       \"typescript\": \"^5.0.0\"\n│     }\n│   }\n│\n├── vite.config.js (with createRequire workaround)\n├── tsconfig.json (with esModuleInterop)\n├── index.html\n└── src\u002F\n    ├── project.ts (makeProject with scenes array)\n    └── scenes\u002F\n        └── example.tsx (makeScene2D with animations)\n```\n\n## Best Practices\n\n1. **Always use the createRequire workaround** - Don't try standard ESM imports for the Vite plugin\n2. **Use vite.config.js not .ts** - Avoids additional compilation complexity\n3. **Include all dependencies** - Don't forget `@motion-canvas\u002Fui`\n4. **Use generator functions** - All scene animations should use `function*` and `yield*` syntax\n5. **Leverage signals** - Create reactive dependencies between properties\n6. **Think in durations** - Specify animation duration in seconds as the second parameter\n7. **Use refs for control** - Create references to nodes for precise animation control\n8. **Preview frequently** - Take advantage of the real-time editor for instant feedback\n9. **Organize scenes** - Break complex animations into multiple scenes\n10. **Type everything** - Use TypeScript for better IDE support and fewer errors\n\n## Common Pitfalls to Avoid\n\n1. ❌ Forgetting `\"type\": \"module\"` in package.json\n2. ❌ Using standard import for `@motion-canvas\u002Fvite-plugin`\n3. ❌ Not installing `@motion-canvas\u002Fui`\n4. ❌ Missing `esModuleInterop` in tsconfig.json\n5. ❌ Using `vite.config.ts` instead of `vite.config.js`\n6. ❌ Forgetting `?scene` suffix in scene imports\n\n## Resources\n\n- **Documentation**: https:\u002F\u002Fmotioncanvas.io\u002Fdocs\n- **Repository**: https:\u002F\u002Fgithub.com\u002Fmotion-canvas\u002Fmotion-canvas\n- **Examples**: https:\u002F\u002Fmotioncanvas.io\u002Fdocs\u002Fquickstart\n- **Community**: Discord and GitHub Discussions\n- **License**: MIT\n","# Motion Canvas - Production-Ready Video Creation with TypeScript\n\nComplete production-ready skill for creating programmatic videos using Motion Canvas, including critical ESM\u002FCommonJS workarounds, full configuration templates, and comprehensive troubleshooting.\n\n## ⚠️ CRITICAL: ESM\u002FCommonJS Interoperability Issue\n\n**IMPORTANT**: The `@motion-canvas\u002Fvite-plugin` package is distributed as CommonJS, which causes import errors in modern ESM projects. The standard `import motionCanvas from '@motion-canvas\u002Fvite-plugin'` **WILL NOT WORK**.\n\nYou MUST use the `createRequire` workaround documented in the Setup section below.\n\n## When to use\n\nUse this skill whenever you are dealing with Motion Canvas code to obtain domain-specific knowledge about:\n\n- Creating animated videos using TypeScript and generator functions\n- Building animations with signals and reactive values\n- Working with vector graphics and Canvas API\n- Synchronizing animations with voice-overs and audio\n- Using the real-time preview editor for instant feedback\n- Implementing procedural animations with flow control\n- Creating informative visualizations and diagrams\n- Animating text, shapes, and custom components\n- **Setting up Motion Canvas projects from scratch with correct configuration**\n- **Troubleshooting common setup and build errors**\n\n## Core Concepts\n\nMotion Canvas allows you to create videos using:\n- **Generator Functions**: Describe animations using JavaScript generators with `yield*` syntax\n- **Signals**: Reactive values that automatically update dependent properties\n- **Real-time Preview**: Live editor with instant preview powered by Vite\n- **TypeScript-First**: Write animations in TypeScript with full IDE support\n- **Canvas API**: Leverage 2D Canvas for high-performance vector rendering\n- **Audio Synchronization**: Sync animations precisely with voice-overs\n\n## Complete Setup Guide\n\n### Step 1: Initialize Project\n\n```bash\n# Create project directory\nmkdir my-motion-canvas-project\ncd my-motion-canvas-project\n\n# Initialize package.json\nnpm init -y\n```\n\n### Step 2: Configure package.json for ESM\n\n**CRITICAL**: Add `\"type\": \"module\"` to enable ESM imports.\n\n```json\n{\n  \"name\": \"my-motion-canvas-project\",\n  \"version\": \"1.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  }\n}\n```\n\n### Step 3: Install ALL Required Dependencies\n\n**CRITICAL**: Must include `@motion-canvas\u002Fui` - the plugin will fail without it.\n\n```bash\nnpm install --save-dev @motion-canvas\u002Fcore @motion-canvas\u002F2d @motion-canvas\u002Fvite-plugin @motion-canvas\u002Fui vite typescript\n```\n\n### Step 4: Create Project Structure\n\n```\nmy-motion-canvas-project\u002F\n├── package.json          # \"type\": \"module\" required\n├── vite.config.js        # Use .js NOT .ts (see Step 5)\n├── tsconfig.json         # TypeScript configuration\n├── index.html            # HTML entry point\n└── src\u002F\n    ├── project.ts        # Project configuration with scenes\n    └── scenes\u002F\n        └── example.tsx   # Animation scene\n```\n\n### Step 5: Create vite.config.js with ESM\u002FCommonJS Workaround\n\n**CRITICAL**: Use `vite.config.js` (NOT `.ts`) with the `createRequire` workaround.\n\n**File: `vite.config.js`**\n```javascript\nimport {defineConfig} from 'vite';\nimport {createRequire} from 'module';\n\n\u002F\u002F WORKAROUND: @motion-canvas\u002Fvite-plugin is CommonJS, must use require\nconst require = createRequire(import.meta.url);\nconst motionCanvasModule = require('@motion-canvas\u002Fvite-plugin');\nconst motionCanvas = motionCanvasModule.default || motionCanvasModule;\n\nexport default defineConfig({\n  plugins: [\n    motionCanvas({\n      project: '.\u002Fsrc\u002Fproject.ts',\n    }),\n  ],\n});\n```\n\n**Why .js instead of .ts?**\n- Vite config runs before TypeScript compilation\n- The `createRequire` workaround works reliably in plain JavaScript\n- Avoids additional type resolution complexity\n\n### Step 6: Create tsconfig.json\n\n**CRITICAL**: Include `esModuleInterop` and `allowSyntheticDefaultImports`.\n\n**File: `tsconfig.json`**\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"module\": \"ES2020\",\n    \"lib\": [\"ES2020\", \"DOM\"],\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"@motion-canvas\u002F2d\u002Flib\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\"src\u002F**\u002F*\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### Step 7: Create index.html\n\n**File: `index.html`**\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Motion Canvas Project\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n  \u003Cscript type=\"module\" src=\"\u002Fsrc\u002Fproject.ts\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Step 8: Create src\u002Fproject.ts\n\n**File: `src\u002Fproject.ts`**\n```typescript\nimport {makeProject} from '@motion-canvas\u002Fcore';\nimport example from '.\u002Fscenes\u002Fexample?scene';\n\nexport default makeProject({\n  scenes: [example],\n});\n```\n\n### Step 9: Create First Animation Scene\n\n**File: `src\u002Fscenes\u002Fexample.tsx`**\n```typescript\nimport {makeScene2D} from '@motion-canvas\u002F2d\u002Flib\u002Fscenes';\nimport {Circle} from '@motion-canvas\u002F2d\u002Flib\u002Fcomponents';\nimport {createRef} from '@motion-canvas\u002Fcore\u002Flib\u002Futils';\nimport {all} from '@motion-canvas\u002Fcore\u002Flib\u002Fflow';\n\nexport default makeScene2D(function* (view) {\n  const circleRef = createRef\u003CCircle>();\n\n  view.add(\n    \u003CCircle\n      ref={circleRef}\n      size={70}\n      fill=\"#e13238\"\n    \u002F>,\n  );\n\n  \u002F\u002F Animate circle size and position\n  yield* circleRef().size(140, 1);\n  yield* circleRef().position.x(300, 1);\n  yield* circleRef().fill('#e6a700', 1);\n\n  \u002F\u002F Parallel animations\n  yield* all(\n    circleRef().scale(1.5, 0.5),\n    circleRef().rotation(360, 1)\n  );\n});\n```\n\n### Step 10: Run Development Server\n\n```bash\nnpm run dev\n```\n\nOpen browser at `http:\u002F\u002Flocalhost:5173` to see the Motion Canvas editor.\n\n## Troubleshooting\n\n### Error: `TypeError: motionCanvas is not a function`\n\n**Cause**: ESM\u002FCommonJS interoperability issue with `@motion-canvas\u002Fvite-plugin`\n\n**Solution**: Use the `createRequire` workaround in `vite.config.js` (see Step 5)\n\n```javascript\n\u002F\u002F ❌ WRONG - Will not work\nimport motionCanvas from '@motion-canvas\u002Fvite-plugin';\n\n\u002F\u002F ✅ CORRECT - Use createRequire\nimport {createRequire} from 'module';\nconst require = createRequire(import.meta.url);\nconst motionCanvasModule = require('@motion-canvas\u002Fvite-plugin');\nconst motionCanvas = motionCanvasModule.default || motionCanvasModule;\n```\n\n### Error: `Cannot find module '@motion-canvas\u002Fui'`\n\n**Cause**: Missing required dependency\n\n**Solution**: Install the UI package:\n```bash\nnpm install --save-dev @motion-canvas\u002Fui\n```\n\n### Error: `Property 'default' does not exist on type ...`\n\n**Cause**: TypeScript configuration missing ESM interop settings\n\n**Solution**: Add to `tsconfig.json`:\n```json\n{\n  \"compilerOptions\": {\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true\n  }\n}\n```\n\n### Warning: `The CJS build of Vite's Node API is deprecated`\n\n**Status**: This is a known warning and can be safely ignored. It appears because `@motion-canvas\u002Fvite-plugin` is CommonJS. The workaround ensures functionality despite the warning.\n\n### Error: `Failed to resolve import \"*.tsx?scene\"`\n\n**Cause**: Vite plugin not properly loaded or configured\n\n**Solution**:\n1. Verify `vite.config.js` has the correct workaround\n2. Check `project` path points to correct file: `'.\u002Fsrc\u002Fproject.ts'`\n3. Ensure scene imports use `?scene` suffix: `import example from '.\u002Fscenes\u002Fexample?scene';`\n\n### Build fails with TypeScript errors\n\n**Solution**:\n1. Verify `tsconfig.json` includes all required options (see Step 6)\n2. Check `jsxImportSource` is set to `@motion-canvas\u002F2d\u002Flib`\n3. Ensure all dependencies are installed\n\n## How to use\n\nRead individual rule files for detailed explanations and code examples:\n\n### Core Animation Concepts\n- **[references\u002Fgenerators.md](references\u002Fgenerators.md)** - Generator functions for describing animations\n- **[references\u002Fsignals.md](references\u002Fsignals.md)** - Reactive signals for dynamic properties and dependencies\n- **[references\u002Fanimations.md](references\u002Fanimations.md)** - Tweening properties and creating smooth animations\n\nFor additional topics like scenes, shapes, text rendering, audio synchronization, and advanced features, refer to the comprehensive [Motion Canvas official documentation](https:\u002F\u002Fmotioncanvas.io\u002Fdocs).\n\n## Complete Working Example\n\nThis is a complete, tested project structure that works out of the box:\n\n```\nmy-motion-canvas-project\u002F\n├── package.json\n│   {\n│     \"name\": \"my-motion-canvas-project\",\n│     \"type\": \"module\",\n│     \"scripts\": {\n│       \"dev\": \"vite\",\n│       \"build\": \"vite build\"\n│     },\n│     \"devDependencies\": {\n│       \"@motion-canvas\u002Fcore\": \"^3.0.0\",\n│       \"@motion-canvas\u002F2d\": \"^3.0.0\",\n│       \"@motion-canvas\u002Fvite-plugin\": \"^3.0.0\",\n│       \"@motion-canvas\u002Fui\": \"^3.0.0\",\n│       \"vite\": \"^5.0.0\",\n│       \"typescript\": \"^5.0.0\"\n│     }\n│   }\n│\n├── vite.config.js (with createRequire workaround)\n├── tsconfig.json (with esModuleInterop)\n├── index.html\n└── src\u002F\n    ├── project.ts (makeProject with scenes array)\n    └── scenes\u002F\n        └── example.tsx (makeScene2D with animations)\n```\n\n## Best Practices\n\n1. **Always use the createRequire workaround** - Don't try standard ESM imports for the Vite plugin\n2. **Use vite.config.js not .ts** - Avoids additional compilation complexity\n3. **Include all dependencies** - Don't forget `@motion-canvas\u002Fui`\n4. **Use generator functions** - All scene animations should use `function*` and `yield*` syntax\n5. **Leverage signals** - Create reactive dependencies between properties\n6. **Think in durations** - Specify animation duration in seconds as the second parameter\n7. **Use refs for control** - Create references to nodes for precise animation control\n8. **Preview frequently** - Take advantage of the real-time editor for instant feedback\n9. **Organize scenes** - Break complex animations into multiple scenes\n10. **Type everything** - Use TypeScript for better IDE support and fewer errors\n\n## Common Pitfalls to Avoid\n\n1. ❌ Forgetting `\"type\": \"module\"` in package.json\n2. ❌ Using standard import for `@motion-canvas\u002Fvite-plugin`\n3. ❌ Not installing `@motion-canvas\u002Fui`\n4. ❌ Missing `esModuleInterop` in tsconfig.json\n5. ❌ Using `vite.config.ts` instead of `vite.config.js`\n6. ❌ Forgetting `?scene` suffix in scene imports\n\n## Resources\n\n- **Documentation**: https:\u002F\u002Fmotioncanvas.io\u002Fdocs\n- **Repository**: https:\u002F\u002Fgithub.com\u002Fmotion-canvas\u002Fmotion-canvas\n- **Examples**: https:\u002F\u002Fmotioncanvas.io\u002Fdocs\u002Fquickstart\n- **Community**: Discord and GitHub Discussions\n- **License**: MIT\n",{"name":5,"license":15,"metadata":62,"description":7},{"repo":63,"tags":64,"author":5,"version":74,"dependencies":75},"https:\u002F\u002Fgithub.com\u002Fmotion-canvas\u002Fmotion-canvas",[44,65,43,66,67,68,69,70,71,72,73],"TypeScript","Motion Canvas","Signals","Generators","Canvas API","Vector","Audio Sync","Vite","ESM","2.0.0",[76,77,78,79],"@motion-canvas\u002Fcore>=3.0.0","@motion-canvas\u002F2d>=3.0.0","@motion-canvas\u002Fui>=3.0.0","@motion-canvas\u002Fvite-plugin>=3.0.0","main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fvideo\u002Fmotion-canvas",3931,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-14 06:14:46",{"source":8,"skillName":5,"commands":91,"prompt":101,"zipAvailable":102},[92,95,98],{"tool":93,"command":94},"npx","npx skills add davila7\u002Fclaude-code-templates --skill motion-canvas",{"tool":96,"command":97},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill motion-canvas",{"tool":99,"command":100},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill motion-canvas","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fvideo\u002Fmotion-canvas\u002FSKILL.md",true,[104,110,114],{"path":105,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":108,"sourceHtmlUrl":109},"references\u002Fanimations.md","REFERENCE","参考文档",3328,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fvideo\u002Fmotion-canvas\u002Freferences\u002Fanimations.md",{"path":111,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":112,"sourceHtmlUrl":113},"references\u002Fgenerators.md",2038,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fvideo\u002Fmotion-canvas\u002Freferences\u002Fgenerators.md",{"path":115,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":116,"sourceHtmlUrl":117},"references\u002Fsignals.md",2632,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fvideo\u002Fmotion-canvas\u002Freferences\u002Fsignals.md",[119,149,175,206,240,264],{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":128,"publishedAt":57},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[125],{"categoryNo":126,"categoryName":127,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","use","when","reduce","with","record","track","verdict","evm","solana","how","public","look",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":156,"publishedAt":57},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[155],{"categoryNo":126,"categoryName":127,"taxonomyType":21,"taxonomyTypeDesc":22},[157,158,159,160,161,162,163,164,165,166,167,138,168,169,170,171,172,38,173,174],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","project","cleanup","unused","code","todo","work","plan","focus","audit","dependency",{"skillNo":176,"name":177,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":188,"publishedAt":57},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[181,182,183],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":126,"categoryName":127,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":184,"categoryName":185,"taxonomyType":186,"taxonomyTypeDesc":187},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[189,190,191,192,193,194,195,134,196,197,198,199,200,201,202,137,203,204,138,205],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":207,"name":208,"nameZh":6,"description":209,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":210,"licenseFileUrl":211,"sourceHtmlUrl":212,"categories":213,"keywords":217,"publishedAt":57},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[214],{"categoryNo":215,"categoryName":216,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[218,219,220,221,222,223,224,225,226,227,228,48,229,230,231,232,233,234,235,236,237,238,134,239],"artifacts builder","web","web artifacts builder","artifacts","builder","state","routing","state management","component","css","frontend","Tools","file","components","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":241,"name":242,"nameZh":6,"description":243,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":210,"licenseFileUrl":244,"sourceHtmlUrl":245,"categories":246,"keywords":251,"publishedAt":57},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[247,250],{"categoryNo":248,"categoryName":249,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":215,"categoryName":216,"taxonomyType":21,"taxonomyTypeDesc":22},[252,253,254,255,256,219,257,228,48,258,259,260,261,134,262,140,263],"webapp testing","testing","webapp","browser","playwright","applications","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":265,"name":266,"nameZh":6,"description":267,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":210,"licenseFileUrl":268,"sourceHtmlUrl":269,"categories":270,"keywords":278,"publishedAt":57},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[271,274,275],{"categoryNo":272,"categoryName":273,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":126,"categoryName":127,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":276,"categoryName":277,"taxonomyType":186,"taxonomyTypeDesc":187},"01JBSEEDCAT000000000000036","内容创作者",[279,280,281,282,283,284,285,286,221,287,230,168,288,289,290,291,292,201,293,138,294,295,296,297,298,146,299],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]