Threejs

remotion-video-creation is a Remotion-focused skill for React video work. It helps reduce rendering mistakes with 29 rules covering animations, assets, audio, captions, charts, compositions, and transitions. Use it for Video Editing workflows, templated explainers, social clips, and data-driven motion graphics.

shader-dev is a practical GLSL shader skill for ShaderToy-style real-time visuals. Use the shader-dev skill to build or debug ray marching, SDF scenes, lighting, particles, fluid motion, post-processing, and shader-dev for UI Design with less guesswork than a generic prompt.

frontend-dev is a frontend-dev skill for building polished, production-ready web pages with premium UI, cinematic motion, AI-generated media, persuasive copy, and generative art. Use it for landing pages, marketing sites, product pages, dashboards, and other frontend work where design, content, and implementation details need to stay aligned.

remotion-best-practices is a Remotion skill guide for install, usage, and rule-based workflows covering animation, assets, audio, captions, FFmpeg, and calculateMetadata.

threejs-textures skill for Frontend Development covers texture loading, UV mapping, colorSpace, wrapping, filtering, and environment maps so images render correctly on Three.js materials.

threejs-shaders is a practical guide for writing Three.js shaders with GLSL, ShaderMaterial, uniforms, vertex deformation, and fragment effects. Use it for frontend development when you need a working shader baseline, clearer material choices, and less guesswork than a generic prompt.

threejs-materials is a Three.js materials skill for choosing, configuring, and troubleshooting mesh materials. Use it for realistic PBR, unlit flat shading, toon and debug views, texture-driven styling, and custom shaders. It is useful for Frontend Development teams that need faster, more consistent material decisions.

threejs-postprocessing skill for Frontend Development: add EffectComposer pipelines, bloom, depth of field, blur, color grading, and custom screen-space passes. Use this guide to set up the render chain, tune effects, and wire composer rendering into an existing Three.js scene.

threejs-loaders helps you load Three.js assets correctly, including GLTF/GLB models, textures, HDR environments, and other async resources. Use this threejs-loaders skill for Frontend Development when you need reliable loading, progress handling, and fewer scene-ready bugs.

threejs-lighting is a practical Three.js lighting skill for Frontend Development. It helps you choose light types, set shadows, add environment lighting, and fix scenes that look flat, too dark, or overexposed. Use the threejs-lighting guide when you need faster, more consistent scene lighting.

threejs-interaction is a practical Three.js interaction guide for frontend development. It covers raycasting, object picking, mouse and touch input, and camera controls to help you build clickable, selectable, and responsive 3D experiences with less guesswork.

threejs-geometry helps you choose and build Three.js geometry for real scenes: built-in shapes, BufferGeometry, custom meshes, and instancing. Use the threejs-geometry skill for Frontend Development when you need the right constructor, parameter order, and performance-aware output.

threejs-fundamentals helps frontend developers build and debug core Three.js app setup: scene, camera, renderer, lights, meshes, transforms, and object hierarchy. Use this threejs-fundamentals guide to fix blank canvases, place objects correctly, and ship a clean first scene.

threejs-animation skill for Three.js motion systems: keyframes, animation clips, mixers, actions, skeletal playback, morph targets, and procedural motion. Use it for Frontend Development when you need to play GLTF animations, blend clips, or build clean animation loops with less guesswork.