first

.cursor/rules/lootah-robotics-operational.mdc

@@ -0,0 +1,42 @@
+---
+description: Operational guidelines for Lootah Robotics G1 3D Configurator development
+alwaysApply: true
+---
+
+# Lootah Robotics G1 3D Configurator - Operational Rules
+
+## Prompt Adherence
+
+- **Strict Following**: Always adhere to prompt instructions including Context, Objective, Constraints, File Structure, and Implementation Details
+- **No Deviations**: Do NOT introduce features, libraries, or architectural changes not explicitly requested
+- **Sequential Execution**: Execute prompts sequentially; output of previous prompt forms context for next
+- **Contextual Awareness**: Maintain awareness of overall project goal and progress made
+
+## Coding Standards
+
+- Write clean, readable, well-structured code; adhere to ESLint/Prettier conventions
+- **TypeScript First**: Use TypeScript for all new code; avoid `any` unless absolutely necessary
+- **Performance Minded**: Prioritize performance for 3D rendering and state management; use memoization and lazy loading
+- **Error Handling**: Implement robust error handling with informative feedback and logging
+- **Modularity**: Design components with clear responsibilities; favor composition over inheritance
+
+## UI/UX & Design
+
+- **Design System**: Adhere to `yslootahtech.com` corporate dark-tech theme with glassmorphism design
+- **Responsiveness**: All UI and 3D scene must be fully responsive
+- **Accessibility (WCAG)**: Keyboard navigation, ARIA attributes, sufficient color contrast
+- **Immersive Experience**: Smooth transitions, intuitive interactions, subtle animations
+- **User Feedback**: Clear and immediate visual feedback for all interactions
+
+## Asset Management
+
+- All 3D models (GLB/GLTF), textures, media must be optimized for web delivery
+- External models loaded dynamically and attached without altering base model geometry/materials
+- Use relative paths for assets (e.g., `public/g1-model.glb`)
+
+## Operational Rules
+
+- **No Unapproved Dependencies**: Do NOT add external libraries unless explicitly approved
+- **Self-Correction**: Analyze errors, identify root cause, fix properly; don't repeat mistakes
+- **Documentation**: Clear inline comments for complex logic; self-documenting code structure
+- **Testing**: Automated tests for critical functionalities (state management, 3D interactions)

.cursor/skills/lootah-robotics-expertise/SKILL.md

@@ -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