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.

A comprehensive guide for writing efficient GLSL shaders (Vertex/Fragment) used in WebGL and game engines. Learn fundamental concepts like shader structure, uniforms, varying variables, and advanced techniques such as raymarching and post-processing effects, optimizing graphics rendering performance on the GPU.

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 skill provides expert guidance on Makepad's cross-platform development lifecycle. It helps users understand platform-specific APIs, manage conditional compilation (e.g., macOS, Windows, WebGL2), and handle OS-specific behaviors across desktop, mobile, and web environments. Use it when targeting diverse deployment targets or integrating platform-level features.

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.

A comprehensive skill guide for building complex, feature-rich web games and game engines using modern web technologies like HTML5, Canvas, WebGL, and JavaScript. Covers full 2D and 3D game development workflows, including implementing the game loop, physics simulation (collision detection, Newtonian physics), handling diverse input methods (touch, gamepad), managing assets, and integrating multiplayer features via WebRTC. Ideal for creating everything from simple platformers to advanced 3D simulations.

Create a single-file HTML presentation deck in an editorial magazine and e-ink style, with swipe navigation, WebGL fluid backgrounds, serif headlines, sans-serif body text, and modular layouts for talks, launches, and shareable presentations.

Generates single-file horizontal page-flip web PPTs with WebGL backgrounds, presenter view, audience sync, speaker notes, chapter covers, data highlight and image grid templates. Supports magazine-inspired electronic ink style and Swiss International typographic style for talks, demos and product launches.

Provides comprehensive architectural guidelines and code patterns for developing high-end, immersive 3D web experiences. This skill covers advanced topics such as custom WebGL shaders, post-processing effects (Bloom, Depth of Field), realistic physics interactions, and crucial performance optimization techniques, ensuring a premium, polished user experience across devices.

A sophisticated presentation template designed to mimic the look and feel of a digital magazine or e-ink publication. Featuring a dynamic WebGL liquid background and elegant serif typography, it is perfect for high-impact marketing reports, editorial storytelling, and showcasing rich, visually driven content in an immersive, horizontal scrolling format.

A comprehensive guide for creating cinematic, fluid background hero sections using advanced web technologies. It leverages WebGL, complex CSS gradients, and Canvas to generate dynamic, atmospheric visuals. Ideal for video intros, SaaS landing pages, and marketing posters that require a sophisticated, high-impact background.

This skill covers setting up a foundational Three.js scene. It includes configuring import maps, initializing the Scene, PerspectiveCamera, and WebGLRenderer trio, establishing a responsive render loop, and adding OrbitControls. Use this when bootstrapping a new Three.js application or debugging rendering issues like blank canvases. It excludes model loading and material lighting setup.