---
name: lootah-robotics-expertise
description: Required expertise for Lootah Robotics G1 3D Configurator development. Use when building the configurator with Next.js, React Three Fiber, 3D rendering, state management, or UI/UX tasks.
---

# Lootah Robotics G1 3D Configurator Development

## Required Expertise Areas

### 1. Core Web Technologies
- **Next.js (v16.2.2)**: Project scaffolding, static export, routing, data fetching
- **React (v19.0.0)**: Component architecture, hooks, context API, memoization
- **TypeScript**: Strong typing for code quality and maintainability
- **Tailwind CSS (v4.2.2)**: Utility-first CSS, responsive design, custom theming
- **Zustand (v5.0.12)**: Lightweight state management for complex application state

### 2. 3D Development (React Three Fiber & Three.js)
- **React Three Fiber (v9.5.0)**: Declarative 3D scene construction, R3F primitives
- **React Three Drei (v10.7.7)**: Environment, ContactShadows, PresentationControls, useGLTF, EffectComposer
- **Three.js Fundamentals**: Scene graph, geometries, PBR materials, lights, cameras, renderers
- **3D Model Handling**: GLB/GLTF loading, model hierarchy, LOD optimization
- **Dynamic 3D Interaction**: Interactive camera controls, object manipulation, event handling

### 3. Animation & Interactivity
- **Framer Motion (v12.38.0)**: Physics-based UI animations, state transitions
- **GSAP (v3.14.2)**: Timeline-based complex animations, micro-interactions
- **Micro-interactions**: Subtle animations for user engagement

### 4. UI/UX & Accessibility
- **Responsive Design**: Cross-device UIs (desktop, tablet, mobile)
- **Glassmorphism**: Advanced blur effects, dynamic lighting, textures
- **Accessibility (WCAG)**: Keyboard navigation, ARIA attributes, reduced motion
- **User Feedback**: Loading states, error handling, visual feedback

### 5. Performance & Optimization
- **Web Performance**: Fast loading, 60fps animations, resource efficiency
- **Asset Optimization**: 3D model/texture optimization for web delivery
- **Debugging**: Browser dev tools, R3F/Three.js profiling

## Key Dependencies
```json
{
  "next": "16.2.2",
  "react": "19.0.0",
  "@react-three/fiber": "9.5.0",
  "@react-three/drei": "10.7.7",
  "three": "latest",
  "zustand": "5.0.12",
  "framer-motion": "12.38.0",
  "gsap": "3.14.2",
  "tailwindcss": "4.2.2",
  "typescript": "latest"
}
```

## Quick Reference
- Project: 3D robot configurator with customizable parts
- State: Zustand for configuration state management
- 3D: R3F + Drei for declarative Three.js
- Styling: Tailwind CSS with glassmorphism effects
- Animation: Framer Motion for UI, GSAP for complex 3D sequences