SkillHub ClubWrite Technical DocsFull StackFrontendTech Writer

steal-react-component

Extract and reconstruct React components from any production website using Chrome browser automation. Use when asked to steal, copy, extract, or reverse-engineer React components from a website.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars

Hot score

Updated

March 19, 2026

Overall rating

C3.6

Composite score

3.6

Best-practice grade

S96.0

Install command

npx @skill-hub/cli install dennisonbertram-steal-react-component

Repository

dennisonbertram/dennisonbertram-steal-react-component

Extract and reconstruct React components from any production website using Chrome browser automation. Use when asked to steal, copy, extract, or reverse-engineer React components from a website.

Open repository

Best for

Primary workflow: Write Technical Docs.

Technical facets: Full Stack, Frontend, Tech Writer.

Target audience: everyone.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: dennisonbertram.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

Install steal-react-component into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://www.skillhub.club/skills/dennisonbertram-steal-react-component before adding steal-react-component to shared team environments
Use steal-react-component for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
name: steal-react-component
description: Extract and reconstruct React components from any production website using Chrome browser automation. Use when asked to steal, copy, extract, or reverse-engineer React components from a website.
---

# Steal React Component

Extract React components from production websites by spawning a specialized subagent.

## Pre-flight Check (REQUIRED)

Before spawning the subagent, verify Chrome MCP is available:

1. Check if `mcp__claude-in-chrome__tabs_context_mcp` tool exists
2. If NOT available, inform the user:
   ```
   The Chrome MCP server is not connected. Please restart Claude Code with:

   claude --chrome

   Then try again.
   ```
3. Only proceed if chrome MCP tools are available

## Invocation

Spawn the extraction agent:

```
Task tool with:
  subagent_type: "steal-react-component"
  model: "sonnet"
  description: "Steal React component"
  prompt: "Extract the [COMPONENT] from [URL]"
```

**Example:** "Steal the Button component from https://example.com"
```
Task tool with:
  subagent_type: "steal-react-component"
  model: "sonnet"
  description: "Steal React component"
  prompt: "Extract the Button component from https://example.com"
```

## Output Handling

The subagent returns reconstructed React/TypeScript code. By default, use the extracted component for your own purposes (e.g., to implement a similar component). Only relay the full output to the user if they explicitly ask to see it.