Coding standards, frameworks, refactoring, and code review (16.2K skills)
Create or debug interactive web scenes with Three.js, including product viewers and animated page visuals. The skill covers cameras, lighting, model loading, controls, performance tuning, and cleanup of graphics resources when scenes close.
Add controllable rain, storms, and snow to Three.js scenes. Coordinate visible precipitation, lightning with delayed thunder, accumulating snow, wet ground, puddles, and seamless ambient audio while sharing particle resources across changing weather states.
Add or debug web animations with GSAP, from entrance effects to scroll-driven sequences. Coordinate timing across multiple elements, adjust motion, and address rendering performance and cleanup when using animations in React.
Add a lightweight interactive globe to a web page with cobe. Covers location markers, rotation, canvas sizing, responsive updates, performance settings, and integration with React or Next.js for hero sections, about pages, and cards.
Add animated liquid-metal borders to React buttons, cards, tabs, and other surfaces using metal-fx. The skill covers visual tuning, linking effects to interaction states, preserving keyboard access, and providing static borders when animation or WebGL is unavailable.
Create CSS snippets that gradually fade the horizontal or vertical edges of images, text, or containers. Adjust fade width and opacity, with both standard and Safari mask properties included.
Build interactive 3D globe visualizations with globe.gl, displaying locations, connections, regions, and labels. The skill guides setup in HTML or React, explains data fields for each layer, and addresses sizing and mobile performance.
Build a burning-paper loading ring that keeps moving during heavy page setup. The skill covers background rendering, progress display, a smooth transition into the page, and support for reduced motion preferences.
Build 2D physics scenes for web pages with Matter.js. This skill guides engine setup, canvas rendering, adding objects, optional mouse dragging and connections between objects, plus cleanup when a scene is removed.
Add a background blur that grows stronger toward the top or bottom of a webpage. Layered CSS masks control the transition, with snippets and guidance for adjusting height, blur strength, stacking order, and rendering cost.
Implement a WebGL transition where a ragged ember edge burns away the old page and reveals the next scene in motion. The skill covers glowing embers, porous char, rendering optimizations, transition timing, and reduced-motion behavior.
Build falling leaves or petals with visible front-and-back tumbling and sideways motion tied to rotation. Covers 2D canvas and 3D implementations, depth layers, particle density, rendering costs, and reduced-motion support.
Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.
Build a soft spotlight that follows the cursor and reveals a second image over a visible base. Use aligned images to show color, textures, product details, or before-and-after treatments, with smooth motion and accessible alternatives.
Build particle trails that keep consistent spacing as the pointer speeds up or slows down. Covers distance-based emission, drifting motion, placement in 3D scenes, performance checks, and alternatives for touch, keyboard use, and reduced motion.
Build chapter-based pages that move sideways as visitors scroll vertically. Deriving each scene from scroll position keeps reverse scrolling, jumps, and reloads consistent, with guidance for transitions, chapter links, keyboard controls, and reduced motion.
Build and test Three.js games for mobile browsers, covering touch controls, screen orientation, readable game information, and device-appropriate graphics. Refine movement, actions, inventory interactions, and performance through checks of real mobile browser behavior.
Add a white, twinkling dotted trail that follows the mouse behind website content. The skill guides WebGPU rendering, which uses the graphics processor, with static backgrounds for unsupported devices and accessibility preferences.
Use border-beam to add moving edge highlights or breathing glows to React controls and panels. Connect effects to loading, selection, and focus states while retaining clear text, static indicators, keyboard focus, and support for reduced motion.
Build reusable enemy types and attack sets for Three.js action games. Separate enemy definitions from live state, standardize models and hit detection, and validate combat timing, placeholder assets, and desktop and mobile encounters.
Build particle trails that respond to cursor or touch movement with consistent spacing at different speeds. Reuse a fixed pool of GPU-rendered particles, add keyboard-triggered bursts, and handle reduced motion, resizing, and cleanup.
Create Three.js game effects that clearly communicate attacks, hits, damage, and status changes. Define each effect’s purpose and lifetime, limit resource use, and test overlapping effects, repeated triggers, low-quality settings, and reduced-motion alternatives.
Build and tune enemy behavior for action games, including targeting, movement, attacks, retreats, and boss phases. Organize decisions into explicit states, make attacks readable to players, and check behavior with repeatable tests and browser encounters.
Prepare Vesperfall game assets as paired transparent PNG cards and live 3D previews. Track each model’s actual source, expose available animations, and validate catalog displays, ground contact, and review pages through tests and browser checks.