dev-performance-instancing
About
This skill provides instanced rendering for React Three Fiber to efficiently render thousands of identical objects like trees or particles with a single draw call. Use it when you need to render many objects sharing the same geometry and material, especially when draw calls exceed 100. It implements the Instances/Instance pattern from drei to dramatically improve performance.
Quick Install
Claude Code
Recommendednpx skills add majiayu000/claude-skill-registry -a claude-code/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/dev-performance-instancingCopy and paste this command in Claude Code to install this skill
GitHub Repository
Related Skills
when-profiling-performance-use-performance-profiler
OtherThis skill provides comprehensive performance profiling to measure, analyze, and optimize application performance across CPU, memory, I/O, and network dimensions. It helps developers identify bottlenecks, perform root cause analysis, and implement optimizations using tools like perf, Instruments, and clinic.js. Use it when you need systematic performance improvement through baseline measurement, detection, and optimization phases.
when-analyzing-performance-use-performance-analysis
OtherThis Claude Skill provides comprehensive performance analysis and bottleneck detection for Claude Flow swarms. It identifies optimization opportunities through profiling and benchmarking, delivering actionable recommendations. Use it when you need to analyze and improve the performance of your active workflows.
when-profiling-performance-use-performance-profiler
OtherThis skill provides comprehensive performance profiling to detect bottlenecks and optimize applications across CPU, memory, I/O, and network dimensions. It establishes baselines, identifies hot paths, and offers root cause analysis using platform-specific tools like perf and Instruments. Use it when you need to systematically measure and improve your application's performance.
dev-performance-performance-basics
OtherThis skill provides core R3F/Three.js performance optimization principles for developers when FPS drops below 60. It explains the critical 16ms budget for 60 FPS and offers actionable strategies like canvas configuration and draw call reduction. Use it to diagnose performance issues and implement essential rendering optimizations.