website-theme-porter

Website Theme Porter

Port the visual identity of any live website into a React + Tailwind CSS project. The workflow is four linear stages: Extract → Document → Apply → Verify.

---

Principles

1. Document before you code — write all theme documentation under .context/artifacts/ before touching a single source file.
2. Tokens over literals — every extracted value becomes a semantic CSS token; hardcoded colours never appear in component classes.
3. Method hierarchy — prefer automated extraction (agent-browser) over manual inspection; document whichever method was used.
4. Verify visually — the workflow is not complete until a diff screenshot confirms the local build matches the reference site.
5. Respect scope — only port colours, typography, spacing, and component patterns; never copy the source site's actual stylesheet files.

When to use this skill

Apply this skill when you need to replicate a visual design from a live URL into a React + Tailwind codebase: brand migrations, client reference designs, design-system ports, or style-guide replication.

When not to apply

See the When NOT to Use This Skill section at the end of this file for login-walled sites, canvas-rendered UIs, obfuscated class names, and licence considerations.

---

Artifact Storage Convention

All artifacts (screenshots, extracted JSON, theme docs) must be saved under:

.context/artifacts/<website-slug>/<YYYY-MM-DD>/

Where <website-slug> is a lowercase, hyphenated version of the target domain (e.g. designandbloom-co-uk), and <YYYY-MM-DD> is the extraction date.

SLUG="designandbloom-co-uk"
DATE=$(date +%Y-%m-%d)
ARTIFACTS=".context/artifacts/${SLUG}/${DATE}"
mkdir -p "${ARTIFACTS}"

All screenshot paths, JSON dumps, and theme docs in the steps below use ${ARTIFACTS}/ as their base. Never save artifacts to docs/ or any other location.

---

Reference Loading Schedule

Load each reference file only when its stage begins — do not pre-load all three at once.