create-rivet 0.0.0-stage → 0.1.0-alpha.1

package/templates/starter-minimal/.cursor/rules/rivet-add-ui-page.mdc

@@ -0,0 +1,43 @@
+---
+description: "Build a page or component from @rivetjs/ui components - correct subpath imports, compound parts, two-way signal props, styles and lucide icons. Use when the user asks for UI built with Rivet UI components (buttons, selects, modals, cards, forms) in a Rivet app."
+globs:
+alwaysApply: false
+---
+
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/add-ui-page.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Page with @rivetjs/ui components
+
+1. Setup (the `ui` starter has it): dependencies `@rivetjs/ui`, `@rivetjs/kit`, `lucide`; `src/styles.css` = `@import "tailwindcss";` then `@import "@rivetjs/ui/styles";` (other looks: `@rivetjs/ui/theme` presets, variables pasted after it).
+2. For every component: `get_component("Select")` (import path, parts, props, example source) or `get_doc("ui:/components/select/")`. Copy the structure of the docs example, not React component-library code.
+3. Rules that differ from React component libraries:
+   - Subpath imports: `import { Select } from "@rivetjs/ui/select"`, `import { ListBox } from "@rivetjs/ui/list-box"`, `import { Label } from "@rivetjs/ui/label"`.
+   - `class`, not `className`. Events follow React Aria: `onPress`, `onSelectionChange`, `onOpenChange`.
+   - Two-way props take a signal: `isOpen={open}`, `value={selected}`, `selectedKeys={keys}`; a plain value is one-way.
+   - Render props are accessors: `({ isPlaceholder }) => (isPlaceholder() ? … : …)`.
+   - Icons: `<Icon icon={ChevronDown} />` (`@rivetjs/kit/icon` + lucide); never inline SVG paths or Unicode glyphs.
+
+```tsx
+import { signal } from "@rivetjs/reactivity";
+import { Button } from "@rivetjs/ui/button";
+import { Modal } from "@rivetjs/ui/modal";
+
+export default function Page() {
+  const open = signal(false);
+  return (
+    <>
+      <Button onPress={() => open.set(true)}>Open</Button>
+      <Modal.Content isOpen={open}>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Body>…</Modal.Body>
+        <Modal.Footer>
+          <Button slot="close">Close</Button>
+        </Modal.Footer>
+      </Modal.Content>
+    </>
+  );
+}
+```
+
+4. Custom-styled widget instead: the headless `@rivetjs/cdk/<module>` (same parts, `rv-*` classes + `data-*` state, no styles).
+5. `check_code`, `npm run check`, then look at it in `npm run dev` (overlays render in a portal on the div overlay layer, never native `<dialog>` / `popover`).

package/templates/starter-minimal/.cursor/rules/rivet-fix-resumability-error.mdc

