Skip to content
Daily Prompt 👾

Scaffolding a New Website

Description

Section titled “Description”

This prompt is designed to instruct Google Antigravity to autonomously scaffold a complete boilerplate for a new web project. It guides the agent to create the directory structure, install dependencies, and build a minimal but functional 3-page website using Astro, Bulma CSS, and TypeScript, all while adhering to strict project conventions.

Prompt

Section titled “Prompt”
You are an interactive CLI agent specializing in software engineering tasks. Your primary goal is to help users safely and efficiently, adhering strictly to the following instructions and utilizing your available tools.


## Overview


Your task is to scaffold a complete boilerplate for a new web project from scratch. You will create every file and folder listed in the Project Structure section below, write the base code for each one, and leave the project in a state where a developer can `pnpm install` and `pnpm dev` and immediately start working.


Do not ask for confirmation at every step. Go through the entire setup autonomously, and report what you did at the end with a brief summary of the files created.


The project must include three pages: **Home**, **About**, and **Contacts**. Each page should have a minimal but real structure — not empty files, not lorem ipsum placeholders. Write simple, realistic placeholder content that makes the purpose of each page immediately clear.


Respect every convention defined in the `GEMINI.md` global rules file. If there is any conflict between what the user asks and what `GEMINI.md` defines, `GEMINI.md` takes precedence.


---


## Tech Stack


| Tool           | Version / Notes                          |
| -------------- | ---------------------------------------- |
| **Astro**      | Latest stable                            |
| **Bulma CSS**  | Latest stable, imported via SASS         |
| **TypeScript** | Strict mode enabled                      |
| **pnpm**       | Package manager — do not use npm or yarn |


**Setup rules:**


- Initialize the project with `pnpm create astro@latest` using the minimal template (no example pages)
- Install Bulma via `pnpm add bulma`
- Configure Astro with the `@astrojs/ts` integration and set `strict: true` in `tsconfig.json`
- Bulma must be imported and customized through `src/assets/styles/bulma-overrides.scss` — never imported directly in components
- The SASS integration must be set up via `pnpm add -D sass`


---


## Project Structure


Scaffold the following structure exactly. Do not add files or folders that are not listed here.




project-root/
├── public/
│ └── images/ /_ Empty folder — statically served images go here _/
├── src/
│ ├── assets/
│ │ └── styles/
│ │ └── bulma-overrides.scss /_ Bulma customization via SASS variables _/
│ ├── components/
│ │ ├── NavBar.astro /_ Site navigation with links to all three pages _/
│ │ └── Footer.astro /_ Minimal site footer _/
│ ├── data/ /_ Empty folder — ready for future JSON/TS data files _/
│ ├── layouts/
│ │ └── BaseLayout.astro /_ Base layout: <head>, NavBar, <slot />, Footer _/
│ └── pages/
│ ├── index.astro /_ Home page _/
│ ├── about.astro /_ About page _/
│ └── contacts.astro /_ Contacts page _/
├── package.json
├── astro.config.mjs
├── tsconfig.json
└── README.md








### File-by-file instructions


**`src/assets/styles/bulma-overrides.scss`**
Import the full Bulma SASS build. Define at least `$primary` as a placeholder variable. This is the only place where Bulma is imported in the entire project.


```scss
@use "bulma/sass" with (
  $primary: #3273dc
);


**`src/layouts/BaseLayout.astro`**
Accept a `title: string` prop. Include a proper `<head>` with charset, viewport, and dynamic `<title>`. Import `bulma-overrides.scss` here — this is the single import point for global styles. Render `<NavBar />`, `<slot />`, and `<Footer />`.


**`src/components/NavBar.astro`**
Use Bulma's `navbar` component. Include the site name/logo on the left and navigation links on the right pointing to `/`, `/about`, and `/contacts`.


**`src/components/Footer.astro`**
Simple footer using Bulma's `footer` component. Include a copyright line with the current year.


**`src/pages/index.astro`**
Home page wrapped in `BaseLayout`. Use a Bulma `hero` block as the main section. Title: "Welcome". Include a short descriptive paragraph and a call-to-action button pointing to `/about`.


**`src/pages/about.astro`**
About page wrapped in `BaseLayout`. Use a Bulma `section` with a `container`. Title: "About Us". Include two or three short paragraphs describing a fictional team or company.


**`src/pages/contacts.astro`**
Contacts page wrapped in `BaseLayout`. Use a Bulma `section` with a `container`. Title: "Contact Us". Include a basic contact form with name, email, and message fields, built with Bulma's form classes. The form does not need to be functional — static markup only.


**`astro.config.mjs`**
Minimal valid Astro config. No integrations needed beyond the default Vite setup required to process SCSS.


**`tsconfig.json`**
Extend Astro's base tsconfig and set `strict: true`.


**`README.md`**
Include the project name, a one-line description, and the three commands needed to get started:


```bash
pnpm install
pnpm dev
pnpm build
```

Prerequisites

Section titled “Prerequisites”

Before using this prompt, ensure that your environment meets the following requirements:

  • Node.js (v18 or higher recommended).
  • pnpm installed globally (npm install -g pnpm).
  • Access to Google Antigravity within your IDE or environment.

Expected Output

Section titled “Expected Output”

Once Google Antigravity finishes executing this prompt, you should expect:

  1. A completely structured directory mirroring the Project Structure tree.
  2. A functional astro.config.mjs and tsconfig.json setup.
  3. Fully styled, placeholder .astro pages (index, about, contacts) wrapping a common BaseLayout.
  4. A customized Bulma SASS setup where you can easily alter the $primary color.
  5. The ability to instantly run pnpm install followed by pnpm dev without any errors.

Customization Tips

Section titled “Customization Tips”
  • Add More Pages: To expand the boilerplate, simply add new page files to the Project Structure section in the prompt and provide a brief description in the file-by-file instructions.
  • Change the CSS Framework: If you prefer Tailwind CSS over Bulma, replace the Bulma setup instructions with npx astro add tailwind and update the layout rules accordingly.
  • Add Integrations: You can instruct the agent to pre-install other integrations like React, Vue, or MDX by adding them to the Setup Rules section.

Why this works well with Google Antigravity

Section titled “Why this works well with Google Antigravity”

Google Antigravity excels at this type of task because it natively understands file system operations and repository-level architecture. Unlike standard conversational models that only provide code snippets for you to copy-paste, Antigravity functions as an autonomous agent that physically creates the folders, creates the files, writes the code, and ensures the project is strictly aligned with your specific guidelines.