Covers owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.1.0
- version
- 6
- pages
- 32
- components
- 85 × 2 modes
- tokens
- 4
- workflows
unzip covers-1.1.0.zip
cd covers-1.1.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 6 routes, the token file, 32 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 covers-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/covers/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/covers.jsonCovers 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.
- /Rivelin: 46 covers, drawn to scale7 sections
- /menusThe card: 41 dishes, indexed by service7 sections
- /roomThe room: 46 covers across four sections6 sections
- /bookRequest a table, or take the snug5 sections
- /visitOpening hours, exceptions and step-free access5 sections
- /componentsThe parts4 sections
Tokens are declared on .tt-covers as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-covers"> 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 6 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 6 pages you saw above exist in both.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 85 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
Covers' routes each lead with the device that answers that route's question, and consecutive routes never open with the same one:
- .claude/skills/add-section
/coherence-pass asks one question of every block: which buyer question does it answer? On a restaurant site there are five, and they are always the same five: can I eat what I want · can I come when I can come · can I get in · what will it cost · what happens after I press the button.
- .claude/skills/check-quality
Run all of it. A green subset is not a pass.
- .claude/skills/rebrand
Covers is designed so a rebrand is a single-file edit. src/theme.css holds every colour, size, radius and face; no component sets one.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/covers/ 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 623 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Covers — the rules
The contract any agent works under inside `themes/covers/`. It never
contradicts `themes/CONTRACT.md`; where it looks like it might, the CONTRACT
wins and this file is the bug.
| | |
|---|---|
| **Fiction** | Rivelin, a 46-cover neighbourhood dining room and wine bar on the first floor of a former cutlery works, Ball Street, Kelham Island, Sheffield S3 8DB. Domain: **hospitality / local business**. |
| **Positioning** | For the agency putting a client's dining room online on a fixed fee, who has to ship a real card, real hours and a real booking path in a week — unlike the plated-hero restaurant template, which sells a photograph and leaves the 41-dish menu, the four services and the accessible-WC question to the developer. |
| **Register** | **Declarative-quiet.** Present tense, no praise adjectives, the kitchen stating what is true. Headings 5–8 words and one clause; ledes one sentence, except where the fixture's own `service.note` is the lede. See § The copy register. |
| **Motion personality** | **Drafting. Nothing moves on load, ever.** One vocabulary: 120ms `ease-out`, colour only, `motion-safe`. See § Motion. |
| **Signature** | **The room plan** — see below. |
| **Sanctioned deviation** | **A 1.414 (√2) type ratio** on a consumer/commerce theme — see below. |
| **Imagery** | Four generated room interiors, used by one variant axis and nowhere else. **No plated-food photograph, ever.** See § Imagery. |
## The signature — the room plan
> A schematic top-down plan of the dining room, drawn as inline SVG whose
> geometry is computed entirely from `room` in the theme's single fixture file.
> Covers, tonight's service, which tables can be booked online, the one step and
> the step-free route to the accessible WC are all **drawn**. **Nothing the
> drawing can show is asserted in copy instead.**
It runs on `/` (the 400 pocket print, pinned over the window photograph in the
hero — 1.1.0's owner-directed composite), `/room` (the full 1120 sheet),
`/book` (400px, re-marked by the party-size control) and `/visit` (400px, with
the access overlay), and in six states on `/components`. The drawing's two
anchored *design* scales remain 560 (the reference print the styleguide
carries) and 1120, exactly ×2.
The rule is enforced by the component, not by discipline: `ui/plan.tsx` imports
`room` and the reductions over it, and nothing else. There is no prop by which a
caller can hand the drawing a number the fixture does not contain.
**Do not** make the plan fluid, replace it with an image export, move its dash
patterns into CSS (they are geometry, expressed in the drawing's own units at
whichever scale it is drawn), or set a label in `--plan-label` on a filled
table — that pair is **1.3:1** and the drawing goes blank in exactly the state
it exists to communicate. A marked table's label reverses out to `--plan-field`:The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.