yslootahrobotics/Master Prompt-Chaining Plan for Lootah Robotics G1 3D Configurator.md

Master Prompt-Chaining Plan for Lootah Robotics G1 3D Configurator

This document serves as a self-contained architectural blueprint for developing the Lootah Robotics G1 3D Configurator. It includes the required developer skills, operational rules, and a sequence of four detailed prompts to guide an AI developer (like MiniMax M2.7) through the entire development process.

---

SKILL.md: Required Expertise for Development from skills

This section outlines the essential skills and areas of expertise required for the AI developer. Proficiency is expected across modern web development, advanced 3D rendering, state management, and UI/UX best practices.

1. Core Web Technologies & Frameworks

Skill Area	Specific Expertise Required
Next.js (v16.2.2)	Project scaffolding, static export configuration, routing, data fetching strategies, and leveraging built-in optimizations (e.g., image optimization, code splitting).
React (v19.0.0)	Component-based architecture, hooks (useState, useEffect, useContext, useMemo, useCallback), context API, performance optimization with React.memo and memoization techniques.
TypeScript	Strong typing for enhanced code quality, maintainability, and error prevention across the entire codebase.
Tailwind CSS (v4.2.2)	Utility-first CSS framework for rapid and responsive UI development, custom theme configuration, and integration with Next.js.
Zustand (v5.0.12)	Efficient and lightweight state management for complex application states, including actions, selectors, and middleware.

2. Advanced 3D Development (React Three Fiber & Three.js)

Skill Area	Specific Expertise Required
React Three Fiber (v9.5.0)	Declarative 3D scene construction, integration of Three.js primitives and custom components, performance optimization within the R3F ecosystem.
React Three Drei (v10.7.7)	Utilization of helper components for common 3D tasks, including Environment (studio lighting), ContactShadows, PresentationControls, useGLTF for model loading, and EffectComposer for post-processing.
Three.js Fundamentals	Understanding of scene graph, geometries, materials (PBR), lights, cameras, and renderers. Direct manipulation of Three.js objects when necessary.
3D Model Handling	Efficient loading and rendering of GLB/GLTF models, including understanding of model hierarchy, nodes, and meshes. Implementation of 3D model optimization techniques (e.g., compression, Level of Detail - LOD).
Dynamic 3D Interaction	Implementing interactive camera controls, object manipulation, and event handling within the 3D scene.

3. Animation & Interactivity

Skill Area	Specific Expertise Required
Framer Motion (v12.38.0)	Implementing declarative, physics-based animations for UI elements and seamless transitions between states.
GSAP (v3.14.2)	High-performance, timeline-based animations for complex sequences, micro-interactions, and dynamic visual effects within the 3D configurator.
Micro-interactions	Designing and implementing subtle animations and visual feedback to enhance user engagement and perceived responsiveness.

4. UI/UX & Accessibility

Skill Area	Specific Expertise Required
Responsive Design	Building UIs that adapt seamlessly across various screen sizes and devices (desktop, tablet, mobile) using Tailwind CSS and responsive design principles.
Glassmorphism Design	Implementing advanced glassmorphism effects with refined blur algorithms, dynamic lighting, and subtle textures.
Accessibility (WCAG)	Adherence to Web Content Accessibility Guidelines, including keyboard navigation, ARIA attributes, semantic HTML, and consideration for reduced motion preferences.
User Feedback & Loading States	Implementing clear visual feedback for user actions, loading indicators (spinners, skeleton screens), and graceful error handling.

5. Performance & Optimization

Skill Area	Specific Expertise Required
Web Performance	Understanding and applying techniques for fast loading times, smooth animations (60fps), and efficient resource utilization.
Asset Optimization	Optimizing 3D models, textures, and other media assets for web delivery without compromising visual quality.
Debugging & Profiling	Utilizing browser developer tools and R3F/Three.js specific tools for identifying and resolving performance bottlenecks and rendering issues.

---

lootah-robotics-operational.mdc: Operational Guidelines for Development frim rules

This section outlines the strict rules and operational boundaries that the AI developer must adhere to. These rules ensure consistency, quality, security, and alignment with project goals.

1. Prompt Adherence & Interpretation

Rule Category	Specific Rule
Strict Prompt Following	ALWAYS adhere strictly to the provided prompt instructions, including Context, Objective, Constraints, File Structure, and Implementation Details.
No Deviations	DO NOT introduce features, libraries, or architectural changes not explicitly requested or implied by the prompt. If ambiguity arises, seek clarification.
Sequential Execution	Prompts MUST be executed sequentially. The output of a previous prompt forms the context for the next. DO NOT skip or reorder prompts.
Contextual Awareness	Maintain awareness of the overall project goal and the progress made in previous prompts. Each prompt builds upon the last.

