Skip to content

freshtechbro/claudedesignskills

BranchesTags

Repository files navigation

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.

License: MIT Plugins: 27 Skills: 22 Status: Production

🚀 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

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

  1. Fork repo
  2. Create/improve skill using init_skill.py
  3. Follow Claude Skills standards
  4. Validate with quick_validate.py
  5. 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!

About

A comprehensive collection of Claude Code skills for modern web development, specializing in 3D graphics, animation, and interactive web experiences.

Resources

Readme

License

MIT license
Activity

Stars

41 stars

Watchers

1 watching

Forks

5 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages