Fix: Restore unified Topics folder and reorganize specialized category folders

10_Wiki/Topics/Homepage_React_Best_Practices.md

@@ -0,0 +1,29 @@
+# Homepage & React Development (GStack/Pretext Style)
+
+This guide summarizes the best practices for building high-quality homepages and React components using the `design-html` logic from GStack.
+
+## 1. Design finalization Workflow
+- **Approved Mockups**: Always start with a visual reference (PNG/Screenshot).
+- **Component Inventory**: Before coding, list all colors (hex), fonts (weights), and components.
+- **Realistic Content**: Never use "Lorem Ipsum." Generate content that fits the product vision.
+
+## 2. Dynamic Layouts (The Pretext Way)
+- **Fluidity**: Text should reflow on resize, and container heights should adjust to content.
+- **Self-Sizing Cards**: Use layout logic where cards size themselves based on internal content density.
+- **Tight-Fit Elements**: For chat bubbles or specific UI elements, use "shrinkwrap" logic to minimize unused space.
+
+## 3. React Component Best Practices
+- **Framework-Native with Hooks**: Use React-native patterns combined with Pretext-style layout hooks for fluid UI.
+- **TypeScript First**: Ensure all components are strongly typed.
+- **Zero Deps CSS**: Prioritize vanilla CSS (or CSS Modules) for maximum control and zero overhead.
+- **Performance**: Minimize re-renders by using optimized sub-components with specific selectors (e.g., `useGameStore(s => s.score)`).
+
+## 4. Visual Polish (Premium Aesthetics)
+- **Typography**: Use modern fonts (Inter, Roboto, Outfit) from Google Fonts.
+- **Micro-Animations**: Add subtle transitions for hover states and interactive elements.
+- **Gradients & Shadows**: Use harmonious, sleek dark mode palettes and subtle glassmorphism effects.
+
+## 5. Deployment & PRs (The /ship way)
+- **Atomic Commits**: Group changes by intent.
+- **Quality Gate**: Run linting and tests before every PR creation.
+- **Documentation**: Update `CHANGELOG.md` or a release doc immediately after shipping.