Port the visual theme and styling from a live website to a React/Tailwind CSS project. Extracts colours, typography, spacing, and component styles — via agent-browser automation, manual inspection, curl/wget, or direct source reading — writes structured documentation and all artifacts under .context/artifacts/{website}/ with timestamps, applies findings as Tailwind v4 CSS tokens, then verifies by visually diffing the original site against the local or deployed version. Use when cloning a brand, replicating a design system, matching a reference site, migrating visual identity, copying a style guide, or porting a theme from any live URL into a React codebase.
95
94%
Does it follow best practices?
Impact
98%
1.44xAverage score across 5 eval scenarios
Advisory
Suggest reviewing before use
{
"context": "Tests whether the agent uses Method A (agent-browser) for extraction given it is available, handles SPA rendering with scroll-and-wait steps, saves all output under the correct ${ARTIFACTS}/ path, and captures both CSS vars and computed element styles.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Uses agent-browser",
"description": "extract.sh uses agent-browser commands (not curl or wget as the primary extraction method), since agent-browser was stated to be available",
"max_score": 12
},
{
"name": "ARTIFACTS path defined",
"description": "extract.sh defines ARTIFACTS as a variable pointing to .context/artifacts/app-client-brand-io/2026-03-13",
"max_score": 10
},
{
"name": "mkdir -p ARTIFACTS",
"description": "extract.sh creates the ARTIFACTS directory with mkdir -p before writing any files",
"max_score": 8
},
{
"name": "SPA scroll step",
"description": "extract.sh includes a window.scrollTo(0, document.body.scrollHeight) eval or equivalent scroll step before extracting tokens",
"max_score": 12
},
{
"name": "Wait networkidle after scroll",
"description": "extract.sh waits for networkidle (agent-browser wait --load networkidle or equivalent) after the scroll step",
"max_score": 10
},
{
"name": "CSS vars extraction",
"description": "extract.sh includes a JS eval that extracts CSS custom properties from :root (filtering for -- prefixed properties) and saves to a JSON file under ARTIFACTS",
"max_score": 12
},
{
"name": "Computed styles extraction",
"description": "extract.sh includes a JS eval that extracts computed styles from key elements (at minimum: body, buttons/CTAs) and saves to a JSON file under ARTIFACTS",
"max_score": 10
},
{
"name": "Screenshots under ARTIFACTS",
"description": "All screenshot commands in extract.sh save files to ${ARTIFACTS}/ paths — not to /tmp or docs/",
"max_score": 10
},
{
"name": "wait --load networkidle on open",
"description": "extract.sh waits for the page to fully load after opening (agent-browser wait --load networkidle) before attempting any extraction",
"max_score": 8
},
{
"name": "Full-page and mobile screenshots",
"description": "extract.sh takes at least one full-page screenshot and one mobile-viewport screenshot (375px wide)",
"max_score": 8
}
]
}