200 skills · sorted by relevance
Turn technical ideas into detailed, interactive SVG illustrations that resemble real machines or instruments. Moving parts and live readings share the same model, creating diagrams for articles, documentation, or landing pages that readers can explore.
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.
Capture long web pages by scrolling, waiting for content to settle and stitching screen captures together. Repair missing sections on animated or lazy loaded pages, then derive section crops and validate them against visual references.
Build a Three.js object viewer with a gentle camera lean on hover and a click-to-inspect mode. Visitors can rotate and zoom the object, then return it to its original position using mouse, touch, or keyboard controls.
Make 3D canvas output sharper on Retina and other high-density displays. Coordinate rendering and post-processing resolution, preserve pointer accuracy, and verify fixed 200% rendering or automatic scaling with measured performance and explicit fallbacks.
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.
The English summary is being prepared. Showing the original description.
用于构建或审查 Canvas 2D、Three.js/WebGL、React Three Fiber、GLSL shader、ShaderToy 到 WebGL 适配、2D/3D 可视化、游戏渲染、动画循环、GPU 资源清理或渲染性能。不要用于标准 DOM UI、已有图表库覆盖的图表或非图形类性能工作；中文触发词包括 Canvas、Three.js、WebGL、GLSL、Shader、3D、数据可视化、游戏。
The English summary is being prepared. Showing the original description.
Use when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, GLSL shaders, ShaderToy-to-WebGL adaptation, 2D/3D visualization, game rendering, animation loops, GPU resource cleanup, or rendering performance. Do not use for standard DOM UI, charts already covered by a chart library, or non-graphical performance work; Chinese triggers include Canvas, Three.js, WebGL, GLSL, Shader, 3D, data visualization, games.
The English summary is being prepared. Showing the original description.
Expert in 2000s-era music visualization (Milkdrop, AVS, Geiss) and modern WebGL implementations. Specializes in Butterchurn integration, Web Audio API AnalyserNode FFT data, GLSL shaders for audio-reactive visuals, and psychedelic generative art. Activate on "Milkdrop", "music visualization", "WebGL visualizer", "Butterchurn", "audio reactive", "FFT visualization", "spectrum analyzer". NOT for simple bar charts/waveforms (use basic canvas), video editing, or non-audio visuals.
The English summary is being prepared. Showing the original description.
Audit a browser fingerprint for internal contradictions with the liarjs CLI - canvas, WebGL, WebGL2, WebGPU, audio, 220 fonts, WebRTC and timezone probes, scored against the TLS/HTTP/ASN view of the same request. Use when asked to run a browser fingerprint test, see what a fingerprint looks like, check canvas or WebGL fingerprint stability, compare a spoofed profile against a real browser, or find out whether a browser profile is self-consistent.
The English summary is being prepared. Showing the original description.
Expert in 2000s-era music visualization (Milkdrop, AVS, Geiss) and modern WebGL implementations. Specializes in Butterchurn integration, Web Audio API AnalyserNode FFT data, GLSL shaders for audio-reactive visuals, and psychedelic generative art. Activate on "Milkdrop", "music visualization", "WebGL visualizer", "Butterchurn", "audio reactive", "FFT visualization", "spectrum analyzer". NOT for simple bar charts/waveforms (use basic canvas), video editing, or non-audio visuals.
The English summary is being prepared. Showing the original description.
3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.
The English summary is being prepared. Showing the original description.
Expert in 2000s-era music visualization (Milkdrop, AVS, Geiss) and modern WebGL implementations. Specializes in Butterchurn integration, Web Audio API AnalyserNode FFT data, GLSL shaders for audio-reactive visuals, and psychedelic generative art. Activate on "Milkdrop", "music visualization", "WebGL visualizer", "Butterchurn", "audio reactive", "FFT visualization", "spectrum analyzer". NOT for simple bar charts/waveforms (use basic canvas), video editing, or non-audio visuals.
The English summary is being prepared. Showing the original description.
Build or refine a 3D scene by comparing live screenshots with a target image. This skill repeatedly evaluates composition, lighting, materials, and detail, then guides revisions while checking that rendering speed remains acceptable for the target platform.
Create browser-based art and animations with p5.js, including visuals that respond to mouse input or sound. The skill guides concept development, coding, previewing, and exporting finished work as images, videos, or vector graphics.
Create animated lesson diagrams, sliders that update figures, and interactive panels that explain how systems work. It also builds moving dot patterns for page headers, with rules for readability, themes, and reduced motion.
Build custom visual effects in Three.js using shaders, programs that control shape and surface appearance. Add animated waves, glowing edges, gradients, or dissolving surfaces, and extend existing materials with custom rendering behavior.
Helps agents build the foundations of a Three.js scene, including cameras, rendering settings, object grouping, and movement. Code examples cover coordinate systems, resizing, animation timing, resource cleanup, and basic performance improvements for browser-based 3D projects.
Add a 3D card carousel to a HyperFrames video. Rounded cuboids enter from the right, rotate in sequence, pause on a featured card, and exit left, with 40 variables for content, geometry, lighting, and camera settings.
Add an eight-second HyperFrames headline animation where square tiles lift, tilt, and flip to reveal a second message. Customize both headlines and 18 settings covering tile size, sweep direction, timing, depth, bounce, and shadows.
Add a new effect to @remotion/effects, including its implementation, package entry points, documentation, interactive demo, and preview images. Follow the package conventions and verify the changes with tests, formatting checks, and builds.
Build websites with layered depth, scroll-driven transitions, and animated text using static images, CSS, and JavaScript. The skill covers asset inspection, visual planning, implementation, and checks for performance and motion accessibility.
Test browser games through player actions and screenshot review. It checks startup, controls, scene changes, and interface visibility, then reports concrete issues with severity, reproduction steps, and the likely responsible subsystem.
Design tests for charts, dashboards, and interactive diagrams. Combine data checks, component tests, screenshot comparisons, and end-to-end workflows to catch incorrect values, broken interactions, and visual changes while keeping tests stable.