align-debug

name	align-debug
description	Overlay coordinate grid on screenshots for visual debugging. Helps align UI elements by showing pixel coordinates. Invoke with /align-debug <image-path>.
lifecycle	experimental

Align Debug Skill

Overlay a coordinate grid on images to help with UI element alignment.

Usage

/align-debug /path/to/screenshot.png
/align-debug /path/to/screenshot.png --grid 50   # Custom grid size
/align-debug /path/to/screenshot.png --output /tmp/debug.png

Process

1. Load image and create grid overlay

   from PIL import Image, ImageDraw, ImageFont
   
   img = Image.open(image_path)
   draw = ImageDraw.Draw(img)
   grid_size = 100  # pixels
   
   # Draw vertical lines with coordinates
   for x in range(0, img.width, grid_size):
       draw.line([(x, 0), (x, img.height)], fill='red', width=1)
       draw.text((x + 2, 2), str(x), fill='yellow')
   
   # Draw horizontal lines with coordinates
   for y in range(0, img.height, grid_size):
       draw.line([(0, y), (img.width, y)], fill='red', width=1)
       draw.text((2, y + 2), str(y), fill='yellow')
   
   output_path = '/tmp/align_debug.png'
   img.save(output_path)
   

2. Display the result

   • Show the gridded image to user
   • Report image dimensions

Output

• Grid-overlaid image saved to /tmp/align_debug.png
• Image dimensions reported
• Ready for visual inspection

Example Script

Save as align_debug.py:

#!/usr/bin/env python3
"""Overlay coordinate grid on image for alignment debugging."""
import sys
from PIL import Image, ImageDraw, ImageFont

def add_grid(image_path, grid_size=100, output_path='/tmp/align_debug.png'):
    img = Image.open(image_path).convert('RGBA')
    overlay = Image.new('RGBA', img.size, (0, 0, 0, 0))
    draw = ImageDraw.Draw(overlay)

    # Draw grid lines
    for x in range(0, img.width, grid_size):
        draw.line([(x, 0), (x, img.height)], fill=(255, 0, 0, 128), width=1)
        draw.text((x + 2, 2), str(x), fill=(255, 255, 0, 200))

    for y in range(0, img.height, grid_size):
        draw.line([(0, y), (img.width, y)], fill=(255, 0, 0, 128), width=1)
        draw.text((2, y + 2), str(y), fill=(255, 255, 0, ))

    result = Image.alpha_composite(img, overlay)
    result.save(output_path)
    ()
    ()
     output_path

 __name__ == :
    image_path = sys.argv[]
    grid_size = (sys.argv[])  (sys.argv) >   
    add_grid(image_path, grid_size)