2. Coding Standards & Best Practices

Rule Category	Specific Rule
Code Quality	Write clean, readable, well-structured, and maintainable code. Adhere to established coding conventions (e.g., ESLint, Prettier).
TypeScript First	ALWAYS use TypeScript for all new code and ensure strict type checking. Avoid any type unless absolutely necessary and justified.
Performance Minded	Prioritize performance in all implementations, especially for 3D rendering and state management. Utilize memoization, lazy loading, and efficient algorithms.
Security Conscious	Implement secure coding practices. Avoid hardcoding sensitive information. Ensure proper input validation and sanitization where applicable.
Error Handling	Implement robust and graceful error handling for all potential failure points, providing informative feedback to the user and logging errors appropriately.
Modularity	Design components and modules with clear responsibilities and minimal coupling. Favor composition over inheritance.

3. UI/UX & Design Principles

Rule Category	Specific Rule
Design System Adherence	STRICTLY adhere to the corporate dark-tech theme of yslootahtech.com and the specified glassmorphism design principles.
Responsiveness	ALL UI components and the 3D scene MUST be fully responsive and adapt seamlessly to various screen sizes and device orientations.
Accessibility (WCAG)	Implement all UI elements with WCAG compliance in mind, including keyboard navigation, appropriate ARIA attributes, and sufficient color contrast.
Immersive Experience	Ensure smooth transitions, intuitive interactions, and subtle animations to create an immersive and engaging user experience. Avoid jarring changes or performance drops.
User Feedback	Provide clear and immediate visual feedback for all user interactions, loading states, and system responses.

4. Asset Management

Rule Category	Specific Rule
Optimized Assets	ALL 3D models (GLB/GLTF), textures, and other media assets MUST be optimized for web delivery (e.g., compressed, appropriate polycount) without compromising visual quality.
External Asset Handling	External 3D models for personas and payloads MUST be loaded dynamically and attached to the base G1 model without altering its original geometry or materials.
Asset Paths	Use relative paths for assets (e.g., public/g1-model.glb) as specified in the prompts.

5. General Operational Rules

Rule Category	Specific Rule
No External Dependencies (Unapproved)	DO NOT introduce any external libraries, packages, or APIs unless explicitly mentioned in the prompt or approved through a clarification process.
Self-Correction	If an error occurs during code generation or execution, analyze the error, identify the root cause, and implement a fix. DO NOT repeat the same mistake.
Documentation	Generate clear and concise inline comments for complex logic, and ensure code structure is self-documenting where possible.
Testing	Implement automated tests for critical functionalities as specified in the prompts, especially for state management and core 3D interactions.
Ethical Considerations	Ensure all generated code and content is ethical, unbiased, and adheres to privacy best practices.

---

Tech Stack & Versions (Latest Stable)

Technology	Version
Next.js	16.2.2
React	19.0.0
React Three Fiber	9.5.0
React Three Drei	10.7.7
Zustand	5.0.12
Tailwind CSS	4.2.2
Framer Motion	12.38.0
GSAP	3.14.2

---

Perfection Layers: Elevating the Configurator Experience

To achieve a truly "perfect" website, the Lootah Robotics G1 3D Configurator will integrate advanced coding and UI/UX considerations. These enhancements aim to deliver a highly performant, robust, visually stunning, immersive, and accessible digital experience.

Coding Perfection (Performance, Robustness, Maintainability)

1. 3D Model Optimization: Implement techniques for efficient loading and rendering of 3D models, including Level of Detail (LOD), instancing for repeated elements, and optimal compression of GLB assets.
2. Asset Loading Strategy: Utilize lazy loading for non-critical assets, strategic preloading for essential components, and browser caching for static resources to ensure rapid load times and smooth transitions.
3. R3F & Three.js Optimizations: Employ useMemo, useCallback, and React.memo to prevent unnecessary re-renders. Integrate performance monitoring tools to identify and resolve bottlenecks.
4. Next.js Optimizations: Leverage built-in features like image optimization, intelligent code splitting, and static site generation for superior initial load performance.
5. Robustness & User Feedback: Implement comprehensive error handling, display loading states (spinners, skeleton screens), and ensure full responsiveness across all devices.
6. Maintainability & Code Quality: Enforce a modular code structure, strict TypeScript usage, and automated testing for critical components to ensure long-term stability and extensibility.

