skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

shader-lab

Installs and configures Basement Studio's Shader Lab runtime for GPU shader compositions in React apps.

2|Updated Apr 15, 2026
Search Tags:#react#next.js#three.js#webgpu#install#shader#gpu effects
One-click install
npx skills add https://github.com/tommylower/cortex --skill shader-lab-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shader-lab
Source: https://github.com/tommylower/cortex/tree/main/design/tools/shader-lab
Command: npx skills add https://github.com/tommylower/cortex --skill shader-lab-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @basementstudio/shader-lab, three, @types/three.

What problem does it solve? Adding bespoke GPU shader effects (warped text, liquid backgrounds, distortion, post-processing) to a Next.js or React app normally requires deep WebGPU and Three.js expertise. This Skill walks an agent through installing the Shader Lab runtime, wiring up client-side wrappers, and guarding against browsers without WebGPU support. ## Core Features & Use Cases - Runtime Installation: Detects the project's package manager (bun, pnpm, yarn, npm) and installs @basementstudio/shader-lab with three and its types. - Client Wrapper & Capability Guard: Provides a "use client" wrapper component and a useSupportsWebGPU hook so pages can fall back gracefully on unsupported browsers like Firefox. - Composition Authoring & Advanced Usage: Organizes exported editor configs under src/shaders/compositions/, and covers using compositions as R3F textures or post-processing passes via useShaderLab. - Use Case: A user wants a shader-driven animated hero on a landing page. The agent installs the runtime, creates the wrapper and WebGPU guard, pastes the exported composition config, and renders it with a CSS fallback for non-WebGPU browsers. ## Quick Start Set up the Shader Lab runtime in my Next.js app and render my exported hero shader composition with a fallback for browsers without WebGPU.

Frequently Asked Questions about shader-lab

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shader effects to a Next.js app?▼

Install @basementstudio/shader-lab and three, then wrap ShaderLabComposition in a "use client" component so server components can import it. Paste a composition config exported from the Shader Lab editor into a file under src/shaders/compositions/ and render it through the wrapper.

How do I use Shader Lab compositions in React Three Fiber?▼

Use the useShaderLab hook with your config and dimensions to get a texture you can pass to an R3F material. For post-processing over an existing renderer, pass the renderer to useShaderLab and drive it with postprocessing.render in your render loop.

Does Shader Lab work in Firefox and Safari?▼

The runtime requires WebGPU, which is supported in Chrome, Edge, and Safari 18+, but Firefox only supports it behind a flag as of early 2026. Add a WebGPU capability check and render a CSS or canvas fallback for unsupported browsers.

Why does my shader composition render blank with no error?▼

Blank output with no error usually means WebGPU is not available in the user's browser. Add a capability guard hook that checks navigator.gpu and conditionally renders a fallback component instead of the shader.

How do I fix SSR hydration errors with shader components?▼

Shader Lab components are client-only, so hydration warnings occur when they render on the server. Mark the parent component with "use client" or import the shader via dynamic(() => ..., { ssr: false }) in Next.js.

Related Skills

Explore More Design & Creative Skills→
duc01226duc01226

shader

Develop GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Intermediate
Impertio-StudioImpertio-Studio

webgpu-core-cross-browser

Detect WebGPU features and gate WGSL for Chrome, Safari, and Firefox.

Official
Advanced
firefly-eventsfirefly-events

polish-audit

Identify and prioritize animation opportunities for UI polish audits.

Official
Advanced
imanlangaranimanlangaran
1

r3f-shaders

Create custom GLSL shader materials and effects in React Three Fiber applications.

Community
Intermediate