skills.rest
Arete-Consortium
Arete-ConsortiumOFFICIAL
Explore all skills by this author →
GitHub

align-debug

Overlays a coordinate grid on screenshots to debug UI element alignment.

4|2|Updated Jan 27, 2026
Search Tags:#screenshot#visual debugging#pillow#ui alignment#image overlay#pixel coordinates#coordinate grid
One-click install
npx skills add https://github.com/Arete-Consortium/ai-skills --skill align-debug-arete-consortium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: align-debug
Source: https://github.com/Arete-Consortium/ai-skills/tree/main/personas/web/align-debug
Command: npx skills add https://github.com/Arete-Consortium/ai-skills --skill align-debug-arete-consortium

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow.

What problem does it solve? When aligning UI elements, it is hard to judge exact pixel positions from a plain screenshot. This Skill overlays a labeled coordinate grid on any image so you can read off precise x/y positions and verify alignment visually. ## Core Features & Use Cases - Coordinate Grid Overlay: Draws red grid lines with yellow pixel coordinate labels on top of any image using Python and Pillow. - Configurable Grid Spacing: Accepts a custom grid size (default 100 pixels) and a custom output path via command-line arguments. - Use Case: A designer reports that a button looks off-center. Run the Skill on the page screenshot, read the button's pixel coordinates from the grid, and compare them against the intended layout values. ## Quick Start Ask the assistant to run /align-debug on your screenshot file, optionally specifying a grid size such as 50 pixels, and it will save the gridded image to /tmp/align_debug.png and report the image dimensions.

Frequently Asked Questions about align-debug

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

FAQPage Schema
How do I overlay a coordinate grid on a screenshot in Python?▼

Use Pillow's ImageDraw to draw vertical and horizontal lines at fixed pixel intervals, then label each line with its coordinate using draw.text. Composite the overlay onto the original image with Image.alpha_composite and save the result.

How to check pixel alignment of UI elements from a screenshot?▼

Overlay a coordinate grid on the screenshot so each element's x and y position is readable directly from the labeled grid lines. Compare those coordinates against your layout specification to detect misalignment.

Can I change the grid spacing when overlaying coordinates on an image?▼

Yes, pass a custom grid size as a command-line argument, for example --grid 50 for 50-pixel spacing. The default spacing is 100 pixels if no value is provided.

What image formats does Pillow support for grid overlays?▼

Pillow supports common formats including PNG, JPEG, BMP, and GIF through Image.open. The script converts images to RGBA before compositing, so transparency-based overlays work across these formats.

Why is my grid overlay not visible on the saved image?▼

The overlay may fail if the image is not converted to RGBA before alpha compositing, or if the output path is not writable. Ensure Image.open is followed by .convert('RGBA') and check that the output directory exists.

Related Skills

Explore More Design & Creative Skills→
GGPromptsGGPrompts
147

tabz-browser

Automate Chrome browser tasks with Tabz MCP tools for screenshots, forms, and network debugging.

Community
Advanced
zeitwertzeitwert

pixel-perfect-report-layout

Convert measured element positions into absolute CSS rules for HTML print reports.

Official
Basic
BruceTyndallBruceTyndall

visual-regression-checker

Capture and compare web application screenshots against a baseline to detect visual drift.

Community
Intermediate
ksciuskscius
2

visual-qa-testing

Automate visual QA by launching Cursor's browser, capturing screenshots, and auditing console and network activity.

Community
Intermediate