article: validation + demo form

CLAUDE.md

@@ -0,0 +1,45 @@
+## Project Overview
+
+Self-contained web-dev "probes" — each explores one concept (overscroll, validation timing) with a
+live demo and an article. Static Astro site deployed to GitHub Pages. Package manager is **Bun**;
+Node `>=22.12.0`.
+
+## Commands
+
+- `bun run dev` — dev server (`--host`, on LAN)
+- `bun run build` / `bun run preview` — build to `dist/` / serve it
+- `GITHUB_PAGES=true bun run build` — build with the `/probes` base path (what CI deploys)
+- `bun run lint` / `bun run lint:fix` — oxlint + stylelint
+- `bun run format` / `bun run format:check` — oxfmt (not Prettier)
+- `bun run typecheck` — `oxlint --type-aware`
+
+## Architecture
+
+**One probe = one route folder** under `src/pages/<name>/`, owning everything it needs:
+
+- `index.astro` — full `<html>` page (probes are standalone, no shared layout)
+- `<name>.css` — page styles, imported into the `.astro` file
+- `_article.md` — the explainer (`_` prefix keeps it out of routing)
+- `_components/` — React island(s) + logic, only if interactive
+
+`src/pages/index.astro` is an intentionally empty landing page; the probe list lives in `README.md`.
+
+**React islands:** `output: "static"`. Pages are SSR'd HTML; interactivity is opt-in per component.
+`validation` mounts one island (`<LoginDemo client:load />`); `overscroll` uses no React, just an
+inline `<script>` + URL params. Keep island boundaries minimal.
+
+**Base path (GitHub Pages):** `astro.config.mjs` sets `base` to `/probes` only when
+`GITHUB_PAGES === "true"`. Every asset URL must route through `import.meta.env.BASE_URL`; each
+`index.astro` repeats `const baseUrl = ${import.meta.env.BASE_URL.replace(/\/$/, "")}/`.
+
+**Other:** `@/*` → `src/*`; TS extends `astro/tsconfigs/strict`. CI deploys `dist/` to Pages on
+push to `main`.
+
+## Conventions
+
+- **Probe logic is heavily commented** — each `_components/*` file opens by stating its role in the
+  whole ("Owns the third timeline: the death of a server error"). Preserve this narration; it's the
+  teaching purpose.
+- **Zod schema = single source of truth** (`login-schema.ts`), read by every form.
+- **Mock backends, not real ones** (`mock-auth.ts`) so a probe can exercise server-error timing
+  without a server.

README.md

@@ -4,6 +4,8 @@ This repository is a collection of experiments and probes in web development, de
 
 ## Probes
 
-- [Overscroll Behavior: Rubber Banding](src/pages/overscroll/index.astro): Explores overscroll behavior in web browsers, especially the "rubber banding" effect on touch devices. It compares browser implementations and shows how CSS can customize or disable the behavior.
+- [CSS `overscroll-behavior` rubber banding: how to show the right color behind the site when you pull it](https://dev.to/a-dev/css-overscroll-behavior-rubber-banding-the-right-color-behind-the-page-when-you-pull-it-47mj): Explores overscroll behavior in web browsers, especially the "rubber banding" effect on touch devices. It compares browser implementations and shows how CSS can customize or disable the behavior.
+
+- [Choreography of validation: how to make your auth form seamless and usable](https://dev.to/a-dev/choreography-of-validation-how-to-make-your-auth-form-seamless-and-usable-95b): Reward early, punish late. This is the main principle of good validation UX: find the right moment to tell users they messed up. And the right moment to tell them they're back on track.
 
 ...more coming soon.

astro.config.mjs

@@ -1,13 +1,16 @@
 // @ts-check
 import { defineConfig, fontProviders } from "astro/config";
 
+import react from "@astrojs/react";
+
 const githubPagesBase = "/probes";
 const githubPagesSite = `https://a-dev.github.io${githubPagesBase}`;
 
 export default defineConfig({
   base: process.env.GITHUB_PAGES === "true" ? githubPagesBase : "/",
   output: "static",
   site: githubPagesSite,
+
   fonts: [
     {
       provider: fontProviders.google(),
@@ -17,4 +20,6 @@ export default defineConfig({
       styles: ["normal"],
     },
   ],
-});
+
+  integrations: [react()],
+});