UI/UX Perfection (Visual Polish, Immersion, Accessibility)

1. Visual Polish & Aesthetics: Refine the glassmorphism effect with advanced blur algorithms and dynamic lighting. Introduce micro-interactions and haptic feedback for a more engaging experience. Ensure all 3D assets are high-quality with consistent PBR materials.
2. Advanced Post-processing Effects: Integrate Three.js post-processing effects such as Ambient Occlusion (SSAO/GTAO), Bloom, Depth of Field (DoF), and Color Grading for enhanced realism and visual appeal.
3. Immersion & User Engagement: Implement seamless transitions between customization states, intuitive camera controls with easing functions, and interactive hotspots/annotations on the G1 model. Consider subtle environmental storytelling elements.
4. Accessibility & Inclusivity: Ensure full keyboard navigation, utilize ARIA attributes and semantic HTML, adhere to WCAG compliance for color contrast and text sizing, and offer reduced motion preferences for sensitive users.

---

PROMPT 1: Initialization, Theming, and UI Layout

Context: We are starting the development of the Lootah Robotics G1 3D Configurator. This initial prompt focuses on setting up the foundational project structure, applying the corporate theme, and establishing the core UI layout.

Objective: Scaffold a Next.js 16.2.2 project configured for static export, integrate Tailwind CSS 4.2.2 with a custom dark theme matching yslootahtech.com, and construct the full-screen layout including a game-like floating glassmorphism overlay on the right side. This initial setup must prioritize responsiveness, accessibility, and foundational performance optimizations.

Constraints:
- Use Next.js 16.2.2 with the 'export' output option for static export.
- Use React 19.0.0.
- Do not use server components.
- Ensure Tailwind CSS 4.2.2 is configured to match the corporate dark-tech theme of yslootahtech.com.
- The UI must be a full-screen layout, fully responsive across desktop, tablet, and mobile devices.
- Implement a floating glassmorphism overlay panel on the right side of the screen, with refined blur algorithms and dynamic lighting interactions.
- Implement foundational accessibility features, including keyboard navigation and semantic HTML for UI elements.
- Optimize initial load performance using Next.js features like intelligent code splitting.

File Structure:
- `next.config.mjs`: Configuration for Next.js static export.
- `tailwind.config.ts`: Tailwind CSS configuration with custom theme.
- `src/app/layout.tsx`: Root layout for the application.
- `src/app/page.tsx`: Main page component containing the full-screen layout and glassmorphism panel.
- `src/app/globals.css`: Global styles for Tailwind imports.

Implementation Details:
- Initialize a new Next.js project with the specified versions, ensuring `next.config.mjs` is configured for static HTML export and optimal code splitting.
- Install and configure Tailwind CSS 4.2.2, defining a custom dark theme in `tailwind.config.ts` that aligns with yslootahtech.com's aesthetic.
- Create a full-screen layout in `src/app/page.tsx` that is inherently responsive, utilizing Tailwind's utility classes for adaptive design.
- Design and implement the glassmorphism floating right-panel overlay. This panel should have a translucent background, refined blur effect, and dynamic lighting interactions to create a premium feel. Ensure it's responsive, positioned correctly, and accessible via keyboard navigation with appropriate ARIA attributes.
- Implement basic error boundaries for UI components to ensure graceful degradation.

PROMPT 2: State Management & URL Serialization (Zustand)

Context: We have successfully initialized the Next.js project, set up the theming, and established the basic UI layout. Now, we need to implement the core state management for the 3D configurator.

Objective: Create a Zustand 5.0.12 store (`useConfigStore.ts`) to manage the configurable aspects of the G1 robot, including active colors, active persona attire, and active payloads. Crucially, implement logic to serialize this store's state into a Base64 encoded URL parameter for sharing and to hydrate the store from this URL parameter upon page load. This implementation must prioritize robustness, maintainability, and efficient state updates.

Constraints:
- Use Zustand 5.0.12 for state management, ensuring optimal performance with `useMemo` and `useCallback` where appropriate.
- The state must be serializable to and deserializable from a Base64 encoded URL parameter, with robust error handling for malformed URLs.
- The URL parameter should be updated efficiently whenever the state changes, debouncing updates to prevent excessive re-renders.
- The state should be initialized from the URL parameter on application load, providing clear loading states if hydration takes time.
- Do not use server components.
- Implement comprehensive automated tests for the Zustand store and URL serialization logic to ensure reliability.

