# Cluso Inspector

> 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.

- Skill: `jasonkneen/cluso-inspector` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add jasonkneen/cluso-inspector`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jasonkneen/cluso-inspector/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: jasonkneen (https://skillmd.com/u/jasonkneen)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jasonkneen/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

```bash
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