feat: add hero screenshot

Author: quolpr

AGENTS.md

@@ -0,0 +1,9 @@
+<!-- intent-skills:start -->
+## Skill Loading
+
+Before substantial work:
+- Skill check: run `pnpm dlx @tanstack/intent@latest list`, or use skills already listed in context.
+- Skill guidance: if one local skill clearly matches the task, run `pnpm dlx @tanstack/intent@latest load <package>#<skill>` and follow the returned `SKILL.md`.
+- Monorepos: when working across packages, run the skill check from the workspace root and prefer the local skill for the package being changed.
+- Multiple matches: prefer the most specific local skill for the package or concern you are changing; load additional skills only when the task spans multiple packages or concerns.
+<!-- intent-skills:end -->

TODO.md

@@ -12,6 +12,7 @@ Devtool:
 
 Doc:
 
+1. MIGRATE TO DOCUSAURUS
 1. Fix npm install/doc links
 1. Add performance compare doc
 1. DONE Remove wa-sqlite from hyperdb-lib. Move wa-sqlite support to recipe
@@ -33,3 +34,6 @@ Doc:
 1. adopt styling of trpc
 1. move devtool to separate package
 1. how to isolate devtool styling?
+
+Others:
+1. intent skills css tanstack support

package.json

@@ -27,5 +27,9 @@
   "devDependencies": {
     "@changesets/cli": "^2.31.0",
     "prettier": "^3.8.4"
+  },
+  "dependencies": {
+    "@tanstack/ai": "^0.32.0",
+    "@tanstack/ai-openai": "^0.15.2"
   }
 }

packages/hyperdb-doc/src/assets/hero-code.png

@@ -20,6 +20,10 @@ hero:
 
 import { Card, CardGrid, LinkCard } from "@astrojs/starlight/components";
 
+<div class="hero-screenshot not-content">
+  ![HyperDB schema, selector, and action code running unchanged in the browser and on the server](../../assets/hero-code.png)
+</div>
+
 ## Why HyperDB
 
 HyperDB brings the developer experience of a backend like

packages/hyperdb-doc/src/content/docs/index.mdx

@@ -119,6 +119,49 @@
   color: currentColor;
 }
 
+/* Center the hero copy & actions (tRPC-style).
+   Starlight reserves a 7fr/4fr two-column grid for a hero image; with no
+   image we collapse it to a single centered column. `div.hero` outranks
+   Starlight's `:where()`-scoped rule without needing !important. */
+div.hero {
+  grid-template-columns: 100%;
+  justify-items: center;
+  padding-bottom: 4rem;
+  padding-top: 1rem;
+}
+
+.hero > .stack {
+  align-items: center;
+  text-align: center;
+}
+
+.hero .copy {
+  align-items: center;
+}
+
+.hero .tagline {
+  margin-inline: auto;
+}
+
+.hero .actions {
+  justify-content: center;
+}
+
+/* Code screenshot under the hero (tRPC-style) */
+.hero-screenshot {
+  margin: 0 auto 3rem;
+  max-width: 1100px;
+  text-align: center;
+}
+
+.hero-screenshot img {
+  width: 100%;
+  height: auto;
+  border-radius: 14px;
+  border: 1px solid var(--sl-color-hairline-shade);
+  box-shadow: 0 24px 70px -30px rgba(109, 94, 252, 0.45);
+}
+
 /* ===========================================================================
    Cards (feature grid on the splash page)
    ========================================================================= */