Antigravity Agent
37 lines
2.0 KiB
Markdown
37 lines
2.0 KiB
Markdown
# 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.
|
|
|
|
## 🔗 Knowledge Connections
|
|
### Related Concepts (Auto-Linked)
|
|
* [[CSS Modules]]
|
|
* [[Logic]]
|
|
* [[React]]
|
|
* [[Reference]]
|