@freshtechbro

threejs-webgl covers three.js 3d graphics fundamentals including scene setup, materials, lighting, and performance optimization. provides code patterns for common tasks like model loading, shadows, raycasting, and shader integration with practical examples throughout.

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.

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.

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.

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.

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.

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.

pixijs-2d covers high-performance 2d rendering for sprites, particles, and interactive graphics, but lacks actionable procedures and failure mode documentation.

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

barba-js hijacks navigation to enable smooth page transitions in multi-page websites, creating spa-like experiences without full reloads. lightweight library with lifecycle hooks and plugin extensibility.

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.

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…

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…