Skill UI

Designs and implements immersive web experiences using Three.js, React Three Fiber, Spline, and WebGL, covering product configurators, portfolios, scroll-driven scenes, and performance-aware 3D delivery.

This skill generates code to create complex, interactive 3D scenes and visualizations on the web using the Three.js library and WebGL. It covers the entire development lifecycle, including setting up the core components (Scene, Camera, Renderer), defining geometry, applying materials, adding lighting, and implementing animation loops. Ideal for web developers needing to display product mockups, scientific data visualizations, or immersive user experiences.

This guide provides a comprehensive overview of the core concepts of Three.js, the leading JavaScript library for WebGL 3D rendering. It covers setting up the entire 3D environment, including the Scene, Camera types (Perspective, Orthographic), and the WebGLRenderer. Users will learn to handle object hierarchies, apply transforms (position, rotation, scale), and manage complex rendering settings like lighting, shadows, and environment maps. Essential for any developer starting a WebGL project.

This skill covers implementing complex user interactions within Three.js scenes. It demonstrates techniques like raycasting for precise object selection and click detection, handling mouse and touch inputs, and integrating various camera controls (OrbitControls, FlyControls, FirstPersonControls). Use this when building highly interactive, immersive 3D web applications.

A comprehensive guide to implementing various lighting techniques in Three.js, covering Ambient, Directional, Point, Spot, and RectArea lights. Learn how to configure realistic shadow maps, optimize lighting performance, and achieve high visual fidelity for your 3D web scenes.

This guide details advanced post-processing techniques for Three.js, allowing developers to enhance 3D scenes with cinematic visual effects. It covers implementing Bloom (glow), Depth of Field (DOF), Anti-Aliasing (FXAA/SMAA), and Ambient Occlusion (SSAO) using EffectComposer, significantly boosting the visual fidelity and realism of web-based 3D applications.

A comprehensive master guide for developers looking to embed interactive 3D scenes created in Spline.design into modern web projects. It provides specific integration methods for various frameworks, including React, Next.js, Vue, and vanilla JavaScript, ensuring optimal performance and runtime control for stunning UI/UX experiences.

A comprehensive guide covering best practices for creating videos using Remotion and React. Learn how to incorporate advanced features such as 3D rendering (Three.js), complex animations, audio synchronization, data charting, subtitles, and sophisticated scene transitions. This skill covers 29 domain-specific rules for professional video pipelines.

This comprehensive skill transforms raw game concepts into fully actionable, structured Unity development projects. It guides users through a five-phase pipeline, generating detailed Game Design Documents (GDDs), technical scene blueprints, core system architectures, and ready-to-use AI prompts for assets (3D models, textures, music, SFX). Ideal for concept validation and starting a complex game project from scratch.

A comprehensive guide covering best practices for creating videos using Remotion and React. Learn how to incorporate advanced features such as 3D rendering (Three.js), complex animations, audio synchronization, data charting, subtitles, and sophisticated scene transitions. This skill covers 29 domain-specific rules for professional video pipelines.

A comprehensive guide for setting up a robust 3D game environment in Godot Engine 4. Covers core elements such as Node3D transforms, Camera setup, various lighting sources (Directional/Omni), WorldEnvironment for post-processing, assigning StandardMaterials, and building tile-based levels using GridMap. Essential for any developer starting or refining a 3D scene.

A comprehensive guide to structuring games in Godot 4.7 using nodes and scenes. Learn best practices for scene composition, safely instantiating reusable PackedScenes at runtime, managing global state with autoload singletons, and preventing common runtime errors like 'node not found' or freed-node access. Essential for robust game development.