steal-react-component

🥈Silver

Extract React components from production websites using browser automation. Ideal for developers and operations teams needing to reuse or analyze existing UI components. Integrates with browser automation tools for direct component extraction.

6060Updated 2w ago

Intermediate30min to implementautomation

Saves ~45 min per use

Quick InstallView Source

git clone https://github.com/dennisonbertram/steal-react-component.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Install a browser automation tool (e.g., Puppeteer, Playwright, or Selenium).","action":"Run `npm install puppeteer` or `pip install playwright` in your project directory."},{"step":"Navigate to the target website and locate the React component you want to extract.","action":"Use browser dev tools (F12) to inspect the component's DOM structure and React Fiber tree."},{"step":"Run the extraction script with the specified component name and website URL.","action":"Execute the prompt template in your AI assistant, replacing [PLACEHOLDERS] with actual values (e.g., `[COMPONENT_NAME]` = `UserProfileCard`)."},{"step":"Save the extracted component to a file and verify its functionality.","action":"Create a new React project, install required dependencies (e.g., `npm install @mui/material`), and test the component locally."},{"step":"Refine the extracted code as needed (e.g., remove hardcoded data, add TypeScript types).","action":"Manually edit the output file to ensure it aligns with your project's standards."}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/dennisonbertram/steal-react-component

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use browser automation to extract the React component named [COMPONENT_NAME] from the production website [WEBSITE_URL]. Capture the component's code, props, and state if visible. Save the extracted component to a file named [OUTPUT_FILE_NAME].jsx in the current directory. If the component uses external libraries, include the import statements in the output.

Example Output

```jsx
// Extracted from https://example.com/dashboard at 2024-06-15 14:30:00
// Component: UserProfileCard
// Props: { user: { id: 'u123', name: 'Alex Johnson', role: 'Developer', avatar: 'https://example.com/avatars/u123.png' }, onClick: () => console.log('Profile clicked') }

import React from 'react';
import { Avatar, Card, Button } from '@mui/material';

const UserProfileCard = ({ user, onClick }) => {
  return (
    <Card sx={{ maxWidth: 345, margin: '1rem' }} onClick={onClick}>
      <Avatar
        alt={user.name}
        src={user.avatar}
        sx={{ width: 56, height: 56, margin: '1rem auto' }}
      />
      <Card.Content>
        <Typography variant="h5" component="div">
          {user.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {user.role}
        </Typography>
      </Card.Content>
      <Card.Actions>
        <Button size="small">View Profile</Button>
      </Card.Actions>
    </Card>
  );
};

export default UserProfileCard;
```

**Extraction Notes:**
- Component was located in the `#root > div > section > div > div:nth-child(2)` DOM path.
- State (e.g., hover effects) was captured via CSS pseudo-classes in the extracted styles.
- External dependencies: @mui/material v5.11.0 (detected via package.json in the page's sources).
- No TypeScript types were extracted; manual annotation may be required.

**Next Steps:**
1. Verify the component works in your local environment by installing `@mui/material`.
2. Replace dynamic data (e.g., `user.avatar`) with static placeholders for testing.
3. Refactor the component to remove hardcoded styles if needed.