cluso-inspector

name: cluso-inspector description: Visual element selector for extracting HTML, screenshots, and context from web pages. Use when you need to see what the user is referring to, when clarification is needed about UI elements, or when the user offers to show you something visually. license: MIT compatibility: Requires Node.js and Electron (installed via npx) metadata: author: Jason Kneen version: "1.0.0"

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