Skip to main content
/synclair/pages is the map of the app’s front end: every route it serves, what each screen looks like, how they link together, and — crucially — which library items each one is built from. If the System Map is “what’s under the hood,” the sitemap is “what a user actually walks through.”

​
What it is

A live inventory of the whole view layer:

The route tree

Every view/route the app serves, organized so you can see the whole surface at once.

Live previews

A real, device-framed preview of each screen — not a screenshot, the running view.

Navigation edges

How screens connect — the paths a user takes between them.

Composition

Which components, blocks, and templates each screen is built from — the link from view back to library.

​
What’s in it

The map lives in data/pages-map.json (schema: lib/system/pages-map.ts) and renders at /synclair/pages. The composition data is what makes it more than a list: it ties each screen to the library items it uses, so you can trace a component to every view it appears in — and spot views built from unregistered, one-off UI.

​
How it works

The sitemap is generated by the pages-map skill via the page-mapper digger, which reads the app’s router (this repo’s, or the host app’s) and returns the route tree plus each route’s composition and a live-preview URL. It’s kept honest by check:pages, which flags when the map has drifted from the actual routes.
In companion mode, a live/boot banner lets the hub light up host route previews when the host’s dev server is running — and offers to boot it when it isn’t (npm run host:status / npm run host:up).

​
How to act on it

Run the pages-map skill (“map the pages / build a sitemap”). Re-run it when check:pages reports drift after routes change.
Use the composition data to spot screens built from one-off UI that should be registered components — the same finding the build report ranks.
Open /synclair/pages to see every screen’s preview in one place — useful for a design pass or a stakeholder walkthrough.

Related: System map

The backend/architecture counterpart — the two together answer “what is this app.”