Claude Design Skillstack
Professional design agency skillstack for 3D/WebGL, animation, and modern web development
Claude Code plugin marketplace providing comprehensive coverage of modern web technologies including Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js, and more.
🚀 Quick Start (Plugin Marketplace)
New: Install skills as plugins directly from this marketplace!
# Add marketplace to Claude Code
/plugin marketplace add freshtechbro/claudedesignskills
# Install individual plugins
/plugin install threejs-webgl
/plugin install gsap-scrolltrigger
/plugin install react-three-fiber
# Or install complete bundles
/plugin install core-3d-animation # 5 skills: Three.js, GSAP, R3F, Motion, Babylon
/plugin install extended-3d-scroll # 6 skills: A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba
/plugin install animation-components # 5 skills: React Spring, Magic UI, AOS, Anime.js, Lottie
/plugin install authoring-motion # 4 skills: Blender, Spline, Rive, Substance 3D
/plugin install meta-skills # 2 skills: Integration patterns, Modern design
Each plugin includes:
- ✅ Complete skill content with SKILL.md
- ✅ 1-3 slash commands for quick actions
- ✅ 1-2 specialized agents for domain expertise
- ✅ Scripts, references, and asset templates
📚 View complete marketplace documentation →
Overview
27 plugins (22 individual + 5 bundles) extending Claude Code with specialized knowledge for cutting-edge web technologies.
Key Features:
- 🏪 Plugin marketplace with 27 ready-to-install plugins
- ✅ 22 individual skills + 5 category bundles
- 🔧 50+ slash commands for instant boilerplate generation
- 🤖 27+ specialized agents for domain expertise
- 📚 Comprehensive patterns, examples, and integration guides
- 🚀 Auto-activates when Claude detects relevant tasks
What are Claude Skills?
Modular packages that teach Claude specific technologies. Each contains:
- SKILL.md - Instructions and patterns
- references/ - API docs and guides
- scripts/ - Automation utilities
- assets/ - Templates and examples
Progressive disclosure: Claude loads only what's needed per task.
Available Plugins
Individual Plugins (22)
All plugins include slash commands and specialized agents. Full details →
Category Bundles (5)
- core-3d-animation - Three.js, GSAP, R3F, Motion, Babylon.js (5 skills, 9 commands, 6 agents)
- extended-3d-scroll - A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba (6 skills, 12 commands, 7 agents)
- animation-components - React Spring, Magic UI, AOS, Anime.js, Lottie (5 skills, 10 commands, 6 agents)
- authoring-motion - Blender, Spline, Rive, Substance 3D (4 skills, 10 commands, 5 agents)
- meta-skills - Integration patterns, Modern design (2 skills, 4 commands, 3 agents)
Available Skills
Core 3D & Animation (5)
threejs-webgl • gsap-scrolltrigger • react-three-fiber • motion-framer • babylonjs-engine
Extended 3D & Scroll (6)
aframe-webxr • lightweight-3d-effects • playcanvas-engine • pixijs-2d • locomotive-scroll • barba-js
Animation & Components (5)
react-spring-physics • animated-component-libraries • scroll-reveal-libraries • animejs • lottie-animations
3D Authoring & Motion (4)
blender-web-pipeline • spline-interactive • rive-interactive • substance-3d-texturing
Meta-Skills (2)
web3d-integration-patterns • modern-web-design
Installation
Prerequisites: Claude Code CLI or claude.com/code
Option 1: Plugin Marketplace (Recommended - New!)
Install directly from the marketplace:
# Add marketplace
/plugin marketplace add freshtechbro/claudedesignskills
# Browse and install plugins
/plugin install threejs-webgl
/plugin install core-3d-animation # Bundle: 5 skills + commands + agents
Benefits:
- ✅ One-command installation
- ✅ Includes slash commands for quick actions
- ✅ Specialized agents for domain expertise
- ✅ Automatic updates when repo updates
- ✅ Individual plugins or category bundles
Option 2: Upload to claude.ai
Upload individual skills directly to claude.ai:
- Go to Settings > Features > Skills
- Click Upload skill
- Select any
.zip file from .claude/skills/
- Skill activates automatically when Claude detects relevant tasks
