appshots-overlay-management

Installation
SKILL.md

App Screenshots Overlay Management

Create and manage overlays on screenshot designs: text, images, icons, and magnifiers.

Text Overlays

Best Practice: Screenshot Copy Rules

Screenshots are advertisements, not documentation. Each caption sells one idea.

  • 3–5 words per line (max 2 lines) — must read at thumbnail size
  • Benefits, not features ("Save 2hrs/week" not "Automatic tracking")
  • One idea per headline — never join with "and"
  • Text < 20% of image area
  • Top 25–30% of canvas (above device frame)
  • Centered alignment with full-width text box

Three approaches per caption:

Type What it does Example
Paint a moment Picture yourself doing it "Check your streak without opening the app"
State an outcome Life after using the app "A home for every habit you build"
Kill a pain Name a problem, destroy it "Never lose your daily streak"

Add Text (Centered — Recommended)

# The centering formula: --x 0 --width <canvas-width> --align center
appshots editor add-text \
  --text "Track Your Habits" \
  --font "Poppins" --size 90 \
  --color "#FFFFFF" \
  --y 80 --x 0 \
  --width 1290 --align center
Canvas Width Value
iPhone 6.9" 1320
iPhone 6.7" 1290
iPhone 6.5" 1284
iPad Pro 13" 2064
Mac 2880

Add Text (Multi-line)

appshots editor add-text \
  --text "Your Habits\nYour Way" \
  --font "Poppins" --size 80 \
  --color "#FFFFFF" \
  --y 60 --x 0 \
  --width 1290 --align center

Update Text

appshots editor update-text --id <overlay-id> \
  --text "New Text" --font "Inter" --size 72 --color "#000000" \
  --x 50 --y 100 --width 900 --align right \
  --scale 1.2 --rotation 5

Text Alignment Options

Option Behavior Requires --width?
--align left Left-aligned No (but recommended)
--align center Centered in text box ✅ Yes
--align right Right-aligned in text box ✅ Yes

Recommended Fonts

Category Fonts Use Case
Modern sans-serif Poppins, Inter, Outfit, Montserrat Universal headlines
Bold display Raleway, Oswald, Bebas Neue Strong statements
CJK Japanese Noto Sans JP, M PLUS 1p Japanese text
CJK Korean Noto Sans KR, Gothic A1 Korean text
CJK Chinese Noto Sans SC/TC Chinese text
# Browse available fonts
appshots editor list-fonts --query "poppins" --limit 50

Image Overlays

# Add image overlay
appshots editor add-image --file /path/to/badge.png --x 100 --y 200 --width 300 --height 300

# Update position, size, opacity
appshots editor update-image --id <id> \
  --x 50 --y 100 --width 400 --height 400 \
  --scale 1.5 --rotation 15 --opacity 0.8

Icon Overlays

# Search icons (Material Symbols + SF Symbols)
appshots editor list-icons --query "star" --style material
appshots editor list-icons --query "heart" --style sf

# Add icon
appshots editor add-icon --codePoint 57424 --size 60 --color "#FFFFFF"

# Update icon
appshots editor update-icon --id <id> --size 80 --color "#FF0000" --rotation 45 --opacity 0.8

Magnifier Overlays

Magnifier overlays create zoom-in callouts to highlight specific UI details:

# Add magnifier
appshots editor add-magnifier

# Update magnifier properties
appshots editor update-magnifier --id <id> \
  --x 100 --y 200 --width 300 --height 300 \
  --zoom 2.5 --corner-radius 20

Overlay Management

Listing & Selecting

appshots editor list-overlays                    # See all overlays with IDs
appshots editor select-overlay --id <overlay-id>  # Select by ID

Positioning

appshots editor move-overlay --dx 10 --dy -5     # Move relative to current position

Copy, Paste, Delete

appshots editor copy-overlay                     # Copy selected overlay
appshots editor paste-overlay                    # Paste from clipboard
appshots editor delete-overlay --id <overlay-id>  # Delete specific overlay

Z-Order (Layering)

appshots editor bring-forward                    # Move up one layer
appshots editor send-backward                    # Move down one layer

Grid & Alignment

Use the alignment grid for precise positioning:

appshots editor set-grid --show --snap --dots --center --size 50
Flag Effect
--show Show grid lines
--snap Enable snap-to-grid
--dots Use dot grid style
--center Show center lines
--size N Grid cell size in pixels
Related skills
Installs
6
GitHub Stars
1
First Seen
Mar 19, 2026