Steal React Component

A Claude Code skill suite for extracting and reconstructing React components and entire websites using browser automation.

Features

Component Extraction (steal-react-component)

Extract individual React components from any production website by accessing React Fiber internals.

Design System Extraction (css-extractor)

Extract complete design systems including CSS variables, typography, colors, and spacing.

Full Site Cloning (copy-site)

Clone entire websites by combining component extraction, style extraction, and automatic project scaffolding.

Quick Start

Extract a Single Component

/steal-react-component https://example.com

Clone an Entire Site

/copy-site https://example.com

Installation

This skill suite uses a two-file architecture for context isolation:

Skill	Dispatcher	Agent	Purpose
steal-react-component	SKILL.md (~300 tokens)	AGENT.md (~4k tokens)	Extract individual components
copy-site	COPY-SITE.md (~400 tokens)	COPY-SITE-AGENT.md (~6k tokens)	Clone entire websites

Why Subagent Architecture?

The subagent runs in isolated context, keeping the main agent's context clean. A typical site clone:

• Main agent: ~6k tokens (dispatcher + subagent response summary)
• Subagent: ~50k tokens internally (browser automation, style extraction, component de-minification, project scaffolding)

Without subagents, all ~50k tokens would accumulate in the main agent's context, quickly filling it up.

Step 1: Install the Agents (Required)

Copy agent files to your Claude Code agents directory:

# User-level (available in all projects)
cp AGENT.md ~/.claude/agents/steal-react-component.md
cp COPY-SITE-AGENT.md ~/.claude/agents/copy-site.md

# Or project-level
cp AGENT.md .claude/agents/steal-react-component.md
cp COPY-SITE-AGENT.md .claude/agents/copy-site.md

Step 2: Install the Skills

Copy skill files to enable slash commands:

# User-level
mkdir -p ~/.claude/skills/steal-react-component
cp SKILL.md CSS-EXTRACTOR.md COPY-SITE.md ~/.claude/skills/steal-react-component/

# Or project-level
mkdir -p .claude/skills/steal-react-component
cp SKILL.md CSS-EXTRACTOR.md COPY-SITE.md .claude/skills/steal-react-component/

Optional: Install as Commands

Create slash commands for site cloning:

mkdir -p ~/.claude/commands
cp COPY-SITE.md ~/.claude/commands/copy-site.md

Now use /copy-site https://target-site.com to clone any site.

Components

SKILL.md + AGENT.md - ReactStealer

The core component extraction tool (split for token efficiency):

• Access React Fiber internals via __reactFiber$* keys
• Extract component props, hooks, HTML, and minified source
• Visual Navigator UI for interactive component browsing
• LLM-formatted output for clean code reconstruction

// Inject ReactStealer, then:
ReactStealer.summary()           // List all components
ReactStealer.getForLLM('Button') // Get reconstruction prompt

CSS-EXTRACTOR.md - StyleStealer

Design system extraction tool:

• CSS custom properties (design tokens)
• Typography system (fonts, sizes, weights)
• Color palette with semantic naming
• Direct Tailwind config generation

// Inject StyleStealer, then:
StyleStealer.extractAll()       // Get full design system
StyleStealer.toTailwindConfig() // Generate Tailwind config
StyleStealer.toCSSVariables()   // Export as CSS file

COPY-SITE.md + COPY-SITE-AGENT.md - Full Site Cloning

End-to-end site cloning workflow (split for context isolation):

1. Screenshot and document the site
2. Extract design system with StyleStealer
3. Extract components with ReactStealer
4. De-minify with parallel subagents
5. Scaffold Next.js project
6. Verify the clone matches original

templates/ - Project Scaffolding

Ready-to-use project templates:

• Next.js 14 with App Router
• TypeScript configuration
• Tailwind CSS with design token placeholders
• Component structure

Requirements

• Claude Code CLI (started with claude --chrome)
• Chrome browser with Claude-in-Chrome extension
• Target website (React apps work best, any site works for style extraction)

How It Works

The Technique

1. Two Trees - React maintains a Fiber tree parallel to the DOM
2. Fiber Access - React attaches Fiber nodes via __reactFiber$* keys
3. Data Extraction - Extract component type, props, hooks, rendered HTML
4. Style Extraction - Pull CSS variables, computed styles, typography
5. Example Collection - Gather multiple prop→HTML mappings
6. LLM Reconstruction - Feed examples + minified source to LLM
7. Project Scaffolding - Generate complete Next.js project
8. Verification - Compare rendered output until it matches

Architecture

┌─────────────────────────────────────────────────────────────┐
│ Main Agent (opus/sonnet)                                    │
│                                                             │
│  Dispatcher loaded (~300-400 tokens)                        │
│  ├─ Pre-flight check (Chrome MCP available?)                │
│  └─ Dispatch to appropriate subagent                        │
│                                                             │
│  ┌───────────────────────┐  ┌────────────────────────────┐  │
│  │ steal-react-component │  │ copy-site                  │  │
│  │ Subagent (sonnet)     │  │ Subagent (sonnet)          │  │
│  │                       │  │                            │  │
│  │ AGENT.md (~4k tokens) │  │ COPY-SITE-AGENT.md (~6k)   │  │
│  │ ├─ Navigate           │  │ ├─ Screenshot site         │  │
│  │ ├─ Inject ReactStealer│  │ ├─ Extract design system   │  │
│  │ ├─ Extract component  │  │ ├─ Extract components      │  │
│  │ └─ Reconstruct code   │  │ ├─ De-minify (parallel)    │  │
│  └───────────────────────┘  │ ├─ Scaffold Next.js        │  │
│                             │ └─ Test & verify           │  │
│                             └────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

Workflow Comparison

Feature	steal-react-component	copy-site
Scope	Individual components	Entire site
Output	Component code	Full Next.js app
Design System	Optional	Always extracted
Automation	Interactive	End-to-end
Use Case	Grab specific components	Clone entire UI

Limitations

• Animations - Snapshots may not match animated state
• Interactive State - Dropdowns, modals may not capture correctly
• Minification - Some component names are minified (e.g., Hc, qv)
• Server Components - RSC may not have client-side Fiber data
• Authentication - Protected pages require manual login first
• Non-React Sites - Only style extraction works

Example Output

Component Extraction

// After injection, use ReactStealer API:

// Get component summary
ReactStealer.summary()
// → { totalComponents: 89, components: [{ name: "Button", count: 15 }, ...] }

// Extract specific component for LLM
ReactStealer.getForLLM('Button')
// → Formatted prompt with source + examples

// Target specific element
ReactStealer.getBySelector('button.primary')
// → { name, props, hooks, renderedHTML, source }

Site Cloning

After running /copy-site https://x.com:

sites/
└── x.com/
    ├── README.md           # Site documentation
    ├── style-guide.md      # Design system reference
    └── app/
        ├── package.json
        ├── tailwind.config.ts
        ├── app/
        │   ├── layout.tsx
        │   ├── page.tsx
        │   └── globals.css
        └── components/
            ├── index.ts
            ├── Sidebar.tsx
            ├── Tweet.tsx
            ├── TweetComposer.tsx
            └── RightSidebar.tsx

License

MIT

Credits

• Technique inspired by fant.io/react - "How to Steal Any React Component"
• Built for Claude Code