Antigravity Agent
2.0 KiB
2.0 KiB
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.mdor a release doc immediately after shipping.