- Schema phase 1 (tasks 01-02): EntityId, EntityKind, Timestamp, Score, SignalTypeDef, DecayModel, Window, WindowSet — all with property tests and benchmarks scaffolding - Stub modules for storage, signals, query, ranking - Full documentation suite: VISION, USE_CASES, SEQUENCE, API, CODING_GUIDELINES, ai-lookup, research docs, specs, roadmap, planning docs - Marketing site (Next.js) with blog infrastructure - .claude/ agents and skills for the tidalDB development workflow - Foundation standards enforced: thiserror + tracing declared as dependencies, clippy::unwrap_used = deny added to lint config - .gitignore hardened: .next/, node_modules/, .env, secrets, logs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
---
|
|
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
|