{"id":50800889,"url":"https://github.com/freshtechbro/claudedesignskills","last_synced_at":"2026-06-12T19:33:45.342Z","repository":{"id":320762842,"uuid":"1083248160","full_name":"freshtechbro/claudedesignskills","owner":"freshtechbro","description":"A comprehensive collection of Claude Code skills for modern web development, specializing in 3D graphics, animation, and interactive web experiences.","archived":false,"fork":false,"pushed_at":"2025-11-14T01:14:28.000Z","size":2365,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-14T02:36:17.818Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freshtechbro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-25T16:30:04.000Z","updated_at":"2025-11-14T01:14:33.000Z","dependencies_parsed_at":"2025-10-25T19:22:54.636Z","dependency_job_id":"812f75ad-c030-4471-affd-b759c6b4b771","html_url":"https://github.com/freshtechbro/claudedesignskills","commit_stats":null,"previous_names":["freshtechbro/claude-designer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/freshtechbro/claudedesignskills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshtechbro%2Fclaudedesignskills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshtechbro%2Fclaudedesignskills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshtechbro%2Fclaudedesignskills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshtechbro%2Fclaudedesignskills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freshtechbro","download_url":"https://codeload.github.com/freshtechbro/claudedesignskills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshtechbro%2Fclaudedesignskills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34260309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-12T19:33:43.998Z","updated_at":"2026-06-12T19:33:45.325Z","avatar_url":"https://github.com/freshtechbro.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 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 \u0026 Animation (5)\n**threejs-webgl** • **gsap-scrolltrigger** • **react-three-fiber** • **motion-framer** • **babylonjs-engine**\n\n### Extended 3D \u0026 Scroll (6)\n**aframe-webxr** • **lightweight-3d-effects** • **playcanvas-engine** • **pixijs-2d** • **locomotive-scroll** • **barba-js**\n\n### Animation \u0026 Components (5)\n**react-spring-physics** • **animated-component-libraries** • **scroll-reveal-libraries** • **animejs** • **lottie-animations**\n\n### 3D Authoring \u0026 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 \u003e Features \u003e 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreshtechbro%2Fclaudedesignskills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreshtechbro%2Fclaudedesignskills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreshtechbro%2Fclaudedesignskills/lists"}