DevelopmentMédio

React Three Fiber Best Practices

poremalorenzo·emalorenzo· v1.0.0 · atualizado em 2026-04-10

Score

React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing, @react-three/rapier, or leva.

react-three-fiberr3fthreejsfrontendperformanceoptimizationreact

Linguagens

JavaScriptHTMLCSS

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdr3f-best-practices/workflow

Identify Target Area: — Pinpoint the specific R3F component or section of code to optimize.

Analyze Performance: — Use profiling tools to identify performance bottlenecks, such as excessive re-renders.

Apply Best Practices: — Implement relevant best practices from the guide (e.g., `perf-zustand-selectors`, `perf-memo-components`).

Test and Measure: — Verify the performance improvements after applying the changes.

Refactor Code: — Restructure the code to align with recommended component patterns and state management techniques.

Review and Validate: — Ensure the changes haven't introduced any regressions or new issues.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar aAceternity UI Skill

60%

Similar aTailwind Best Practices

60%

Similar aAngular Core Mental Model

60%

Árvore do Skill

React Three Fiber Best Practices

r3f-best-practices

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.RECOMMEND

4.ACT

5.REFLECT

Triggers8

optimize react three fiber codeimprove r3f performancereview react three fiber codewrite react three fiber componentdebug react three fiber applicationuse drei helpersmanage state in r3f with zustandimplement post-processing in r3f

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download r3f-best-practices

$ synaptic skills detail r3f-best-practices

$ synaptic skills live r3f-best-practices

Dependências

@react-three/fiber @react-three/drei zustand @react-three/postprocessing @react-three/rapier leva

Links

GitHub Repository