AgentToolHub
Skill

animated-component-libraries

animated-component-libraries — a Claude Code skill from freshtechbro/claudedesignskills

Features

  • ✓Curated collection of 27 animated component libraries
  • ✓Integrate with Claude Code for seamless workflow
  • ✓Access 22 individual skills and 5 category bundles
  • ✓50+ slash commands for quick task execution
  • ✓Specialized agents for domain expertise
  • ✓Visit the GitHub repo for more details

Installation Guide

Prerequisites: Claude Code CLI or claude.com/code

Option 1: Plugin Marketplace (Recommended - New!)

Install directly from the marketplace:

bash
# 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:

    bash
    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:

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

    Reviews