Chrome Webpage Click Skill

chrome-webpage-click_SKILL.md

name	description	allowed-tools
chrome-webpage-click	Click on web page elements with visual verification. Specify the TARGET element description and INITIAL COORDINATES. The skill will iteratively adjust coordinates until the red dot is on the target, then click automatically.	mcp__claude-in-chrome__javascript_tool, mcp__claude-in-chrome__computer, mcp__claude-in-chrome__tabs_context_mcp, mcp__claude-in-chrome__read_page, mcp__claude-in-chrome__find

Chrome Webpage Click with Auto-Correction

This skill ensures accurate clicking by iteratively adjusting coordinates until the red dot is visually confirmed on the target element, then clicking directly.

Arguments Format

When invoking this skill, provide:

• Target: Description of the element to click (e.g., "Cancel button", "Submit link", "Search icon")
• Initial coordinates: Starting (x, y) estimate
• Tab ID: The browser tab ID

Example: Click the "Cancel" button at approximately (256, 350) on tab 860750042

Workflow

1. Draw red dot at initial coordinates
2. Take screenshot to verify position
3. Check if dot is on target:
   • If YES: Click at current coordinates (dot stays visible during click)
   • If NO: Adjust coordinates based on visual offset and repeat from step 1
4. Remove dot after successful click (cleanup)

JavaScript: Draw Red Dot

const x = X_COORD;
const y = Y_COORD;

const dot = document.createElement('div');
dot.id = 'claude-click-marker';
dot.style.cssText = `
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  top: ${y}px;
  left: ${x}px;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
`;
document.getElementById('claude-click-marker')?.remove();
document.body.appendChild(dot);
'Red dot drawn at (' + x + ', ' + y + ')'

Coordinate Adjustment Guide

When the dot misses the target, estimate the pixel offset visually:

Observation	Action
Dot is above target	Increase Y by estimated gap
Dot is below target	Decrease Y by estimated gap
Dot is left of target	Increase X by estimated gap
Dot is right of target	Decrease X by estimated gap

Estimation tips:

• Standard button height: ~35-45px (adjust by ~20px to re-center)
• Standard button width: ~80-120px
• Small gaps: 5-15px adjustment
• Medium gaps: 20-40px adjustment
• Large misses: 50+ px adjustment

Execution Steps

Step 1: Draw dot at initial coordinates

const x = INITIAL_X;
const y = INITIAL_Y;
// ... draw dot code ...

Step 2: Take screenshot

Use computer tool with action screenshot

Step 3: Verify and decide

• Look at screenshot
• Is the red dot centered on the TARGET element?
• If YES: proceed to Step 4
• If NO: calculate offset, update coordinates, go back to Step 1

Step 4: Click (with dot still visible)

Use computer tool with action left_click at the verified coordinates. The pointer-events: none on the dot ensures clicks pass through.

Step 5: Cleanup (after click)

document.getElementById('claude-click-marker')?.remove();
'Cleanup complete'

Example Session

User asks: Click the "Post" button at (635, 135) on tab 12345

Iteration 1:

• Draw dot at (635, 135)
• Screenshot shows dot is ~20px above the button
• Adjust: new Y = 135 + 20 = 155

Iteration 2:

• Draw dot at (635, 155)
• Screenshot shows dot is centered on "Post" button
• Click at (635, 155)
• Remove dot
• Done!

Key Points

• Max z-index (2147483647) ensures dot appears above modals/overlays
• pointer-events: none allows clicking through the dot
• No need to remove dot before clicking - click passes through
• Iterate until visually confirmed - don't guess, verify each adjustment
• Clean up after click - remove dot for cleanliness
• Maximum 5 iterations - if still not on target, report to user