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
94%
Does it follow best practices?
Impact
98%
1.44xAverage score across 5 eval scenarios
Advisory
Suggest reviewing before use
Quality
Discovery
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.
This is an excellent skill description that excels across all dimensions. It provides comprehensive detail about capabilities, methods, and outputs while including a thorough 'Use when...' clause with natural trigger terms. The description is specific enough to avoid conflicts with related skills while remaining accessible to users who might phrase their requests in various ways.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Extracts colours, typography, spacing, and component styles', 'writes structured documentation', 'applies findings as Tailwind v4 CSS tokens', 'verifies by visually diffing'. Very detailed about methods (agent-browser automation, manual inspection, curl/wget, direct source reading). | 3 / 3 |
Completeness | Clearly answers both what (port visual theme, extract styles, write documentation, apply Tailwind tokens, verify with visual diff) AND when with explicit 'Use when...' clause listing six specific trigger scenarios (cloning brand, replicating design system, matching reference site, etc.). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'cloning a brand', 'replicating a design system', 'matching a reference site', 'migrating visual identity', 'copying a style guide', 'porting a theme', 'live URL', 'React codebase'. These are phrases users would naturally use when requesting this functionality. | 3 / 3 |
Distinctiveness Conflict Risk | Very clear niche: specifically about porting visual themes from live websites to React/Tailwind projects. The combination of source (live website), target (React/Tailwind), and specific tooling (Tailwind v4 CSS tokens, visual diffing) makes it highly distinctive and unlikely to conflict with general styling or design skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality, well-structured skill for a complex multi-tool workflow. It excels at actionability with complete, executable code examples and clear workflow sequencing with explicit validation steps. The progressive disclosure is exemplary with staged reference loading. Minor verbosity in some sections (artifact conventions repeated, some explanatory text that could be trimmed) prevents a perfect conciseness score.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some redundancy (e.g., repeating artifact path conventions multiple times, explaining the same concepts in different sections). The NEVER section is valuable but could be more compact. Overall efficient for a complex multi-stage workflow, but could be tightened. | 2 / 3 |
Actionability | Excellent executable guidance throughout — complete bash commands, full JS extraction snippets, CSS templates, and TSX examples. Every stage has copy-paste ready code with specific file paths and variable names. The decision tree for method selection is particularly actionable. | 3 / 3 |
Workflow Clarity | Clear four-stage linear workflow (Extract → Document → Apply → Verify) with explicit validation at Stage 4. Each stage has numbered substeps, the decision tree guides method selection, and the reference loading schedule prevents premature context loading. Verification includes both local and deployed checks. | 3 / 3 |
Progressive Disclosure | Excellent structure with main skill providing overview and actionable steps, while detailed toolkits (extraction.md, tailwind-mapping.md, verification.md) are referenced at appropriate stages. The reference loading schedule table explicitly prevents loading all files at once. One-level-deep references with clear signaling. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Reviewed
Table of Contents