Greenroom owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.0.0
- version
- 7
- pages
- 20
- components
- 128 × 2 modes
- tokens
- 4
- workflows
unzip greenroom-1.0.0.zip
cd greenroom-1.0.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 7 routes, the token file, 20 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 greenroom-1.0.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/greenroom/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/greenroom.jsonGreenroom 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.
- /August at Quarry Hall3 sections
- /weekThis week, hour by hour2 sections
- /eventHollow Bell3 sections
- /holdsHolds waiting on a decision2 sections
- /newCan we take this on?2 sections
- /programmeStrands and rooms2 sections
- /componentsThe parts1 sections
Tokens are declared on .tt-greenroom as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-greenroom"> 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.
The HTML edition
The same site again, with no framework under it.
Everything under html/ is a second, independently authored edition of the theme. html/dist/ is 7 compiled routes with local fonts and vanilla JavaScript — copy it to any static host and it is live, with no build step and no Node on the server. html/src/ is the Nunjucks source those routes compile from.
bun run build:html recompiles html/dist/ after you change the source or the tokens. bun run preview:html serves the compiled edition locally. Both ship in the download's package.json, backed by the two files in scripts/.
One token file drives both editions, so a rebrand made in src/theme.css reaches the HTML edition the next time you run the build — dist/ carries compiled CSS and never updates by itself.
The two editions are kept in step by the publish gate: every route in the manifest must have a compiled counterpart before a version ships, so the 7 pages you saw above exist in both.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 128 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
Greenroom has seven routes. Six are product routes composed through AppShell; /components is the buyer's standalone living styleguide.
- .claude/skills/add-section
Greenroom currently has 11 files directly under src/components/: the app shell, booking dialog and form, event detail and panel, hold ledger, holds queue, load chart, schedule, strand list and today rail.
- .claude/skills/check-quality
From the marketplace repository root:
- .claude/skills/rebrand
Greenroom has 128 tokens in light mode and 128 in dark mode. The two shipped tables are in src/theme.css and theme.json.tokens / tokensDark.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/greenroom/ 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 290 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Greenroom — the rules
The contract an agent works under inside this theme. `themes/CONTRACT.md` binds
in full; this file carries what is specific to Greenroom.
## What it is
A minimal events-calendar dashboard for a venue's programme desk. Seven routes
over one fixture spine, built on the repository's own component library
(tt-ui 1.4.0).
**Fiction**: **Quarry Hall**, a 420-capacity music-and-spoken-word venue in
Sheffield with three rooms, six programme strands and a season to fill. Demo
data throughout — nothing is wired to a box office, and the footer says so.
## The signature — the occupancy tail
**Declared, and the same words in `theme.json` `design.signature`:** *the
occupancy tail — every public booking draws the hours the room is genuinely
held, load-in to strike, around the solid band of its public hours.* It names a
construction, not a mood: a span, a band inside it, and the ledger that adds up
to the same minutes.
**Every public booking visibly drags its preparation behind it.** A 19:30 show
does not occupy the room from 19:30; it occupies it from the 13:30 load-in to
the 24:00 strike, and a calendar that shows only the public hours is how a room
gets double-booked.
It is drawn three ways, and the difference is deliberate:
| Route | Form |
|---|---|
| `/week` | One block per booking whose **height is the hold**, with the public hours as a solid band inside the hatched field |
| `/` | A `data-held` notch on the leading edge of the chip — a 4px **double** left border in the strand's own mark colour (`theme.css`, `.greenroom-chip[data-held]:not([data-hold-span])`). A month cell is ~100px and cannot carry a second bar per show |
| `/event` | The hold ledger: load-in → doors → curfew → strike, with the two hold edges grounded |
**Never fake it.** `holdFor()` in `src/fixtures/quarry.ts` computes every one of
these from the booking's own minutes and **throws** on a booking that claims a
hold without public hours to hang it off. An uncited hold cannot be published
because the build fails. Do not add a fallback.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.