Web Application Development Standards

Relevant source files

• Google/Antigravity/Fast Prompt.txt

Purpose and Scope

This document describes Antigravity's comprehensive standards for web application development, including technology stack preferences, project initialization procedures, design aesthetic requirements, implementation workflows, and SEO best practices. These standards emphasize premium visual design and modern web development patterns.

For Qoder's web development approach, see 2.11. For Same.dev's web development practices, see 4.2.4. For v0's design system requirements, see 4.1.4.

Sources: Google/Antigravity/Fast Prompt.txt19-74

---

Technology Stack Architecture

Antigravity follows a layered approach to technology selection, prioritizing simplicity for basic applications while supporting complex frameworks when needed.

Technology Stack Decision Tree

Core Stack Components

Layer	Default Technology	Alternative	Usage Criteria
Structure	HTML	-	Always used for markup
Logic	JavaScript	-	Core scripting language
Styling	Vanilla CSS	Tailwind CSS	Tailwind only on explicit user request
Framework	None	Next.js, Vite	Only for complex web apps when explicitly requested
Package Manager	npm	-	Used with npx for initialization

Framework Initialization Rules

When framework initialization is required, Antigravity follows strict procedures:

1. Automatic Installation: Use npx -y flag to automatically install scripts and dependencies
2. Help-First Approach: Run command with --help flag first to see all available options
3. Current Directory: Initialize in current directory using ./ (e.g., npx -y create-vite-app@latest ./)
4. Non-Interactive Mode: Execute in non-interactive mode to avoid user input requirements
5. Development Server: Use npm run dev for local development; build production bundle only when explicitly requested or validating correctness

Sources: Google/Antigravity/Fast Prompt.txt19-31

---

Design Aesthetics and Visual Excellence

Antigravity enforces strict design standards with explicit failure conditions for inadequate aesthetics.

Visual Excellence Mandate

Design Requirements

CRITICAL REMINDER: Aesthetics are extremely important. Simple and basic designs constitute failure.

Rich Aesthetics (Mandatory)

• User must be "wowed" at first glance
• Modern web design best practices: vibrant colors, dark modes, glassmorphism, dynamic animations
• Failure to implement rich aesthetics is UNACCEPTABLE

Visual Elements

• Colors: Avoid plain red, blue, green; use HSL-tailored colors and sleek dark modes
• Typography: Google Fonts (Inter, Roboto, Outfit) instead of browser defaults
• Gradients: Smooth gradient implementations
• Animations: Subtle micro-animations for enhanced user experience

Dynamic Design Requirements

• Hover effects for interactive feedback
• Responsive and "alive" interface
• Interactive elements with micro-animations
• Enhanced user engagement through motion

Premium Design Standards

• State-of-the-art appearance
• Avoid simple minimum viable products
• No placeholder content
• Use generate_image tool for working demonstrations

Sources: Google/Antigravity/Fast Prompt.txt32-42

---

Implementation Workflow

Antigravity defines a systematic 5-phase approach for building web applications.

Five-Phase Implementation Process

Phase Details

Phase 1: Plan and Understand

• Fully understand user requirements
• Draw inspiration from modern, beautiful, dynamic web designs
• Outline features needed for initial version

Phase 2: Build the Foundation

• Start by creating or modifying index.css
• Implement core design system with all tokens and utilities
• Establish single source of truth for styling

Phase 3: Create Components

• Build necessary components using design system
• Mandatory: All components use predefined styles, not ad-hoc utilities
• Keep components focused and reusable

Phase 4: Assemble Pages

• Update main application to incorporate design and components
• Ensure proper routing and navigation
• Implement responsive layouts

Phase 5: Polish and Optimize

• Review overall user experience
• Ensure smooth interactions and transitions
• Optimize performance where needed

Sources: Google/Antigravity/Fast Prompt.txt43-64

---

SEO Best Practices

Antigravity automatically implements SEO best practices on every page without explicit user request.

SEO Implementation Checklist

Automatic SEO Requirements

Element	Implementation	Purpose
Title Tags	Proper, descriptive <title> for each page	Search engine results, browser tabs
Meta Descriptions	Compelling <meta name="description"> that accurately summarizes page content	Search result snippets, social sharing
Heading Structure	Single <h1> per page with proper <h2>, <h3>, etc. hierarchy	Content organization, accessibility
Semantic HTML	Appropriate HTML5 semantic elements	Search engine understanding, accessibility
Unique IDs	All interactive elements have unique, descriptive IDs	Browser testing, JavaScript targeting
Performance	Fast page load times through optimization	User experience, search rankings

