Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By freshtechbro
Rapidly prototype and integrate immersive 3D/VR/AR scenes, smooth parallax scrolling, page transitions, 2D graphics, and lightweight effects into web apps using A-Frame, PlayCanvas, PixiJS, Locomotive Scroll, Barba.js via interactive generators, setup scripts, and specialist agents.
npx claudepluginhub freshtechbro/claudedesignskills --plugin extended-3d-scrollA-Frame WebXR - Component Builder
A-Frame WebXR - Scene Generator
Barba.js - Project Setup
Barba.js - Transition Generator
Lightweight 3D Effects - Generate Zdog
Expert 3D/graphics architect specializing in A-Frame WebXR scene design, optimization, and best practices.
Expert specialist in Barba.js implementation, patterns, and best practices.
Expert integration specialist for combining Extended 3D & Scroll technologies into cohesive applications.
Expert 3D/graphics architect specializing in Lightweight 3D Effects scene design, optimization, and best practices.
Expert specialist in Locomotive Scroll implementation, patterns, and best practices.
Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal JavaScript. Triggers on tasks involving A-Frame, WebXR, VR development, AR development, entity-component-system, declarative 3D, or HTML-based 3D scenes. Built on Three.js with accessible HTML-first approach.
Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving Barba.js, page transitions, routing, view management, transition hooks, GSAP integration, or smooth page navigation. Works with gsap-scrolltrigger for transition animations.
Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Use this skill when adding pseudo-3D illustrations, animated backgrounds, parallax tilt effects, decorative 3D elements, or subtle depth effects without heavy frameworks. Triggers on tasks involving Zdog pseudo-3D, Vanta.js backgrounds, Vanilla-Tilt parallax, card tilt effects, hero section animations, or lightweight landing page visuals. Ideal for performance-focused designs.
Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling experiences, creating parallax effects, building scroll-triggered animations, or developing immersive scrolling websites. Triggers on tasks involving Locomotive Scroll, smooth scrolling, parallax, scroll detection, scroll events, sticky elements, horizontal scrolling, or GSAP ScrollTrigger integration. Integrates with GSAP for advanced scroll-driven animations.
Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particle systems, interactive canvases, sprite animations, or UI overlays on 3D scenes. Triggers on tasks involving PixiJS, 2D rendering, sprite sheets, particle effects, filters, or high-performance canvas graphics. Alternative to Canvas2D with WebGL acceleration for rendering thousands of sprites at 60 FPS.
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Complete core 3D and animation stack with Three.js, GSAP, React Three Fiber, Framer Motion, and Babylon.js
Comprehensive Three.js skills for building 3D web experiences
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Multi-model consensus engine integrating OpenAI Codex CLI, Gemini CLI, and Claude CLI for collaborative code review and problem-solving.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered animations, pinning, scrubbing, parallax effects, or animating DOM elements, SVG, Canvas, WebGL, or Three.js. Triggers on tasks involving GSAP, ScrollTrigger, smooth animations, scroll effects, or animation sequencing.
Comprehensive animation and component libraries with React Spring, Magic UI, React Bits, AOS, Anime.js, and Lottie
State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.
Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving Barba.js, page transitions, routing, view management, transition hooks, GSAP integration, or smooth page navigation. Works with gsap-scrolltrigger for transition animations.
Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal JavaScript. Triggers on tasks involving A-Frame, WebXR, VR development, AR development, entity-component-system, declarative 3D, or HTML-based 3D scenes. Built on Three.js with accessible HTML-first approach.
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.
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:
๐ View complete marketplace documentation โ
27 plugins (22 individual + 5 bundles) extending Claude Code with specialized knowledge for cutting-edge web technologies.
Key Features:
Modular packages that teach Claude specific technologies. Each contains:
Progressive disclosure: Claude loads only what's needed per task.
All plugins include slash commands and specialized agents. Full details โ
threejs-webgl โข gsap-scrolltrigger โข react-three-fiber โข motion-framer โข babylonjs-engine
aframe-webxr โข lightweight-3d-effects โข playcanvas-engine โข pixijs-2d โข locomotive-scroll โข barba-js
react-spring-physics โข animated-component-libraries โข scroll-reveal-libraries โข animejs โข lottie-animations
blender-web-pipeline โข spline-interactive โข rive-interactive โข substance-3d-texturing
web3d-integration-patterns โข modern-web-design
Prerequisites: Claude Code CLI or claude.com/code
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:
Upload individual skills directly to claude.ai:
.zip file from .claude/skills/