click-to-edit-uilisted

Set up a "click-to-identify" probe in a live browser (via the chrome-devtools MCP) so the user can point at UI components by Alt-clicking them instead of describing them in words, then request edits by referring to numbered selections ("make ① bigger, hide ②, recolor ③"). Use this whenever the user is iteratively editing a rendered web UI / HTML page / app open in Chrome and would rather click on elements than describe them — triggers include "set up the click probe", "let me click to show you what to change", "I'll point at the components", "click-to-identify", "let me just click the things I want edited", "point-and-edit this UI", or the start of any visual front-end tweaking session against a page in the browser. Also use it to RE-ARM the probe after a reload, and to READ which components the user clicked (window.__probe.list()) before making edits. Prefer this over asking the user to describe DOM elements in prose.
hyemin-ht-kang/click-to-edit-ui · ★ 2 · Web & Frontend · score 75

Install: claude install-skill hyemin-ht-kang/click-to-edit-ui

# Click-to-edit UI Editing a rendered UI is much faster when the user can **point** at a component than when they have to describe it ("the third dot in the second row of the sidebar…"). This skill injects a small probe into a page open in the **chrome-devtools MCP** browser so the user Alt-clicks the components they want changed; each click is **numbered and pinned with a badge**, and you read the ordered selection back from page state to know exactly which code to edit. ## When to use - The user wants to change something visual in a page that's open (or that you can open) in the chrome-devtools browser, and pointing is easier than describing. - The user says things like "let me click the parts I want edited," "set up the probe," or starts referring to components by number (① ② ③). - After a reload, to confirm the probe re-armed (it should, automatically). This needs the **chrome-devtools MCP** (`navigate_page`, `evaluate_script`, optionally `list_console_messages`) in Claude Code or Codex. If it isn't available, say so — there's no fallback that gives the click-to-point experience — and give the user the command to add it, then have them restart the client: ```sh # Claude Code claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest # Codex codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ``` The commands above follow the upstream `@latest` setup. If the user prefers a short supply-chain observation window and their npm supports `mi