website-theme-porter

Transfers visual themes from live websites to React/Tailwind CSS projects, ensuring accurate styling and documentation.

Install this skill

or

0/100

Security score

The website-theme-porter skill was audited on May 12, 2026 and we found 31 security issues across 2 threat categories, including 17 high-severity. Review the findings below before installing.

Categories Tested

Security Issues

medium line 42

Template literal with variable interpolation in command context

SourceSKILL.md

42

```bash

high line 49

Template literal with variable interpolation in command context

SourceSKILL.md

49	All screenshot paths, JSON dumps, and theme docs in the steps below use `${ARTIFACTS}/`

medium line 97

Template literal with variable interpolation in command context

SourceSKILL.md

97

```bash

high line 134

Template literal with variable interpolation in command context

SourceSKILL.md

134	Save JSON output to `${ARTIFACTS}/tokens-css-vars.json`.

medium line 151

Template literal with variable interpolation in command context

SourceSKILL.md

151	border: s.border, boxShadow: s.boxShadow, padding: `${s.paddingTop} ${s.paddingRight}` };

high line 157

Template literal with variable interpolation in command context

SourceSKILL.md

157	Save to `${ARTIFACTS}/tokens-computed.json`. Manually assign tokens from these values in Stage 2.

high line 158

Template literal with variable interpolation in command context

SourceSKILL.md

158	Note in `${ARTIFACTS}/theme/overview.md`: "source uses hardcoded values — no design token system detected".

high line 192

Template literal with variable interpolation in command context

SourceSKILL.md

192	Save JSON output to `${ARTIFACTS}/tokens-typography.json`.

medium line 196

Template literal with variable interpolation in command context

SourceSKILL.md

196

```bash

medium line 210

Template literal with variable interpolation in command context

SourceSKILL.md

210

```bash

high line 218

Template literal with variable interpolation in command context

SourceSKILL.md

218	Parse `${ARTIFACTS}/tokens-raw.txt` manually and map values to the token table in Stage 2.

high line 219

Template literal with variable interpolation in command context

SourceSKILL.md

219	Note in `${ARTIFACTS}/theme/overview.md`: "extraction method: source inspection (curl)".

high line 228

Template literal with variable interpolation in command context

SourceSKILL.md

228	2. Elements → select `<html>` → Computed tab → filter for `--` → copy all custom properties to `${ARTIFACTS}/tokens-manual.txt`

high line 230

Template literal with variable interpolation in command context

SourceSKILL.md

230	4. Console: run JS snippets from `references/extraction.md` → paste output to `${ARTIFACTS}/tokens-computed.json`

high line 231

Template literal with variable interpolation in command context

SourceSKILL.md

231	5. Take screenshots of key sections (hero, nav, footer, mobile) and save under `${ARTIFACTS}/`

high line 233

Template literal with variable interpolation in command context

SourceSKILL.md

233	Note in `${ARTIFACTS}/theme/overview.md`: "extraction method: manual DevTools inspection".

high line 239

Template literal with variable interpolation in command context

SourceSKILL.md

239	Write the findings into `${ARTIFACTS}/theme/` before touching any code.

medium line 241

Template literal with variable interpolation in command context

SourceSKILL.md

241

```bash

high line 249

Template literal with variable interpolation in command context

SourceSKILL.md

249	\| `${ARTIFACTS}/theme/colours.md` \| All extracted colours with hex/HSL, semantic role, usage context \|

high line 250

Template literal with variable interpolation in command context

SourceSKILL.md

250	\| `${ARTIFACTS}/theme/typography.md` \| Font families, size scale, weight scale, line heights \|

high line 251

Template literal with variable interpolation in command context

SourceSKILL.md

251	\| `${ARTIFACTS}/theme/spacing.md` \| Padding/margin patterns, gap values, container widths \|

high line 252

Template literal with variable interpolation in command context

SourceSKILL.md

252	\| `${ARTIFACTS}/theme/components.md` \| Button, card, nav, footer styles — border-radius, shadows, borders \|

high line 253

Template literal with variable interpolation in command context

SourceSKILL.md

253	\| `${ARTIFACTS}/theme/overview.md` \| Summary, source URL, extraction date, method used, key decisions \|

medium line 364

Template literal with variable interpolation in command context

SourceSKILL.md

364

```bash

medium line 381

Template literal with variable interpolation in command context

SourceSKILL.md

381

```bash

medium line 445

Template literal with variable interpolation in command context

SourceSKILL.md

445

```bash

low line 331

External URL reference

SourceSKILL.md

331	<link rel="preconnect" href="https://fonts.googleapis.com" />

low line 332

External URL reference

SourceSKILL.md

332	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

low line 365

External URL reference

SourceSKILL.md

365	agent-browser diff url <TARGET_URL> http://localhost:5173 --screenshot "${ARTIFACTS}/diff-homepage.png"

low line 374

External URL reference

SourceSKILL.md

374	playwright_browser_navigate(url: "http://localhost:5173")

low line 383

External URL reference

SourceSKILL.md

383	agent-browser diff url <TARGET_URL> https://<your-preview>.vercel.app --screenshot "${ARTIFACTS}/diff-deployed.png"

Scanned on May 12, 2026

View Security Dashboard

Installation guide →

GitHub Stars 3

Rate this skill

Categorydevelopment

UpdatedMay 13, 2026

frontend design playwright react docx api devops mobile backend frontend-developer product-designer ux-designer growth-pm product-manager development design product

pantheon-org/tekhne