{
  "markdown": "# Claude Design Skillstack\n\n**Professional design agency skillstack for 3D/WebGL, animation, and modern web development**\n\nClaude Code plugin marketplace providing comprehensive coverage of modern web technologies including Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js, and more.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![Plugins: 27](https://img.shields.io/badge/Plugins-27-blue.svg)](#available-plugins)\n[![Skills: 22](https://img.shields.io/badge/Skills-22-green.svg)](#available-skills)\n[![Status: Production](https://img.shields.io/badge/Status-Production-brightgreen.svg)](#status)\n\n## 🚀 Quick Start (Plugin Marketplace)\n\n**New**: Install skills as plugins directly from this marketplace!\n\n```bash\n# Add marketplace to Claude Code\n/plugin marketplace add freshtechbro/claudedesignskills\n\n# Install individual plugins\n/plugin install threejs-webgl\n/plugin install gsap-scrolltrigger\n/plugin install react-three-fiber\n\n# Or install complete bundles\n/plugin install core-3d-animation        # 5 skills: Three.js, GSAP, R3F, Motion, Babylon\n/plugin install extended-3d-scroll       # 6 skills: A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba\n/plugin install animation-components     # 5 skills: React Spring, Magic UI, AOS, Anime.js, Lottie\n/plugin install authoring-motion         # 4 skills: Blender, Spline, Rive, Substance 3D\n/plugin install meta-skills             # 2 skills: Integration patterns, Modern design\n```\n\n**Each plugin includes**:\n- ✅ Complete skill content with SKILL.md\n- ✅ 1-3 slash commands for quick actions\n- ✅ 1-2 specialized agents for domain expertise\n- ✅ Scripts, references, and asset templates\n\n📚 **[View complete marketplace documentation →](MARKETPLACE.md)**\n\n## Overview\n\n**27 plugins (22 individual + 5 bundles)** extending Claude Code with specialized knowledge for cutting-edge web technologies.\n\n**Key Features**:\n- 🏪 Plugin marketplace with 27 ready-to-install plugins\n- ✅ 22 individual skills + 5 category bundles\n- 🔧 50+ slash commands for instant boilerplate generation\n- 🤖 27+ specialized agents for domain expertise\n- 📚 Comprehensive patterns, examples, and integration guides\n- 🚀 Auto-activates when Claude detects relevant tasks\n\n## What are Claude Skills?\n\nModular packages that teach Claude specific technologies. Each contains:\n- **SKILL.md** - Instructions and patterns\n- **references/** - API docs and guides\n- **scripts/** - Automation utilities\n- **assets/** - Templates and examples\n\nProgressive disclosure: Claude loads only what's needed per task.\n\n## Available Plugins\n\n### Individual Plugins (22)\n\nAll plugins include slash commands and specialized agents. [Full details →](MARKETPLACE.md)\n\n### Category Bundles (5)\n\n- **core-3d-animation** - Three.js, GSAP, R3F, Motion, Babylon.js (5 skills, 9 commands, 6 agents)\n- **extended-3d-scroll** - A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba (6 skills, 12 commands, 7 agents)\n- **animation-components** - React Spring, Magic UI, AOS, Anime.js, Lottie (5 skills, 10 commands, 6 agents)\n- **authoring-motion** - Blender, Spline, Rive, Substance 3D (4 skills, 10 commands, 5 agents)\n- **meta-skills** - Integration patterns, Modern design (2 skills, 4 commands, 3 agents)\n\n## Available Skills\n\n### Core 3D & Animation (5)\n**threejs-webgl** • **gsap-scrolltrigger** • **react-three-fiber** • **motion-framer** • **babylonjs-engine**\n\n### Extended 3D & Scroll (6)\n**aframe-webxr** • **lightweight-3d-effects** • **playcanvas-engine** • **pixijs-2d** • **locomotive-scroll** • **barba-js**\n\n### Animation & Components (5)\n**react-spring-physics** • **animated-component-libraries** • **scroll-reveal-libraries** • **animejs** • **lottie-animations**\n\n### 3D Authoring & Motion (4)\n**blender-web-pipeline** • **spline-interactive** • **rive-interactive** • **substance-3d-texturing**\n\n### Meta-Skills (2)\n**web3d-integration-patterns** • **modern-web-design**\n\n## Installation\n\n**Prerequisites**: Claude Code CLI or [claude.com/code](https://claude.com/code)\n\n### Option 1: Plugin Marketplace (Recommended - New!)\n\nInstall directly from the marketplace:\n\n```bash\n# Add marketplace\n/plugin marketplace add freshtechbro/claudedesignskills\n\n# Browse and install plugins\n/plugin install threejs-webgl\n/plugin install core-3d-animation  # Bundle: 5 skills + commands + agents\n```\n\n**Benefits**:\n- ✅ One-command installation\n- ✅ Includes slash commands for quick actions\n- ✅ Specialized agents for domain expertise\n- ✅ Automatic updates when repo updates\n- ✅ Individual plugins or category bundles\n\n### Option 2: Upload to claude.ai\n\nUpload individual skills directly to [claude.ai](https://claude.ai):\n\n1. Go to **Settings > Features > Skills**\n2. Click **Upload skill**\n3. Select any `.zip` file from `.claude/skills/`\n4. Skill activates automatically when Claude detects relevant tasks\n\n**All skills are properly packaged** with:\n- ✅ SKILL.md at root level with valid YAML frontmatter\n- ✅ No nested zip files\n- ✅ Correct directory structure for claude.ai\n\n### Option 3: Clone Repository (Development)\n\nClone for skill development or local customization:\n\n```bash\ngit clone https://github.com/freshtechbro/claudedesignskills.git\ncd claudedesignskills\n```\n\nSkills auto-activate when triggered. Example prompts:\n- \"Create a Three.js scene with PBR materials\" → `threejs-webgl`\n- \"Add GSAP scroll animations\" → `gsap-scrolltrigger`\n- \"Build React Three Fiber component with physics\" → `react-three-fiber`\n\n### Option 4: Individual Skills (Local Projects)\n\nCopy individual skills to your project:\n\n```bash\n# Extract skill contents (not the zip itself)\nunzip .claude/skills/threejs-webgl.zip -d your-project/.claude/skills/threejs-webgl/\n```\n\n## Creating Skills\n\n```bash\n# Initialize new skill\n.claude/skills/skill-creator/scripts/init_skill.py my-skill --path .claude/skills\n\n# Validate\n.claude/skills/skill-creator/scripts/quick_validate.py .claude/skills/my-skill\n\n# Package (auto-validates)\n.claude/skills/skill-creator/scripts/package_skill.py .claude/skills/my-skill\n```\n\n### Packaging Requirements\n\nAll skills in this repository meet claude.ai upload requirements:\n\n**Required ZIP Structure**:\n```\nskill-name.zip\n├── SKILL.md              ← Must be at root level!\n├── references/\n│   └── api_reference.md\n├── scripts/\n│   └── helper_script.py\n└── assets/\n    └── templates/\n```\n\n**Automatic Validation**:\n- `package_skill.py` ensures correct structure\n- Skips `.zip` files to prevent nesting\n- Places SKILL.md at root level (not in subdirectory)\n- Validates YAML frontmatter before packaging\n\n**Common Errors** (all fixed in this repo):\n- ❌ SKILL.md inside subdirectory (e.g., `skill-name/SKILL.md`)\n- ❌ Nested .zip files inside archive\n- ❌ Missing or invalid YAML frontmatter\n\n## Generator Scripts\n\nEach skill includes automation utilities. Examples:\n\n- **threejs-webgl**: `setup_scene.py` - Three.js boilerplate\n- **react-three-fiber**: `component_generator.py` - 12 R3F component types\n- **motion-framer**: `animation_generator.py` - 11 animation types\n- **babylonjs-engine**: `scene_generator.py` - 8 scene types, `mesh_builder.py` - 13 shapes\n- **gsap-scrolltrigger**: `generate_animation.py`, `timeline_builder.py`\n\n50+ generators total across all skills.\n\n## Repository Verification\n\n```bash\n# Count skills (should be 23)\nls -d .claude/skills/*/ | wc -l\n\n# Count packages (should be 22)\nfind .claude/skills -name \"*.zip\" -type f | wc -l\n\n# Validate all\nfor skill in .claude/skills/*/; do\n  .claude/skills/skill-creator/scripts/quick_validate.py \"$skill\"\ndone\n```\n\n## Skill Relationships\n\n**Foundation**: `threejs-webgl` (used by R3F, A-Frame, Vanta) • `gsap-scrolltrigger` (integrates with most) • `motion-framer` (used by component libs)\n\n**Alternatives**: 3D (`threejs-webgl` vs `babylonjs-engine` vs `playcanvas-engine`) • Animation (`gsap` vs `motion` vs `react-spring`) • Scroll (`locomotive` vs `AOS`)\n\n**Common Integrations**: Three.js + GSAP • R3F + Motion • Vanta + GSAP\n\n## Contributing\n\n1. Fork repo\n2. Create/improve skill using `init_skill.py`\n3. Follow [Claude Skills standards](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview)\n4. Validate with `quick_validate.py`\n5. Submit PR with packaged skill\n\n**Guidelines**: Imperative form in SKILL.md • Runnable examples • Executable scripts (`chmod +x`) • Python 3 stdlib only • Proper YAML frontmatter\n\n## Documentation\n\n- **CLAUDE.md** - Repository guidance for Claude Code\n- **Official Docs** - [Claude Skills guidelines](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview)\n- **Individual Skills** - Each SKILL.md contains detailed instructions\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file\n\n## Status\n\n✅ **Production Ready** - All 22 skills complete, validated, and packaged\n🏪 **Plugin Marketplace** - 27 plugins (22 individual + 5 bundles) ready to install\n📦 **22 Skills** - 3D graphics, animation, scroll effects, interactive web\n🔧 **50+ Commands** - Slash commands for instant boilerplate\n🤖 **27+ Agents** - Specialized domain experts\n📚 **Fully Documented** - Guides, patterns, examples\n🚀 **Upload Ready** - All skills meet claude.ai packaging requirements\n\n### Recent Updates\n\n**2025-11-13**: Launched Plugin Marketplace\n- ✅ Created 27 plugins (22 individual + 5 category bundles)\n- ✅ Added 50+ slash commands for quick actions\n- ✅ Created 27+ specialized agents for domain expertise\n- ✅ Published marketplace.json for easy installation\n- ✅ Full marketplace documentation in MARKETPLACE.md\n\n**2025-10-25**: Fixed packaging script for claude.ai compatibility\n- ✅ Corrected ZIP structure (SKILL.md at root level)\n- ✅ Removed nested .zip files\n- ✅ All 22 skills re-packaged with correct structure\n- ✅ Verified upload compatibility with claude.ai\n\nBuilt following [Anthropic's Claude Skills guidelines](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview).\n\n**Ready to use**: Upload any skill to [claude.ai](https://claude.ai) or clone the repository!\n\n---\n\n**Star this repository** to stay updated with new skills and features!\n",
  "bytes": 10048,
  "sha": "b769f55e90a97ac0ec6d249f8ab7da0ce7e3c2e34a9c0af00ccffb4413a54889",
  "repo_slug": "freshtechbro/claudedesignskills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_freshtechbro_claudedesignskills_gsap_scr_80b1db48/readme"
}