---
name: build-site
description: Build and iterate on tidalDB's public marketing site and blog. Use when creating pages, components, layouts, or any public-facing web work for the database.
agent: tidal-storyteller
---

# Build Site

Build or modify tidalDB's public site using the **tidal-storyteller** agent.

## When to Use

- Creating a new page (home, blog index, vision, about)
- Building or modifying site components (nav, hero, footer, blog cards)
- Setting up the Next.js project structure and MDX blog system
- Designing the information architecture for the public site
- Iterating on copy, layout, or visual design of any public page

## Context to Load

Before building, the agent must read:
1. `VISION.md` — the product story and conviction
2. `API.md` — how developers interact with the product (for accurate code examples)
3. `USE_CASES.md` — what surfaces the database powers (for "what you can build" sections)
4. `CODING_GUIDELINES.md` — the engineering standards (for credibility in blog code)

## Workflow

### New Page

1. **Identify the page's job** — what does the visitor leave knowing?
2. **Write the hero first** — headline, subhead, primary CTA
3. **Structure the scroll** — narrative arc from hook to action
4. **Build in Next.js** — App Router, static export, Tailwind dark theme
5. **Test at three widths** — 1440px, 768px, 375px
6. **Lighthouse audit** — must score 95+ on performance

### New Component

1. **Check existing components** — don't rebuild what exists
2. **Design the states** — default, hover, active, loading, empty
3. **Build with Tailwind** — use the design system from the agent's spec
4. **Verify dark theme** — the site has no light mode
5. **Responsive check** — component works at all breakpoints

### Site Setup (First Time)

1. Initialize Next.js with App Router and static export
2. Configure Tailwind with the dark color palette from the agent
3. Set up MDX for blog posts with syntax highlighting
4. Create the base layout: nav, main content area, footer
5. Install minimal dependencies: next, tailwind, mdx, a syntax highlighter
6. Deploy to Vercel or Cloudflare Pages

## Design Rules (Quick Reference)

| Element | Spec |
|---------|------|
| Background | `#000000` |
| Headlines | White serif (Playfair Display / Lora), 64-80px hero |
| Body | `#888888`, Inter / system sans, 16-18px |
| Accent | `#C97A4E` (warm copper) — pills, labels, hovers only |
| Section labels | Uppercase monospace, 12px, copper, letter-spaced |
| Code blocks | `#0D0D0D` background, JetBrains Mono, copy button |
| Section spacing | 120-160px between major sections |
| Content width | max-w-3xl prose, max-w-5xl hero |

## Quality Checks

- [ ] Lighthouse performance >= 95
- [ ] No layout shift (CLS = 0)
- [ ] Total page weight < 100KB transferred
- [ ] All code examples are copy-pasteable and correct
- [ ] Works at 1440px, 768px, and 375px
- [ ] No competing CTAs on the same screen
- [ ] Dark theme only — no light mode toggle