Skills
.Work. You
Rest

site-teardown

Official

Turn any site into a build-ready blueprint.

Design & Creative#design system#reverse engineering#animation extraction#CSS tokens#website teardown#JavaScript behavior#cloning blueprint
AuthorRoentek
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Site teardown and reverse engineering are time-consuming because teams must manually uncover HTML structure, interactive behavior, and styling tokens to accurately recreate a site.

Core Features & Use Cases

  • End-to-end website analysis: Reverse engineer page structure, interaction logic, and styling details from HTML/CSS/JS.
  • Behavior + animation extraction: Identify event handlers, scroll effects, animations, transitions, and implementation code paths from JavaScript.
  • Design system capture: Extract color tokens, typography, spacing, keyframes, CSS custom properties, and responsive rules from CSS to enable faithful cloning.

Quick Start

Run /site-teardown with a URL like https://example.com to generate a thorough teardown document you can hand to Claude Code for cloning and implementation.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: site-teardown
Download link: https://github.com/Roentek/Claude_Code_Boilerplate_Framework/archive/main.zip#site-teardown

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.