SKILLS.md: Required Expertise for Lootah Robotics G1 3D Configurator Development

This document outlines the essential skills and areas of expertise required for an AI developer (such as MiniMax M2.7) to successfully implement the Lootah Robotics G1 3D Configurator. The developer must demonstrate proficiency 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.

4.2 KiB Raw Blame History