skills.rest
Roentek
RoentekOFFICIAL
Explore all skills by this author →
Website𝕏@roentekdesignsGitHub

site-teardown

Reverse engineer websites into structured build blueprints from URLs or raw HTML.

4|4|Updated Apr 6, 2026
Search Tags:#design system#reverse engineering#animation extraction#CSS tokens#website teardown#JavaScript behavior#cloning blueprint
One-click install
npx skills add https://github.com/Roentek/Claude_Code_Boilerplate_Framework --skill site-teardown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-teardown
Source: https://github.com/Roentek/Claude_Code_Boilerplate_Framework/tree/main/.claude/skills/site-teardown
Command: npx skills add https://github.com/Roentek/Claude_Code_Boilerplate_Framework --skill site-teardown

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about site-teardown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reverse engineer a website's design system and interaction logic?▼

You can clone a website design by analyzing its retrieved source files to extract page structure, custom styling, and interactive behavior. The tool outputs a structured teardown document with confirmed HTML classes, design tokens, and a build-ready blueprint.

Can I extract CSS tokens and JavaScript animations from raw HTML?▼

Yes, you can analyze raw HTML by pasting it directly into the tool. It processes the pasted markup to identify what the page is doing, fetching associated JS/CSS behavior, and extracting responsive rules and design tokens for recreation.

What is the best way to create a cloning blueprint from an existing URL?▼

A website teardown turns any site into a build-ready blueprint by reverse engineering its structure, styling, and interaction logic. It captures design system details like color tokens and keyframes to enable faithful cloning.

Does website teardown capture scroll effects and transition implementation code paths?▼

Yes, behavior extraction identifies scroll effects, transitions, animations, and event handlers from JavaScript files. It retrieves the implementation code paths to document exactly how the interactions function.

Do I need to manually inspect source files to recreate responsive rules and keyframes?▼

No, manual inspection is unnecessary because the tool automatically extracts CSS custom properties, keyframes, and responsive rules from the fetched stylesheets. It compiles these design tokens into an actionable build plan.

Related Skills

Explore More Design & Creative Skills→
svssdevasvssdeva
1

extract-design-system

Extract design primitives from a public website into JSON and CSS token files.

Community
Intermediate
moltis-orgmoltis-org
2.8k

writing-plans

Generate end-to-end implementation plans with tasks, file paths, and code examples.

Official
Advanced
junaid-ali-rukjunaid-ali-ruk

tailwindcss-animations

Automate consistent Tailwind CSS motion patterns with reusable animation utilities.

Community
Intermediate
BURHANDEV-ENTERPRISEBURHANDEV-ENTERPRISE

mop-ui-clone

Extract HTML structure, CSS design tokens, and 3D assets from websites.

Official
Advanced