jordan/tidaldb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
8b39409901
tidaldb/.claude/skills/build-site/skill.md
jordan 413b712c0a chore: initialize tidalDB repository with schema foundation and standards 
- 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>
2026-02-20 12:52:20 -07:00

2.9 KiB
Raw Blame History

name description agent
build-site 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. 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