@@ -0,0 +1,27 @@
+---
+description: "Diagnose and fix Rivet resumability errors - RV2xxx compiler diagnostics, RV1016 handler errors, \"is not serializable\" / \"Cannot resume\" build or prerender errors, browser globals during server rendering, state that resets after the first click. Use when a Rivet build, check or page fails with such an error."
+globs:
+alwaysApply: false
+---
+
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/fix-resumability-error.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Fix a resumability error
+
+A Rivet page is rendered on the server and resumed in the browser: handlers, bindings and client effects run there with the values they capture, which the server serialized into the HTML. Errors come from code that cannot cross that line.
+
+1. Get the exact diagnostic: `npm run check` (`file:line:col - error RVnnnn`), the Vite overlay (`[RVnnnn] file:line:col`), or `check_code(source, filename)`. For the fix: `explain_diagnostic("RVnnnn")`; `check_code` also returns the quick-fixed source when one applies.
+2. Common codes:
+   - RV2001 browser global (`window`, `document`, `localStorage`) read during server rendering → move it into a handler, `clientEffect(() => …)`, `clientEvent(window, "resize", …)` or `clientOnly(() => import("…"))`.
+   - RV2003 captured class instance (`new Intl.NumberFormat`, an SDK client) → capture plain data; create the object inside the handler or `clientEffect`, or build it with `reconstruct(() => new X(…))` from `@rivetjs/runtime/dom` (the browser runs the factory on first read). A data class declared in the component module (plain fields) resumes as is.
+   - RV2102 captured instance of a module class that cannot resume as data (`#private` field, a decorator, a field arrow using `super`, a base that is not a data class of the module, `window` / `document` / `WebSocket` read while constructing) → create it inside the handler, build it with `reconstruct(() => new X(…))`, keep only plain fields, or add `[serialize]()` + `static [revive](data)` (from `@rivetjs/runtime/resume-format`; package classes: `registerClass(Cls, { id, serialize, revive })` in a module imported by the server code and the resume entry). At render, `RV2102: X has [serialize] but no static [revive]` → add the `static [revive]`.
+   - RV1016 handler expression reads state when it binds (`onClick={a() ? f : g}`) → wrap: `onClick={(e) => (a() ? f(e) : g(e))}`.
+   - RV2002 ref callback must assign a local → `ref={(el) => (local = el)}` or `const el = ref()` + `ref={el}`.
+   - RV2006 JSX inside a handler / effect / computed → render JSX in the component, switch it with a signal.
+   - RV2007 `this` in resumable code → `event.currentTarget`.
+   - RV2009 two module references share a browser name (two imports of different modules under one name) → rename one import (`import { fmt as fmtDate } from …`).
+   - RV2101 (warning, type-aware) a captured value's type does not serialize → as RV2003.
+3. Build / prerender error `Cannot resume <file>#<Component>$<hash>: function is not serializable` (dev server: ``capture `<name>` function is not serializable``; dev build: `capture #<i> …`): a captured function Rivet did not compile (created at runtime by a library such as `memoize(fn)`, a `.bind(…)` written inside an object literal (keep `const inc = add.bind(null, 2)` in a local constant and store `inc`; `.bind(ctx)` of a function using `this` stays RV2007), a method, or held by an object built outside a component: at module level such as `const table = { format: formatEuro }`, or by your own hook / helper such as `function useFormat() { return { format: formatEuro }; }`). Wrap it in an inline arrow, or build the object inside the component (module-level and imported functions used by name there resume by reference). A library object holding functions (a chart, editor, socket client from a package): build it with `reconstruct(() => createChart(…))` from `@rivetjs/runtime/dom` — no value in the page, the browser runs the factory on first read (module level: one server instance per process, never read request state in it). A class instance at render (`X instance is not serializable`): your class → `reconstruct(() => new X(…))` or `[serialize]()` + `static [revive](data)`; a package class → `registerClass(X, { id, serialize, revive })` from `@rivetjs/runtime/resume-format`. `NODE_ENV=development vite build` names the value path. Rules: `get_doc("docs:/best-practices/serializable-captures/")`.
+4. State resets on the first change after resume: a child destructures its props (`function C({ value })`) and is re-created → read `props.value`. Copies of `props.children` in a local are not tracked → render `{props.children}` directly.
+5. `.ts` module importing `@rivetjs/runtime/dom` (bundles the DOM runtime into SSR) → move that code into a `.tsx` file.
+6. Re-run `npm run check` and `npm run build` (prerender exercises serialization); both must be clean.

package/templates/starter-minimal/.cursor/rules/rivet-form-in-drawer.mdc

