@freshtechbro

gsap-scrolltrigger covers animation sequencing, scroll-driven effects, and timeline control with working code examples. includes integration patterns for react, three.js, and locomotive scroll, plus performance tuning and common pitfalls.

lightweight-3d-effects covers pseudo-3d decorative effects via zdog, vanta.js, and vanilla-tilt.js for hero sections and cards. incomplete guidance on integration, performance trade-offs, and failure recovery.

babylonjs-engine covers initialization, cameras, lighting, mesh creation, materials, model loading, physics, animations, and post-processing with code examples. lacks decision logic, failure handling, and clear trigger conditions for when to use specific patterns.

skill-creator is a meta-skill documenting skill construction without concrete procedural steps. it explains anatomy and principles but stops short of actionable guidance for skill implementation.

lottie-animations covers rendering after effects animations as json on web and react via the bodymovin plugin, enabling designers to ship complex micro-interactions and loading states with minimal performance overhead.

aframe-webxr covers declarative 3d scene building for vr and ar via html primitives and entity-component architecture, lacking actionable procedures and failure mode guidance.

modern-web-design aggregates 2024-2025 web design principles covering performance metrics, accessibility, and interaction patterns. guidance remains foundational rather than actionable.

playcanvas-engine covers trigger recognition for webgl/webgpu game development but lacks actionable procedures, failure modes, or concrete implementation guidance.

motion-framer is a react animation library documentation page, not a skill. it describes library capabilities (gestures, layout animations, spring physics) but omits procedural guidance for integration or use.

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

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…

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

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

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

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

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

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI,…

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

web3d-integration-patterns — an installable skill for AI agents, published by freshtechbro/claudedesignskills.

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

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

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

Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill…