# Working on the web pages

This is part of the root `AGENTS.md`, loaded when work reaches `web/`.

- The web pages are the SvelteKit app in `web/`; knotless-serve answers
  what they show as XRPC queries, each with its lexicon under
  `lexicons/` and the views it shares in `dev.knotless.defs`, as
  atproto's appviews do. The pages' TypeScript types are made from those
  lexicons by @atproto/lex (`npm run lex` in `web/`, which `dev`, `build`
  and `check` run first), into `web/src/lib/lexicons`, not kept in git.
  `just lex` checks the answers the screenshots recorded against their
  lexicons, and the `test` check every answer the serve tests receive.
- Before changing a page, load the `ui` skill (`.claude/skills/ui`):
  its house rules (sentence case, empty states, space), and `just
  look`, which draws any page in any state from the recording as
  pictures to open: empty, signed in, a menu open, a long title. Look
  at every state you touch before pushing.
- For the web pages: the pull's `shots` check shows what moved, with
  pictures. No screenshot is kept anywhere: the pages are shot as main
  draws them and as the change does, in one run. To look before pushing,
  `just shots`, which builds `web/` and main's, shoots only the pages
  whose HTML differs, drawn from `harness/shots/fixtures.json` with no
  PDS, and leaves each that moved under `target/shots/results/` (its
  expected, actual and diff). After a change to what a page's answer
  holds, `just shots-up` in the background once, then `just
  shots-record`. Each checkout's shots have three ports of their own,
  from its path; `SHOTS_PORT` sets another base for all of these.
- `shots-live` shoots this checkout's pages from the recording and again
  through knotless-serve over a world: one that moved means the
  recording is out of date. Keep `just shots-up` running in the
  background while working on pages: `shots-live` then reuses its world
  rather than seeding one, which is most of its time.
- The social cards are drawn by knotless-serve: `just shots-cards` takes
  them from a world into `target/shots/cards` to look at.
- The components in `web/src/lib` are layered, atomic design's way:
  `atoms` (one element: an icon, an avatar), `molecules` (a few atoms
  that mean something together: a person, a commit row), `organisms` (a
  part of a page: a check list, a feed), `templates` (a page's layout,
  without its data). A component uses its own layer and those below it,
  never one above; `just lint` checks it. Pages under `web/src/routes`
  fill a template with what the queries answer.
- The pages' styles are `web/src/app.css`, and every colour, size,
  space, radius and weight in it is a token from `web/src/tokens.css`:
  take one by name rather than writing a value, and add one there when
  none fits. A colour for what it means is its role, `--danger`,
  `--success`, `--attention`, `--done` or `--neutral`, never the hue
  under it (`--red`), so a theme can draw success in blue. Every colour that is text meets WCAG AA (4.5:1) on what
  it is drawn on, in every theme: `harness/contrast.mjs` checks it, in
  `web` and `just lint`, and a new colour that is text goes in
  `web/src/lib/contrast.json`, which the theme editor, and knotless's
  own check of a theme made anywhere (`crates/knotless/src/theme.rs`),
  hold people's own themes to too. A menu that opens is a `<details class="popover …">`.
- In Svelte markup, keep a run of inline text one expression or one line:
  a block or component beside it splits the text into nodes, which shapes
  differently from the same text whole and moves pixels.