three-js

•

6155 months ago

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

Quick Install

npxskills add mindrally/skills--skill three-js

Instructions

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885