sent here for ProductRating
seo audit tool template nextjs · React source
ProductRatingseo audit tool template Next.js
A free seo audit tool template for Next.js: the interface of ProductRating, a product discovery scanner live at productrating-ten.vercel.app, released as source.
- 287 / 0
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
React and Next.js source ships as one runnable project.
- 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 10 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
Product discovery scanner/- scanner
- discovery-particles
- provider-overview
- pricing
- page-verification
ChatGPT discovery/chatgpt- scanner
- discovery-panel
Technical checklist/checklist- scanner
Get All Access/pricing- scanner
- pricing
Your catalogs/workspace- workspace-shell
- catalog-intake
- job-detail
Full report/workspace/report- workspace-shell
- job-detail
Billing/workspace/billing- workspace-shell
- billing-panel
Paste a product URL and the page walks the scan's states, scanning with a cancel, an inline error, then the report: five provider assessments for Google, Bing, ChatGPT, Perplexity and Claude, each scored out of 100 with its access state, source-linked evidence and a next step. Seven routes ship: the scanner and all-providers report, the ChatGPT discovery view with its feed field map, the technical checklist with category filters and extracted markup, the pricing dialog, and the paid workspace's catalog intake, runs, full-report inspector and billing. It is a replica, not an interpretation: the palette, Geist and Geist Mono, the canvas hero, the dialogs, the export popover and the copy are the live app's own. The scan engine is not included. Every screen renders the app's published example report, captured as typed data, so wiring your own scanner means returning the same shape. The provider marks are LobeHub's MIT-licensed icons, shipped with their license. MIT-licensed, light mode only, React edition only. Built for Tailwind v4, Next.js 15 and React 19.
tokens, light mode
Change one variable and every part follows. Each badge is one token in the theme's one mode, set in its own paired ink.
hover or tab a badge for its name and value, enter copies
The five-provider verdict row: one card per search or AI provider, each showing a score out of 100 or, when the crawler is blocked, the blocked state in place of the number, above that provider's first three findings.
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.
ProductRating
A free seo audit tool template for Next.js: the interface of ProductRating, a product discovery scanner live at productrating-ten.vercel.app, released as source.
const { open, close } = useLedger("2026-03") // 0123456789
- text
- Geist
- mono
- Geist Mono
No separate display face: the headings are set in the text face.
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.
files in the zip
A runnable Next.js project, and the instructions an agent reads before it changes anything in it. Unzip and run it, or install it into a project you already have.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdAdd a route to the ProductRating template by composing the scanner or the workspace shell in a new page module.
- add-section/SKILL.mdAdd a section to the ProductRating scanner page or workspace in the app's own register
- check-quality/SKILL.mdCheck a changed ProductRating template before shipping
- rebrand/SKILL.mdRebrand the ProductRating template to your product
- src/
- theme.css287 tokens, light only
- fonts.tsthe faces, wired to the type tokens
- app/5 files
- components/6 files
- ui/4 files
- fonts/2 font files, 2 licenses
- app/7 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
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.
14 components, 7 pages and 287 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 free 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?
A SaaS is two builds, not one.
ProductRating is the site that sells the product. Appetite is the thing people log into once they have paid — same Tailwind version, same token architecture, so the two halves can be made to look like one company.
activity
- v1.0.0: ProductRating, the live scanner we run, ships as a free React theme with five provider reports
- v1.0.0: ProductRating's live scanner interface, free and MIT: the report, the ChatGPT and checklist views, pricing and the catalog workspace
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.
