This collection provides specialized capabilities for creative frontend engineers and technical artists to implement high-end interactive interfaces. It bridges the gap between professional design tools and browser execution, covering everything from 3D asset pipelines to complex animation choreography.
Whether developing WebXR applications, optimizing glTF exports from Blender, or implementing scroll-driven storytelling, these skills provide the technical patterns needed for modern, performance-first web design.
Follow the documented setup, then try a first task.
Installs: Individual threejs-webgl plugin, including its skill content, commands, agents, scripts, references, and asset templates. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the individual threejs-webgl plugin.
/plugin install threejs-webgl
Installs: Individual gsap-scrolltrigger plugin, including its skill content, commands, agents, scripts, references, and asset templates. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the individual gsap-scrolltrigger plugin.
/plugin install gsap-scrolltrigger
Installs: Individual react-three-fiber plugin, including its skill content, commands, agents, scripts, references, and asset templates. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the individual react-three-fiber plugin.
/plugin install react-three-fiber
Installs: Complete core-3d-animation bundle: five skills covering Three.js, GSAP, React Three Fiber, Motion, and Babylon.js, plus the bundle's commands and agents. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the complete core-3d-animation bundle.
/plugin install core-3d-animation # 5 skills: Three.js, GSAP, R3F, Motion, Babylon
Installs: Complete extended-3d-scroll bundle: six skills covering A-Frame, Vanta-based lightweight 3D effects, PlayCanvas, PixiJS, Locomotive Scroll, and Barba.js, plus the bundle's commands and agents. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the complete extended-3d-scroll bundle.
/plugin install extended-3d-scroll # 6 skills: A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba
Installs: Complete animation-components bundle: five skills covering React Spring, Magic UI animated components, AOS scroll reveals, Anime.js, and Lottie, plus the bundle's commands and agents. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the complete animation-components bundle.
/plugin install animation-components # 5 skills: React Spring, Magic UI, AOS, Anime.js, Lottie
Installs: Complete authoring-motion bundle: four skills covering Blender, Spline, Rive, and Substance 3D, plus the bundle's commands and agents. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the complete authoring-motion bundle.
/plugin install authoring-motion # 4 skills: Blender, Spline, Rive, Substance 3D
Installs: Complete meta-skills bundle: two skills covering Web 3D integration patterns and modern web design, plus the bundle's commands and agents. · Claude Code
In a Claude Code agent session, add the author's plugin marketplace.
/plugin marketplace add freshtechbro/claudedesignskills
In the same Claude Code agent session, install the complete meta-skills bundle.
/plugin install meta-skills # 2 skills: Integration patterns, Modern design
Uses threejs-webgl
Use the threejs-webgl skill to add a minimal rotating, lit cube scene to the web project at <PROJECT_PATH>. Include a scene, perspective camera, WebGL renderer, box mesh, and resize handling. Keep the result focused and explain which files you changed.
Uses animejs
Use the animejs skill to add a small staggered entrance animation to elements matching <CSS_SELECTOR> in the web project at <PROJECT_PATH>. Use a simple timeline, preserve the existing layout, and explain the files and animation values you changed.
Uses scroll-reveal-libraries
Use the scroll-reveal-libraries skill to add a basic AOS fade-up reveal to elements matching <CSS_SELECTOR> in the web project at <PROJECT_PATH>. Use the simplest suitable setup, keep configuration minimal, and explain which files you changed.
Claude
Cursor