Motion Catalogue
Published by podo in design-agent-skills
No known issues98 installs
What this skill does
|
Add Motion Catalogue to your agent
Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.
Install with a prompt
Paste this into a compatible coding agent:
add this skill "motion-catalogue" from https://github.com/podo/design-agent-skillsInstall with the CLI
Run this command in a controlled environment after reviewing the repository:
npx skills add https://github.com/podo/design-agent-skills --skill motion-catalogueSkill instructions
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 |
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 |
Files included
- SKILL.md
- stub.yaml