ZOYKU火線榜

frankxai/awesome-motion-design-agent-skills技術文件

Curated motion design agent skills: GSAP, Motion, Remotion, Lottie and Rive for web animation, programmatic video and motion QA. Installable in Claude Code, Codex, Copilot.

多語言回退提示:當前倉庫原作者暫未發布在地化文件,已為您無縫切換至官方英文原版(English),排版及程式碼實例完整保真。
極速安裝
pip install awesome-motion-design-agent-skills

Awesome Motion Design Agent Skills Awesome

Awesome Motion Design Agent Skills — Interface motion, cinematic web and programmatic video — installable in one line.

Stars Last commit License: CC0

Install: any agent Claude Code plugin Download for Claude.ai

Five installable SKILL.md workflows and a curated catalog of GSAP, Motion, Remotion, Rive, Lottie, and 3D tools for AI coding agents in Claude Code, Codex, Cursor, and Copilot.

Every entry links to its primary source and carries a dated pulse. Companion FrankX lists sit at the end, never in front.

Doctrine: static hierarchy first. Animate only to clarify state or narrative. Design the reduced-motion path — don't just disable it. Verify on real devices.

Install

Five skills ship in skills/ as open-standard SKILL.md folders, verified on fresh checkouts for Claude Code and Codex.

Surface Verified install command Target path
Claude Code (project-local, all 5 skills) npx --yes skills add frankxai/awesome-motion-design-agent-skills -a claude-code -y ./.claude/skills/<name>/SKILL.md
Claude Code plugin (auto-updating) /plugin marketplace add frankxai/awesome-motion-design-agent-skills then /plugin install motion-design-studio@frankx-motion Claude Code plugin cache
Codex (project-local, all 5 skills) npx --yes skills add frankxai/awesome-motion-design-agent-skills -a codex -y ./.agents/skills/<name>/SKILL.md
One skill (claude-code, codex, cursor, github-copilot, gemini-cli; -g for global) npx --yes skills add frankxai/awesome-motion-design-agent-skills --skill web-motion-auditor -a claude-code -y ./.claude/skills/web-motion-auditor/SKILL.md
Claude.ai · Claude Desktop · Cowork Download a .zip from the rolling release and upload in Skills settings Uploaded workspace skill
GitHub Copilot (cloud agent, CLI, VS Code) npx --yes skills add frankxai/awesome-motion-design-agent-skills -a github-copilot -y (or copy skills/<name>/ into .github/skills/) ./.github/skills/<name>/SKILL.md

Verify on a fresh checkout:

npx --yes skills add frankxai/awesome-motion-design-agent-skills --list
npx --yes skills add frankxai/awesome-motion-design-agent-skills -a claude-code -y
npx --yes skills add frankxai/awesome-motion-design-agent-skills -a codex -y
npx --yes skills list

Scan any third-party pack with NVIDIA/SkillSpector before it reaches a live profile.

Choose your workflow

Five first-party skills, one per job. Read the SKILL.md, then install only what the work needs.

Job Skill Companion spec / rubric Zip
Product UI motion, stack choice, vector/3D assets motion-director motion quality rubric ↓
Cinematic site choreography site-motion-excellence-director site motion spec · excellence gate ↓
Deterministic video in React remotion-video-agent GIF/video pipeline ↓
Generative media routing and finishing generative-media-director production workflow · provider routing ↓
Review, capture, motion QA web-motion-auditor site motion rollout ↓

New here? GETTING_STARTED walks discovery → read → install → verify.

Everything else in the repo
Layer Files
Templates MOTION.md brand motion · media brief
Playbooks recommended installs
Contracts media job schema · provider routing config · motion pattern registry
Maps motion capability matrix · generative media provider matrix · Motion Designer MCP spec · stack ranking

Earned third-party skill packs

Operators get leverage from about 5–7 named workflows, not bulk dumps. Method: earned-skills index · safety gate.

Pack Pulse Job Install
greensock/gsap-skills MIT · 15.8k★ Official GSAP agent skills — timelines, ScrollTrigger, React npx skills add greensock/gsap-skills
remotion-dev/skills 4.8k★ Official Remotion agent skills npx skills add remotion-dev/skills
LottieFiles/motion-design-skill MIT · 1.8k★ Motion-design principles for Lottie / dotLottie output npx skills add LottieFiles/motion-design-skill
Orkas-AI/Orkas-VideoStudio MIT · 496★ 14-skill video pack driven by plan.json see repo
garrytan/gstack MIT · 134k★ Design / motion QA passes see repo
nexu-io/open-design Apache-2.0 · 98k★ Design + media workflows, Hermes via ACP see repo
NVIDIA/SkillSpector Apache-2.0 · 18.5k★ Scan skill packs before install see repo

Do not install unsigned ZIP/S3 skill blobs or mass-dump skill collections into a live profile.

Curated catalog

