sent here for Guideword
at a glance: Guideword
nextjs directory template · React and HTML source
GuidewordNext.js directory template
For the developer who already has the data and a checkout and wants the directory's UI rather than another boilerplate: Guideword is a Next.js and Tailwind CSS directory template set as a printed trade directory, with no auth, payments or database and two functions to wire your own.
- 94 / 94
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs: install, use, customizepages, composed from 17 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- site-header
- home-verso
- classified-index
- home-recto
- site-footer
- site-header
- classified-table
- site-footer
- site-header
- heading-band
- trade-page
- site-footer
- site-header
- az-spread
- site-footer
- site-header
- listing-opener
- listing-record
- listing-as-printed
- site-footer
- site-header
- search-spread
- classified-index
- site-footer
- site-header
- amendments-slip
- site-footer
- site-header
- listing-head
- listing-form
- site-footer
- site-header
- site-footer
Nine routes: the home spread, the classified index, a heading page with district and Saturday filters, the A–Z name index, a listing with LocalBusiness JSON-LD, search with a cross-reference for the word you used, the amendments slip, the list-your-business form with its live proof, and the styleguide. Every listing surface is a numbered page with guide words at its head, two ruled columns and an A–Z thumb index cut into the edge; an entry prints in three weights, line, bold and box, and those weights are the paid tiers, labelled as paid in words. Seventeen sections and twenty-two primitives around a 186-entry fixture, the Glasgow Repair Register, in light and dark and in React and HTML. Every count, folio and guide word is derived from the fixture, which refuses a record it cannot print; every pair passes AA in both modes; the zip runs as it is; AGENTS.md and four skills say how to rebrand it and add to it.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project. 31 frames cover them, with 9 primitives sharing the ui/* frame.
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The directory page: every listing surface is set as a numbered printed page, with guide words at its head (the first and last heading, name or match on it) beside the folio, 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. typeset() cuts the pages at one canonical geometry and throws at build on a box taller than a column, two boxes in a column, a carried paid entry, a paid entry with no term, or a heading whose set count disagrees with the rows it was given. Implemented in src/components/ui/directory-page.tsx, src/components/ui/entry.tsx, src/components/ui/thumb-index.tsx and src/fixtures/derive.ts (typeset, measure, balance); it recurs on /, /trades/[slug]/[page], /a-z/[letter]/[page], /search, /listing/[slug] (as printed), /amendments and /list-your-business (the proof slip).
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.333.
Guideword
For the developer who already has the data and a checkout and wants the directory's UI rather than another boilerplate: Guideword is a Next.js and Tailwind CSS directory template set as a printed trade directory, with no auth, payments or database and two functions to wire your own.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Big Shoulders Display
- text
- Libre Franklin
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
- d5Ag
- d6Ag
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdAdd a route to Guideword
- add-section/SKILL.mdAdd a section to a Guideword route
- check-quality/SKILL.mdRun Guideword's own quality checks on your copy of the theme
- rebrand/SKILL.mdPut your own directory into Guideword
- src/
- theme.css94 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/6 files
- components/17 files
- ui/25 files
- assets/1 markdown file, 1 file
- fonts/5 font files, 3 licenses
- app/9 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/9 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
Your key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
39 components, 9 pages and 94 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
activity
- v1.0.0: First release: the Glasgow Repair Register, a directory site typeset as a printed trade directory, in React and plain HTML
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