@@ -0,0 +1,64 @@
+---
+description: "Build a validated form inside a drawer or dialog on a Rivet live page, so a submit updates the list behind it in place, keeps the overlay open on errors and works without JavaScript. Use for \"add/edit X in a drawer/modal/dialog\" tasks in a Rivet project."
+globs:
+alwaysApply: false
+---
+
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/form-in-drawer.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Form in a drawer with a live page
+
+Reference implementation: `get_doc("docs:/guides/forms/forms-in-overlays/")` (example `docs:/examples/drawer-form/`). Read it first; the steps below are its shape.
+
+1. Define the form once, shared by page and action (any Standard Schema library):
+
+```ts
+// src/forms/customer.ts
+import { defineForm } from "@rivetjs/forms";
+import { z } from "zod";
+export const customerForm = defineForm({ name: "customer", schema: z.object({ name: z.string().min(1), email: z.string().email() }) });
+```
+
+2. Make the page live and add the action:
+
+```tsx
+import type { LivePageProps } from "@rivetjs/router";
+import { actionResult } from "@rivetjs/router/client";
+import { action, invalid } from "@rivetjs/forms/server";
+import { load, actions } from "@rivetjs/router";
+
+export const live = true; // data is an accessor, refreshed in place after a submit: signals (open drawer, input, focus) survive
+export const loader = load(({ url }: { url: URL }) => ({ customers: [...customers], creating: url.searchParams.has("new") }));
+export const forms = actions({
+  customer: action(customerForm, (value) => {
+    if (customers.some((c) => c.email === value.email)) return invalid({ email: "Already a customer" });
+    customers.push({ id: customers.length + 1, ...value });
+  }),
+});
+export default function Customers({ data }: LivePageProps<typeof loader>) {
+  /* … */
+}
+```
+
+3. In the component: `const result = actionResult("customer")`, `const open = signal(data().creating || (result?.status ?? 0) >= 400)` (no-JS entry: `<a href="?new" onClick={(e) => { e.preventDefault(); open.set(true); }}>`), `const form = createForm(customerForm, { result })`. Render the list from `data()` with `<For each={data().customers} by={(c) => c.id}>`; never copy `data()` into a signal.
+4. The overlay: `@rivetjs/ui` (`Drawer` / `Modal`, `isOpen={open}`) or cdk `ModalOverlay isDismissable isOpen={open}` + `Modal` + `Dialog` (div overlay layer, two-way `isOpen`). The form inside:
+
+```tsx
+<form id={formId(form)} method="post" action="?/customer" onSubmit={async (event) => (await onSubmit(customerForm, form, event)) && open.set(false)}>
+  <label for={fieldId(form, "email")}>Email</label>
+  <input
+    id={fieldId(form, "email")}
+    name="email"
+    value={defaultValue(form, "email")}
+    aria-invalid={isInvalid(form, "email")}
+    aria-describedby={describedBy(form, "email")}
+  />
+  <FieldError of={form} name="email" />
+  <button aria-disabled={submitting(form) ? "true" : undefined}>Save</button>
+</form>
+```
+
+`onSubmit` resolves true once the server accepted the form and the page data is fresh: close the drawer then. Errors stay in the open drawer. Imports: `createForm, defaultValue, describedBy, fieldId, formId, isInvalid, onSubmit, submitting` from `@rivetjs/forms`, `FieldError` from `@rivetjs/forms/components`.
+
+5. A layout `load(…)` re-runs too (counts in headers update).
+6. Check: `check_code` on the page, `npm run check`, then try it with JavaScript disabled (plain POST, 400 re-render with the drawer open).

package/templates/starter-minimal/.cursor/rules/rivet-port-react-component.mdc

