AI Coding Agent motion graphics skills
motion-skills is an open-source skill collection for AI Coding Agents to create motion graphics, animations and videos. It is not an application; install its skills into environments such as Claude Code to generate motion content within existing conversations.
The project has 50 skills in 14 independently installable packs. Content includes kinetic typography, data-driven charts and infographics, TikTok / Reels / Shorts, WebGL and 3D animations, Manim math animations and Remotion programmatic videos. Each pack is published in a separate repository and can be installed individually.
Execution uses a deliver-and-verify loop: the agent inspects actual outputs after generation and adjusts them, instead of stopping after one pass. Use cases include short videos, explainers, data visualization, product demos, brand assets, web animations with GSAP / SVG / Lottie and educational content.
Install a skill pack
Describe requirements
Agent generates
Inspect output
Adjust and regenerate
Deliver
Open-source skills that teach AI coding agents to create motion graphics, animation, and video content.
Skill-pack installation with npx skills add
Packs are published as separate repositories for individual installation. Use npx skills add iart-ai/<pack> to add a pack. These are the README installation examples.
# Install the short-video skill pack(TikTok / Reels / Shorts)
npx skills add iart-ai/tiktok-video-skills
# Install the data-animation skill pack(charts / infographics)
npx skills add iart-ai/data-animation-skillsClaude Code plugin integration
Packs can also be added through Claude Code's plugin marketplace. For the web-animation pack:
/plugin marketplace add iart-ai/web-animation-skillsSkill packs and motion content
50 skills are grouped by output type into 14 packs. The following lists README-named packs and the project's motion-content capabilities. The first three, tiktok-video-skills, data-animation-skills and web-animation-skills, are installation examples; the others describe capability areas, so consult the main repo README for actual installable pack names.
Pack · 01
iart-ai/tiktok-video-skills
Short-video production
Skills for vertical TikTok / Reels / Shorts videos.
Pack · 02
iart-ai/data-animation-skills
Data visualization
Data-driven charts and infographic animations.
Pack · 03
iart-ai/web-animation-skills
Web animation
Web animation with GSAP, SVG and Lottie.
Capability · 04
kinetic typography
Typography animation
Motion typography and subtitle effects, known as kinetic typography.
Capability · 05
WebGL / 3D
3D animation
WebGL and 3D scene animations.
Capability · 06
Manim
Math animation
Math and formula animations with Manim for educational content.
Capability · 07
Remotion
Programmatic video
Generate videos through code with Remotion.
Mechanism · 08
deliver-and-verify
Delivery and verification loop
Inspect actual output and adjust after generation instead of stopping after one pass.
Motion content and pack entry points
| Intended output | Pack / Capability |
|---|---|
| Vertical TikTok / Reels / Shorts videos | tiktok-video-skills |
| Charts, infographics and data animations | data-animation-skills |
| Website interactions / transitions | web-animation-skills (GSAP / SVG / Lottie) |
| Math / educational animations | Manim skills |
| Batch video generation through code | Remotion skills |
Skill collection structure and operation
These points come from the project README and describe motion-skills structure and design. Each can be checked in the main repo.
Principle · Skills, not an application
motion-skills installs skills into an AI Coding Agent instead of providing a standalone tool. The agent executes them, requiring a compatible environment such as Claude Code.
Source · Official README
Principle · 14 independently installable packs
50 skills are grouped by output type into 14 packs, each published in a separate repository. Use npx skills add iart-ai/<pack> to install only needed parts instead of loading everything.
Source · Official README
Principle · deliver-and-verify loop
The agent inspects actual output and adjusts it after generation. This delivery-and-verification loop reduces gaps between apparently correct results and incorrect rendering.
Source · Official README
Principle · Existing animation toolchains
Skills use established tools, GSAP / SVG / Lottie for the web, Manim for math, Remotion for programmatic video and WebGL for 3D. Outputs can therefore fit existing production workflows.
Source · Official README
Principle · Claude Code plugin integration
Besides npx skills add, add packs through Claude Code's plugin marketplace with /plugin marketplace add iart-ai/<pack> and use them directly within agent conversations.
Source · Official README
Principle · Multiple output formats
Short videos, explainers, data visualization, product demos, brand assets, web animations and education use different packs instead of one output format.
Source · Official README
Pack installation and short-video production
This illustrative end-to-end workflow installs a short-video pack in Claude Code, describes requirements for generation and enters the deliver-and-verify loop to inspect and adjust outputs. Commands follow README installation syntax; internal agent steps are illustrative, and actual skill names depend on the installed pack.
$ npx skills add iart-ai/tiktok-video-skills
ok: ✓ installed iart-ai/tiktok-video-skills
$ You ›
Create a 15-second vertical short video introducing our new feature "Instant Export".
Use a simple style, a dark background and key text that appears character by character.
claude: Claude(motion-skills)›
Confirm the specifications before generating:
· Aspect ratio 9:16(1080×1920)
· Duration 15s · Dark background
· Main visual:kinetic typography appearing character by character
hl: — deliver & verify —
claude: At 8 seconds, the text extends beyond the safe area and captions are clipped. Adjusted the margins and font size, then rendered again.
ok: Output:launch-clip.mp4 · 1080×1920 · 15.0s
After generating, the agent inspects the actual output and adjusts it, rather than delivering it after a single generation.
Output inspection and selective installation
The deliver-and-verify loop has the agent inspect rendered images, such as subtitles exceeding safe areas, then fix problems and render again.
Install according to need: this example uses only the short-video pack. Add corresponding packs for data charts or web animation later without loading all 50 skills at once.
Skill execution limits
Motion skills content workflow integration
motion-skills is open source under MIT and can be used and modified freely.
Advanced paths
1. Start with one pack. Install the closest match with npx skills add iart-ai/tiktok-video-skills, complete a short video and extend as needed.
2. Integrate Claude Code through plugin marketplace. /plugin marketplace add iart-ai/web-animation-skills adds the pack to the agent's conversation workflow, keeping content generation in your existing environment.
3. Prepare underlying toolchains. Set up GSAP / Lottie for web animation, Manim for math animation or Remotion for programmatic video according to target output so agent-generated scripts can render into videos.
4. Include deliver-and-verify. Make draft rendering → output review → adjustment and rerendering a fixed workflow, iterating drafts instead of finalizing a single generation.
5. Check the complete pack list. The main repo README lists all 14 packs. Choose installations by content type instead of loading everything.
Three further entry points
① iart-ai/motion-skills: Main repo with the complete pack list and installation instructions. ② README.md: Installation examples, capabilities and usage. ③ showcase.html / showcase.gif: Finished work examples.
Open-source skills that teach AI coding agents to create motion graphics, animation, and video content.