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

All skills are properly packaged with:

✅ SKILL.md at root level with valid YAML frontmatter
✅ No nested zip files
✅ Correct directory structure for claude.ai

Option 3: Clone Repository (Development)

Clone for skill development or local customization:

git clone https://github.com/freshtechbro/claudedesignskills.git
cd claudedesignskills

Skills auto-activate when triggered. Example prompts:

"Create a Three.js scene with PBR materials" → threejs-webgl
"Add GSAP scroll animations" → gsap-scrolltrigger
"Build React Three Fiber component with physics" → react-three-fiber

Option 4: Individual Skills (Local Projects)

Copy individual skills to your project:

# Extract skill contents (not the zip itself)
unzip .claude/skills/threejs-webgl.zip -d your-project/.claude/skills/threejs-webgl/

Creating Skills

# Initialize new skill
.claude/skills/skill-creator/scripts/init_skill.py my-skill --path .claude/skills

# Validate
.claude/skills/skill-creator/scripts/quick_validate.py .claude/skills/my-skill

# Package (auto-validates)
.claude/skills/skill-creator/scripts/package_skill.py .claude/skills/my-skill

Packaging Requirements

All skills in this repository meet claude.ai upload requirements:

Required ZIP Structure:

skill-name.zip
├── SKILL.md              ← Must be at root level!
├── references/
│   └── api_reference.md
├── scripts/
│   └── helper_script.py
└── assets/
    └── templates/

Automatic Validation:

package_skill.py ensures correct structure
Skips .zip files to prevent nesting
Places SKILL.md at root level (not in subdirectory)
Validates YAML frontmatter before packaging

Common Errors (all fixed in this repo):

❌ SKILL.md inside subdirectory (e.g., skill-name/SKILL.md)
❌ Nested .zip files inside archive
❌ Missing or invalid YAML frontmatter

Generator Scripts

Each skill includes automation utilities. Examples:

threejs-webgl: setup_scene.py - Three.js boilerplate
react-three-fiber: component_generator.py - 12 R3F component types
motion-framer: animation_generator.py - 11 animation types
babylonjs-engine: scene_generator.py - 8 scene types, mesh_builder.py - 13 shapes
gsap-scrolltrigger: generate_animation.py, timeline_builder.py

50+ generators total across all skills.

Repository Verification

# Count skills (should be 23)
ls -d .claude/skills/*/ | wc -l

# Count packages (should be 22)
find .claude/skills -name "*.zip" -type f | wc -l

# Validate all
for skill in .claude/skills/*/; do
  .claude/skills/skill-creator/scripts/quick_validate.py "$skill"
done

Skill Relationships

Foundation: threejs-webgl (used by R3F, A-Frame, Vanta) • gsap-scrolltrigger (integrates with most) • motion-framer (used by component libs)

Alternatives: 3D (threejs-webgl vs babylonjs-engine vs playcanvas-engine) • Animation (gsap vs motion vs react-spring) • Scroll (locomotive vs AOS)

Common Integrations: Three.js + GSAP • R3F + Motion • Vanta + GSAP

Contributing

Fork repo
Create/improve skill using init_skill.py
Follow Claude Skills standards
Validate with quick_validate.py
Submit PR with packaged skill

Guidelines: Imperative form in SKILL.md • Runnable examples • Executable scripts (chmod +x) • Python 3 stdlib only • Proper YAML frontmatter

Documentation

CLAUDE.md - Repository guidance for Claude Code
Official Docs - Claude Skills guidelines
Individual Skills - Each SKILL.md contains detailed instructions

License

MIT License - see LICENSE file

Status

✅ Production Ready - All 22 skills complete, validated, and packaged
🏪 Plugin Marketplace - 27 plugins (22 individual + 5 bundles) ready to install
📦 22 Skills - 3D graphics, animation, scroll effects, interactive web
🔧 50+ Commands - Slash commands for instant boilerplate
🤖 27+ Agents - Specialized domain experts
📚 Fully Documented - Guides, patterns, examples
🚀 Upload Ready - All skills meet claude.ai packaging requirements

Recent Updates

2025-11-13: Launched Plugin Marketplace

✅ Created 27 plugins (22 individual + 5 category bundles)
✅ Added 50+ slash commands for quick actions
✅ Created 27+ specialized agents for domain expertise
✅ Published marketplace.json for easy installation
✅ Full marketplace documentation in MARKETPLACE.md

2025-10-25: Fixed packaging script for claude.ai compatibility

✅ Corrected ZIP structure (SKILL.md at root level)
✅ Removed nested .zip files
✅ All 22 skills re-packaged with correct structure
✅ Verified upload compatibility with claude.ai

Built following Anthropic's Claude Skills guidelines.

Ready to use: Upload any skill to claude.ai or clone the repository!

Star this repository to stay updated with new skills and features!