web3d-integration-patterns

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:

1. Go to Settings > Features > Skills
2. Click Upload skill
3. Select any .zip file from .claude/skills/
4. Skill activates automatically when Claude detects relevant tasks