forked from hazem/yslootahrobotics
62 lines
2.6 KiB
Markdown
62 lines
2.6 KiB
Markdown
---
|
|
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
|