CtrlK
BlogDocsLog inGet started
Tessl Logo

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

1.44x
Quality

94%

Does it follow best practices?

Impact

98%

1.44x

Average score across 5 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-5/

{
  "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
    }
  ]
}

evals

SKILL.md

tile.json