` for
+ individual blocks.
+ - Also omit it from mobile-native and backend-only guides, and from RedwoodJS
+ and Refine, which ship their own component and Inferencer story.
+
+## Direct-Postgres guides (Laravel, Rails, RedwoodJS, Spring Boot)
+
+Use `<$Partial path="quickstart_connection_string.mdx" />` for the session-pooler
+rationale, IPv6/IPv4 note, percent-encoding, and `sslmode` guidance. Laravel, Rails,
+and Spring Boot all use it. Keep the actual connection-string code block in the host
+file — the URI format differs (`postgres://` vs `jdbc:postgresql://`).
+
+RedwoodJS is the exception and doesn't use the partial: Prisma needs a Transaction-mode
+string for app queries and a Session-mode string for migrations, so the guide walks
+through both connection modes itself rather than the single session-pooler string the
+partial describes.
+
+## Discovery surfaces
+
+A new quickstart must appear in the navigation menu, and optionally in the content
+listing and the framework grid:
+
+- `apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts` — required
+- `apps/docs/data/content-listings/getting-started.data.ts` — optional
+- `apps/docs/components/FrameworkQuickstarts.tsx` — optional
+
+Both optional surfaces need an icon in `apps/docs/public/img/icons/`, so a guide stays
+out of them until the framework's icon is one Supabase can use. Spring Boot is the
+current example. The content listing also accepts an icon chip
+(`{ kind: 'server', color: '#64748B', bg: 'rgba(100,116,139,0.1)' }`) in place of a
+brand icon.
+
+Icons must be square and readable on both themes. `FrameworkQuickstarts.tsx` renders
+them at a fixed width in a `bg-surface-100` tile, so a wide wordmark renders small and
+an icon with no explicit `fill` defaults to black and disappears in dark mode. Set the
+brand color explicitly, and pad the `viewBox` to a square if the source asset isn't
+one. Icons that ship a `-light.svg` variant set `hasLightIcon: true`, which uses the
+light file in light mode and the base file in dark mode.
+
+## What's deliberately not in this contract yet
+
+- A machine-checked version of this list (Phase 3 — a `supa-mdx-lint` rule or a
+ vitest over the MDX AST).
+- A "last verified" date, pinned framework versions, or a time-to-value label per
+ guide (Phase 4).
diff --git a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
index 9608dee6f51..5e5244bb8cd 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
@@ -17,17 +17,9 @@ npm create astro@latest my-app
cd my-app
```
-## 4. Install Supabase's Agent Skills (optional)
+## 4. Set up AI tooling (optional)
-Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
-
-Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
-
-To install, run the following command in the root of your project:
-
-```bash
-npx skills add supabase/agent-skills
-```
+<$Partial path="quickstart_ai_tooling.mdx" />
## 5. Install Supabase client library and Node adapter
@@ -96,7 +88,7 @@ This queries all rows from the `instruments` table you created earlier and rende
import { createServerClient } from "../lib/supabase";
const supabase = createServerClient();
-const { data: instruments } = await supabase.from("instruments").select();
+const { data: instruments, error } = await supabase.from("instruments").select();
---
@@ -104,11 +96,15 @@ const { data: instruments } = await supabase.from("instruments").select();
Instruments
-
- {instruments?.map((instrument) => (
- - {instrument.name}
- ))}
-
+ {error ? (
+ Error loading instruments: {error.message}
+ ) : (
+
+ {instruments?.map((instrument) => (
+ - {instrument.name}
+ ))}
+
+ )}