site-teardown

name	site-teardown
description	Fetch and analyze the full HTML, CSS, and JavaScript of a reference website — not a WebFetch summary. Identifies techniques, effects, and patterns powering the design for cloning or inspiration extraction.
version	0.1.0
level	2
triggers	["site teardown","teardown","clone this site","how did they build","analyze this website","/site-teardown"]
context_files	[]
steps	[{"name":"Fetch HTML","description":"Fetch the full page HTML. Parse all linked stylesheet hrefs and script srcs."},{"name":"Fetch Assets","description":"Fetch each linked CSS file in full. Fetch key JS files. Do not summarize — retrieve raw content."},{"name":"Analyze","description":"Identify named techniques powering key visual effects. Map CSS → visual output."},{"name":"Report","description":"Produce a teardown report with identified techniques, reusable patterns, and implementation notes."}]

Site Teardown Skill

Fetch and understand the source code behind a reference website. Not a screenshot analysis — the actual HTML, CSS, and JavaScript. This is how you move from "it kind of looks like the reference" to "I understand exactly how they built that effect."

What Claude Gets Wrong Without This Skill

Screenshots show the surface. Source code shows the mechanism. When Claude only sees screenshots, it guesses at implementation — and guesses produce approximations, not replications. The visual gap between "inspired by" and "built from source" is enormous.

The second failure mode: WebFetch uses a smaller summarizing model. It reads a page and returns a condensed description. For a stylesheet with 3,000 lines of carefully crafted CSS, that summary loses almost everything that matters — the specific backdrop-filter values, the exact cubic-bezier curves, the clip-path shapes that create the distinctive cutouts. This skill fetches the raw content, not a summary.

The WebFetch Problem

When Claude uses WebFetch on a CSS or JS file, the output is processed by a smaller model that summarizes it. This is fine for prose content. For CSS and JavaScript, it strips exactly the technical detail you need.

This skill explicitly bypasses summarization:

1. Fetch the HTML with WebFetch (page structure is readable as prose)
2. Parse <link rel="stylesheet" href="..."> and <script src="..."> tags from the HTML
3. Fetch each asset URL individually with WebFetch — raw content only, no summarization prompt
4. Work from the raw content directly

Phase Gates

Fetch HTML

Fetch the target URL. Extract all:

• <link rel="stylesheet" href="..."> tags (CSS files)
• <script src="..."> tags (JS files — prioritize files with meaningful names, skip analytics/tracking)
• Inline <style> blocks
• Any @import statements in inline styles

Note: Some sites load CSS via JavaScript (CSS-in-JS, styled-components). If the HTML contains minimal CSS links but the page has rich styling, flag this and look for the main JS bundle.

Fetch Assets — hard gate

Fetch each CSS file. Do not summarize. Work from the raw text.

Priority order:

1. Main stylesheet (usually named main.css, styles.css, app.css, or has the largest file size hint)
2. Any file with theme, , , or in the name