threenix-best-practices
Three.js and React Three Fiber best practices
Review Three.js and React Three Fiber code for avoidable render-loop work, resource duplication, and costly scene patterns.
What this skill does
- Find unnecessary allocations and React updates in animation loops.
- Review geometry, material, texture, lighting, and shadow costs.
- Refactor checklist violations with clear findings and focused changes.
When to use it
Use it when reviewing an existing scene or preparing a Three.js component for production.
Agent skill
Run this skill
$threenix-best-practicesAfter invoking the skill, describe your task:
Review @Component.tsx for unnecessary per-frame work and shared-resource opportunities.
Frequently asked questions
What does the Three.js best-practices review cover?
It reviews render-loop work, object allocation, React updates, resource sharing, cameras, lights, shadows, materials, textures, and scene organization against the Threenix checklist.
What should I provide for a useful review?
Provide the component or scene files you want reviewed, the relevant renderer setup, and any performance symptoms. The agent needs enough context to understand how the code runs.
Does the skill only report issues or also change code?
The workflow first identifies checklist violations, then refactors the code to address them. Review the resulting changes against your project conventions and intended behavior.
Does following the checklist guarantee better frame rates?
No. The effect depends on the scene and its bottleneck. Compare runtime behavior and frame timings on your target devices before claiming a performance improvement.