motion-catalogue
Domain navigator for motion, animation, 3D, and generative media skills. Routes to the right skill for GSAP, Framer Motion, Three.js, Lottie, shaders, generative art, video, and AI media generation.
- Installs
- 182
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/podo/design-agent-skills --skill motion-catalogue- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads motion-catalogue automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
motion-catalogue
Domain navigator for motion design, animation, 3D, shaders, and generative media. Activate when the user asks for a skill in one of these areas.
→ For the full catalogue across all domains: use design-catalogue.
When to use
Activate when the user:
- Asks about animation libraries (GSAP, Framer Motion, Lottie, CSS animations)
- Wants 3D (Three.js, WebGPU, shaders, WebGL, R3F)
- Needs generative art (p5.js, algorithmic art, creative coding)
- Wants video/media generation (Remotion, fal.ai, generative media)
Motion & Animation
| Skill | Best for |
|---|---|
gsap-skills | Official GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText |
motion | Official Motion team skill (Motion, ex Framer Motion, + CSS): best practices, docs/example search, CSS springs, performance audits, upgrades |
framer-motion-skills | 6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout |
motion-design-skill | Official LottieFiles: timing, easing, choreography, Disney 12 principles |
animate-skill | Emil-inspired Next.js/React patterns: hover, toast, text reveal, modals |
animate-css-skill | Animate.css v4 + scroll triggers + RTL + prefers-reduced-motion |
css-animation-skill | Scrapes live app design language → standalone animation file |
wiggle-claude-skill | Animates SVG logos → Lottie JSON → GIF + MP4 |
emilkowalski-skill | Animation decision framework, easing curves, interaction principles |
claudedesignskills | Motion/creative-coding bundle: Three.js, GSAP, R3F, Framer Motion, Babylon, A-Frame, PixiJS, Rive, Lottie, Spline |
hyperframes | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS (HeyGen) |
huashu-art-motion | Art-style and explainer video animation by code: storyboard → render → QA → deliver (Chinese docs) |
oil-motion | Scroll/pointer-driven web animation from AI video or sprite sequences (Chinese docs) |
Generative Art & Creative Coding
| Skill | Best for |
|---|---|
algorithmic-art | Generative art with p5.js, flow fields, particle systems |
p5js-hermes | p5.js creative coding: noise, particles, GLSL, audio-reactive |
remotion | Programmatic video with React |
3D, Shaders & Media
| Skill | Best for |
|---|---|
shader-dev | GLSL shaders: ray marching, fluid simulation, WebGL effects |
cloudai-threejs | Three.js 3D scenes, animations, WebGL |
webgpu-claude-skill | Three.js TSL, node materials, GPU compute, WGSL — r183+ |
threejs-ecs-ts | Three.js + Entity Component Systems + TypeScript |
threejs-claude-skill-package | 24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture |
fal-ai-skills | fal.ai image/video and 3D model generation |
generative-media-skills | AI media via muapi.ai: cinematic video, Nano Banana images, Seedance, product ads, thumbnails (needs muapi account + CLI) |
FAQ
What does the motion-catalogue skill do?
Domain navigator for motion, animation, 3D, and generative media skills. Routes to the right skill for GSAP, Framer Motion, Three.js, Lottie, shaders, generative art, video, and AI media generation.
How do I install motion-catalogue?
Run npx skills add https://github.com/podo/design-agent-skills --skill motion-catalogue in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/motion-catalogue/ (personal) or .claude/skills/motion-catalogue/ (project).
Which AI agents can use motion-catalogue?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is motion-catalogue safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains motion-catalogue?
It is published by podo in podo/design-agent-skills. It has 182 recorded installs.
More from podo/design-agent-skills
distinctive-frontend
podo/design-agent-skills
Generates distinctive interfaces that avoid generic AI aesthetics, using extreme typography, cohesive themes (Cyberpunk, Brutalist, Vaporwave, Nordic Minimalism), orchestrated staggered animations, and layered backgrounds. Originally published as Koomook/claude-frontend-skills; installed from a verbatim mirror.
taste-skill
podo/design-agent-skills
Anti-slop frontend art direction (tasteskill v2). Deals researched design directions for a page or app screen from a library built from curated gallery sites, enforces a strict no-generic-AI-UI house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Works in any web stack.
emilkowalski-skill
podo/design-agent-skills
Emil Kowalski's design engineering skills. Creator of Sonner, Vaul, and animations.dev. Covers the animation decision framework, custom easing curves, component interaction principles, and typography rules, plus skills to review, audit, and improve motion, performance, and native-feeling mobile web UI.
ui-craft
podo/design-agent-skills
Design engineering skill for AI coding agents: opinionated rules for how interfaces should look, move, and feel, a required discovery phase before coding, domain references, three style variants (minimal, editorial, dense-dashboard), and an anti-slop approach that flags generic patterns such as centered hero sections, Inter-only typography, and three-column card grids. Covers premium UI taste, component patterns, and design-engineering workflows.
color-expert
podo/design-agent-skills
A large color-science knowledge base applied to UI/UX design. Covers OKLCH/OKLAB color spaces, palette generation, accessibility contrast ratios, color naming, pigment mixing, and historical color theory. By meodai, creator of color-names.
apple-hig-skills
podo/design-agent-skills
Apple Human Interface Guidelines as agent skills covering iOS, macOS, visionOS, watchOS, and tvOS. From raintree-technology, makers of the Apple HIG compliance website.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
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, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image