Code-only motion design pipeline (no After Effects) for Raphaël / Howseen: launch films, showreels, product promos, LinkedIn/X videos, meme clips. Use when asked to make a motion design video, a promo/launch film, a showreel, "remake this video", a video from a prompt (e.g. "make a 15s motion graphics video…"), to change a video's music/SFX, or to prepare memes for posts. Covers the brief → beat map → stills → seek(t) HTML engine → Playwright render → ffmpeg → music/SFX → QA flow, plus asset sourcing (Mixkit, Pexels, Unsplash, svgl, 21st.dev) and every gotcha hit so far.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add howseen-ai/claude-motion-design --skill motion-designNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Claude Motion Design
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /motion-design.
It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.
What the instructions cover
- 100. Start from the library (fastest path)
- 20. Non-negotiables
- 31. Flow (always in this order)
- 42. The engine (one HTML file)
- 53. Render (scripts/rendertemplate.py)
- 64. Music & SFX (scripts/audiotemplate.py, analyzesong.py)
- 75. Assets
- 86. Gotchas (all hit for real)
- 97. Delivery checklist
- 108. Critique loop (make the model watch its own frames)
- 119. Extra rules
- 129c. Stolen from the other public motion skills (scan 02/10/2026)
Section headings from the skill's SKILL.md file.
What's inside · 15 files
- SKILL.md
- scripts/analyze_song.py
- scripts/audio_template.py
- scripts/mcp21_client.py
- scripts/mixkit_sfx_search.py
- scripts/remake/BRIEF_TEMPLATE.md
- scripts/remake/core.js
- scripts/remake/index.html
- scripts/remake/remake_analyze.py
- scripts/remake/remake_qa.py
- scripts/remake/remake_render.py
- scripts/remake/remake_stub.py
- scripts/remake/remake_sync.py
- scripts/render_template.py
- scripts/svgl_logos.py
More Claude skills for video editing
See all →HyperframesTop pick
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips…
Slack GIF Creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for…
AI Video Gen
Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content…