skill

cluso-inspector-skill

jasonkneen/cluso-inspector-skillcommunitylistedunreviewed

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/jasonkneen/cluso-inspector-skill itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

cluso-inspector

Visual element selector for extracting HTML, screenshots, and context from web pages.

What is this?

A Claude Code skill that opens an interactive Electron window for visually selecting elements on web pages. Perfect for when you need to show Claude exactly which UI element you're talking about.

Installation

npm install -g cluso-inspector

Or use directly with npx:

npx cluso-inspector <url>

When to Use

Clarification needed - You need to show which element you mean
Visual debugging - Text descriptions aren't working
User offers to show - "Let me show you", "See this?"

How It Works

Agent runs npx cluso-inspector <url>
Electron window opens with your page
Hover to see dual overlays (blue=screenshot area, purple=element)
Click to select
Returns JSON with screenshot, HTML, selector, and context

What You Get

{
  "screenshotPath": "/path/to/screenshot.png",
  "html": "<div class=\"...\">...</div>",
  "selector": "div.container > button.submit",
  "bounds": { "x": 100, "y": 200, "width": 80, "height": 40 },
  "stateClasses": ["hover", "active", "focus"]
}

Examples

# Local development server
npx cluso-inspector http://localhost:3000

# Production site
npx cluso-inspector https://example.com

# Specific port
npx cluso-inspector http://localhost:5173

Agent Skills Compatible

This skill follows the Agent Skills specification and works with Claude Code and other compatible AI coding assistants.

License

MIT - See LICENSE file for details

Author

Jason Kneen