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 Mar 19, 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 32

Template literal with variable interpolation in command context

SourceSKILL.md

32

```bash

high line 39

Template literal with variable interpolation in command context

SourceSKILL.md

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

medium line 87

Template literal with variable interpolation in command context

SourceSKILL.md

87

```bash

high line 124

Template literal with variable interpolation in command context

SourceSKILL.md

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

medium line 141

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 147

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 148

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 182

Template literal with variable interpolation in command context

SourceSKILL.md

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

medium line 186

Template literal with variable interpolation in command context

SourceSKILL.md

186

```bash

medium line 200

Template literal with variable interpolation in command context

SourceSKILL.md

200

```bash

high line 208

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 209

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 218

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 220

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 221

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 223

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 229

Template literal with variable interpolation in command context

SourceSKILL.md

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

medium line 231

Template literal with variable interpolation in command context

SourceSKILL.md

231

```bash

high line 239

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 240

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 241

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 242

Template literal with variable interpolation in command context

SourceSKILL.md

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

high line 243

Template literal with variable interpolation in command context

SourceSKILL.md

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

medium line 354

Template literal with variable interpolation in command context

SourceSKILL.md

354

```bash

medium line 371

Template literal with variable interpolation in command context

SourceSKILL.md

371

```bash

medium line 435

Template literal with variable interpolation in command context

SourceSKILL.md

435

```bash

low line 321

External URL reference

SourceSKILL.md

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

low line 322

External URL reference

SourceSKILL.md

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

low line 355

External URL reference

SourceSKILL.md

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

low line 364

External URL reference

SourceSKILL.md

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

low line 373

External URL reference

SourceSKILL.md

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

Scanned on Mar 19, 2026

View Security Dashboard

Install this skill with one command

/learn @pantheon-org/website-theme-porter

GitHub Stars 3

Rate this skill

Categorydevelopment

UpdatedMarch 29, 2026

openclaw frontend api frontend-developer product-designer ux-designer growth-pm product-manager development design product

pantheon-org/tekhne