Switchyard owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.1.0
- version
- 19
- pages
- 22
- components
- 75 × 2 modes
- tokens
- 4
- workflows
unzip switchyard-1.1.0.zip
cd switchyard-1.1.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 19 routes, the token file, 22 components and the agent kit.
See the priceInstall
Three ways in: the zip, the shadcn registry, or your agent over MCP.
The artifact is versioned and immutable, so the file you get is switchyard-1.1.0.zip. Unzip it, run the four commands above, and the site is on localhost:3000.
The link arrives with your license, and stays valid for every future version.
Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/switchyard/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/switchyard.jsonSwitchyard is paid, so the registry answers 402 with the price, the purchase URL and both token tables. Only the source files are withheld.
A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.
Point any MCP client at https://tailthemes.com/api/mcp and your agent can read the manifest, both token tables and AGENTS.md before it touches a file.
the four toolsWhat unzips
One directory, laid out the way you would lay it out yourself.
every file
Three of these do the work: src/theme.css holds every design decision, AGENTS.md is the contract your agent reads first, and .claude/skills/ holds the 4 workflows it can run.
Screenshots are not in the download. They are generated by the publish pipeline and live on the listing, not in your project.
Using it
Every page is a plain component, and the tokens are scoped to one class.
- /Overview4 sections
- /workflowsWorkflows2 sections
- /workflowWorkflow editor2 sections
- /templatesTemplates2 sections
- /runsRuns2 sections
- /runRun detail2 sections
- /approvalsApprovals2 sections
- /chatChat2 sections
- /agentsAgents2 sections
- /agentAgent configuration2 sections
- /evalsEvaluations2 sections
- /toolsTools2 sections
- /knowledgeKnowledge2 sections
- /guardrailsGuardrails2 sections
- /activityActivity2 sections
- /usageUsage2 sections
- /api-keysAPI keys2 sections
- /settingsSettings2 sections
- /componentsComponents22 sections
Tokens are declared on .tt-switchyard as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-switchyard"> and everything inside picks them up.
Dark mode is a dark class on <html>. There is no second stylesheet and no dark: utility in the components.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 75 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
- Watch it land. Open /components. The styleguide reads every swatch, type step and radius live, so you see what the change did to the whole system at once.
- Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in both modes and a rebrand should keep it there.
- .claude/skills/add-page
1. Create a static src/app/<slug>.tsx; use AppShell and compose sections without data fetching.
- .claude/skills/add-section
1. Create one src/components/<name>.tsx.
- .claude/skills/check-quality
Run from the repository root and stop on failure:
- .claude/skills/rebrand
1. Edit values in src/theme.css; keep the light, dark, and explicit light scope blocks complete.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/switchyard/ your copy has the project root instead.
For your agent
The theme brought its own rules, so nothing has to be reverse-engineered.
AGENTS.md is 75 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# AGENTS.md — Switchyard
Read this file before editing the theme. The repository `themes/CONTRACT.md` remains binding.
## Declarations
| Axis | Decision |
|---|---|
| Signature | **The execution stitch:** one canonical Wire topology appears as an editable workflow, chronological run tape, and agent configuration boundary. Node IDs and facts stay stable across those readings. |
| Sanctioned deviation | Owner direction moves light mode to an icy near-white canvas despite the catalog band census. The 1.200 ratio is required because Atrium already owns the neighbouring dashboard scale. |
| Register | Operational. Name the fixture, rule, threshold, tool boundary, or consequence. |
| Motion | Decisive and mechanical. 120ms controls, 180ms inspector, 240ms stitch emphasis, at most 4px translation. Only a running stitch may pulse; reduced motion is static and complete. |
| Text/display | Inter, for compact open forms across labels, tables, chat, and configuration. |
| Mono | JetBrains Mono, reserved for node IDs, model names, revisions, latency, cost, and JSON keys. |
## File map
- `src/theme.css` — every color, font, type step, state ramp, radius, and namespaced motion rule.
- `src/fonts.ts` + `src/fonts/` — self-hosted Inter and JetBrains Mono with OFL files.
- `src/assets/repair-triage.wire.json` — canonical workflow topology and serializable node options.
- `src/components/ui/data.ts` — reusable frontend fixtures: agents, runs, chat, tools, knowledge, policies, and templates.
- `src/components/ui/wire.ts` — typed JSON boundary; never duplicates topology.
- `src/components/ui/` — shared primitives only.
- `src/components/` — one independent section per file.
- `src/app/` — static page compositions; `/components` is the living styleguide.
## Invariants
1. Components use semantic colors only. Hex, palette classes, `text-white`, color alpha states, and `dark:`/`light:` variants are bugs.
2. Font sizes use `type-*` classes. Bare Tailwind size utilities are forbidden.
3. Sections import only `./ui/*` or `../components/ui/*`, the shell, and named Lucide icons. Section-to-section imports are forbidden.
4. `repair-triage.wire.json` owns node order, branch labels, edges, titles, and serializable node options. Update it before a renderer.
5. Typed fixtures own agent profiles, runs, conversations, telemetry, tools, knowledge, environments, schedules, permissions, and masked secrets.
6. Selection, hover, viewport, panel, drag, zoom, and React state never enter canonical Wire JSON.
7. The renderer uses tokens and visible node kind/labels. Color is never the only node or status signal.
8. Lucide is the sole UI icon set. `ui/brand.tsx` is the one bespoke brand mark.
9. Interactive targets are at least 40px, focus is immediately visible, and reduced motion leaves every state complete.
10. Actions say `Simulate run`, `Preview response`, `Test fixture`, or `Save draft`. This frontend never claims remote execution, persistence, connection, or deployment.
11. Switchyard in product wordmarks stays wrapped in `data-brand-name`.
12. Every route has one `h1`; `/components` owns only its page `h1` and demotes specimen headings where needed.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.