pantheon-ai/website-theme-porter
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
task.mdevals/scenario-1/
Theme Extraction Setup
A client has asked you to begin porting the visual identity of their competitor's marketing site at https://example.com into a React project.
Before touching any code, you need to take initial screenshots of the site and save a brief overview document describing what you found. You do not need to actually open a browser or download any files — instead, write a shell script (setup.sh) that represents exactly the commands you would run to set up the working directory and capture initial screenshots, and create the placeholder directory structure and documentation files that would be produced at the end of Stage 1.
Produce the following:
setup.sh— the shell script that sets up the artifact directory and captures screenshots (usingagent-browsercommands). The script should be executable.- The directory structure and empty placeholder files that the script would create. Use
example-comas the website slug and today's date (2026-03-13) as the date. overview.mdinside the theme subdirectory — filled in with: the source URL, today's date, extraction method used, and a placeholder note about what was found.