A Claude Code skill that generates PageConfig JSON for the browser-overlay extension by analyzing e-commerce HTML pages.
It works in two phases:
- HTML Analysis - Condenses the DOM and identifies product cards, IDs, images, and page type (PLP/PDP)
- Selectors Generation - Produces a
selectors.jsonwith overlay and PDP selectors ready to merge into a full config
- Claude Code CLI installed
- Python 3.10+
git clone git@github.com:Vatsov/config-generator.git
cd config-generatorOpen Claude Code from within the cloned repo directory to start using the skill.
Open the e-commerce site you want to configure in a browser. Navigate to the product listing page (PLP) or product detail page (PDP), then save the full HTML:
- Chrome/Edge:
Ctrl+S(orCmd+Son Mac) → Save as "Webpage, Complete" or "Webpage, HTML Only" - DevTools: Open DevTools (
F12) → Elements tab → right-click on<html>→ Copy → Copy outerHTML → paste into a.htmlfile
Save the file somewhere accessible, e.g. ~/Downloads/site-plp.html.
Open Claude Code from the repo directory and invoke the skill:
/page-config-generator ~/Downloads/site-plp.html
Claude will:
- Run the DOM condenser on your HTML
- Present an HTML Analysis Report with detected products, IDs, and site hints
- After your confirmation, generate a
selectors.jsonfile - Validate the output automatically
├── SKILL.md # Skill instructions (used by Claude Code)
├── scripts/
│ ├── extract_html.py # DOM condenser + site hints detection
│ └── pageconfig.py # Init, validate, merge CLI tool
└── references/
└── page-config-reference.md # Full PageConfig schema documentation