Dynamic Res Scaler

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.

majiayu000/claude-skill-registry·0installs663starsProductivity & Planning

SKILL.md

Full skill instructions

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.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill dynamic-res-scaler

View on GitHub

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

More Productivity & Planning skills

View all

Productivity & Planning

brainstorming

Structured design dialogue that validates ideas before implementation begins.

295.4K 385.7K

View

Productivity & Planning

ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

133.1K 383.9K

View

Productivity & Planning

writing-plans

Comprehensive implementation plans for multi-step tasks, breaking down specs into bite-sized, testable steps.

295.4K 268K

View

Productivity & Planning

using-superpowers

Introduction to the obra skills system with mandatory skill invocation rules and best practices.

295.4K 259.8K

View

Productivity & Planning

executing-plans

Execute a written implementation plan with critical review and task checkpoints.

295.4K 229.1K

View

Productivity & Planning

dispatching-parallel-agents

Delegate independent tasks to specialized agents working concurrently with isolated context.

295.4K 206.3K

View

Productivity & Planning

using-git-worktrees

Isolated git worktrees with smart directory selection and safety verification.

295.4K 205.2K

View

Productivity & Planning

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

179.7K 170.6K

View