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-2/

{
  "context": "Tests whether the agent correctly handles a site with no CSS custom properties — switching to computed-only extraction, assigning tokens using the decision tree, documenting colours with hex/HSL/role table format, and noting the design token situation in overview.md.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "No-token-system note",
      "description": "overview.md contains a note indicating that the source site uses hardcoded values and has no CSS custom property design token system",
      "max_score": 12
    },
    {
      "name": "Extraction method noted",
      "description": "overview.md explicitly identifies the extraction method used (computed-only / agent-browser / curl / manual)",
      "max_score": 8
    },
    {
      "name": "Colour table format",
      "description": "colours.md contains a markdown table with columns: Token, Hex, HSL, Role (or equivalent columns in that order)",
      "max_score": 10
    },
    {
      "name": "RGB to Hex conversion",
      "description": "colours.md converts the extracted rgb() values to hex format (e.g. rgb(255,255,255) → #FFFFFF)",
      "max_score": 10
    },
    {
      "name": "RGB to HSL conversion",
      "description": "colours.md converts at least one extracted rgb() value to HSL channel format (e.g. 0 0% 100%)",
      "max_score": 8
    },
    {
      "name": "Primary token assigned",
      "description": "colours.md assigns the CTA button background colour (rgb(220, 53, 69)) to --primary",
      "max_score": 12
    },
    {
      "name": "Background token assigned",
      "description": "colours.md assigns the page background (rgb(255, 255, 255)) to --background",
      "max_score": 8
    },
    {
      "name": "Foreground token assigned",
      "description": "colours.md assigns the body text colour (rgb(30, 30, 30)) to --foreground",
      "max_score": 8
    },
    {
      "name": "Muted token assigned",
      "description": "colours.md assigns the card background (rgb(245, 245, 245)) to --muted or a custom token like --surface",
      "max_score": 8
    },
    {
      "name": "Correct artifacts path",
      "description": "Both output files are placed inside .context/artifacts/legacy-brand-co/2026-03-13/theme/ — not in docs/ or any other location",
      "max_score": 16
    }
  ]
}

evals

SKILL.md

tile.json