Claude-skill-registry dynamic-res-scaler

Implement dynamic resolution scaling for React Three Fiber / Three.js by adjusting DPR based on measured FPS. Use when asked to add adaptive performance scaling, automatic DPR tuning, or a DynamicResScaler-style component in a R3F scene.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/dynamic-res-scaler" ~/.claude/skills/majiayu000-claude-skill-registry-dynamic-res-scaler && rm -rf "$T"

manifest: skills/data/dynamic-res-scaler/SKILL.md

Dynamic Res Scaler

Overview

Implement a small R3F component that monitors frame rate and adjusts device pixel ratio (DPR) at runtime to balance visual quality and performance.

Workflow

Locate the main
```
Canvas
```
and decide where to mount the scaler (typically near the root of the scene so it always runs).
Create or update a
```
DynamicResScaler
```
component using
```
useFrame
```
+
```
useThree
```
.
Track FPS over a short interval using refs (avoid state to prevent re-renders).
Adjust DPR in small steps within min/max bounds and call
```
setDpr
```
only when it changes.
Mount the component inside the
```
Canvas
```
and verify behavior in dev builds.

Tuning Guidelines

TARGET_FPS / FPS_TOLERANCE: adjust how aggressively the scaler reacts (e.g., 60 ± 5).
CHECK_INTERVAL: 300–700ms keeps changes responsive without thrashing.
STEP: 0.05–0.15 is typical; smaller steps reduce visible jumps.
MIN_DPR / MAX_DPR: clamp to protect performance; cap MAX_DPR to devicePixelRatio or 2.

Resources

Use

references/dynamic-res-scaler.md

for the drop-in implementation and configuration notes based on

DynamicResScaler.tsx