2.6 KiB
2.6 KiB
| name | description |
|---|---|
| lootah-robotics-expertise | 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
{
"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