How was this site built?

Build a directory site called "VibeDex" that answers, per classic game, whether one AI coding prompt gets you a playable version — and that also generates brand-new game concepts to build.

STACK
- Astro with server output and the node adapter (standalone). better-sqlite3 for storage.
- No client framework. Vanilla JS in one file for every interaction.
- Dev-tool aesthetic: JetBrains Mono + Space Grotesk, self-hosted, no font CDN.
- CRT-black dark mode by default and a paper light mode. Phosphor green is the only loud colour; the difficulty ramp runs green through amber to red.

DATA
- One JSON file per game in data/games/: slug, name, studio, released, platform, genre, buildHours, devYears, difficulty (1-5), whyHard, whatYouLose[], priorArt[{label,url}], prompt, notes, steal{mechanic,why,scope,prompt}.
- `platform` buckets the eras people actually search for: Classic, Arcade, Nintendo, Sega, PS1, PS2, PS3, PS4, PS5, Xbox, PC, Browser, Mobile.
- Grade difficulty 1-5, never yes/no. No game is unbuildable at every scope, so the honest question is how hard — and `whyHard` names the specific obstacle in one sentence. That sentence is the most valuable thing on the page.
- Never print raw build hours. "50h to rebuild Counter-Strike" reads as a promise and is not one. Show an effort tier labelled "first playable" instead.
- An effort tier is derived from `buildHours`, never stored: an evening (≤6h), a weekend (≤25h), a project (beyond that). Cover the whole range deliberately. A directory of forty-hour projects is a reading list; the one-evening builds are what make it useful.
- Adding a file is the only step needed to add a game. Validate required fields at boot and fail loudly with the filename.

HOMEPAGE
- Hero with a search input that live-filters rows already present in the HTML — never fetch to search.
- Two independent chip rows — platform, and "how long you have" by effort tier — toggling on click and combining. All state reflected in the URL as ?q=, ?platform= and ?effort= so any filtered view is shareable.
- A "Start here — finish one tonight" strip above the list: the six shortest EASY and FIDDLY games, so the first thing a visitor sees is something they can actually finish.
- "The Build List": games ranked by "I built this" counts. Each row shows a tile, name, year, platform, first-playable tier, difficulty badge (green through amber to red) and build count.
- A loud "COLLECTIVE DEV-YEARS REBUILT" ticker, where the number is the sum of devYears × builds. Digits roll like an odometer and a tape of games scrolls beneath it. It must read as a stock ticker, not as text. Render the correct value on the server so it is right with JavaScript off.
- A band showing the day's rolled concept, linking to /roll.

GAME PAGES at /:slug
- Big difficulty word with a five-pip scale and the whyHard sentence, a fact strip (difficulty, first playable, team-years, release, genre), the one-shot build prompt in a code block, and three copy buttons (Claude Code / Codex / Cursor) that each prepend agent-specific run instructions to the copied text.
- A "what you lose" list paired with a "what to steal" panel — the one transferable mechanic, scoped to a weekend — plus a per-game variant roller that re-themes and re-scopes the whole game, prior-art links, three related games, an "I built this" button (SQLite counter, one per game per visitor, IP rate-limited, no auth), a share-on-X button, and a four-question FAQ.

THE RANDOMISER at /roll
- Four reels — genre, setting, twist, art direction — combined into a named concept with a generated pitch and a full one-shot build prompt. Every entry in every deck carries the line it contributes to that prompt, so the output is specific enough to hand an agent unedited.
- The four picks are addressed by index in the URL (?g=&s=&t=&l=), so every roll is server-rendered, shareable and reproducible. A bare /roll shows a roll seeded by the UTC date, stable for the day, so it is crawlable and worth returning to.
- Individual rolls are noindex — that URL space is unbounded. Only /roll itself goes in the sitemap.
- Per-reel locks: keep one axis, reroll the rest. Reroll animates the reels and rewrites the URL, the title, the pitch, the scope and the prompt in place, with no round trip.
- The deck contents are listed in full on the page. They are the SEO body and they let people read the design space instead of guessing at it.
- Roll logic lives in one dependency-free module imported by both the server and the browser, so there is exactly one definition of what a roll is.

BUILD LOOPS at /loops
- The repeatable ways people work with an agent across a whole project, not single prompts: plan-first, rectangles-first, tuning sliders, playtest-and-report. Each with steps and a copyable prompt block.
- Loops may be credited to the person who published the technique. Attribution is only ever rendered from a `credit: { name, url, what }` object, and the loader throws at boot if a credit has no URL. Never attribute a technique to someone without a page where they describe it themselves; unattributed craft is the correct fallback.
- An open invitation to submit a loop, because the page is worth more with other people's methods on it.

THE TOOLKIT at /toolkit
- Models, MCP servers, asset sources and engines, each with a cost badge, who makes it, and what you would use it for in a game build specifically.
- Prefers primary tools (models, engines, assets, MCP). Paid “app builders” can stay light; say why on the page.
- Sponsors/affiliates are allowed later if useful. Until then nothing is a paid slot; if that changes, label paid items clearly.

SEO
- Server-render everything. Question-format titles ("Can I vibecode Doom?"), canonical URLs, and JSON-LD: WebSite with SearchAction, ItemList, VideoGame, FAQPage, BreadcrumbList, Organization.
- sitemap.xml and robots.txt as endpoints. Per-page OG images generated at build time with satori and resvg, from local font files.

ALSO
- Waitlist email capture into SQLite with a honeypot field and duplicate tolerance.
- A footer that links to this exact rebuild prompt, because the site should practice what it preaches.

MOTION
- Micro-animations everywhere but tastefully: odometer rolls, reel spins that settle left to right, hover lifts, press scale of 0.97, copy confirmations, reveal-on-scroll.
- Entrances use cubic-bezier(0.23, 1, 0.32, 1), never ease-in. UI state changes stay under 300ms. Constant motion is linear. Name exact properties in every transition, never `all`. Gate hover effects behind (hover: hover) and (pointer: fine).
- Under prefers-reduced-motion keep the fades and remove the movement.

CONSTRAINTS
- MIT licence. No accounts, no payments, no third-party tracking — first-party page counts only. Never store a raw IP address; hash it with a server-side salt.
- Every game named here belongs to its studio. The site links to prior art and hands out prompts for building your own version; it never hosts, distributes or reproduces anyone else's game.