freshtechbroCommunity·28 Agent Skills Included

claudedesignskills

Build 3D, animated, and scroll-driven websites with AI guidance

Generates production-ready code for 3D scenes, scroll animations, page transitions, and interactive web experiences using Three.js, GSAP, React Three Fiber, Framer Motion, and 18 more libraries. Eliminates hours of reading documentation and debugging boilerplate when building immersive websites. Includes 50+ code generators, starter templates, and optimization checklists so your AI agent ships polished animations faster.

826|141

↗

npx skills add freshtechbro/claudedesignskills --all -g -y

Available:

Tells the AI agent how this repository is structured, how skills auto-activate from trigger keywords like 'Three.js' or 'scroll animations', and how to create, validate, and package new skills following official standards.

All Skills in This Repository (28)

Pure Emerald Level Indicators

📦 In Repo

freshtechbro

aframe-webxr

Create VR and AR web applications using A-Frame and the WebXR API.

lightweight-3d-effects

Integrate Zdog, Vanta.js, and Vanilla-Tilt.js effects into web applications.

locomotive-scroll

Implement smooth scrolling and parallax effects with Locomotive Scroll.

playcanvas-engine

Develop interactive 3D web applications with the PlayCanvas engine.

barba-js

Facilitate AJAX-driven page transitions with lifecycle hooks and custom animations.

pixijs-2d

Render 2D graphics with sprites, particles, and filters using WebGL/WebGPU.

modern-web-design

Guide modern web design trends with CSS implementation patterns and accessibility practices.

web3d-integration-patterns

Provide architectural patterns for integrating Three.js, GSAP, React Three Fiber, and React Spring.

blender-web-pipeline

Export Blender models and animations to web-optimized glTF 2.0 formats.

rive-interactive

Create interactive vector animations with Rive's state machine and ViewModel for React applications usingrive-library.

spline-interactive

Create interactive 3D web scenes with Spline and export as React components.

substance-3d-texturing

Create and export PBR textures from Adobe Substance 3D Painter for web and real-time workflows.

Community

Advanced

Frequently Asked Questions

FAQPage Schema

How to install claudedesignskills?▼

Run `npx skills add freshtechbro/claudedesignskills --all -g -y` in your terminal to install all 22 design skills globally.

What can I build with these design skills?▼

You can build 3D product viewers, scroll-driven storytelling pages, smooth page transitions, particle effects, VR/AR experiences, and animated UI components using libraries like Three.js, GSAP, and Framer Motion.

How do the skills activate in Claude Code?▼

Skills auto-activate when you mention a technology like 'Three.js' or describe a task like 'create a 3D scene' or 'add scroll animations'. No manual selection is needed.

Does it work with React projects?▼

Yes. It includes dedicated skills for React Three Fiber, Framer Motion, React Spring, and animated component libraries like Magic UI and React Bits.

Can I use it without deep 3D or animation experience?▼

Yes. Each skill includes starter templates, code generator scripts, and step-by-step patterns, so your AI agent produces working code from plain-English requests.