File Structure:
- `src/store/useConfigStore.ts`: Zustand store definition.
- `src/hooks/useUrlSync.ts`: Custom hook for URL serialization and hydration.
- `src/app/page.tsx`: Integrate the URL synchronization logic.

Implementation Details:
- Define the Zustand store (`useConfigStore.ts`) with a modular structure, holding the following state:
  - `activeColors`: An array or object representing the currently selected colors for different parts of the robot.
  - `activePersonaAttire`: A string or enum representing the selected persona/clothing (e.g., 'Emarati Kandura', 'Industrial Vest').
  - `activePayloads`: An array of objects, each describing a mounted payload (e.g., `{ id: 'camera', position: 'head' }`).
- Implement actions within the store to update these state variables, ensuring efficient updates and preventing unnecessary re-renders.
- Create a custom React hook (`useUrlSync.ts`) that:
  - Reads the Base64 encoded state from a URL parameter on initial load, gracefully handling missing or invalid parameters, and uses it to hydrate the Zustand store.
  - Subscribes to changes in the Zustand store and updates the URL parameter with the Base64 encoded state, employing debouncing to optimize URL updates.
- Integrate `useUrlSync` into `src/app/page.tsx` to ensure state persistence via the URL, providing visual feedback (e.g., a subtle loading indicator) during hydration.
- Ensure proper encoding and decoding of the state object to and from Base64, with robust error handling for serialization/deserialization failures.
- Implement unit tests for `useConfigStore.ts` and `useUrlSync.ts` to guarantee their reliability and correctness.

PROMPT 3: The 3D Canvas & Lighting Foundation

Context: We have established the project structure, theming, UI layout, and robust state management with URL serialization. The next step is to set up the 3D rendering environment.

Objective: Instruct MiniMax to set up the <Canvas> component from React Three Fiber 9.5.0, configure `@react-three/drei` 10.7.7 for studio lighting (`Environment`), add `ContactShadows` for realistic ground shadows, and integrate `PresentationControls` for interactive camera manipulation. Additionally, MiniMax needs to create a boilerplate `RobotModel` component responsible for loading the base `g1-model.glb` 3D model. This setup must prioritize 3D model optimization, efficient asset loading, and the integration of advanced visual post-processing effects for an immersive experience.

Constraints:
- Use React Three Fiber 9.5.0 for 3D rendering, applying `useMemo` and `useCallback` for performance optimization.
- Utilize `@react-three/drei` 10.7.7 for environmental lighting and effects, including `Environment` (studio lighting), `ContactShadows`, and `PresentationControls`.
- Ensure the 3D scene is interactive with intuitive camera controls (orbit, pan, zoom) and appropriate easing functions.
- The base 3D model (`g1-model.glb`) should be loaded and displayed using optimized techniques (e.g., compression, potential LOD considerations).
- Implement loading states (e.g., spinners, skeleton screens) while 3D assets are loading.
- Integrate advanced post-processing effects (e.g., Ambient Occlusion, Bloom, Depth of Field, Color Grading) for visual polish.
- Do not use server components.

