freshtechbro/claudedesignskills
50 skills37.6k installs31.4k starsGitHub
Install
npx skills add https://github.com/freshtechbro/claudedesignskillsSkills in this repo
1Motion FramerModern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences. The motion-framer skill documents workflows and patterns from the repository SKILL.md. --- name: motion-framer description: Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences. --- # Motion & Framer Motion ## Overview Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides `motion` components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), an.2.5kinstalls2Threejs WebglThe threejs-webgl skill. 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 web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering. This skill provides comprehensive guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations. **Scene**: Container for all 3D objects 2. **Camera**: Defines the viewing perspective 3. **Renderer**: Draws the scene to canvas (WebGL or WebGPU) 4. **Geometry**: Defines the shape of objects 5. **Material**: Defines the surface appearance 6. The workflow follows the source SKILL.md contract with progressive reference loading, clear trigger phrases, and practical steps developers can apply directly in agent sessions.2.4kinstalls3React Three Fiberreact-three-fiber is an agent skill from freshtechbro/claudedesignskills that 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 architecture, state ma. # React Three Fiber ## Overview React Three Fiber (R3F) is a React renderer for Three.js that brings declarative, component-based 3D development to React applications. Instead of imperatively creating and managing Three.js objects, you build 3D scenes using JSX components that map directly to Three.js objects. **When to Use This Skill**: - Build Developers invoke react-three-fiber during build/frontend work for frontend development tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.1.9kinstalls4Blender Web Pipelineblender-web-pipeline is an agent skill from freshtechbro/claudedesignskills that 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 models wit. # Blender Web Pipeline ## Overview Blender Web Pipeline skill provides workflows for exporting 3D models and animations from Blender to web-optimized formats (primarily glTF 2.0). It covers Python scripting for batch processing, optimization techniques for web performance, and integration with web 3D libraries like Three.js and Babylon.js. **Whe Developers invoke blender-web-pipeline during build/frontend work for frontend development tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.1.8kinstalls5Modern Web Designmodern-web-design is an agent skill from freshtechbro/claudedesignskills that modern web design trends, principles, and implementation patterns for 2024-2025. use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessi. # Modern Web Design ## Overview Modern web design in 2024-2025 emphasizes performance, accessibility, and meaningful interactions. This skill provides comprehensive guidance on current design trends, implementation patterns, and best practices for creating engaging, accessible, and performant web experiences. This meta-skill synthesizes knowledg Developers invoke modern-web-design during build/integrations work for generative media tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.8kinstalls6Lottie Animationslottie-animations is an agent skill from freshtechbro/claudedesignskills that after effects animation rendering for web and react applications. use this skill when implementing lottie animations, json vector animations, interactive animated icons, micro-interactions, or loading. # Lottie Animations ## Overview Lottie is a library for rendering After Effects animations in real-time on web, iOS, Android, and React Native. Created by Airbnb, it allows designers to ship animations as easily as shipping static assets. Animations are exported from After Effects as JSON files using the Bodymovin plugin, then rendered natively w Developers invoke lottie-animations during build/integrations work for generative media tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls7Animated Component Librariesanimated-component-libraries is an agent skill from freshtechbro/claudedesignskills that 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 when building. # Animated Component Libraries ## Overview This skill provides expertise in pre-built animated React component libraries, specifically Magic UI and React Bits. These libraries offer production-ready, animated components that significantly accelerate development of modern, interactive web applications. **Magic UI** provides 150+ TypeScript compon Developers invoke animated-component-libraries during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls8Web3d Integration Patternsweb3d-integration-patterns is an agent skill from freshtechbro/claudedesignskills that meta-skill for combining three.js, gsap scrolltrigger, react three fiber, motion, and react spring for complex 3d web experiences. use when building applications that integrate multiple 3d and animati. # Web 3D Integration Patterns ## Overview This meta-skill provides architectural patterns, best practices, and integration strategies for combining multiple 3D and animation libraries in web applications. It synthesizes knowledge from the threejs-webgl, gsap-scrolltrigger, react-three-fiber, motion-framer, and react-spring-physics skills into coh Developers invoke web3d-integration-patterns during build/frontend work for frontend development tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls9Spline Interactivespline-interactive is an agent skill from freshtechbro/claudedesignskills that 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, exporting to . # Spline Interactive - Browser-Based 3D Design and Animation ## Overview Spline is a browser-based 3D design and animation platform that enables creators to build interactive 3D experiences without requiring code or specialized software knowledge. It provides a collaborative visual editor for designing, animating, and exporting 3D scenes across m Developers invoke spline-interactive during build/frontend work for frontend development tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls10AnimejsThe animejs skill is designed for versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences,. Anime.js Lightweight JavaScript animation library with powerful timeline and stagger capabilities for web animations. Overview Anime.js (pronounced "Anime JS") is a versatile animation engine that works with DOM elements, CSS properties, SVG attributes, and JavaScript objects. Invoke when the user creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations.1.6kinstalls11Gsap ScrolltriggerThe gsap-scrolltrigger skill is designed for create GSAP and ScrollTrigger scroll-driven animations, timelines, and tweens. GSAP & ScrollTrigger Development Overview GSAP (GreenSock Animation Platform) is the industry-leading JavaScript animation library for creating high-performance, production-quality animations. ScrollTrigger is GSAP's powerful plugin for scroll-driven animations. Invoke when the user builds web animations, scroll-triggered effects, or GSAP timelines.1.6kinstalls12Pixijs 2dThe pixijs-2d skill is designed for build high-performance 2D WebGL games and interactive graphics with PixiJS. PixiJS 2D Rendering Skill Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Don't use for: 3D graphics (use Three.js/R3F), simple animations (use Motion/GSAP), basic DOM manipulation. Invoke when the user builds PixiJS 2D graphics, sprites, or WebGL interactive scenes.1.5kinstalls13Rive InteractiveThe rive-interactive skill is designed for state machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components. Rive Interactive - State Machine-Based Vector Animation Overview Rive is a state machine-based animation platform that enables designers to create interactive vector animations with complex logic and runtime interactivity. Unlike timeline-only animation tools (like Lottie), Rive supports state machines, input handling, and two-way data binding between application code and animations. Invoke when the user asks about rive interactive or related SKILL.md workflows.1.5kinstalls14Locomotive ScrollThe locomotive-scroll skill is designed for comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing. Locomotive Scroll Comprehensive guide for implementing smooth scrolling, parallax effects, and scroll-driven animations using Locomotive Scroll. HTML Structure Every Locomotive Scroll implementation requires specific data attributes: 2. Invoke when the user asks about locomotive scroll or related SKILL.md workflows.1.5kinstalls15Lightweight 3d EffectsThe lightweight-3d-effects skill combines Zdog, Vanta.js, and Vanilla-Tilt.js for decorative 3D elements and micro-interactions without heavy frameworks. Zdog provides a designer-friendly pseudo-3D engine using Canvas or SVG with drag rotation and small bundle size for illustrative shapes like Ellipse and Rect primitives. Vanta.js supplies animated 3D backgrounds powered by Three.js or p5.js for hero sections. Vanilla-Tilt.js adds smooth parallax tilt on cards and images responding to mouse or gyroscope input. The skill targets decorative illustrations, hero animations, card tilt effects, and performance-focused landing page depth where full WebGL scenes are unnecessary. Setup snippets document CDN imports, illustration configuration, animation loops, and tilt option tuning such as max tilt, perspective, and glare settings. Developers invoke it when tasks mention Zdog pseudo-3D, Vanta backgrounds, Vanilla-Tilt parallax, card tilt, or lightweight landing page visuals.1.5kinstalls16Babylonjs EngineThe babylonjs-engine skill supports comprehensive Babylon.js 3D web rendering for games, visualizations, and immersive applications as an alternative to Three.js with built-in editor integration. Core setup creates Engine on canvas, Scene with optional geometry maps for large mesh counts, render loop, and resize handlers. ES6 TypeScript imports cover Engine, Scene, FreeCamera, Vector3, HemisphericLight, and CreateSphere mesh creation. Camera systems include FreeCamera FPS movement with WASD keys, ArcRotateCamera orbit controls, and UniversalCamera combinations. Lighting spans HemisphericLight, DirectionalLight, PointLight, and SpotLight with shadow generators. PBR materials use PBRMaterial with metallic roughness workflow, environment textures, and clear coat options. Mesh loading imports GLTF, OBJ, and STL via SceneLoader AppendAsync patterns. Physics integrates CannonJS or Havok plugin with impostors and collision events. Animation uses Animation class keyframes or animation groups from imported assets. Post-processing adds default pipeline bloom, depth of field, and motion blur. WebGPU engine option available for next-gen rendering.1.5kinstalls17Scroll Reveal LibrariesThe scroll-reveal-libraries skill 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 effects without complex animation orchestration Triggers on tasks involving scroll animations scroll-triggered reveals AOS simple animations or basic scroll effects Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases Compare with motion-framer for React-specific animations Scroll Reveal Libraries Overview This skill covers AOS Animate On Scroll a lightweight CSS-driven library for scroll-triggered animations AOS excels at simple fade slide and zoom effects activated when elements enter the viewport Key Features Minimal Setup Single JavaScript file CSS Data Attribute API Configure animations in HTML Performance CSS-driven GPU-accelerated animations 50 Built-in Animations Fades slides zooms flips Framework Agnostic Works with vanilla JS React Vue etc When to Use Marketing landing pages with simple scroll effects Content-heavy sites blogs documentation Quick prototypes requiring scroll animations Projects where GSAP Framer Motion complexity isn't ne.1.4kinstalls18React Spring PhysicsThe react-spring-physics skill physics-based animation library combining React Spring spring dynamics gesture integration 60fps animations and Popmotion low-level composable animation utilities reactive streams Use when building fluid natural-feeling UI animations gesture-driven interfaces physics simulations or spring-loaded interactions Triggers on tasks involving React Spring hooks spring physics inertia scrolling physics-based motion animation composition or natural UI movements Alternative physics appr React Spring Physics Physics-based animation for React applications combining React Spring's declarative spring animations with Popmotion's low-level physics utilities Overview React Spring provides spring-physics animations that feel natural and interruptible Unlike duration-based animations springs calculate motion based on physical properties mass tension friction resulting in organic realistic movement Popmotion complements this with composable animation functions for keyframes decay and inertia When to use this skill Natural physics-based UI animations Gesture-driven interfaces drag swipe scroll Interruptible animations that respond to user input mid-motion Smooth transiti.1.4kinstalls19Barba JsThe barba-js skill page transitions library for creating fluid smooth transitions between website pages Use this skill when implementing page transitions creating SPA-like experiences adding animated route changes or building websites with smooth navigation Triggers on tasks involving Barba js page transitions routing view management transition hooks GSAP integration or smooth page navigation Works with gsap-scrolltrigger for transition animations Barba js Modern page transition library for creating fluid smooth transitions between website pages Barba js makes multi-page websites feel like Single Page Applications SPAs by hijacking navigation and managing transitions without full page reloads Overview Barba js is a lightweight 7kb minified and compressed JavaScript library that intercepts navigation between pages fetches new content via AJAX and smoothly transitions between old and new containers It reduces page load delays and HTTP requests while maintaining the benefits of traditional multi-page architecture Core Features Smooth page transitions without full reloads Lifecycle hooks for precise control over transition phases View-based logic for page-specific behaviors Built-in r.1.4kinstalls20Substance 3d TexturingThe substance-3d-texturing skill 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 3D assets for real-time rendering or automating texture workflows Triggers on tasks involving Substance 3D Painter PBR texturing material creation texture export for Three js Babylon js Unity Unreal glTF optimization or Python API automation Creates optimized textures for threejs-webgl react-three Substance 3D Texturing Overview Master PBR Physically Based Rendering texture creation and export workflows for web and real-time engines This skill covers Substance 3D Painter workflows from material creation through web-optimized texture export with Python automation for batch processing and integration with WebGL WebGPU engines Key capabilities PBR material authoring metallic roughness workflow Web-optimized texture export glTF Three js Babylon js Python API automation for batch export Texture compression and optimization for real-time rendering Core Concepts PBR Workflow Substance 3D Painter uses the metallic roughness PBR workflow with these core channels Base Texture.1.4kinstalls21Aframe WebxrThe aframe-webxr skill 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 experiences AR experiences 360-degree media viewers or immersive web content with minimal JavaScript Triggers on tasks involving A-Frame WebXR VR development AR development entity-component-system declarative 3D or HTML-based 3D scenes Built on Three js with accessible HTML-first approach A-Frame WebXR Skill When to Use This Skill Build VR AR experiences with minimal JavaScript Create cross-platform WebXR applications desktop mobile headset Prototype 3D scenes quickly with HTML primitives Implement VR controller interactions Add 3D content to web pages declaratively Build 360 image video experiences Develop AR experiences with hit testing Core Concepts 1 Entity-Component-System ECS A-Frame uses an entity-component-system architecture where Entities are containers like div in HTML Components add functionality appearance to entities Systems provide global functionality html Entity with components a-entity geometry primitive box width 2 material color red metalness 0 5 position 0 1 5 3 rota.1.4kinstalls22Playcanvas EngineThe playcanvas-engine skill 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 performance-critical web experiences. Triggers on tasks involving PlayCanvas, entity-component systems, game engine development, WebGL games, 3D browser applications, editor-first workflows, or real-time 3D rendering. Alternative to Three.js with game-specific features and integrated development environment. # PlayCanvas Engine Skill Lightweight WebGL/WebGPU game engine with entity-component architecture, visual editor integration, and performance-focused design. ## When to Use This Skill Trigger this skill when you see: - "PlayCanvas engine" - "WebGL game engine" - "entity component system" - "PlayCanvas application" - "3D browser games" - "online 3D editor" - "lightweight 3D engine" - Need for editor-first workflow Compare with: - **Three.js**: Lower-level, more flexible but requires more setup - **Babylon.js**: Feature-rich but heavier, has editor but less mature - **A-Frame**: VR-focused, declarative HTML approach - Use PlayCanvas for: Game projects, editor-first work.1.4kinstalls23Skill Creatorskill-creator in freshtechbro/claudedesignskills guides developers through creating reusable agent skills with a standardized SKILL.md layout rather than ad-hoc prompt fragments. The workflow covers structuring skill metadata, writing activation triggers, documenting constraints, and packaging supporting files so Claude Code, Cursor, and similar agents can load the skill reliably. Developers reach for skill-creator when they have proven instructions they want to promote into a versioned, shareable skill artifact the whole team can invoke by name. The skill emphasizes consistent frontmatter, clear when-to-use boundaries, and packaging patterns that survive repeated agent sessions. It fits greenfield skill authoring from scratch rather than distilling an already-finished chat transcript. Common triggers include create a new skill, package agent instructions, standardize SKILL.md format, and publish reusable agent workflows to a skills repository.1.3kinstalls24Aframe WebxrA Claude skill for A-Frame, a declarative HTML framework for building browser-based 3D, VR and AR experiences on top of Three.js. A solo builder reaches for it when creating WebXR apps, VR or AR scenes, or 360-degree media viewers with an accessible HTML-first, entity-component approach and minimal JavaScript.0installs25Animated Component LibrariesA Claude skill combining two pre-built animated React component collections, Magic UI and React Bits, over Tailwind and Motion. A solo builder reaches for it when building landing pages, marketing sites or dashboards and wants polished animated components off the shelf rather than hand-coding each animation with Framer Motion or GSAP.0installs26Animation ComponentsA bundled Claude skill that pulls together several React animation and component libraries - React Spring, Magic UI, React Bits, AOS, Anime.js and Lottie - into one place. A solo builder reaches for it when they want to add polished motion and pre-built UI components to a web app without researching and wiring each library separately.0installs27AnimejsA Claude skill for Anime.js, a versatile JavaScript animation engine for DOM, CSS, SVG and JS objects. A solo builder reaches for it when creating timeline-based animations, stagger effects, SVG morphing or complex choreographed sequences, especially for SVG-heavy or React-independent projects where GSAP would be overkill.0installs28Authoring MotionA skill bundle from the Claude Design Skillstack covering a professional 3D authoring and motion-graphics pipeline: Blender, Spline, Rive and Substance 3D. A solo builder reaches for it when they need to model, texture and animate 3D assets and export interactive motion graphics that plug into a modern animated web experience.0installs29Babylonjs EngineA comprehensive Claude skill for the Babylon.js 3D web engine. A solo builder reaches for it when building real-time 3D experiences, browser games, interactive visualizations or immersive apps, using scenes, PBR materials, physics and shadow mapping. It is a game-engine-flavored alternative to Three.js with a built-in editor.0installs30Barba JsA Claude skill for Barba.js, a library that creates smooth animated transitions between website pages for an SPA-like feel. A solo builder reaches for it when they want fluid animated route changes, view management and GSAP-integrated transition hooks on a multi-page marketing or portfolio site without rebuilding it as a full single-page app.0installs31Blender Web PipelineA Claude skill covering the Blender-to-web pipeline: exporting models to glTF, optimizing 3D assets, baking textures and automating batch workflows with Python. A solo builder reaches for it when they need to turn Blender models into compressed, web-ready assets for a Three.js, React Three Fiber or Babylon.js scene.0installs32Core 3d AnimationA skill bundle from the Claude Design Skillstack covering the core 3D and animation stack: Three.js, GSAP, React Three Fiber, Framer Motion and Babylon.js. A solo builder reaches for it when building a modern animated or 3D-heavy web UI and wants proven guidance across the essential rendering and motion libraries in one place.0installs33Extended 3d ScrollA skill bundle from the Claude Design Skillstack covering an extended 3D and smooth-scroll web stack: A-Frame, PlayCanvas, PixiJS, Locomotive Scroll and Barba.js. A solo builder reaches for it when building an immersive marketing site or portfolio that needs WebGL 3D scenes, buttery scroll effects and seamless page transitions beyond the core Three.js/GSAP toolkit.0installs34Gsap ScrolltriggerA comprehensive Claude skill for the GSAP animation platform and its ScrollTrigger plugin. A solo builder reaches for it when creating scroll-driven experiences, timelines, pinning, scrubbing or parallax effects, or sequencing animations across DOM, SVG, Canvas and Three.js elements on a marketing or portfolio site.0installs35Lightweight 3d EffectsA Claude skill for adding lightweight pseudo-3D visual effects to websites using Zdog, Vanta.js and Vanilla-Tilt.js. A solo builder reaches for it when they want animated backgrounds, parallax card tilt, or subtle depth on a hero or landing page without pulling in a full WebGL engine and paying the performance cost.0installs36Locomotive ScrollA skill for Locomotive Scroll, a smooth-scrolling library with parallax, viewport detection and scroll-driven animation. A solo builder reaches for it to build immersive, smooth-scrolling websites with parallax and sticky or horizontal scroll effects, often paired with GSAP ScrollTrigger for advanced scroll-driven animation.0installs37Lottie AnimationsA skill for Lottie, which renders After Effects JSON vector animations on the web and in React. A solo builder reaches for it to drop in designer-created animated icons, micro-interactions and loading animations using lottie-web, lottie-react or dotLottie, as a lightweight alternative to animated SVGs.0installs38Meta SkillsA meta-skill bundle from the Claude Design Skillstack that provides integration patterns and modern web design guidelines for combining 3D and animation libraries into one cohesive experience. A solo builder reaches for it when they have several 3D or motion tools in play and need guidance on making them work together as a polished, consistent frontend rather than clashing effects.0installs39Modern Web DesignA skill covering modern web design trends, principles and implementation patterns. A solo builder reaches for it when designing a website or interactive experience and wants guidance on micro-interactions, scrollytelling, bold minimalism, glassmorphism, cursor UX, accessibility and performance-first design systems, with pointers to the right animation and 3D libraries.0installs40Motion FramerA skill for Motion (Framer Motion), a modern animation library for React and JavaScript. A solo builder reaches for it to add production-ready motion to a UI - micro-interactions, page transitions, gesture handling, layout animations and complex sequences - using declarative motion components and variants.0installs41Pixijs 2dA skill for PixiJS, a fast, lightweight 2D rendering engine using WebGL/WebGPU. A solo builder reaches for it to build 2D games, particle systems, interactive canvases, sprite animations or UI overlays on 3D scenes - rendering thousands of sprites at 60fps where plain Canvas2D would stall.0installs42Playcanvas EngineA skill for PlayCanvas, a lightweight WebGL/WebGPU game engine with an entity-component architecture and an integrated visual editor. A solo builder reaches for it to ship browser-based games and interactive, performance-critical 3D web apps using an editor-first workflow, as a game-focused alternative to raw Three.js.0installs43React Spring PhysicsA skill combining React Spring and Popmotion for physics-based UI animation. A solo builder reaches for it to create fluid, natural-feeling interactions - gesture-driven interfaces, inertia scrolling, spring-loaded motion - where physically accurate movement matters more than simple tween timing.0installs44React Three FiberA skill for React Three Fiber (R3F), a React renderer for Three.js that lets you build 3D scenes declaratively with components and state. A solo builder reaches for it when they want interactive 3D inside a React app - product configurators, portfolios, games or data visualization - with reusable, component-based abstractions.0installs45Rive InteractiveA skill for Rive, a state-machine-based vector animation tool with runtime interactivity. A solo builder reaches for it to build state-driven UI, animated components with logic, and two-way interactive animations - integrating them into React with input handling and ViewModel data binding, where a static Lottie file would not suffice.0installs46Scroll Reveal LibrariesA skill for adding simple scroll-triggered reveal animations with AOS (Animate On Scroll). A solo builder reaches for it when building marketing pages, landing pages, or content-heavy sites that need basic fade and slide effects on scroll, without the complexity of GSAP ScrollTrigger or Locomotive Scroll.0installs47Spline InteractiveA skill for Spline, a browser-based visual 3D design tool with animation and web export. A solo builder reaches for it to create interactive 3D scenes and UI without writing Three.js by hand, then export them into React or the web - ideal for designers who prefer a visual editor over code.0installs48Substance 3d TexturingA skill for the Adobe Substance 3D Painter texturing and material-creation workflow. A solo builder reaches for it when they need PBR materials and optimized textures for web or game engines - exporting for Three.js, Babylon.js, Unity or Unreal and automating repetitive texture work through the Python API.0installs49Threejs WebglA comprehensive Three.js skill for building interactive 3D scenes and WebGL/WebGPU applications on the web. A solo builder reaches for it when creating product configurators, 3D data visualizations, or immersive experiences and needs guidance across scenes, cameras, meshes, materials, lighting, textures and animation.0installs50Web3d Integration PatternsA meta-skill describing architecture patterns for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion and React Spring into complex 3D web experiences. A solo builder reaches for it when a single app needs several 3D and animation libraries to coexist, with shared state management and performance tuning across the stack.0installs