> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synclair.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> A map of every section of the Synclair hub, each linking to its own deep dive.

The Synclair hub is a single app mounted at **`/synclair`**. Every section is a
*rendering of a file in your repo* — browse the page, or read the source; they're the
same facts. This is the map; each card links to that section's full page.

<Note>
  Every section is one source, two renderings: a human page under `/synclair/*` and a
  machine-readable form for agents. Editing the underlying file updates both.
</Note>

## Foundation

<CardGroup cols={2}>
  <Card title="Foundations" icon="palette" href="/foundations">
    The design tokens — color, type, spacing as one semantic vocabulary. What the lint
    guardrails point back to.
  </Card>

  <Card title="Component library" icon="shapes" href="/component-library">
    The catalog: Components, Blocks, Templates — one gallery per tier, each with live
    previews and a per-item doc page.
  </Card>

  <Card title="Library & surfaces" icon="layer-group" href="/surfaces">
    For multi-frontend products — a per-surface drill-in so web and native catalogs
    coexist. Invisible for single-frontend projects.
  </Card>
</CardGroup>

## Knowledge

<CardGroup cols={2}>
  <Card title="Knowledge" icon="book" href="/knowledge">
    Source-of-truth links, distilled digests, and generated summaries — so agents never
    start blank.
  </Card>

  <Card title="References" icon="bookmark" href="/references">
    The project's findings — prior art and recommendations agents accumulate as they
    research.
  </Card>
</CardGroup>

## Visibility into the whole app

<CardGroup cols={2}>
  <Card title="System map" icon="diagram-project" href="/system-map">
    What the codebase is made of beyond the UI — areas, API surface, data model, jobs,
    integrations.
  </Card>

  <Card title="App sitemap" icon="map" href="/sitemap">
    Every view the app serves, a live preview of each, and the components each one
    composes.
  </Card>

  <Card title="Hygiene" icon="broom" href="/hygiene">
    Where host code steps outside its own foundation — inline styles, raw colors,
    bypassed primitives. An advisory sweep.
  </Card>

  <Card title="Reports" icon="clipboard-list" href="/reports">
    A plain-English read of how the build is doing and a ranked, trackable list of what
    to do next.
  </Card>
</CardGroup>

## Operations

<CardGroup cols={2}>
  <Card title="AI setup" icon="robot" href="/agents-and-skills">
    Every skill and agent available, classified by category and origin.
  </Card>

  <Card title="Environment" icon="server" href="/environment">
    The running stack, plus the opt-in "call home" freshness check against the upstream
    foundation.
  </Card>

  <Card title="GitHub" icon="github" href="/github">
    Recent commits and diffs, read straight from git — the hub's database.
  </Card>

  <Card title="Search (⌘K)" icon="magnifying-glass" href="/search">
    One command palette across everything — components, tokens, docs, pages.
  </Card>
</CardGroup>

One more thing you'll see in the chrome, not a section of its own: the **setup-mode
badge** — whether this clone is *embedded* or *watcher* (see [Setup modes](/setup-modes)).

## In existing-app (watcher) mode

When Synclair runs beside a host app, a few sections take on a host flavor: the
**Component library** shows host components tagged **"Host"** (documented from source,
not imported), and **Hygiene** + the host catalog freshness are checked against the host
repo so nothing quietly goes stale.

<Card title="Start with the capabilities" icon="robot" href="/agents-and-skills">
  The skills and agents that power all the "regenerate" actions across these sections.
</Card>