freshtechbro

claudedesignskills

A comprehensive collection of Claude Code skills for modern web development, specializing in 3D graphics, animation, and interactive web experiences.

1.3k73k90 skills

Top skills by freshtechbro

freshtechbro

Claudedesignskills

aframe-webxr

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…

freshtechbro

Claudedesignskills

animated-component-libraries

Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill…

freshtechbro

Claudedesignskills

animejs

Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex…

freshtechbro

Claudedesignskills

babylonjs-engine

Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based games, interactive visualizations, or immersive web…

freshtechbro

Claudedesignskills

Pack1.3k73kWeb development

barba-js

Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated…

freshtechbro

Claudedesignskills

blender-web-pipeline

Blender to web export workflows for 3D models and animations. Use this skill when exporting Blender models to glTF for web, optimizing 3D assets for Three.js or Babylon.js, batch processing…

Pack1.3k73kDevOps

freshtechbro

Claudedesignskills

gsap-scrolltrigger

Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens…

freshtechbro

Claudedesignskills

lightweight-3d-effects

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…

freshtechbro

Claudedesignskills

locomotive-scroll

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling…

freshtechbro

Claudedesignskills

lottie-animations

After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions…

freshtechbro

Claudedesignskills

modern-web-design

Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems…

Pack1.3k73kDesign

freshtechbro

Claudedesignskills

motion-framer

Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence…

freshtechbro

Claudedesignskills

Pack1.3k73kGame development

pixijs-2d

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…

freshtechbro

Claudedesignskills

playcanvas-engine

Lightweight WebGL/WebGPU game engine with entity-component architecture and visual editor integration. Use this skill when building browser-based games, interactive 3D applications, or…

freshtechbro

Claudedesignskills

react-spring-physics

Physics-based animation library combining React Spring (spring dynamics, gesture integration, 60fps animations) and Popmotion (low-level composable animation utilities, reactive streams)…

freshtechbro

Claudedesignskills

react-three-fiber

Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based…

freshtechbro

Claudedesignskills

rive-interactive

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…

freshtechbro

Claudedesignskills

scroll-reveal-libraries

Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide…

freshtechbro

Claudedesignskills

spline-interactive

Browser-based 3D design tool with visual editor, animation, and web export. Use this skill when creating 3D scenes without code, designing interactive web experiences, prototyping 3D UI…

Pack1.3k73kDesign

freshtechbro

Claudedesignskills

substance-3d-texturing

Comprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizing…

freshtechbro

Claudedesignskills

Pack1.3k73kGame development

threejs-webgl

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive…

freshtechbro

Claudedesignskills

Pack1.3k73kAI engineering

skill-creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized…

freshtechbro

Claudedesignskills