‹  Research

Case study · Claude Code skill

site-teardown

Give it a URL, get back how the site was built: the stack, every effect and how it works, the design tokens and a build plan — detailed enough to rebuild without visiting the original.

Status

Open source

Period

June 2026

Stack

Claude Code skill · curl · grep

An effect that looks impressive usually has a simple implementation.

The skill reads the source the browser receives, not a summary of it, and every claim in the output is marked as confirmed from source or inferred.

1Problem

Working out how a site was built is slow by hand, and the obvious shortcut loses the answer: a fetch tool that routes the page through a summarising model returns prose about the page, not the code that makes it move.

2Task

Turn a single URL into a teardown document — stack, effects, design tokens, assets and a section-by-section build plan — without asking the person to open developer tools or paste anything.

3Approach

  1. Fetch the raw page

    curl with a browser user agent. Fall back to a fetch tool only when curl fails or returns an empty app shell; ask the person only if both fail.

  2. Drop what is not the site

    Tag managers, consent banners, captchas, CDN and CMS core scripts are filtered out; the app bundles stay.

  3. Search the minified code

    Grep the bundles for animation signatures — GSAP, ScrollTrigger, IntersectionObserver, Lenis and others — then read the code around each hit.

  4. Pull the design system

    Colours, type scale, spacing and easing are extracted from the CSS.

  5. Write a fixed template

    The result is saved as a dated markdown teardown with the same sections every time.

  6. Say what is certain

    Each finding is labelled as confirmed from source or inferred, and the document ends with a catalogue of twelve effects that look complex and are not.

4In use

The first real teardown was of a designer’s portfolio site with a text-scramble effect on hover. The skill identified nine technologies and broke down eight effects; the scramble turned out to be a per-character “lock-in” wipe driven by a frame counter — no library needed.

That became the scramble on the 23ag.one homepage: service names and footer links resolve left to right on hover. It was rewritten from scratch rather than copied, and it respects reduced-motion settings.

9technologies identified in the first teardown.
8effects broken down, each to its mechanism.
1effect rebuilt from scratch for this site’s homepage.
12“impressive but simple” patterns in the skill’s catalogue.
The most valuable part of a teardown is showing that an impressive-looking effect has a simple implementation.skills/site-teardown/SKILL.md

5Limitations

  • Pages behind a login fail. Apps that render everything in JavaScript fall back to the summarising fetch and lose detail.
  • There are no tests or evaluations — the evidence is use, not measurement.
  • It reads other people’s code. The template asks for licensing concerns to be noted; rebuilding is expected to be a rewrite, not a copy.

Sources