SkillsAdd

smithery.ai

clonereact

Extract React components visually from any website using Electron selector. Use when user wants to clone components, extract React code, recreate UI from websites, copy component designs, or visually select elements to turn into React components.

First seen Apr 11, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.1
LicenseMIT
CompatibilityRequires Node.js 18+ and npx (cluso-inspector installed automatically)
Declared agents claude-code
More metadata
version
1.0.1
author
Jason Kneen
tags
["react","extraction","electron","visual-selection","component-cloning"]

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,444 B
  • docs SUMMARY.md 264 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

CloneReact - Visual Component Extractor

Extract React components from any website using Electron-powered visual selection.

How It Works

  1. cluso-inspector opens target URL with visual selector
  2. You click the element you want to extract
  3. Inspector closes and returns extraction JSON
  4. Claude processes the data and generates React component files
  5. Preview in your terminal with code and screenshot

Usage

/clonereact https://stripe.com --typescript
/clonereact https://github.com --output ./components
/clonereact https://airbnb.com --depth 10

What Gets Extracted

  • React Fiber tree (if React site)
  • DOM structure with all children
  • Computed CSS styles
  • Screenshot (PNG)
  • All text content
  • Props and attributes

Output

  • ComponentName.tsx - React component with TypeScript
  • ComponentName.css - Extracted styles
  • ComponentName.json - Full data with screenshot path
  • README.md - Usage instructions

Options

  • --typescript - Generate .tsx files (default: .jsx)
  • --output <dir> - Output directory (default: ./cluso-inspect/cloned)
  • --depth <n> - Tree extraction depth (default: 5)

Dependencies

This skill uses cluso-inspector for visual element selection:

  • Live mode: npx cluso-inspector (auto-installed from npm)
  • Dev mode: Local electron source (if available)

Dev mode is auto-detected if ~/Documents/GitHub/flows/cluso/cluso-inspector/main.js exists. Override with: export CLUSOINSPECTORPATH=/path/to/cluso-inspector

Installation

As Claude Skill:

git clone https://github.com/jasonkneen/clone-react-skill ~/.claude/skills/clonereact

Via npm:

npm install -g clone-react-skill
clonereact https://stripe.com

# Or npx
npx clone-react-skill https://stripe.com

Related Skills

  • cluso-inspector - The underlying visual selector (can be used standalone)