ProductRating owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.0.0
- version
- 7
- pages
- 14
- components
- 287, light only
- tokens
- 4
- workflows
unzip productrating-1.0.0.zip
cd productrating-1.0.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 7 routes, the token file, 14 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 productrating-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/productrating/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/productrating.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.
- /Product discovery scanner5 sections
- /chatgptChatGPT discovery2 sections
- /checklistTechnical checklist1 sections
- /pricingGet All Access2 sections
- /workspaceYour catalogs3 sections
- /workspace/reportFull report2 sections
- /workspace/billingBilling2 sections
Tokens are declared on .tt-productrating as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-productrating"> and everything inside picks them up.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 287 tokens live in src/theme.css, in one light block. Nothing in src/components/ carries a colour.
- Watch it land. Open the pages. Every colour on them reads a token, so the change lands everywhere at once.
- Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in its light mode and a rebrand should keep it there.
- .claude/skills/add-page
1. Create src/app/<name>.tsx (or src/app/<dir>/<name>.tsx for a nested path) exporting a default server component.
- .claude/skills/add-section
1. Place it.
- .claude/skills/check-quality
Run from the project root.
- .claude/skills/rebrand
Colour is only in src/theme.css. Words are in the components and in src/fixtures/*.ts.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/productrating/ 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 140 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# ProductRating — agent rules
This theme is the interface of **ProductRating**, a product discovery scanner
live at <https://productrating-ten.vercel.app>, released as source. It is a
1:1 replica of that app's look and copy (owner decision, 2026-09-17), not a
reinterpretation: when in doubt, the live app is the reference.
A visitor pastes a product URL and gets five provider assessments — Google,
Bing, ChatGPT, Perplexity, Claude — each scored out of 100 with access states,
source-linked evidence and next steps. A paid workspace runs whole catalogs.
## What is and is not here
| Shipped | Not shipped (the product's engine) |
|---|---|
| Every screen, stylesheet, icon and word of the interface | The HTML/JSON-LD parser and product extraction |
| The report **shape** (`src/fixtures/types.ts`) | The provider rubrics and scoring code |
| The app's example report, captured from `GET /api/demo` on 2026-09-17 | The URL, robots.txt and network fetch path |
| Local fixture state for the workspace (runs, pages, allowance) | Accounts (Clerk), data (Convex), billing (Polar), the API |
**Connecting your own scanner** is one seam: `runScan()` at the top of
`src/components/scanner.tsx` must resolve to a `Report`. The workspace's seams
are `CatalogActions` and `runBillingAction` in
`src/components/workspace/workspace-shell.tsx`. Validate URLs and fetch pages on
your server; the client-side checks here are messages, not a network guard.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.