tailthemes
all-access
docs · guideword

Guideword owner's guide

Everything from the download to your own palette, read from the files this theme ships.

1.0.0
version
9
pages
39
components
94 × 2 modes
tokens
4
workflows
from zip to running
unzip guideword-1.0.0.zip
cd guideword-1.0.0
bun install
bun dev

The download is a complete Next.js project, not a folder of snippets. It carries 9 routes, the token file, 39 components and the agent kit.

See the price

Install

Three ways in: the zip, the shadcn registry, or your agent over MCP.

the zip

The artifact is versioned and immutable, so the file you get is guideword-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.

the registry

Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/guideword/, mirroring the tree below.

Guideword is paid, so the request has to carry your license key. Put it in TAILTHEMES_LICENSE_KEY in your .env.local, then add this to components.json. The CLI expands the variable and sends the key as a header, so it never enters a URL.

{
  "registries": {
    "@tailthemes": {
      "url": "https://tailthemes.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${TAILTHEMES_LICENSE_KEY}"
      }
    }
  }
}
bunx shadcn add @tailthemes/guideword

An all-access key works on every slug. A single-theme key works on the theme it was bought for.

A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.

over mcp

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 tools

What unzips

One directory, laid out the way you would lay it out yourself.

guideword-1.0.0/
app/generated routes, one per page
globals.csstailwind, the tokens, the semantic bridge
layout.tsxapplies the theme's own faces
page.tsx/ · 5 sections
trades/page.tsx/trades · 3 sections
trades/[slug]/[page]/page.tsx/trades/[slug]/[page] · 4 sections
a-z/[letter]/[page]/page.tsx/a-z/[letter]/[page] · 3 sections
listing/[slug]/page.tsx/listing/[slug] · 5 sections
search/page.tsx/search · 4 sections
amendments/page.tsx/amendments · 3 sections
list-your-business/page.tsx/list-your-business · 4 sections
components/page.tsx/components · 2 sections
src/the theme, copied verbatim
app/9 pages, one file each · 9 files
assets/the imagery, and the prompts that made it · 14 files
components/17 sections, one file each, no cross-imports · 88 files
fixtures/4 files
fonts/self-hosted woff2 with their licenses · 8 files
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 94 tokens, both modes
.claude/workflows your agent can run
skills/rebrand · add-section · add-page · check-quality · 4 files
AGENTS.mdthe agent contract: invariants, file map, what never to touch
README.mdthe human quick start
theme.jsonthe manifest: pages, components, both token tables
package.jsongenerated, carrying this repo's exact versions
tsconfig.jsongenerated
next.config.tsgenerated
postcss.config.mjsgenerated
env.d.tsgenerated, so a fresh extract typechecks before first run
.gitignoregenerated
every file
app/generated routes, one per page
globals.csstailwind, the tokens, the semantic bridge
layout.tsxapplies the theme's own faces
page.tsx/ · 5 sections
trades/page.tsx/trades · 3 sections
trades/[slug]/[page]/page.tsx/trades/[slug]/[page] · 4 sections
a-z/[letter]/[page]/page.tsx/a-z/[letter]/[page] · 3 sections
listing/[slug]/page.tsx/listing/[slug] · 5 sections
search/page.tsx/search · 4 sections
amendments/page.tsx/amendments · 3 sections
list-your-business/page.tsx/list-your-business · 4 sections
components/page.tsx/components · 2 sections
src/the theme, copied verbatim
app/9 pages, one file each
a-z/
[letter]/
[page].tsx
listing/
[slug].tsx
trades/
[slug]/
[page].tsx
amendments.tsx
components.tsx
home.tsx
list-your-business.tsx
search.tsx
trades.tsx
assets/the imagery, and the prompts that made it
plates/
bicycle-truing.jpg
book-press.jpg
camera-body.jpg
chair-webbing.jpg
clock-movement.jpg
desk-lamp.jpg
sewing-machine.jpg
shoe-on-last.jpg
tape-deck.jpg
umbrella-frame.jpg
violin-top.jpg
wheelchair-wheel.jpg
index.ts
README.md
components/17 sections, one file each, no cross-imports
ui/the shared primitives
_tt/
anchor.ts
capture.ts
field-ids.ts
field.axes.ts
field.capture.ts
field.fixtures.ts
field.tsx
filter-chip.axes.ts
filter-chip.fixtures.ts
filter-chip.tsx
focusables.ts
form-error-summary.axes.ts
form-error-summary.fixtures.ts
form-error-summary.tsx
form.axes.ts
form.fixtures.ts
form.part.tsx
form.ts
hint.axes.ts
hint.fixtures.ts
hint.tsx
host.ts
ids.ts
layer.ts
layout-effect.ts
pagination.axes.ts
pagination.fixtures.ts
pagination.tsx
popover.axes.ts
popover.fixtures.ts
popover.tsx
presence.ts
recipe.ts
reduced-motion.ts
roving.ts
search-input.axes.ts
search-input.capture.ts
search-input.fixtures.ts
search-input.tsx
toggle-group.axes.ts
toggle-group.fixtures.ts
toggle-group.tsx
variant-selector.axes.ts
variant-selector.capture.ts
variant-selector.fixtures.ts
variant-selector.tsx
action.tsx
amendment.tsx
directory-page.tsx
directory-roll.tsx
entry.tsx
field.tsx
filter-chip.tsx
form-error-summary.tsx
form.tsx
hint.tsx
item-list.tsx
local-business.tsx
mode-toggle.tsx
pagination.tsx
popover.tsx
proof-slip.tsx
register-search.tsx
search-input.tsx
text-link.tsx
thumb-index.tsx
toggle-group.tsx
type.ts
ui.config.ts
variant-selector.tsx
wordmark.tsx
amendments-slip.tsx
az-band.tsx
az-spread.tsx
classified-index.tsx
classified-table.tsx
heading-band.tsx
home-recto.tsx
home-verso.tsx
listing-as-printed.tsx
listing-form.tsx
listing-head.tsx
listing-opener.tsx
listing-record.tsx
search-spread.tsx
site-footer.tsx
site-header.tsx
trade-page.tsx
fixtures/
alphabetical.ts
derive.ts
headings.ts
register.ts
fonts/self-hosted woff2 with their licenses
BigShouldersDisplay-Variable.woff2
GuidewordFigures-Bold.woff2
GuidewordFigures-ExtraBold.woff2
GuidewordFigures-Regular.woff2
LibreFranklin-Variable.woff2
OFL-BigShouldersDisplay.txt
OFL-GuidewordFigures.txt
OFL-LibreFranklin.txt
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 94 tokens, both modes
.claude/workflows your agent can run
skills/rebrand · add-section · add-page · check-quality
add-page/
SKILL.md
add-section/
SKILL.md
check-quality/
SKILL.md
rebrand/
SKILL.md
AGENTS.mdthe agent contract: invariants, file map, what never to touch
README.mdthe human quick start
theme.jsonthe manifest: pages, components, both token tables
package.jsongenerated, carrying this repo's exact versions
tsconfig.jsongenerated
next.config.tsgenerated
postcss.config.mjsgenerated
env.d.tsgenerated, so a fresh extract typechecks before first run
.gitignoregenerated

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.

