mcpField
C
claudedesignskills

claudedesignskills

github.com/podo设计与 UI29171 次安装1 天前更新
代码仓库

关于 claudedesignskills

claudedesignskills 是面向动画设计与创意编程的 Agent 技能套件,含 5 个分类下的 22 项技能,涵盖多种 2D、3D、网页动画与交互工具链。

主要功能

  1. 015 个分类共 22 项技能
  2. 02Three.js 和 React Three Fiber 场景
  3. 03使用 GSAP 与 Framer Motion 制作网页动画
  4. 042D 图形、交互动画与 Lottie
  5. 05Blender 到网页的制作流程

适用场景

  1. 01涉及多种动画框架的项目
  2. 02为新项目选择视觉工具链

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill claudedesignskills

安装后在 Claude Code 中输入/claudedesignskills确认已加载。

附带文件stub.yaml

详细介绍

claudedesignskills

目录条目 — 完整软件包:freshtechbro/claudedesignskills

决策树

  1. 是否已安装该软件包? 检查:你的 Agent 技能目录中是否有超出此占位内容的 claudedesignskills。

    • 是 → 调用 claudedesignskills 并继续
    • 否 → 转到第 2 步
  2. 你使用的是哪种 Agent?

    • Claude Code → /plugin marketplace add freshtechbro/claudedesignskills
    • Cursor → /plugin marketplace add freshtechbro/claudedesignskills
    • 其他 → /plugin marketplace add freshtechbro/claudedesignskills 或查看 GitHub README

安装命令

/plugin marketplace add freshtechbro/claudedesignskills

安装后调用

  • 技能名称:claudedesignskills
  • 触发短语:"claudedesignskills"、"Babylon.js"、"A-Frame"、"PixiJS"、"React Spring"、"Locomotive Scroll"、"Rive"

功能

目前覆盖面最广的动效与创意编程技能套件,包含 5 个套组中的 22 项独立技能。涵盖:Three.js 3D 场景、GSAP ScrollTrigger、React Three Fiber、Framer Motion、Babylon.js 游戏/XR 渲染、A-Frame WebXR、PixiJS 2D WebGL、Locomotive Scroll 平滑滚动、Barba.js 页面转场、React Spring 基于物理的动画、Magic UI 组件动画、AOS(滚动触发动画)、Anime.js、Lottie 播放、Rive 交互式动画、Spline 3D,以及从 Blender 到 Web 的工作流。当项目涉及多个动画框架,或你不确定需要使用哪种工具链时,请使用此软件包。

不适用场景

  • 只需要一个框架时——请改用其专用技能(如 gsap-skills、framer-motion-skills 等),以减少占用
  • 后端或非视觉类工作

评论

支持 Markdown