threejs
Three.js
Overview
Guides building high-performance 3D web experiences with Three.js, WebGPU-first rendering, TSL (Three Shader Language), and React Three Fiber. Covers scene architecture, asset compression, draw call budgets, and React 19 / Next.js integration patterns.
When to use: Creating 3D scenes, WebGPU rendering setup, TSL shader authoring, asset optimization (Draco/KTX2), React Three Fiber composition, Next.js streaming for 3D content, loading GLTF models, setting up lighting and shadows, animation playback and blending.
When NOT to use: 2D canvas animations (use Canvas API), simple SVG graphics, server-side rendering without client hydration, projects targeting pre-2022 hardware exclusively.
Quick Reference
| Pattern | API / Approach | Key Points |
|---|---|---|
| WebGPU renderer | import * as THREE from 'three/webgpu' |
Must await renderer.init() before first render |
| R3F canvas | <Canvas gl={...}> with Suspense |
Wrap in <Suspense> for streaming support |
| Frame updates | useFrame((state, delta) => ...) |
Mutate refs directly; never use setState |
| TSL shaders | import { ... } from 'three/tsl' |
Node-based; compiles to WGSL or GLSL |
| Instancing | <instancedMesh> with matrix updates |
Single draw call for repeated geometry |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78