---
title: Getting Started
type: guide
audience: human + agent
status: current
---
# Getting Started
For a developer or agent opening this repo for the first time: the fast path from
clone to understanding to your first change. [`docs/README.md` ](./README.md ) is
the **map** (where everything is); this is the **path** (what to do, in order).
## 1. Run it
```bash
npm install
npm run dev # vite dev — routes resolve from web/routes/
```
Open the dev server. There are three route trees:
| Route | What it is |
| --- | --- |
| ** `/uix` ** | The UIX component system. `/uix/components/{name}` is an interactive testbed per component — try `/uix/components/toggle` and `/uix/components/dialog` . Each demo has **Live · API · Morfo · Sema · Recipe · A11y** tabs. |
| ** `/active` ** | The runtime artifacts (`arts`): `/active/docs/{name}` per artifact (auth, cache, http, format, …), plus `/active/get-started/*` and `/active/security` . |
| ** `/temas` ** | Themes (`/temas/grafito`) and motion (`/temas/animations`). |
## 2. The mental model (5 minutes)
UIX is built around a **declarative contract** that the other layers consume.
Every perceptible interaction flows through one chain:
```
Morfo declares → Soma transcribes → Sema projects → Eidos paints
(the contract) (behavior, state) (sound/haptic + (CSS reacting to
parts, data-*, data-event-*) the data-* attrs)
ARIA, events
```
- **morfo** is the single source of truth for a component's public DOM surface —
declared once, consumed by everyone.
- **soma** runs the behavior and writes the `data-*` / `aria-*` the morfo
promised.
- **sema** turns a declared event into a perceptual signal (sound, haptic) and
stamps `data-event-*` for the duration of a "hold".
- **eidos** is the CSS that styles against exactly those attributes.
The full worked causal chain (a toast, end to end) is in
[`architecture/active-architecture.md` ](./architecture/active-architecture.md ); the vocabulary it
uses is in [`CANON.md` ](./CANON.md ).
## 3. See the whole architecture in one element
Open `/uix/components/toggle` , click the toggle, and inspect it in DevTools. In
that one element you can see every layer at once:
- `data-toggle` — the provider marker. **Morfo** declares it; **soma** writes it.
- `data-state="on" | "off"` — the state. **Soma** maintains it.
- `data-event-*` — appears for a moment when you click. **Sema** stamps it during
the hold, then removes it.
- The CSS rules that react to `[data-toggle][data-state='on']` and
`[data-event-*]` are **eidos** (the demo's **Recipe** tab lists the exact
selectors and which layer owns each).
That is the doctrine made visible: morfo promises the attrs, soma writes them,
sema stamps the event, eidos paints — no layer reaches into another's job.
## 4. The verification loop
```bash
npm run check # types — svelte-check, expect 0 errors
npm run test # vitest suite (two projects: browser client + node server)
npx vitest run < file > # one file
npm run lint # prettier --check (npm run format to fix)
```
For a component specifically:
```bash
npm run morfo:check # the real DOM vs the morfo contract
npm run smoke # runtime/hydration errors (needs `npm run dev` running)
docs(book): F7.5 (1/2) — checklist + audit guide + demo guide moved to docs/guides/
Three English guides moved verbatim (copy + link touch-ups, no
translation): COMPONENT_COMPLETION_CHECKLIST -> guides/
completion-checklist.md, COMPONENT_AUDIT_GUIDE -> guides/
component-audit.md, DEMO_AUTHORING_GUIDE -> guides/demo-authoring.md.
Tooling moved with its doc in the same pass: docs-check I5 now parses
the checklist at the new path (verified: 0 errors, rule tables found)
and component-audit.ts's two path strings updated. One reconciliation
in the audit guide's s5, applied as link-don't-copy: the copied v1
6-tab template list (stale vs the v2 9-tab guide it links, drawer
canary vs button) is replaced by a pointer to demo-authoring.md; the
domain canaries in s7 stay. demo-authoring's harness links now reach
into web/routes/uix/lib/ (the modules stay with the code); the deleted
pendiente_color_demos.md reference is marked TODO(reconcile). Corpus
swept: building-a-component (frontmatter related: + phases 6/8),
authoring, architecture/soma, theming/reference s5-parity,
testing-and-tooling, getting-started, README (E4 rows + component-audit
row added + two stale F7.3 paths in 'I want to' fixed). Remaining
warns = links to component-guide.md, which lands in F7.5 (2/2).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
npm run component:audit # acceptance matrix (see guides/completion-checklist.md)
npm run perm:check # re-validate morfo across state transitions
```
## 5. Your first change — pick a path
- **Read one component end to end.** Toggle is the smallest complete example:
`src/uix/morfo/components/toggle.ts` (the contract) →
`src/uix/soma/components/toggle/` (behavior) →
`src/uix/eidos/components/toggle/` (visuals). Follow one `data-*` from
declaration to CSS.
docs(book): F7.3 (2/3) — theming/ satellites: guide + notes + channels + motion-guide + changelog
Five theming docs into the book tree:
- docs/theming/guide.md — THEMING_GUIDE (241 L, Spanish -> English): add a
component's recipe step-by-step + the three theme-definition modes.
- docs/theming/notes.md — THEMING_NOTES (168 L, Spanish -> English): the
bundle/feature comparison + the controversial-decisions FAQ (in-page
anchor to s1.bis fixed to a real THEMING link).
- docs/theming/channels.md — CHANNELS_SYNTHESIS (115 L, Spanish ->
English): the per-channel-RFC capstone (two moments, 8 expression vs 3
runtime channels, the builder sextet + applyTheme).
- docs/theming/motion-guide.md — MOTION_GUIDE (213 L, already English):
moved with frontmatter + links repointed.
- docs/theming/changelog.md — THEMING_CHANGELOG (1310 L): chronicle,
moved VERBATIM (recorded history is not translated), links repointed.
Thin stubs at all five old paths; corpus links swept (docs map E3/E4
rows, building-a-component phase 5, decisions umbrella, getting-started,
eidos chapter). docs:check 0 errors (258 docs).
Remaining in F7.3: THEMING.md itself (1499 L) + eidos-motion.md (698 L).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
- **Tweak a theme token.** [`theming/guide.md` ](./theming/guide.md )
(define a theme) + [`canon/tsc.md` ](./canon/tsc.md ) (where each token
is allowed to live).
docs(book): F7.5 (1/2) — checklist + audit guide + demo guide moved to docs/guides/
Three English guides moved verbatim (copy + link touch-ups, no
translation): COMPONENT_COMPLETION_CHECKLIST -> guides/
completion-checklist.md, COMPONENT_AUDIT_GUIDE -> guides/
component-audit.md, DEMO_AUTHORING_GUIDE -> guides/demo-authoring.md.
Tooling moved with its doc in the same pass: docs-check I5 now parses
the checklist at the new path (verified: 0 errors, rule tables found)
and component-audit.ts's two path strings updated. One reconciliation
in the audit guide's s5, applied as link-don't-copy: the copied v1
6-tab template list (stale vs the v2 9-tab guide it links, drawer
canary vs button) is replaced by a pointer to demo-authoring.md; the
domain canaries in s7 stay. demo-authoring's harness links now reach
into web/routes/uix/lib/ (the modules stay with the code); the deleted
pendiente_color_demos.md reference is marked TODO(reconcile). Corpus
swept: building-a-component (frontmatter related: + phases 6/8),
authoring, architecture/soma, theming/reference s5-parity,
testing-and-tooling, getting-started, README (E4 rows + component-audit
row added + two stale F7.3 paths in 'I want to' fixed). Remaining
warns = links to component-guide.md, which lands in F7.5 (2/2).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
- **Build a new component.** [`guides/component-guide.md` ](./guides/component-guide.md )
is the ordered process (steps 1– –
docs(book): F7.5 (1/2) — checklist + audit guide + demo guide moved to docs/guides/
Three English guides moved verbatim (copy + link touch-ups, no
translation): COMPONENT_COMPLETION_CHECKLIST -> guides/
completion-checklist.md, COMPONENT_AUDIT_GUIDE -> guides/
component-audit.md, DEMO_AUTHORING_GUIDE -> guides/demo-authoring.md.
Tooling moved with its doc in the same pass: docs-check I5 now parses
the checklist at the new path (verified: 0 errors, rule tables found)
and component-audit.ts's two path strings updated. One reconciliation
in the audit guide's s5, applied as link-don't-copy: the copied v1
6-tab template list (stale vs the v2 9-tab guide it links, drawer
canary vs button) is replaced by a pointer to demo-authoring.md; the
domain canaries in s7 stay. demo-authoring's harness links now reach
into web/routes/uix/lib/ (the modules stay with the code); the deleted
pendiente_color_demos.md reference is marked TODO(reconcile). Corpus
swept: building-a-component (frontmatter related: + phases 6/8),
authoring, architecture/soma, theming/reference s5-parity,
testing-and-tooling, getting-started, README (E4 rows + component-audit
row added + two stale F7.3 paths in 'I want to' fixed). Remaining
warns = links to component-guide.md, which lands in F7.5 (2/2).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
[`guides/completion-checklist.md` ](./guides/completion-checklist.md )
is how you know it's done.
## 6. Where to go next
- The map of all docs → [`docs/README.md` ](./README.md )
- The invented vocabulary → [`docs/glossary.md` ](./glossary.md )
- The semantic canon → [`docs/CANON.md` ](./CANON.md )
- Writing or editing docs → [`docs/authoring.md` ](./authoring.md )
