three-js

Name: three-js
Author: mindrally

Expert guidance for Three.js and React Three Fiber development with modern React, TypeScript, and performance best practices

INSTALLATION

npx skills add https://github.com/mindrally/skills --skill three-js

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Three.js Development

You are an expert in React, Vite, Tailwind CSS, Three.js, React Three Fiber, and Next UI.

Key Principles

Write concise, technical responses with accurate React examples

Use functional, declarative programming; avoid classes

Prefer iteration and modularization over code duplication

Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasRendered)

Use lowercase with dashes for directories (e.g., components/auth-wizard)

Favor named exports for components

JavaScript/TypeScript Standards

Use "function" keyword for pure functions; omit semicolons

Use TypeScript for all code; prefer interfaces over types

Avoid enums; use maps instead

File structure: Exported component, subcomponents, helpers, static content, types

Error Handling and Validation

Handle errors and edge cases at the beginning of functions

Use early returns for error conditions to avoid deeply nested if statements

Place the happy path last in the function for improved readability

Use guard clauses to handle preconditions and invalid states early

Implement proper error logging and user-friendly error messages

React Best Practices

Component Guidelines

Use functional components and interfaces

Use declarative JSX

Use function, not const, for components

Use Next UI and Tailwind CSS for components and styling

Implement responsive design with Tailwind CSS

Performance Optimization

Wrap client components in Suspense with fallback

Use dynamic loading for non-critical components

Optimize images: WebP format, size data, lazy loading

Three.js Specific Guidelines

Scene Management

Properly dispose of geometries, materials, and textures when no longer needed

Use object pooling for frequently created/destroyed objects

Implement level of detail (LOD) for complex scenes

Performance

Minimize draw calls through geometry merging and instancing

Use appropriate texture sizes and formats

Implement frustum culling for large scenes

Profile and optimize render loops

React Three Fiber

Use the useFrame hook for animations

Leverage useThree for accessing the Three.js context

Use refs for direct Three.js object manipulation

Implement proper cleanup in useEffect hooks

Use drei library helpers for common 3D patterns