moldgen-frontend

name	moldgen-frontend
description	Develop MoldGen's React/Three.js/Tauri frontend. Use when working on UI components, 3D viewport, state management, hooks, or frontend/ TypeScript/TSX files.

MoldGen Frontend Development

Stack

• React 19, TypeScript 5.9, Vite 8
• 3D: Three.js + @react-three/fiber + @react-three/drei
• State: Zustand 5 (stores in src/stores/)
• Data: TanStack React Query 5 (hooks in src/hooks/)
• Styling: Tailwind CSS 4 + clsx + tailwind-merge
• Animation: Framer Motion 12
• Icons: Lucide React
• Desktop: Tauri 2

Project Layout

frontend/src/
├── App.tsx              # Root layout
├── main.tsx             # Entry point
├── components/
│   ├── layout/          # LeftPanel, Toolbar, etc.
│   ├── viewer/          # 3D viewport, simulation viewer
│   ├── ai/              # ChatBubble, AgentWorkstation
│   └── settings/        # SettingsDialog
├── stores/              # Zustand stores (appStore, modelStore, moldStore, aiStore, etc.)
├── hooks/               # React Query hooks (useModelApi, useMoldApi, useAgentApi, etc.)
└── lib/                 # Utility functions (cn)

Conventions

• Functional components only, no class components
• Zustand stores: flat state + actions in the same create() call
• API hooks pattern: useQuery for reads, useMutation for writes
• API base: /api/v1/ (proxied to FastAPI backend)
• Tailwind utility classes; use cn() from lib/utils for conditional classes
• CSS variables for theme colors: bg-bg-panel, text-text-primary, border-border, text-accent
• Motion: framer-motion for transitions and animations
• All labels/text in Chinese (面向中国用户)

Component Patterns

• Reusable controls: SettingSlider, SettingSelect, SettingToggle, InfoRow in SettingsDialog
• 3D components use R3F declarative pattern with <Canvas>, <mesh>, etc.
• Agent-related UI connects to aiStore and useAgentApi hooks