Cutroom owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.2.0
- version
- 9
- pages
- 20
- components
- 85 × 2 modes
- tokens
- 4
- workflows
unzip cutroom-1.2.0.zip
cd cutroom-1.2.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 9 routes, the token file, 20 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 cutroom-1.2.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/cutroom/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/cutroom.jsonCutroom 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.
- /Overview3 sections
- /libraryMedia library2 sections
- /uploadsUploads2 sections
- /playerShared player2 sections
- /editorSequence builder2 sections
- /analyticsWatch analytics2 sections
- /peoplePeople and plan2 sections
- /titleAfterlight1 sections
- /componentsComponents14 sections
Tokens are declared on .tt-cutroom as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-cutroom"> 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 85 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 src/app/<slug>.tsx and compose existing sections inside AppShell unless the route is explicitly public.
- .claude/skills/add-section
1. Create one src/components/<name>.tsx.
- .claude/skills/check-quality
Run from the repository root and stop on failure:
- .claude/skills/rebrand
1. Edit values in src/theme.css and mirror light values into theme.json.tokens and dark values into tokensDark.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/cutroom/ 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 83 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Cutroom theme guide
Cutroom is a media operations frontend for **Northline Pictures**, a small studio producing the fictional *Afterlight* anthology. It is a frontend template with realistic fixtures. It does not include storage, transcoding, streaming, auth, billing, analytics ingestion, or persistence.
## Identity
- **Positioning:** one review-to-release workspace for independent media teams.
- **Signature:** the continuous filmstrip recurs in the library, review timeline, and sequence builder.
- **Deviation:** `/title` drops the application rail and lets the player bleed to the viewport edge, creating a credible public title page inside the console system.
- **Register:** technical-plain in application screens; editorial on the title page.
- **Motion:** editorial-cut. Feedback is 140ms, state change is 240ms, and the playhead is the sole ambient animation. Reduced motion stops it.
- **Display:** Red Hat Mono turns titles and timecode into one editorial-machine register.
- **Text:** Schibsted Grotesk keeps dense controls and comments easy to scan.
- **Mono:** Red Hat Mono carries timecode, IDs, durations, and stacked figures.
- **Type ratio:** 1.125, the dashboard/operations ladder.
## Color rules
- Light surfaces are achromatic white and gray. Dark surfaces are black and charcoal.
- Light-mode controls and links use near-black graphite. Chartreuse is reserved for dark-mode action and media overlays.
- Lilac marks collaboration. Blue is information, green is success, amber is warning, and red is failure. Neutral charts do not borrow status colors.
- State colors always ship as text, soft, border, and foreground tokens. Status pills also include a dot or icon.
- Never use alpha color states. Use the declared hover, active, soft, and border tokens.
- Never add raw colors, palette utilities, bare shadows, or colored left-border cards.
## File map
- `src/app/` composes nine routes. Pages stay thin.
- `src/components/` contains one self-contained surface per file.
- `src/components/ui/` contains the reusable dashboard layout, form controls, buttons, panels, status, mode, data types, and the SVG audio waveform.
- `src/components/fixtures.ts` is the single source for titles, images, comments, and sequence clips.
- `src/theme.css` owns every visual token, the type utility layer, and namespaced motion.
- `src/assets/` contains five AI-generated cinematic stills and their regeneration notes.
## Invariants
1. Components use semantic tokens only. No raw hex, palette classes, `text-white`, alpha color states, or bare text-size utilities.
2. Use Lucide for interface icons. Do not hand-roll icons. The circular film mark is an identity composition built from a Lucide icon.
3. The filmstrip stays ordered and image-led. A new media object joins `fixtures.ts` before it appears in a screen.
4. Variable charts use Recharts. Main watch time is primary, comparison is accent, neutral categories use the chart-neutral step, healthy outcomes are positive, and color always has a text or shape cue.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.