关于 motion-catalogue
motion-catalogue 是面向动效设计、动画、3D、着色器和生成式媒体的领域导航技能，帮助定位相关专用技能；更广泛的设计查询可转向 design-catalogue。
主要功能
- 01分流动效与动画相关请求
- 02列出 3D 和着色器技能
- 03涵盖生成艺术与创意编程
- 04收录视频和媒体生成技能
适用场景
- 01查找 GSAP 或 CSS 动画任务所需技能
- 02选择 Three.js 或 WebGPU 工作技能
- 03定位生成艺术和 p5.js 技能
- 04查找程序化视频制作技能
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/motion-catalogue确认已加载。
附带文件stub.yaml
详细介绍
motion-catalogue
用于浏览动态设计、动画、3D、着色器和生成式媒体领域的导航工具。 当用户询问这些领域的技能时启用。
→ 要查看涵盖所有领域的完整目录：使用 design-catalogue。
适用场景
当用户：
- 询问动画库（GSAP、Framer Motion、Lottie、CSS 动画）
- 想要制作 3D 内容（Three.js、WebGPU、着色器、WebGL、R3F）
- 需要生成式艺术（p5.js、算法艺术、创意编程）
- 想要生成视频／媒体（Remotion、fal.ai、生成式媒体）
动态与动画
| 技能 | 最适合 |
|---|---|
gsap-skills | 官方 GSAP：8 项技能 — 核心、时间轴、ScrollTrigger、Flip、Draggable、SplitText |
framer-motion-skills | 6 项 Framer Motion 技能：核心、Next.js、变体、滚动、手势、布局 |
motion-design-skill | 官方 LottieFiles：时序、缓动、编排、迪士尼 12 条原则 |
animate-skill | 受 Emil 启发的 Next.js/React 模式：悬停、提示、文本显现、模态框 |
animate-css-skill | Animate.css v4 + 滚动触发 + RTL + prefers-reduced-motion |
css-animation-skill | 抓取实时应用的设计语言 → 独立动画文件 |
wiggle-claude-skill | 将 SVG 标志制作成动画 → Lottie JSON → GIF + MP4 |
emilkowalski-skill | 动画决策框架、缓动曲线、交互原则 |
claudedesignskills | 22 项技能合集：Three.js、GSAP、R3F、Framer、Babylon、A-Frame、PixiJS、Rive、Lottie |
hyperframes | “编写 HTML → 渲染视频”：GSAP/CSS/Lottie/Three.js + TTS（HeyGen） |
生成式艺术与创意编程
| 技能 | 最适合 |
|---|---|
algorithmic-art | 使用 p5.js、流场、粒子系统创作生成式艺术 |
p5js-hermes | p5.js 创意编程：噪声、粒子、GLSL、音频响应 |
remotion | 使用 React 以编程方式制作视频 |
3D、着色器与媒体
| 技能 | 最适合 |
|---|---|
shader-dev | GLSL 着色器：光线步进、流体模拟、WebGL 效果 |
cloudai-threejs | Three.js 3D 场景、动画、WebGL |
webgpu-claude-skill | Three.js TSL、节点材质、GPU 计算、WGSL — r183+ |
threejs-ecs-ts | Three.js + 实体组件系统 + TypeScript |
threejs-claude-skill-package | 24 项技能：WebGL、WebGPU、R3F、物理、IFC/BIM 架构 |
fal-ai-skills | fal.ai 图像／视频和 3D 模型生成 |
generative-media-skills | 41 种工作流：Midjourney v7、Flux Kontext、Kling 3.0、Veo3、Suno 音频 |
评论
支持 Markdown