Products → Rendering & JavaScript SEO Skill Pack for Claude Code
Rendering & JavaScript SEO Skill Pack for Claude Code
Two Claude Code skills that show what a search engine indexes before it runs your JavaScript: one audits the gap between the raw HTML response and the rendered DOM — content, links, headings, canonicals and structured data that only appear after JS — and one turns that same comparison into a pass/fail check for CI. Runs in your editor, needs no SaaS or API key, and costs €49 once.
v1.0.0 — live. Both helper scripts were run end-to-end against real live sites: a static site that passes the parity check clean, and a real client-side-rendered app that fails it. The worked outputs ship in the download (esempio/).
The problem this solves
Your site is built on a framework. It looks perfect in the browser. But the first
thing a search engine does is read the raw HTML response — before it spends render
budget — and you have no idea what's in it. Body copy that isn't in the HTML at
all. The <h1> and the in-content links injected on hydrate, so a
first-pass crawl can't follow them. title, canonical or
meta robots rewritten by JavaScript, contradicting what your framework
set on render. JSON-LD added by a tag manager after load. A Disallow
in robots.txt that blocks the exact bundle a crawler would need to
render the page at all. You could check all of it by opening view-source next to
DevTools on every template. Nobody does it twice.
What's inside
| Skill | What it does |
|---|---|
js-seo-audit | Fetches the raw HTML and the headless-Chromium-rendered DOM for each URL, then reports every indexing-relevant divergence: client-side-rendered shells, <h1> / links / JSON-LD that only exist after JS, title / canonical / meta robots rewritten on hydrate, raw-vs-rendered word ratio, and render-critical scripts blocked by robots.txt. Prioritised table, framework-aware fixes. |
rendered-parity-check | The same comparison as a binary guard: --assert exits non-zero on a regression, with tunable thresholds. Run it after an SSR/prerender fix and in CI against a preview deploy, so client-side rendering can't quietly creep back into a template that has to rank. |
Plus two helper scripts the skills call: render-compare.mjs (the differ — needs Playwright's Chromium, one install command) and crawl.mjs (dependency-free raw-HTML crawler, shared with the Technical SEO Skill Pack), an install guide, and worked examples against real live sites.
What it is not
- It does not fix the rendering for you. It measures the gap and names the templates that need SSR or prerendering — applying that is your framework's job.
- It is not a guess machine. A render timeout is reported as "couldn't measure", not a finding. It never invents crawl-budget numbers or indexing timelines.
- It is not a SaaS. No account, no API key, no monthly fee. Files in a folder. (It does need a headless browser —
npx playwright install chromium, once.)
Why €49
If your time is worth €50 an hour, the pack pays for itself the first time it replaces one hour of opening view-source next to the rendered DOM and diffing head tags, headings and links across a handful of templates by hand — and then it keeps doing that check on every deploy, which you were never going to do manually.
What you get
- 2 skills and 2 helper scripts
- Install guide (~3 minutes) and a QA checklist showing how each skill was tested
- Worked examples: a real static site that passes the parity check clean, and a real live client-side-rendered app that fails it, with the actual JSON and console output
- 12 months of updates — a bounded, honest commitment, not "lifetime"
- 14-day refund, no questions asked, through Gumroad
Requirements
- Claude Code (free)
- Node.js 18+
- Playwright's Chromium for the differ:
npm i -D playwright && npx playwright install chromium(about a minute, once). The raw-HTML crawler needs nothing. - The live site, or a preview deploy — the audit can't JS-render a local folder of HTML.
FAQ
- Isn't this what Search Console's URL Inspection already shows?
- URL Inspection renders one URL and shows you the outcome. This diffs the raw
HTML response against the rendered DOM across a whole template set at once, tells
you which field diverges and why it matters, and — with
rendered-parity-check— fails a CI job when it regresses. Use both. - My site is Next.js / Nuxt / SvelteKit — isn't it server-rendered already?
- Often the page shell is, but individual sections, the canonical tag, or JSON-LD
can still be client-only — a
'use client'boundary, an analytics-injected block, a CSR-only route. This tells you exactly where, per template, instead of you assuming. - Does it run Lighthouse or check Core Web Vitals?
- No. It compares raw HTML to the rendered DOM for indexing signals — content, links, head tags, structured data. Performance is a different tool.
- Do I need to know how to code?
- No. You need Claude Code, Node.js, and the one browser install. You describe the site in plain English and the skills run the scripts and read the output.
- Will you keep it updated?
- Updates for 12 months from purchase, through your Gumroad library and logged in a changelog. After that the version you have keeps working; further updates are not included. Deliberately not a "lifetime" promise.
AI disclosure
The skills are written instructions for an AI coding assistant and were authored with AI assistance. The helper scripts are conventional code. The differ reports only values it measured — no invented metrics, ratings, or stats anywhere in the product or on this page.
Third in the mulino.tools technical-SEO set for Claude Code: the Technical SEO Skill Pack audits and fixes an existing site, the Site Migration & Redirects Skill Pack covers the replatform/relaunch moment, and this one covers the raw-vs-rendered gap that JavaScript frameworks introduce.