@@ -0,0 +1,37 @@
+---
+description: "Port a React (or Solid / Next.js) component or page to Rivet idioms - signals instead of useState, clientEffect instead of useEffect, For with a key, live props, class, serializable handlers. Use when the user pastes React code or asks to convert / migrate a component to Rivet."
+globs:
+alwaysApply: false
+---
+
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/port-react-component.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Port a React component to Rivet
+
+Map each construct (full table: `get_doc("docs:/start/coming-from-other-frameworks/")`):
+
+| React                                                   | Rivet                                                                                                                               |
+| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `const [n, setN] = useState(0)`                         | `const n = signal(0)`; read `n()`, write `n.set(1)` / `n.update((v) => v + 1)` (`@rivetjs/reactivity`)                              |
+| `useMemo(() => a * 2, [a])`                             | `computed(() => a() * 2)` (no dependency list)                                                                                      |
+| `useEffect(() => …, [deps])`                            | `clientEffect(() => …)` from `@rivetjs/runtime/dom` (browser only, re-runs when read signals change; return a cleanup)              |
+| `useRef()` for an element                               | `const el = ref<HTMLInputElement>()` + `ref={el}`; read `el()`                                                                      |
+| `useCallback`, `memo`                                   | nothing: components run once                                                                                                        |
+| `useContext`                                            | `createContext` / `useContext` (`@rivetjs/reactivity`) + `<Provider token value>` (`@rivetjs/runtime/dom`)                          |
+| `items.map((i) => <li key={i.id}>…)`                    | `<For each={items} by={(i) => i.id}>{(i) => <li>{i().name}</li>}</For>` (item / index are accessors); `.map` is fine for fixed data |
+| `cond && <p />`                                         | `cond() && <p />` or `<Show when={cond()}>`                                                                                         |
+| `className`, `htmlFor`, `onChange` on text inputs       | `class`, `for`, `onInput` or `model:value={signal}`                                                                                 |
+| `style="…"` strings                                     | `style={{ color: c() }}` or `style:color={c()}`                                                                                     |
+| `function Badge({ count })`                             | `function Badge(props: { count: number })` + `props.count` (props are live; destructuring reads once)                               |
+| `React.lazy`, `<Suspense>`                              | `lazyComponent`, `Async`, `Suspense` (`@rivetjs/runtime/dom`)                                                                       |
+| Next.js `getServerSideProps`, Remix `loader` / `action` | `export const loader = load(…)` / `actions(…)` in the route file                                                                       |
+| `useRouter().push`, `useSearchParams`                   | `navigate()`, `useSearchParams()` from `@rivetjs/router/client`                                                                     |
+| icon components / inline SVG                            | `<Icon icon={Check} />` from `@rivetjs/kit/icon` + `import { Check } from "lucide"`                                                 |
+
+Then fix what resuming requires:
+
+1. Move browser reads (`window`, `document`, `localStorage`, `matchMedia`) out of the component body into handlers or `clientEffect` (RV2001).
+2. Handlers: inline arrows or local consts. Values they capture must serialize: create class instances (`Intl.*`, SDK clients) inside the handler or build them with `reconstruct(() => new X(…))` (`import { reconstruct } from "@rivetjs/runtime/dom"`; RV2003); wrap library callbacks: `onPress={() => track("save")}`.
+3. Render props and item renderers stay functions (`{(item) => …}`).
+4. Third-party React UI → `@rivetjs/ui` / `@rivetjs/cdk` equivalents: `list_components`, `get_component(name)`; React Aria-style names carry over (`onPress`, `isOpen={signal}`).
+5. `check_code` the result, fix every RV code (`explain_diagnostic`), then `npm run check`.

package/templates/starter-minimal/.cursor/rules/rivet-ui-design.mdc

@@ -0,0 +1,42 @@
+---
+description: "Use when designing, building, or polishing Rivet interfaces with @rivetjs/ui or @rivetjs/cdk, including colors, spacing, typography, page structure, app layouts, component composition, responsive behavior, and interactions."
+globs:
+alwaysApply: false
+---
+
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/skills/design-ui.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Design with Rivet UI and CDK
+
+Design a coherent experience around the user's task, then express it with Rivet components. Preserve the app's brand, established patterns, and requested scope. This skill works in consumer projects; MCP is optional.
+
+## Start with the task and existing system
+
+Read project instructions, the relevant screens, installed package versions, global styles, and theme overrides. Identify the main task, content priorities, primary action, data density, and target devices. Ask only about missing information that materially changes the design; otherwise state a reasonable assumption and proceed.
+
+For a new or substantially redesigned screen, establish a compact design contract:
+
+- **Structure:** navigation, page regions, reading order, and what changes on mobile.
+- **Visual system:** semantic color roles, type hierarchy, spacing rhythm, density, and surface treatment.
+- **Composition:** chosen UI/CDK components and why they fit the task.
+- **Behavior:** primary action, focus/keyboard behavior, feedback, and loading/empty/error/success states.
+
+Use that contract to guide the implementation, not as a mandatory separate deliverable or approval gate. For a small edit, preserve the existing contract and change only what is needed.
+
+## Read the relevant design references
+
+| Decision | Reference |
+| --- | --- |
+| Palette, contrast, spacing, typography, radius, visual hierarchy | [Visual foundations](../../.agents/skills/rivet-ui-design/references/visual-foundations.md) |
+| Information architecture, app shell, page regions, responsive and scrolling behavior | [Structure and app layouts](../../.agents/skills/rivet-ui-design/references/structure-and-layout.md) |
+| Choosing and combining components, forms, lists, overlays, reusable patterns | [Component composition](../../.agents/skills/rivet-ui-design/references/component-composition.md) |
+| Action hierarchy, states, feedback, keyboard, focus, motion | [Interactions](../../.agents/skills/rivet-ui-design/references/interactions.md) |
+| Actual imports, APIs, signals, resumability, styles, MCP and offline lookup | [Rivet implementation](../../.agents/skills/rivet-ui-design/references/rivet-implementation.md) |
+
+Load the references needed for the task. Before writing code, consult the implementation reference and verify the selected components against the installed version.
+
+## Implement and assess the whole experience
+
+Use styled `@rivetjs/ui` for its supported patterns. Use headless `@rivetjs/cdk` when the task requires a different visual treatment or a behavior primitive; custom styling still needs every interactive state. Compose semantic HTML for regions that need no component behavior.
+
+Evaluate the screen with realistic content: long titles, many rows, empty data, validation errors, pending actions, and narrow widths. Check hierarchy, alignment, contrast, readable text, keyboard access, focus restoration, and overflow. Inspect light/dark modes if supported and reduced motion when adding movement. Run the project's available checks and build; use MCP `check_code` when connected. Report the design decisions and what was actually verified. If browser inspection is unavailable, say which visual checks remain.

