website-theme-porter
OfficialClone website styles to React + Tailwind.
Software Engineering#react#tailwind css#website theming#design token extraction#visual replication#css automation
Authorpantheon-org
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the process of extracting visual design elements from any live website and applying them to a React + Tailwind CSS project, saving significant manual effort in design replication.
Core Features & Use Cases
- Automated Style Extraction: Captures colours, typography, spacing, and component styles using browser automation or source inspection.
- Structured Documentation: Generates detailed theme documentation in Markdown format.
- Tailwind CSS Integration: Applies extracted styles as Tailwind v4 CSS tokens.
- Visual Verification: Compares the original site with the local build to ensure fidelity.
- Use Case: Replicate the design system of a competitor's website, migrate a brand's visual identity to a new React application, or quickly prototype a UI based on an existing live site.
Quick Start
Use the website-theme-porter skill to port the theme from https://example.com to your React project.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: website-theme-porter Download link: https://github.com/pantheon-org/tekhne/archive/main.zip#website-theme-porter Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.