Project Pulse snapshot Why it is here
GSAP Custom license · 28.7k★ Timeline-grade JavaScript animation; ScrollTrigger for narrative scroll.
Motion MIT · 33.8k★ React/JavaScript animation with layout and gesture primitives.
React Three Fiber MIT · 32.6k★ Three.js as a React renderer for 3D scenes with fallbacks.
Remotion Custom license · 60.9k★ Programmatic video rendered from React.
Anime.js MIT · 73.2k★ Lightweight timeline animation for DOM, SVG and CSS.
Rive WebAssembly MIT · 970★ State-machine interactive vector animation runtime.
dotLottie web MIT · 888★ Modern Lottie player for web UI motion assets.
Phaser MIT · 40.4k★ Real-time web interaction and game-feel patterns.
1human reference client MIT client · checked 2026-10-10 Discover attributed motion references and retrieve recipes with owner-authorized agent access.
Agent Skills Apache-2.0 · 25.8k★ The open SKILL.md standard these skills follow.
skills CLI MIT · 32.7k★ Cross-agent installer behind npx skills add.
product-launch-motion MIT · 253★ Claude Code skill: website URL to a 60 fps launch video with music, SFX and motion blur. Needs local Playwright and ffmpeg.
launch-film MIT · 0★ Agent skill: a website or App Store link to a 20 to 40 second launch film made from the site's own logo files, colors and headline. Needs local Chrome and ffmpeg.
lookbk-skills MIT · checked 2026-11-05 Eight SKILL.md skills that render locally, including a kinetic title video and an 8-bit promo built on HyperFrames and GSAP. No AI model or API key needed.
DESIGN:OS SVG Animation PolyForm Shield 1.0.0 (source-available) · checked 2026-11-08 Free agent skill + CLI for deterministic SVG motion on an integer-frame virtual clock, compiled to 1080p 60 fps video and checked by a 10-gate verifier. Runs locally, zero telemetry.
vawe Apache-2.0 · 7★ Render one HTML page (CSS, Web Animations, SVG, canvas, three.js) to a deterministic MP4 in headless Chrome. Ships agent skills.
AgentsUses: Motion Graphics Free website · entries re-checked on a schedule Picks a motion skill before you install it: each entry links the source repo and shows its licence, install path, a starter prompt, an automated safety-scan note and, where available, credited result videos.
pro-motion MIT · 0★ Audio-first skill that plans the music, then renders a motion-graphics launch or brand film in code (canvas to MP4) cut to the track. Needs local Node, Chrome and ffmpeg.
Launchscene MCP Hosted MCP · checked 2026-10-28 Search 240+ tech launch videos scene by scene with measured timing, on-screen text, camera and sound, then export Remotion or HyperFrames starters. OAuth account, free in beta; references stay their brands’ property.
Comment-to-DM box MIT · checked 2026-11-02 Remotion end card for Reels: an Instagram comment box types the keyword, shows the reply, then swipes to the DM. Plain props, no account.
Valmera MCP MIT · checked 2026-11-06 Three agent skills for footage edits, shorts and recorded website demos through a hosted MCP service. Review a rendered preview before export.
Motion Agent MIT · checked 2026-11-06 Drives Adobe After Effects from Claude Code or Codex through a local file bridge: native editable layers, Bézier-eased keyframes, recreate-from-link with frame-by-frame checks, 12 verified recipes. Needs macOS and After Effects.
imagera-skills MIT · checked 2026-11-07 37 SKILL.md skills that plan and render reels, ads, product films and launch videos with consistent characters through a hosted MCP server. Needs a paid Imagera account; each run is quoted in credits before it starts.
tech-to-motion MIT · 0★ Agent skill: real technical sources (docker-compose, Kubernetes, Terraform, CI workflows, postmortems) to a ByteByteGo-style explainer video with animated architecture diagrams and synthesised SFX, checked by safe-area and still-frame QA before render. Built on HyperFrames and GSAP; needs Node 22 and local Chrome.
idea-to-motion MIT · 0★ Agent skill: any idea to a motion-design MP4. Asks up to 3 questions only when the brief is incomplete, 14 styles with their own motion character, procedural music on a beat grid, synthesised SFX, local voice-over with captions. Built on HyperFrames and GSAP; needs Node 22 and local Chrome.

The 1human client serves reference discovery rather than rendering: public previews need no account, while recipes, publication and private preferences require owner-approved credentials. The client/examples are MIT; the hosted service, brand and private data are not. Reference licenses remain per creation. Basic participation is free, with a capped beta; this is not a universal importer or evidence of adoption.

Valmera’s website-demo skill covers public visitor flows or approved screen recordings. Editing runs on the hosted service and requires authentication and a paid plan; the MIT license covers the plugin and skill source, not the hosted editor. The skills require an approved scope before billable work and a reviewed preview before final export. Worked trim-and-reframe export · current release.

Editorial curation lens (optional)
mindmap
  root((Curated agent capability))
    Strategy
      fit and scope
    Governance
      provenance and license
    Talent
      human review
    Technology
      tools and integration
    Data
      evidence and memory
    Ethics
      safety and disclosure
Loading

This lens is editorial, not an endorsement or a claim that a project satisfies every pillar.

Explore the FrankX Awesome Ecosystem

Companion catalogs. The third-party projects above are this list's primary value.

Agents & systems — agent operating systems · hermes agents · hermes agent skills · automation · AI CoE

Create — design · motion design · music · gamification

Capital — agentic income · investor · wealth · payments

Mind & cosmos — mind · manifestation · cosmos

Contribution standard

See CONTRIBUTING.md for the full pull-request checklist. Open a PR with a primary URL, one-sentence distinct value, current maintenance evidence, license posture, and relevant safety or reduced-motion caveat. New skills must pass skills-validate (frontmatter name matches folder, description ≤ 1024 chars, no private paths) and fresh-checkout installation in Claude Code and Codex.

Research method

Repository metadata (stars, SPDX license, archived state, last push) was pulled from the GitHub API on 2026-10-24. "Custom license" means GitHub returned no standard SPDX identifier — read the license before adoption. Counts are dated discovery signals, not rankings. Links are checked on every PR and monthly by Lychee. Nothing here is financial, legal, medical, or safety advice.

文件鏡像歸檔自 GitHub 官方源路徑 · 造訪原專案 GitHub
最後同步快照:2026-11-10