tailthemes
all-access
docs · tideline

Tideline owner's guide

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

1.0.0
version
6
pages
25
components
86 × 2 modes
tokens
4
workflows
from zip to running
unzip tideline-1.0.0.zip
cd tideline-1.0.0
bun install
bun dev

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

Download the zip

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 tideline-1.0.0.zip. Unzip it, run the four commands above, and the site is on localhost:3000.

It is free: no account, no key, no checkout.

the registry

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

bunx shadcn add https://tailthemes.com/r/tideline.json

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.

tideline-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/ · 11 sections
rooms/page.tsx/rooms · 6 sections
the-build/page.tsx/the-build · 5 sections
emails/page.tsx/emails · 5 sections
list/page.tsx/list · 6 sections
components/page.tsx/components · 4 sections
src/the theme, copied verbatim
app/6 pages, one file each · 6 files
assets/the imagery, and the prompts that made it · 24 files
components/19 sections, one file each, no cross-imports · 38 files
emails/2 files
fixtures/1 file
fonts/self-hosted woff2 with their licences · 7 files
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 86 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/ · 11 sections
rooms/page.tsx/rooms · 6 sections
the-build/page.tsx/the-build · 5 sections
emails/page.tsx/emails · 5 sections
list/page.tsx/list · 6 sections
components/page.tsx/components · 4 sections
src/the theme, copied verbatim
app/6 pages, one file each
components.tsx
emails.tsx
home.tsx
list.tsx
rooms.tsx
the-build.tsx
assets/the imagery, and the prompts that made it
README.md
tl-detail-brass.jpg
tl-detail-key.jpg
tl-detail-oak.jpg
tl-detail-plaster.jpg
tl-detail-slate.jpg
tl-detail-wool.jpg
tl-hero.jpg
tl-key.png
tl-land-marsh.jpg
tl-land-night.jpg
tl-land-sand.jpg
tl-land-tide.jpg
tl-layer-dune.png
tl-layer-sky.jpg
tl-marram.jpg
tl-materials.jpg
tl-room-bed.jpg
tl-room-kitchen.jpg
tl-room-stair.jpg
tl-room-window.jpg
tl-room.jpg
tl-slate.jpg
tl-table.jpg
components/19 sections, one file each, no cross-imports
ui/the shared primitives
_tt/
accordion-disclosure.axes.ts
accordion-disclosure.fixtures.ts
accordion-disclosure.tsx
capture.ts
field-ids.ts
field.axes.ts
field.capture.ts
field.fixtures.ts
field.tsx
ids.ts
recipe.ts
accordion-disclosure.tsx
badge.tsx
field.tsx
mode-toggle.tsx
primitives.tsx
reveal.tsx
type.ts
ui.config.ts
access-note.tsx
build-strip.tsx
email-notes.tsx
email-sequence.tsx
faq.tsx
hero.tsx
join-form.tsx
join-seam.tsx
land-gallery.tsx
material-rail.tsx
materials-board.tsx
privacy-note.tsx
room-index.tsx
room-states.tsx
room-table.tsx
site-footer.tsx
site-header.tsx
updates-feed.tsx
waves-table.tsx
emails/
render-html.ts
sequence.ts
fixtures/
marram.ts
fonts/self-hosted woff2 with their licences
Manrope-Variable.woff2
MartianMono-Variable.woff2
OFL-Manrope.txt
OFL-MartianMono.txt
OFL-Spectral.txt
Spectral-Italic.woff2
Spectral-Regular.woff2
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 86 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
  • /Marram: eleven rooms above the Dyfi, opening May 202711 sections
  • /roomsEleven rooms, and what stage each one is at6 sections
  • /the-buildThe build log: what has actually happened5 sections
  • /emailsThe five emails, and when each one arrives5 sections
  • /listWhat joining the list means, and what it does not6 sections
  • /componentsThe parts4 sections
dropping it into an existing app

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

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 6 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 86 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

    Read AGENTS.md first. In the marketplace repository, run the design pass through Phases 0–3 before a visible route change and run the content pass on the new page copy.

  • .claude/skills/add-section

    Read AGENTS.md first. In the marketplace repository, a visible change also runs .claude/skills/design-pass/SKILL.md through Phases 0–3 before markup.

  • .claude/skills/check-quality

    File paths under inspection are relative to the Tideline project root. Commands that begin with themes/tideline/ run from the marketplace root.

  • .claude/skills/rebrand

    Read AGENTS.md first. In the marketplace repository, a palette, typeface, surface, state or mode change runs the design pass and colour pass before markup.

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

AGENTS.md, first 19 lines
# tideline — the rules

The contract an agent extending this theme works under. `themes/CONTRACT.md`
binds first; everything below is either stricter than it or a declared,
argued deviation. A theme may be stricter and say so; it may never be looser.

## What this is

**Tideline is a pre-launch site, not a waitlist page.** That distinction is the
whole product decision and it is why the theme exists: twelve free waitlist
starters ship one screen with a form on it, and there is nothing to be better
at inside one screen. Six routes, a build log, an honest access statement and
five designed emails is a different object.

**The fiction**: Marram, an eleven-room house on the Dyfi estuary in Gwynedd,
opening May 2027. Nothing is bookable, no deposit is taken, and the site says
so in three places. Fiction domain: `pre-opening hospitality` — checked against
every shipped fiction and adjacent to none of them (covers is a *trading*
46-cover restaurant; the nearest thing here is a building site).

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