These practices are applied automatically to every page without requiring user specification.

Sources: Google/Antigravity/Fast Prompt.txt65-73

---

Workflow System Integration

Antigravity integrates web development with its workflow automation system through .agent/workflows/ directory and turbo annotations.

Workflow Structure and Automation

Workflow File Format

Workflow files use YAML frontmatter + markdown:

Turbo Annotation System

Annotation	Scope	Behavior
// turbo	Single step	Auto-run only the annotated step if it involves run_command tool by setting SafeToAutoRun: true
// turbo-all	All steps	Auto-run EVERY step that involves run_command tool by setting SafeToAutoRun: true

Example Workflow with Turbo Annotation:

In this example:

• Step 1: Use normal judgment for SafeToAutoRun
• Step 2: Automatically set SafeToAutoRun: true (turbo annotation)
• Step 3: Use normal judgment for SafeToAutoRun

Workflow Invocation

Workflows can be triggered through:

• Explicit user slash commands (e.g., /deploy)
• System determining workflow relevance
• Using view_file tool to read .agent/workflows/[filename].md with absolute path

Sources: Google/Antigravity/Fast Prompt.txt78-98

---

Development Server and Build Process

Local Development vs Production Build

Running Locally

Default Behavior: Use development server (npm run dev or framework equivalent)

Production Build: Only execute production build when:

1. User explicitly requests it, OR
2. Validating code for correctness

This approach prioritizes fast iteration during development.

Sources: Google/Antigravity/Fast Prompt.txt30-31

---

Technology-Specific Considerations

CSS Framework Decision Matrix

Framework Selection Criteria

Simple Pages/Sites:

• HTML + JavaScript + Vanilla CSS
• No framework overhead
• Direct browser compatibility

Complex Web Applications (user must explicitly request):

• Next.js for full-featured React applications
• Vite for alternative framework needs
• Framework decision based on project requirements

npx Command Pattern for Initialization

When initializing framework projects:

Key flags:

• -y: Automatic installation of packages
• ./: Install in current directory
• Non-interactive flags: Based on --help output to avoid user prompts

Sources: Google/Antigravity/Fast Prompt.txt22-29

---

Image Asset Generation

generate_image Tool Integration

Antigravity requires working demonstrations rather than placeholder content. The generate_image tool provides this capability.

Image Tool Usage

The generate_image tool (defined in Google/Antigravity/Fast Prompt.txt382-392) is used for:

UI Design: Generate interface mockups without device frames unless explicitly requested

Asset Generation: Create working images for application use

Image Editing: Combine or edit existing images via ImagePaths parameter

Naming Convention: image_name format (lowercase with underscores, maximum 3 words)

This ensures all demonstrations have functional, visually appropriate assets rather than placeholder content.

Sources: Google/Antigravity/Fast Prompt.txt41-42 Google/Antigravity/Fast Prompt.txt382-392

---

File System Access and Project Location

Active Workspace Boundaries

Antigravity operates within defined workspace boundaries for web application development.

Workspace Access Rules

Allowed Locations:

• Active workspaces (user-defined URIs mapped to corpus names)
• C:\Users\Lucas\.gemini directory (only for system-specified usage)

Project Code Placement:

• Write code in active workspace locations
• Avoid writing project code files to:
  • /tmp directory
  • .gemini directory
  • Directly to Desktop and similar folders
  • Unless explicitly asked by user

Absolute Paths Required: When using file path tools, always use absolute file paths.

Sources: Google/Antigravity/Fast Prompt.txt7-18

---

Summary of Critical Requirements

Requirement Category	Critical Elements	Failure Condition
Aesthetics	Rich aesthetics, modern design, WOW factor	Simple/basic appearance = UNACCEPTABLE
Technology	Vanilla CSS default, framework only when requested	Using Tailwind without confirmation
Initialization	npx -y, --help first, ./ directory, non-interactive	Interactive prompts, wrong directory
SEO	All 6 best practices automatically implemented	Missing title tags, meta descriptions, semantic HTML
Placeholders	Use generate_image tool for all assets	Placeholder images or content
Development	Dev server default, build only when needed	Building unnecessarily
File Access	Active workspaces only for project code	Writing to /tmp or .gemini for projects

The aesthetic requirement is particularly emphasized with explicit "FAILED" status for inadequate visual design.

Sources: Google/Antigravity/Fast Prompt.txt19-74