mcpField
C
claudedesignskills

claudedesignskills

github.com/podoDesign & UI29171 installsUpdated 1d ago
Repository

About claudedesignskills

claudedesignskills is a skill suite for agents working across motion design and creative coding. Its 22 skills span five bundles, covering multiple 2D, 3D, web animation, and interaction toolchains.

Key features

  1. 0122 skills across five bundles
  2. 02Three.js and React Three Fiber scenes
  3. 03Web animation with GSAP and Framer Motion
  4. 042D graphics, interactive animation, and Lottie
  5. 05Blender-to-web pipeline

Use cases

  1. 01Projects combining multiple animation frameworks
  2. 02Choosing a visual toolchain for a new project

Install

Copy the command and run it in a terminal.

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

After installing, type/claudedesignskillsin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

claudedesignskills

Catalogue stub — full package: freshtechbro/claudedesignskills

Decision tree

  1. Is the package already installed? Check: your agent's skills directory contains claudedesignskills with content beyond this stub.

    • Yes → invoke claudedesignskills and proceed
    • No → go to step 2

  2. Which agent are you on?

    • Claude Code → /plugin marketplace add freshtechbro/claudedesignskills
    • Cursor → /plugin marketplace add freshtechbro/claudedesignskills
    • Other → /plugin marketplace add freshtechbro/claudedesignskills or see GitHub README

Install command

/plugin marketplace add freshtechbro/claudedesignskills

Invoke after install

  • Skill name: claudedesignskills
  • Trigger phrases: "claudedesignskills", "Babylon.js", "A-Frame", "PixiJS", "React Spring", "Locomotive Scroll", "Rive"

What it does

The broadest motion and creative coding skill suite available — 22 individual skills organised across 5 bundles. Covers: Three.js 3D scenes, GSAP ScrollTrigger, React Three Fiber, Framer Motion, Babylon.js game/XR rendering, A-Frame WebXR, PixiJS 2D WebGL, Locomotive Scroll smooth scrolling, Barba.js page transitions, React Spring physics-based animation, Magic UI component animations, AOS (Animate On Scroll), Anime.js, Lottie playback, Rive interactive animation, Spline 3D, and a Blender-to-web pipeline. Use this package when a project spans multiple animation frameworks or when you're unsure which toolchain will be needed.

When NOT to use

  • When you only need one framework — use its dedicated skill instead (gsap-skills, framer-motion-skills, etc.) for a lighter footprint
  • Backend or non-visual work

Comments

Markdown supported