the pages
  • /Find someone who fixes it.5 sections
  • /tradesBy trade3 sections
  • /trades/clock-and-watch-repairs/3Clock & watch repairs4 sections
  • /a-z/s/1A–Z: S3 sections
  • /listing/spoke-and-spannerSpoke & Spanner5 sections
  • /searchSearch the register4 sections
  • /amendmentsAmendments3 sections
  • /list-your-businessList your business4 sections
  • /componentsGuideword's parts2 sections
dropping it into an existing app

Tokens are declared on .tt-guideword as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-guideword"> 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 9 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.

the two commands

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 9 pages you saw above exist in both.

Making it yours

Tokens are the API: change the values, never the names.

the rebrand loop
  1. Edit the values. All 94 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
  2. 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.
  3. 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.
the workflows that ship inside
  • .claude/skills/add-page

    1. A page is composition: src/app/<route>.tsx imports components/site-header and components/site-footer, wraps its sections in <main id="main">, and renders no data fetching of its own.

  • .claude/skills/add-section

    1. One file, one section: src/components/<name>.tsx.

  • .claude/skills/check-quality

    1. Types: bunx tsc --noEmit, clean.

  • .claude/skills/rebrand

    A rebrand touches these files and no section component:

Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/guideword/ 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 375 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.

AGENTS.md, first 36 lines
# Guideword — agent rules

Guideword is a directory site's UI for Next.js and Tailwind v4, in light and
dark, in React (`src/`) and plain HTML (`html/src/`), set as a printed trade
directory: numbered pages with guide words, two ruled columns, an A–Z thumb
index on the edge, and three printed weights (line, bold, box) that are the
paid tiers, labelled "Paid listing" in words. **It ships no auth, payments or
database**: the data seam is `getTrades()` / `getEntries()` in
`src/fixtures/register.ts`, paid weight is bought through
`SITE.listing.checkoutUrl` (the buyer's own checkout), and a submitted entry is
posted to `NEXT_PUBLIC_SUBMIT_ENDPOINT` (`SUBMIT_ENDPOINT` in
`src/components/listing-form.tsx`); until that is set the form's receipt says
"Not sent." and shows the entry as it would print.

**Fiction**: the Glasgow Repair Register, 2026–27 edition. 186 repairers in 24
trades, compiled by Morven Achterberg and Dev Raithatha; 179 reached by phone
between 3 and 28 March 2026, 7 carried from 2025–26 (marked †), 12 corrections
and 3 delistings since it went to press. Telephone numbers are in Ofcom's drama
range (0141 496 0000–0999). Every business, address and person is invented.

**Register (`/content-pass`)**: imperative. The H1 tells the reader what to do
("Find someone who fixes it."); entries are records, not sentences.

Read this file before changing anything. The rules are short because the theme
is narrow: one page geometry, one ink for what acts, one yellow.

## The signature — the directory page

Every listing surface is set as a numbered printed page: guide words at its
head (the first and last heading, name or match on it) beside the folio and
‹ ›, two columns under a full-ink rule, and an A–Z thumb index down the
fore-edge with the current letter reversed in a half-round tab. An entry prints
in three weights, line, bold and box, and those weights are the paid tiers,
each paid one labelled "Paid listing" in words.

- **Implementing files**: `src/components/ui/directory-page.tsx` (the page:

The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.