Skill Details
Runtime
(claude-4-8-opus)
Example user message
[userMessage]: Can you rebuild https://acme-plumbing.com in Tailwind and make it look way more modern? The current site looks like it's from 2012.
Example agent response
'll clone your plumbing site and give it a modern visual refresh while keeping the layout and content faithful. Starting by capturing the original.
[Reads references/capture.md, drives Claude in Chrome to load acme-plumbing.com, saves full-page + per-section screenshots (nav, hero, 6-service grid, reviews, footer) and the real copy to original/]
Captured — hero "24/7 Emergency Plumbing", a 6-service grid, a reviews strip and a contact footer.
[Reads references/rebuild.md, writes rebuild/index.html: a single Tailwind file reproducing the same section order and copy, with a navy/copper palette, display type scale, py-20 spacing, soft card shadows and a sticky nav]
Round 1 — [runs scripts/shoot.py, compares against original/]
Layout: FAIL — testimonials strip missing; services grid collapsed to 2 cols.
Visual: PASS.
[Writes rounds/round-1.md, re-adds testimonials, fixes grid to md:grid-cols-3]
Round 2 —
Layout: PASS — all five sections present, correct order, proportions match.
Visual: PASS.
Both axes pass. Here's the rebuilt site.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acme Plumbing — 24/7 Emergency Plumbing in Warsaw</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: { 700: '#1b2a4a', 800: '#141f38', 900: '#0d1526' },
copper: { 400: '#e8956b', 500: '#d97742', 600: '#c25f2c' }
},
fontFamily: { display: ['Georgia', 'serif'], body: ['ui-sans-serif', 'system-ui'] }
}
}
}
</script>
</head>
<body class="font-body text-navy-900 bg-white antialiased">
<!-- Sticky nav -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b border-slate-100">
<nav class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
<a href="#" class="flex items-center gap-2 font-display text-xl font-bold text-navy-800">
<span class="inline-block w-8 h-8 rounded-lg bg-copper-500 text-white grid place-items-center text-sm">A</span>
Acme Plumbing
</a>
<ul class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
<li><a href="#services" class="hover:text-copper-600 transition">Services</a></li>
<li><a href="#reviews" class="hover:text-copper-600 transition">Reviews</a></li>
<li><a href="#contact" class="hover:text-copper-600 transition">Contact</a></li>
</ul>
<a href="tel:+48000000000" class="rounded-full bg-copper-500 hover:bg-copper-600 text-white text-sm font-semibold px-5 py-2.5 transition">Call now</a>
</nav>
</header>
<!-- Hero -->
<section class="relative bg-navy-800 text-white overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-navy-700 to-navy-900"></div>
<div class="relative max-w-6xl mx-auto px-6 py-28 md:py-36 grid md:grid-cols-2 gap-12 items-center">
<div>
<span class="inline-block text-copper-400 font-semibold tracking-wide uppercase text-xs mb-4">Licensed & insured</span>
<h1 class="font-display text-4xl md:text-6xl font-bold leading-tight mb-6">24/7 Emergency Plumbing You Can Rely On</h1>
<p class="text-slate-300 text-lg mb-8 max-w-md">Fast, upfront-priced plumbing repairs across Warsaw. No call-out surprises, no cold showers.</p>
<div class="flex flex-wrap gap-4">
<a href="#contact" class="rounded-full bg-copper-500 hover:bg-copper-600 px-7 py-3.5 font-semibold transition">Book a visit</a>
<a href="tel:+48000000000" class="rounded-full border border-white/30 hover:bg-white/10 px-7 py-3.5 font-semibold transition">+48 000 000 000</a>
</div>
</div>
<div class="rounded-2xl bg-white/5 border border-white/10 p-8 backdrop-blur">
<div class="grid grid-cols-2 gap-6 text-center">
<div><div class="font-display text-4xl font-bold text-copper-400">15+</div><div class="text-sm text-slate-400 mt-1">Years serving</div></div>
<div><div class="font-display text-4xl font-bold text-copper-400">60min</div><div class="text-sm text-slate-400 mt-1">Avg. response</div></div>
<div><div class="font-display text-4xl font-bold text-copper-400">4.9★</div><div class="text-sm text-slate-400 mt-1">Google rating</div></div>
<div><div class="font-display text-4xl font-bold text-copper-400">2yr</div><div class="text-sm text-slate-400 mt-1">Work warranty</div></div>
</div>
</div>
</div>
</section>
<!-- Services grid (3 cols) -->
<section id="services" class="py-20 md:py-28 bg-slate-50">
<div class="max-w-6xl mx-auto px-6">
<div class="text-center max-w-2xl mx-auto mb-14">
<h2 class="font-display text-3xl md:text-4xl font-bold mb-4">What we fix</h2>
<p class="text-slate-500">From dripping taps to full re-pipes — one crew, flat pricing.</p>
</div>
<div class="grid gap-6 md:grid-cols-3">
<!-- 6 services -->
<div class="rounded-xl bg-white p-8 shadow-sm hover:shadow-md transition border border-slate-100">
<div class="w-11 h-11 rounded-lg bg-copper-500/10 text-copper-600 grid place-items-center mb-5 text-lg font-bold">✚</div>
<h3 class="font-semibold text-lg mb-2">Emergency repairs</h3>
<p class="text-slate-500 text-sm">Burst pipes and floods handled day or night, 365 days a year.</p>
</div>
<div class="rounded-xl bg-white p-8 shadow-sm hover:shadow-md transition border border-slate-100">
<div class="w-11 h-11 rounded-lg bg-copper-500/10 text-copper-600 grid place-items-center mb-5 text-lg font-bold">◇</div>
<h3 class="font-semibold text-lg mb-2">Leak detection</h3>
<p class="text-slate-500 text-sm">Non-invasive tracing that finds the leak before we open a wall.</p>
</div>
<div class="rounded-xl bg-white p-8 shadow-sm hover:shadow-md transition border border-slate-100">
<div class="w-11 h-11 rounded-lg bg-copper-500/10 text-copper-600 grid place-items-center mb-5 text-lg font-bold">♨</div>
<h3 class="font-semibold text-lg mb-2">Boiler & heating</h3>
<p class="text-slate-500 text-sm">Servicing, repair and installs for all major boiler brands.</p>
</div>
<div class="rounded-xl bg-white p-8 shadow-sm hover:shadow-md transition border border-slate-100">
<div class="w-11 h-11 rounded-lg bg-copper-500/10 text-copper-600 grid place-items-center mb-5 text-lg font-bold">⚑</div>
<h3 class="font-semibold text-lg mb-2">Drain unblocking</h3>
<p class="text-slate-500 text-sm">High-pressure jetting for sinks, toilets and outside drains.</p>
</div>
<div class="rounded-xl bg-white p-8 shadow-sm hover:shadow-md transition border border-slate-100">
<div class="w-11 h-11 rounded-lg bg-copper-500/10 text-copper-600 grid place-items-center mb-5 text-lg font-bold">▤</div>
<h3 class="font-semibold text-lg mb-2">Bathroom fitting</h3>
<p class="text-slate-500 text-sm">Full bathroom refits, from first fix plumbing to final seal.</p>
</div>
<div class="rounded-xl bg-white p-8 shadow-sm hover:shadow-md transition border border-slate-100">
<div class="w-11 h-11 rounded-lg bg-copper-500/10 text-copper-600 grid place-items-center mb-5 text-lg font-bold">◈</div>
<h3 class="font-semibold text-lg mb-2">Re-piping</h3>
<p class="text-slate-500 text-sm">Replacing old lead and steel runs with modern, quiet pipework.</p>
</div>
</div>
</div>
</section>
<!-- Reviews strip -->
<section id="reviews" class="py-20 md:py-28">
<div class="max-w-6xl mx-auto px-6">
<h2 class="font-display text-3xl md:text-4xl font-bold text-center mb-14">What clients say</h2>
<div class="grid gap-6 md:grid-cols-3">
<figure class="rounded-xl border border-slate-100 p-8 bg-white">
<div class="text-copper-500 mb-3">★★★★★</div>
<blockquote class="text-slate-600 mb-5">Came out at 2am for a burst pipe and had it capped in twenty minutes. Fair price, no drama.</blockquote>
<figcaption class="text-sm font-semibold">— Magda K.</figcaption>
</figure>
<figure class="rounded-xl border border-slate-100 p-8 bg-white">
<div class="text-copper-500 mb-3">★★★★★</div>
<blockquote class="text-slate-600 mb-5">Quoted upfront, stuck to it, cleaned up after. Rare these days. Booked them for the bathroom too.</blockquote>
<figcaption class="text-sm font-semibold">— Tomasz W.</figcaption>
</figure>
<figure class="rounded-xl border border-slate-100 p-8 bg-white">
<div class="text-copper-500 mb-3">★★★★★</div>
<blockquote class="text-slate-600 mb-5">Found a hidden leak two other firms missed. Polite, tidy, properly professional.</blockquote>
<figcaption class="text-sm font-semibold">— Anna R.</figcaption>
</figure>
</div>
</div>
</section>
<!-- Contact / footer -->
<footer id="contact" class="bg-navy-900 text-slate-300">
<div class="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-3 gap-10">
<div>
<div class="font-display text-xl font-bold text-white mb-3">Acme Plumbing</div>
<p class="text-sm text-slate-400 max-w-xs">Licensed, insured and available around the clock across Warsaw and Mazovia.</p>
</div>
<div>
<h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wide">Get in touch</h4>
<ul class="space-y-2 text-sm">
<li>+48 000 000 000</li>
<li>hello@acme-plumbing.com</li>
<li>Mon–Sun · 24 hours</li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wide">Follow</h4>
<div class="flex gap-3">
<a href="#" class="w-9 h-9 rounded-full bg-white
Instant access
Commercial use
Money‑backBy purchasing this skill, you agree to our terms of service
5.0
1 review
4
Favorites
17
Views
CLAUDE-4-8-OPUS
Point at any live URL and get a clean Tailwind rebuild that keeps the original's layout and content but upgrades the visuals. It captures the source page with Claude in Chrome, rebuilds it as a single Tailwind HTML file, then loops: screenshots its own work, compares against the original on layout fidelity and visual quality, and keeps fixing until both pass. For developers modernizing pages without a full redraw.
...more
Updated 1 week ago
- Reviews for this skill (1)