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.
71
89%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
W011: Third-party content exposure detected (indirect prompt injection risk).
What this means
The skill exposes the agent to untrusted, user-generated content from public third-party sources, creating a risk of indirect prompt injection. This includes browsing arbitrary URLs, reading social media posts or forum comments, and analyzing content from unknown websites.
Why it was flagged
Outsider-authored free text is ingested when Stage 1 uses **agent-browser** to load a runtime-fetched target website and then runs `agent-browser eval` to read computed styles from the page’s DOM/CSS (e.g., `getComputedStyle(document.documentElement)` and `document.styleSheets`), which originates from the external site’s content.
Where we found it
<TARGET_URL> (user-provided target website)
domain · 5 sites
The scanner flags Stage 1's agent-browser extraction as ingesting outsider-authored content, but <TARGET_URL> is a placeholder for user-specified target websites — the plugin's purpose is to extract themes from arbitrary user-chosen URLs, not from a fixed plugin-controlled domain.
SKILL.md
98
agent-browser open <TARGET_URL> && agent-browser wait --load networkidle
SKILL.md
211
curl -sL <TARGET_URL> -o "${ARTIFACTS}/source.html"
SKILL.md
365
agent-browser diff url <TARGET_URL> http://localhost:5173 --screenshot "${ARTIFACTS}/diff-homepage.png"
SKILL.md
370
playwright_browser_navigate(url: "<TARGET_URL>")
SKILL.md
383
agent-browser diff url <TARGET_URL> https://<your-preview>.vercel.app --screenshot "${ARTIFACTS}/diff-deployed.png"
fonts.googleapis.com
domain · 2 sites
The plugin instructs users to add Google Fonts links to their index.html in Stage 3, which causes the user's application to fetch font CSS from fonts.googleapis.com at runtime.
SKILL.md
331
<link rel="preconnect" href="https://fonts.googleapis.com" />
SKILL.md
332
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<CSS_URL> (user-provided stylesheet URL)
domain · 1 site
<CSS_URL> is a placeholder for user-extracted stylesheet URLs from the target website's HTML — it is user-provided content, not a fixed domain the plugin itself fetches from.
SKILL.md
213
curl -sL <CSS_URL> -o "${ARTIFACTS}/styles-main.css"
- Audited
- Security analysis