About motion-catalogue
motion-catalogue is a domain navigator skill for motion design, animation, 3D, shaders, and generative media. It helps identify a more specific skill for requests in these areas, while directing broader design searches to design-catalogue.
Key features
- 01Routes motion and animation requests
- 02Lists skills for 3D and shaders
- 03Covers generative art and creative coding
- 04Includes video and media generation skills
Use cases
- 01Find a skill for a GSAP or CSS animation task
- 02Choose a skill for Three.js or WebGPU work
- 03Locate generative art and p5.js skills
- 04Find a skill for programmatic video creation
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/motion-cataloguein Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEmotion-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 |
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 | 22-skill bundle: Three.js, GSAP, R3F, Framer, Babylon, A-Frame, PixiJS, Rive, Lottie |
hyperframes | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS (HeyGen) |
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 | 41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio |
Comments
Markdown supported