/pick-element | website-debug | ClaudePluginHub

Back to Commands

Slash Command

Community

/pick-element

From website-debug

1

Description

Launch interactive element picker for user to select DOM elements. Returns selectors and computed styles.

AI Summary

Launches an interactive element picker to select DOM elements and returns selectors with computed styles.

Install

1

Add the repository(one-time)

$

/plugin marketplace add AnthemFlynn/ccmp

2

Install the plugin

$

/plugin install website-debug@ccmp

Argument

message to display

Model

sonnet

Allowed Tools

Bash(*)

Command Content

Pick Element

Launch the interactive element picker so the user can click on DOM elements.

Instructions

Run the picker with the provided message (or default):

node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-pick.js "$ARGUMENTS"

If no message provided, use: "Select the element you want to debug"

User Instructions

Tell the user:

Click on any element to select it
Cmd/Ctrl + Click to add more elements to selection
Enter to confirm multi-selection
Escape to cancel

Output

After the user selects elements, you'll receive:

CSS selector for each element
Tag, ID, and classes
Dimensions and position
Computed display, visibility, opacity
Text content preview

Use this information to diagnose issues or write CSS/JS targeting these elements.

Links

GitHub Stats

0 forks

Updated 1 month ago