package/templates/starter-minimal/.cursor/rules/rivet.mdc

@@ -0,0 +1,27 @@
+---
+description: "Rivet framework rules (not React / Solid)"
+globs:
+alwaysApply: true
+---
+
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/digest.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Rivet: rules for AI assistants
+
+This project uses Rivet, a compiled, resumable JSX framework. It is NOT React and NOT Solid. Full instructions: `AGENTS.md` at the project root (read it before editing). Docs: the Rivet MCP server (`npx -y @rivetjs/mcp`: `search_docs`, `get_doc`, `get_component`, `check_code`, `explain_diagnostic`) or each docs site's `/llms.txt`.
+
+- Components run once, on the server; the browser resumes the page and never re-runs them. No hooks, no re-renders, no dependency arrays.
+- Component body = server code: no `window` / `document` / `localStorage` there (RV2001). Browser code goes in handlers, `clientEffect` / `clientEvent` / `clientOnly` from `@rivetjs/runtime/dom`.
+- Signals (`@rivetjs/reactivity`): `const n = signal(0)`; read `n()`; write `n.set(1)` / `n.update((v) => v + 1)`; `computed(() => n() * 2)`; `untrack(n)` (no `.peek`).
+- JSX: `class` (not `className`), `for`, events `onClick` / `onInput` (PascalCase; not `onclick`, not React's `onChange` for text), `model:value={signal}` for two-way inputs, style objects (no style strings).
+- Props are live: read `props.x` where it is shown; destructuring reads once. `mergeProps` / `splitProps` from `@rivetjs/runtime/props`.
+- Lists: `<For each={items} by={(i) => i.id}>{(item, index) => … item() … index()}</For>`; `Show`, `Switch` / `Match`, `ref()` from `@rivetjs/runtime/dom` (named imports).
+- Captures must serialize: handlers are inline arrows or local consts. Functions stored by name in objects / arrays and imported functions (npm exports too) resume by reference; functions in objects built at module level or returned by library code / hooks do not. Class instances: data classes of the module, classes with `[serialize]` / `static [revive]`, package classes registered with `registerClass`. Library objects (`new Intl.NumberFormat`, SDK clients, charts) → create them in the handler or `reconstruct(() => new Intl.NumberFormat())` (`import { reconstruct } from "@rivetjs/runtime/dom"`). No `.bind` inside an object literal (inline in a prop or a local `const` of it is fine).
+- Render props and item renderers are functions (`{(item) => …}`, `({ close }) => …`).
+- Import `@rivetjs/runtime/dom` only from `.tsx` files, never from `.ts`.
+- Routes: `src/routes/**.tsx`; `_layout.tsx`, `[param]`, `_404.tsx`; page exports `load(…)`, `actions(…)`, `head`, `live`; page `data` is a value, layout `data()` / `params()` / `url()` are accessors; `export const live = true` makes page `data` an accessor updated in place (forms in drawers).
+- Forms: `@rivetjs/forms` (`defineForm`, `createForm`, `onSubmit`, `FieldError`; server `action` / `invalid` from `@rivetjs/forms/server`).
+- i18n: `t("key", { param })` from `@rivetjs/i18n`, compile-time; key a string literal.
+- Icons: `<Icon icon={Check} />` from `@rivetjs/kit/icon` with lucide (`import { Check } from "lucide"`). Never inline SVG paths, never Unicode glyphs as icons.
+- UI: `@rivetjs/ui/<component>` (styled compound parts `Select.Trigger`, `onPress`, two-way props take a signal); headless `@rivetjs/cdk/<module>`.
+- After every change: `npm run check` (`rivet sync && rivet-check`) and fix every `RVnnnn` diagnostic; never edit `.rivet/` or `Generated … Do not edit` files.

package/templates/starter-minimal/.github/copilot-instructions.md

@@ -0,0 +1,21 @@
+<!-- Generated by libs/mcp/ai/sync.ts from libs/mcp/ai/digest.md in the Rivet repository: edit the source there and run the script. In an app created from a starter this file is yours to edit. -->
+
+# Rivet: rules for AI assistants
+
+This project uses Rivet, a compiled, resumable JSX framework. It is NOT React and NOT Solid. Full instructions: `AGENTS.md` at the project root (read it before editing). Docs: the Rivet MCP server (`npx -y @rivetjs/mcp`: `search_docs`, `get_doc`, `get_component`, `check_code`, `explain_diagnostic`) or each docs site's `/llms.txt`.
+
+- Components run once, on the server; the browser resumes the page and never re-runs them. No hooks, no re-renders, no dependency arrays.
+- Component body = server code: no `window` / `document` / `localStorage` there (RV2001). Browser code goes in handlers, `clientEffect` / `clientEvent` / `clientOnly` from `@rivetjs/runtime/dom`.
+- Signals (`@rivetjs/reactivity`): `const n = signal(0)`; read `n()`; write `n.set(1)` / `n.update((v) => v + 1)`; `computed(() => n() * 2)`; `untrack(n)` (no `.peek`).
+- JSX: `class` (not `className`), `for`, events `onClick` / `onInput` (PascalCase; not `onclick`, not React's `onChange` for text), `model:value={signal}` for two-way inputs, style objects (no style strings).
+- Props are live: read `props.x` where it is shown; destructuring reads once. `mergeProps` / `splitProps` from `@rivetjs/runtime/props`.
+- Lists: `<For each={items} by={(i) => i.id}>{(item, index) => … item() … index()}</For>`; `Show`, `Switch` / `Match`, `ref()` from `@rivetjs/runtime/dom` (named imports).
+- Captures must serialize: handlers are inline arrows or local consts. Functions stored by name in objects / arrays and imported functions (npm exports too) resume by reference; functions in objects built at module level or returned by library code / hooks do not. Class instances: data classes of the module, classes with `[serialize]` / `static [revive]`, package classes registered with `registerClass`. Library objects (`new Intl.NumberFormat`, SDK clients, charts) → create them in the handler or `reconstruct(() => new Intl.NumberFormat())` (`import { reconstruct } from "@rivetjs/runtime/dom"`). No `.bind` inside an object literal (inline in a prop or a local `const` of it is fine).
+- Render props and item renderers are functions (`{(item) => …}`, `({ close }) => …`).
+- Import `@rivetjs/runtime/dom` only from `.tsx` files, never from `.ts`.
+- Routes: `src/routes/**.tsx`; `_layout.tsx`, `[param]`, `_404.tsx`; page exports `load(…)`, `actions(…)`, `head`, `live`; page `data` is a value, layout `data()` / `params()` / `url()` are accessors; `export const live = true` makes page `data` an accessor updated in place (forms in drawers).
+- Forms: `@rivetjs/forms` (`defineForm`, `createForm`, `onSubmit`, `FieldError`; server `action` / `invalid` from `@rivetjs/forms/server`).
+- i18n: `t("key", { param })` from `@rivetjs/i18n`, compile-time; key a string literal.
+- Icons: `<Icon icon={Check} />` from `@rivetjs/kit/icon` with lucide (`import { Check } from "lucide"`). Never inline SVG paths, never Unicode glyphs as icons.
+- UI: `@rivetjs/ui/<component>` (styled compound parts `Select.Trigger`, `onPress`, two-way props take a signal); headless `@rivetjs/cdk/<module>`.
+- After every change: `npm run check` (`rivet sync && rivet-check`) and fix every `RVnnnn` diagnostic; never edit `.rivet/` or `Generated … Do not edit` files.