first

2026-04-10 15:31:59 +04:00
parent 87d2688eeb
commit ec0f991a30
55 changed files with 10218 additions and 0 deletions
@@ -0,0 +1,61 @@
+---
+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