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.

71

Quality

89%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill is highly actionable with a clear, verified four-stage workflow and plenty of executable examples. Its main weakness is progressive disclosure: the body leans on three referenced files that do not exist in the bundle, and large executable blocks that belong in those references remain inline.

Suggestions

Ship the referenced bundle files (references/extraction.md, references/tailwind-mapping.md, references/verification.md) so the signalled progressive-disclosure structure is real and not dangling.

Move the long inline JS extraction payloads and the full @theme inline CSS template into the corresponding reference files, leaving concise summaries and a pointer in SKILL.md to improve conciseness.

Consolidate the three extraction methods so only the decision tree and a one-line pointer to references/extraction.md remain inline, reducing repetition.

DimensionReasoningScore

Conciseness

The body is dense and mostly purposeful with executable code and a tight four-stage structure, but it carries some padding (e.g. the three extraction methods each restated inline plus a decision tree, and explanatory 'Note in ...' lines) that could be pushed into the references it already ships.

2 / 3

Actionability

It provides copy-paste-ready bash, JS, CSS, and TSX blocks at every stage — navigation/screenshot commands, computed-style extraction scripts, the full @theme inline CSS template, and a before/after component diff — all directly executable.

3 / 3

Workflow Clarity

A clearly sequenced Extract -> Document -> Apply -> Verify pipeline with a per-stage reference-loading schedule, fallback branches for each extraction method, and an explicit visual-diff verification gate with a mismatch threshold reference.

3 / 3

Progressive Disclosure

The body repeatedly points to references/extraction.md, references/tailwind-mapping.md, and references/verification.md, but no references/ directory is present in the bundle — the linked files are absent, so the signalled one-level-deep structure is not actually delivered.

1 / 3

Total

9

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, specific description that names concrete actions, supplies explicit 'Use when' triggers, and carves out a distinct niche. It leans long with a near-run-on sentence, but content quality is high across all dimensions.

Suggestions

Break the description into two sentences — what it does, then 'Use when ...' — to improve scannability without losing any triggers.

Trim the redundant tool enumeration ('browser automation, source inspection, curl, wget, DevTools') since the method choice is detailed in the body; keep one representative phrase.

DimensionReasoningScore

Specificity

The description enumerates many concrete actions ('Extracts colours, typography, spacing, component styles', 'applies findings as Tailwind v4 CSS tokens', 'visually diffing the original site against the local build') rather than vague language.

3 / 3

Completeness

It answers both what it does and when to use it with an explicit 'Use when ...' clause listing multiple trigger scenarios, satisfying the highest completeness anchor.

3 / 3

Trigger Term Quality

It covers a broad spread of natural trigger phrasings users would say — 'cloning a brand', 'replicating a design system', 'matching a reference site', 'porting a theme', 'matching a client reference design' — across the surface, though concentrated at the end.

3 / 3

Distinctiveness Conflict Risk

The combination of porting a live URL's visual identity into a React + Tailwind codebase via browser automation occupies a clear, narrow niche with distinct triggers unlikely to collide with other skills.

3 / 3

Total

12

/

12

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 4 missing

Warning

referenced_paths_exist

Referenced path issues: 16 missing

Warning

Total

14

/

16

Passed

Reviewed

Table of Contents