Cluso Inspector

cluso-inspector

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

Triggers

Use this skill when:

1. Clarification needed - You need to see what the user is referring to

• "Can you show me which element?"
• "I'm not sure which component you mean"
• After 2+ failed attempts to identify/fix something

2. User offers to show - User indicates they want to show you something

• "I will show you"
• "Let me show you"
• "Here, look at this"
• "See this?"

3. Visual debugging - When text descriptions aren't working

• Repeated back-and-forth about UI elements
• Confusion about which element/component is being discussed
• Need to understand visual context (layout, styling, relationships)

Usage

npx cluso-inspector <url>

Parameters

• url - The page URL (usually http://localhost:PORT but can be any URL)

What You Get Back

JSON output with:

• screenshotPath - Path to PNG file (use Read tool to view it)
• html - The element's outerHTML
• selector - CSS selector path
• bounds - Element position and dimensions
• stateClasses - Extracted hover/active/focus/disabled states

Important: The screenshot is saved as a separate .png file so you can view it with the Read tool.

Examples

When user says "this button isn't working"

I'll open the visual inspector so you can show me exactly which button.

npx cluso-inspector http://localhost:3000

After 2 failed fix attempts

I've tried two approaches but something's still off.
Can you show me the exact element using the inspector?

npx cluso-inspector http://localhost:5173

When user says "let me show you"

Opening the inspector now - click on the element you want to show me.

npx cluso-inspector https://example.com

Flow

1. Agent runs npx cluso-inspector <url> 2. Electron window opens with the target page 3. User hovers to see dual overlays (blue=screenshot area, purple=element) 4. User clicks to select 5. Inspector captures and returns JSON to agent 6. Agent analyzes screenshot + HTML to understand context

Pro Tips

• The screenshot includes vertical context (headers above, buttons below)
• State classes help understand interactive behavior
• Use the HTML to understand component structure
• Check bounds if layout/positioning is the issue

cluso-inspector

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

<img width="1552" height="1012" alt="Screenshot 2026-01-11 at 15 33 21" src="https://github.com/user-attachments/assets/43fd5932-c4cf-4317-9682-4b41d3eb7e4d" />

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

1. Agent runs npx cluso-inspector <url> 2. Electron window opens with your page 3. Hover to see dual overlays (blue=screenshot area, purple=element) 4. Click to select 5. 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