File Structure:
- `src/components/RobotCanvas.tsx`: Contains the R3F <Canvas> setup and lighting.
- `src/components/RobotModel.tsx`: Component for loading and displaying the `g1-model.glb`.
- `public/g1-model.glb`: The 3D model file (assume it's already placed here).
- `src/app/page.tsx`: Integrate the `RobotCanvas` component.

Implementation Details:
- Create `src/components/RobotCanvas.tsx` which will encapsulate the R3F <Canvas>.
- Inside `RobotCanvas.tsx`:
  - Set up the <Canvas> with appropriate camera settings (e.g., `dpr={[1, 2]}`, `camera={{ position: [0, 0, 5], fov: 50 }}`), ensuring intuitive camera controls with easing functions.
  - Add the `Environment` component from `@react-three/drei` configured for studio lighting (e.g., `preset="studio"`).
  - Include `ContactShadows` for realistic shadows beneath the robot model.
  - Integrate `PresentationControls` to allow users to rotate and pan the camera around the model, with performance optimizations using `useMemo` and `useCallback`.
  - Implement loading states (e.g., a spinner or skeleton) while the 3D scene and models are being prepared.
  - Integrate advanced post-processing effects (e.g., `EffectComposer` with `SSAO`, `Bloom`, `DepthOfField`, `ColorGrading`) to enhance visual realism and polish.
  - Place the `RobotModel` component within the <Canvas>.
- Create `src/components/RobotModel.tsx`:
  - This component should use `@react-three/fiber`'s `useLoader` hook (or similar) to load `public/g1-model.glb`, ensuring the GLB is optimally compressed. Consider implementing LOD if multiple model versions are available.
  - Apply high-quality `PBR materials` to the loaded model, ensuring it looks realistic and consistent with the corporate theme.
  - Position and scale the model appropriately within the scene.
- Integrate `RobotCanvas` into `src/app/page.tsx`, ensuring it takes up the necessary display area and handles responsiveness.

PROMPT 4: Deep Customization Logic (The Sockets & Personas)

Context: We have a fully functional 3D canvas with lighting and the base G1 robot model loaded. State management for customization options is also in place and synchronized with the URL. This final prompt focuses on implementing the dynamic customization logic.

Objective: Implement the "Socket" logic within the `RobotModel` R3F component to dynamically and conditionally render external meshes (e.g., Emarati Kandura geometry, PTZ Camera geometry) based on the `useConfigStore` state. This involves attaching these meshes to specific nested coordinates (joints) of the base G1 model and ensuring they respond to state changes. This implementation must prioritize efficient loading of external assets, seamless transitions during customization, and maintaining visual consistency with the base model and post-processing effects.

Constraints:
- The customization logic must be integrated within the `RobotModel` component, leveraging `useMemo` and `useCallback` for performance.
- External meshes (personas, payloads) should be loaded efficiently (e.g., lazy loading, compression) and rendered conditionally based on the `activePersonaAttire` and `activePayloads` from the Zustand store.
- Meshes must be positioned accurately at predefined "socket" coordinates on the base G1 model, ensuring seamless visual integration.
- The solution should be performant, avoid unnecessary re-renders, and provide smooth transitions when customization options change.
- Ensure high-quality 3D assets for personas and payloads with consistent PBR materials.
- Consider interactive hotspots or annotations on the G1 model to highlight customizable areas.
- Do not use server components.

File Structure:
- `src/components/RobotModel.tsx`: Integrate the socket and persona rendering logic.
- `src/components/PersonaMesh.tsx`: Component for loading and rendering persona attire.
- `src/components/PayloadMesh.tsx`: Component for loading and rendering individual payloads.
- `public/persona-kandura.glb`, `public/payload-camera.glb`, etc.: External 3D model files for personas and payloads (assume these are available).

Implementation Details:
- Modify `src/components/RobotModel.tsx` to:
  - Access the `activePersonaAttire` and `activePayloads` from the `useConfigStore`.
  - Implement a mechanism to identify specific "socket" points (e.g., head, shoulders, arms) on the loaded `g1-model.glb` geometry. This will involve traversing the loaded model's hierarchy to find relevant nodes (e.g., bones or mesh parts) and using their transformations as attachment points. The base G1 model's geometry and materials will remain untouched, ensuring its original look is preserved.
  - Conditionally render `PersonaMesh` components based on `activePersonaAttire`, ensuring smooth transitions and animations (e.g., using Framer Motion or GSAP) when the persona changes.
  - Conditionally render `PayloadMesh` components for each item in `activePayloads`, also with smooth transitions.
  - Implement interactive hotspots on the G1 model that, when clicked, can trigger UI updates or provide contextual information about customization options.
- Create `src/components/PersonaMesh.tsx`:
  - This component should take `attireType` and `socketPosition` as props.
  - Load the corresponding GLB model (e.g., `persona-kandura.glb`), ensuring it is optimized (compressed, potentially LOD) and uses high-quality PBR materials.
  - Position and orient the loaded persona mesh relative to the `socketPosition` on the G1 model. This ensures the persona attire appears to be 'worn' by the robot without altering the base G1 model itself, and integrates visually with any active post-processing effects.
  - Apply appropriate materials, ensuring consistency with the overall theme.
- Create `src/components/PayloadMesh.tsx`:
  - This component should take `payloadId` and `socketPosition` as props.
  - Load the corresponding GLB model (e.g., `payload-camera.glb`), ensuring it is optimized and uses high-quality PBR materials.
  - Position and orient the loaded payload mesh relative to the `socketPosition` on the G1 model, integrating visually with post-processing effects.
  - Apply appropriate materials.
- Ensure that when the Zustand store updates, the rendered persona and payload meshes are correctly added, removed, or changed in the 3D scene with seamless visual feedback and animations. Implement robust error handling for external model loading failures.