Appetite owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.1.0
- version
- 8
- pages
- 36
- components
- 108 × 2 modes
- tokens
- 4
- workflows
unzip appetite-1.1.0.zip
cd appetite-1.1.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 8 routes, the token file, 36 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 appetite-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/appetite/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/appetite.jsonAppetite 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.
- /Cycle4 sections
- /pitchesPitches3 sections
- /pitchPitch3 sections
- /betting-tableBetting table2 sections
- /cycleHill chart5 sections
- /scopeScope4 sections
- /settingsSettings3 sections
- /componentsComponents20 sections
Tokens are declared on .tt-appetite as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-appetite"> 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 108 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
One row before any markup:
- .claude/skills/add-section
Write one line: which question does a person on this route have that this block answers? If you cannot, the block is decoration.
- .claude/skills/check-quality
Run all of it. A change that skipped one of these is a change that shipped a regression the last one caught.
- .claude/skills/rebrand
Appetite's whole visual system is 96 CSS variables in src/theme.css, declared twice (light block, dark block). Rebranding is an edit to those values and nothing else.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/appetite/ 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 233 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Appetite — rules for agents
A Shape Up cycle and betting-table console. Eight routes, 19 sections, 17
primitives, 108 design tokens across two modes. Everything visual is a token;
everything numeric is derived from one fixture file.
Read this before changing anything. The invariants below are the contract the
theme was gated against, and breaking one is how a clean-looking edit ships a
regression.
## File map
```
themes/appetite/
theme.json manifest — tokens, pages, component inventory
src/
theme.css EVERY design decision: 108 tokens × 2 modes,
type classes, shadow classes, motion
fonts.ts, fonts/ Familjen Grotesk · Geist · Geist Mono (OFL)
app/ one file per route, pure composition
home.tsx pitches.tsx pitch.tsx betting-table.tsx
cycle.tsx scope.tsx settings.tsx components.tsx
components/ one file per section, self-contained
app-shell.tsx nav, cycle bar, breadcrumb, command bar
cycle-overview.tsx BetIndex · AttentionQueue · CycleShape
pitch-queue.tsx PitchQueue · ShapingLane
pitch-document.tsx PitchDocument
pitch-decision.tsx PitchDecision
betting-table.tsx BettingTable
cycle-hill.tsx HillRidgePanel · ScopeLedger
appetite-burn.tsx AppetiteBurn (the only Recharts figure)
circuit-breaker.tsx CircuitBreaker
scope-detail.tsx ScopeHill · ScopeTasks · ScopeHistory
settings-console.tsx CycleSettings · TeamSettings
overlay-gallery.tsx every overlay, shown open
ui/ shared primitives — see below
```The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.