threenix-clean-code
Refactor React Three Fiber code for readability
Make React Three Fiber and TypeScript code easier to read with a focused review of naming, functions, and control flow.
What this skill does
- Identify unclear names and inconsistent vocabulary.
- Simplify nested conditionals and separate function responsibilities.
- Review TypeScript props and React ref patterns against the checklist.
When to use it
Use it when a component is difficult to follow or before handing code to another developer. The checklist also applies to general TypeScript code.
Agent skill
Run this skill
$threenix-clean-codeAfter invoking the skill, describe your task:
Review @Component.tsx for clarity and make the smallest useful readability improvements.
Frequently asked questions
What does the clean-code checklist review?
It checks meaningful and consistent names, focused functions, parameter grouping, early returns, immutability, and TypeScript and React patterns. It identifies violations before refactoring the file.
Is this skill limited to React Three Fiber?
No. The checklist also applies to general TypeScript and React code. The page uses React Three Fiber as a common example, but the review does not require a 3D scene.
How should the checklist fit my project conventions?
Provide the target file and make the project’s local instructions available to the agent. Review proposed naming, typing, and React changes against those conventions and the versions the project uses.
Does a readability refactor replace a performance review?
No. This skill focuses on code quality. Use the threenix-best-practices skill for scene and rendering patterns, or threenix-optimize-tsl for shader work, and validate performance claims with runtime evidence.