screenshot-analyzer

Analyze UI screenshots to map coordinates and suggested selectors for testing.

1|Updated May 5, 2025
One-click install
npx skills add https://github.com/jdeweedata/circletel --skill screenshot-analyzer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: screenshot-analyzer
Source: https://github.com/jdeweedata/circletel/tree/main/.claude/skills/screenshot-analyzer
Command: npx skills add https://github.com/jdeweedata/circletel --skill screenshot-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps UI testers and developers translate visual UI issues into precise coordinates for elements, enabling accurate problem reproduction and automation targeting.

Core Features & Use Cases

  • Coordinate mapping: derive exact (x, y) positions from screenshots to guide clicks or verifications.
  • Playwright/Test integration: generate reliable selectors or coordinate-based actions to accelerate test creation.
  • UI debugging support: assists debugging responsive layouts, overlays, and element visibility from captured images.

Quick Start

Use the screenshot-analyzer on a provided screenshot to extract coordinates, then incorporate them into your UI tests or debugging notes.

Frequently Asked Questions about screenshot-analyzer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get exact UI coordinates from a screenshot for Playwright test automation?

To extract exact UI coordinates from a screenshot for Playwright, provide a clear image and a known viewport. The analyzer maps precise (x, y) positions and outputs suggested selectors to generate coordinate-based actions for test automation.

What is screenshot coordinate mapping used for in UI debugging?

Screenshot coordinate mapping translates visual layout problems into exact element positions for UI debugging. It assists developers in reproducing responsive design issues, analyzing overlays, and verifying element visibility from captured images.

Can I use a screenshot to generate selectors for responsive design analysis?

Yes, you can use a clear screenshot with a known viewport to generate suggested selectors for responsive design analysis. The analyzer maps precise coordinates from the image to help target elements and reproduce UI bugs across different devices.

Do I need a known viewport size to map coordinates from a UI screenshot?

Yes, a known viewport size is required to accurately map coordinates from a UI screenshot. Providing the viewport context enables the precise calculation of exact (x, y) positions for elements and ensures the output selectors work correctly.

What are the limitations of using screenshots for UI test target creation?

A limitation of using screenshots for UI test target creation is the requirement for clear images and a known viewport. Without accurate inputs, the derived coordinates and suggested selectors may not reliably guide clicks or verifications in testing frameworks.