open source  ·  formerly Clairity → synclair

One source of truth, in sync for humans and agents.

Synclair is a reusable project foundation: one aligned home for your design tokens, component library, and AI context. Humans browse it. Coding agents build from it. Nothing drifts.

View on GitHub
tokens ⇄ synced components ⇄ synced ai context ⇄ synced knowledge ⇄ synced
What's inside

The setup that gives clarity to your setup.

Every project accumulates three things that drift apart: the design system, the components that implement it, and the context an AI agent needs to work on it. Synclair keeps all three in one governed, browsable place.

--token-*

Design tokens

A governed token vocabulary with tiers — browsable by people on /foundations, machine-readable by agents. Change a token once; everything downstream agrees.

<Component />

Component library

Components, blocks, and templates documented next to the code that ships them. What you see in the library is what the app renders — never a stale mirror.

.claude/

AI context

Skills, agents, and knowledge sources wired in from day one. A coding agent starts every session already knowing your tokens, patterns, and decisions.

Architecture

A portable brain, a swappable adapter, a clean skin.

Synclair's UI is Next.js + shadcn + Tailwind — but what it governs is platform-neutral. Swap one adapter and the same foundation backs a web app or, via react-native-web, a React Native app.

brain portable
The token vocabulary, tiers, docs contract, search, AI setup, and knowledge layer — lib/system/* and .claude/. This moves with you.
adapter swappable
The platform seam — lib/system/adapters/*. Point activeAdapter somewhere else to retarget the whole foundation.
skin Next + shadcn
The routes and shell you actually browse — the management space where humans explore what agents consume.
The surfaces

One dashboard, six views of the truth.

/Overview — the project at a glance
/foundationsDesign tokens, tiered and documented
/components · /blocks · /templatesThe component library, from atoms to full pages
/ai-setupSkills and agents provisioned for this project
/knowledgeSources of truth — specs, PRDs, Figma, decks
/environmentThe stack and how it runs
Get started

Clone it, reseed it, make it yours.

Synclair ships as a blank foundation — the seed is stripped, ready to reseed with your brand, theme, domain skills, and knowledge sources.

terminal
$ git clone https://github.com/joshuaiwata/synclair.git $ cd synclair $ npm install && npm run dev → ready on http://localhost:4100 # never 3000
Built on Hatchable