Seminar owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.0.0
- version
- 6
- pages
- 20
- components
- 47 × 2 modes
- tokens
- 4
- workflows
unzip seminar-1.0.0.zip
cd seminar-1.0.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 6 routes, the token file, 20 components and the agent kit.
Download the zipInstall
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 seminar-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.
Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/seminar/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/seminar.jsonA 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.
- /Fieldnote: practice the real thing8 sections
- /coursesCourses: choose your studio4 sections
- /courseService systems in practice6 sections
- /lessonLesson 03: test the failure4 sections
- /mentorsMentors: meet your critics5 sections
- /componentsComponents12 sections
Tokens are declared on .tt-seminar as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-seminar"> 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.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 47 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
1. Create a plain src/app/<slug>.tsx server component.
- .claude/skills/add-section
1. Create one src/components/<name>.tsx file.
- .claude/skills/check-quality
Run from the repository root. Stop on the first failure.
- .claude/skills/rebrand
1. Edit values only in src/theme.css; keep token names and all three scope blocks.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/seminar/ 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 89 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# AGENTS.md — Seminar
This file binds every change to Seminar. Read it before editing the theme.
## Declarations
| Axis | Decision |
|---|---|
| Signature | **The learning trail:** a canonical Wire Diagram evidence fork built from square milestone nodes, mentor handoff cards, connector rails, and a repair loop. It appears on `/`, `/course`, and `/lesson`. |
| Sanctioned deviation | Trail milestones stay square. Every other container uses the 12px outer / 8px inner radius language. |
| Register | Imperative. Short action-led headings; concrete lessons, durations, artifacts, and handoffs. |
| Motion | Studious. 150ms color feedback, 2px directional icon nudges, and a 45deg disclosure turn only. Use `motion-safe`; no entrances or ambient animation. Reduced motion leaves every state complete. |
| Display | Instrument Sans, for direct headings with broad apertures. |
| Text | Karla, for readable instructions and critique notes. |
| Mono | Spline Sans Mono, for indexes, duration, status, and schedule metadata. |
## File map
- `src/theme.css` — every color, font, type size, line height, tracking value, and radius.
- `src/fonts.ts` + `src/fonts/` — the three self-hosted variable faces and their OFL files.
- `src/components/ui/` — shared primitives only.
- `src/assets/learning-trail.wire.json` — canonical Wire Diagram content and topology; edit this before touching its renderer.
- `src/components/` — one independent section per file.
- `src/app/` — pure page compositions.
- `src/app/components.tsx` — the living styleguide and screenshot inventory.
- `.claude/skills/` — sanctioned extension workflows.
## Invariants
1. Components use semantic color utilities only. Hex, palette classes, `text-white`, and alpha color states are bugs.
2. Font sizes come from `ui/type.ts`; no bare `text-sm`, `text-xl`, or other stock size class.
3. Light and dark differences route through tokens. `dark:` and `light:` variants are forbidden.
4. Sections do not import other sections. They may import `ui/*` and named Lucide icons.
5. Lucide is the UI icon set. `ui/logo.tsx` is the only bespoke icon-like SVG.
6. `src/assets/learning-trail.wire.json` is the learning trail source of truth. Cards, connectors, branch labels, the repair loop, progress rail, and text alternative derive from it.
7. Accent orange marks an active critique or attention handoff. It is not decorative and never appears as small text on the light sage canvas.
8. Interactive targets are at least 40px, every keyboard stop has an instant visible ring, and hover never changes more than two properties.
9. Fieldnote in the header and footer stays wrapped in `data-brand-name`.
10. Imagery follows the fixed shoot in `src/assets/README.md`: documentary studio scenes, upper-left window light, sage/deep-green/burnt-orange palette, and no type overlay.
11. One fiction route has one `h1`. `/components` may render component-owned headings as specimens.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.