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 |