メニュー
Overlay coordinate grid on screenshots for visual debugging. Helps align UI elements by showing pixel coordinates. Invoke with /align-debug <image-path>.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Arete-Consortium/ai-skills --skill align-debugコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Intelligent CI failure diagnosis and guided remediation for GitHub Actions, GitLab CI, and local builds
Pre-execution mapping of codebases, document collections, or problem spaces. Runs BEFORE any Gorgon workflow to give all agents shared situational awareness
Investigative methodology for analyzing document collections — provenance analysis, anomaly detection, redaction detection, and cross-document validation
SKILL.md を表示中
| 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 |
Overlay a coordinate grid on images to help with UI element alignment.
/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
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)
Display the result
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)