Screenshot Processor

Source Format

Screenshots are annotated in OmniGraffle and exported as PNG files. The OmniGraffle source file (docs/reference/manual/screenshots.graffle) contains one canvas per screenshot.

Annotation Style

• Highlight boxes: orange #eb6900 rounded-rectangle outlines drawn around target UI elements
• Numbered markers: orange 16-pointed starburst badges with white bold number (Roboto Bold 18px), positioned at the top-left corner of the highlight box
• Shadow: white inner glow behind annotations for contrast against dark backgrounds

Export Settings

Annotated screenshots must be exported from OmniGraffle to PNG at 72 dpi. Each canvas exports as a separate PNG file.

File Layout

• OmniGraffle source: docs/reference/manual/screenshots.graffle
• Exported PNGs: docs/reference/manual/screenshots/{canvas-name}.png
• Documentation: docs/reference/manual/index.md

Naming Convention

Canvas names in OmniGraffle determine the exported PNG filenames. Names must use kebab-case and match the documentation section they illustrate (for example, analyse-agreement, filter-issues, detach-policy-1-2).

Multi-step sequences use a {name}-{step}-{total} suffix (for example, delete-agreement-1-2, delete-agreement-2-2).

Screenshot Reuse

The same base screenshot can be duplicated across multiple OmniGraffle canvases and annotated differently. For instance, a populated Issues view serves as base for: filter-issues, clear-issues-1-2, collapse-references, classify-issue, transition-issue, annotate-issue-1-2.

Screenshot Workflows

For Planning Annotations

1. Read the manual section: identify the numbered steps and which UI elements each step references
2. Map markers to elements: assign a marker number to each UI element matching the step number
3. Describe placement: specify the UI element name, approximate position, and marker number for each annotation

For Verifying Exports

1. Read the PNG: inspect the exported screenshot to confirm annotations are visible and correctly placed
2. Check naming: verify the filename matches the expected kebab-case convention
3. Cross-reference manual: confirm marker numbers match the step numbers in the documentation text

For Managing Files

1. Check directory: list PNGs in docs/reference/manual/screenshots/ to identify missing or extra files
2. Cross-reference manual: compare image references in index.md against actual files
3. Report gaps: list any missing screenshots or orphaned files

Quality Validation

Before finalizing screenshots, verify:

Annotations:

• Highlight boxes surround the correct UI elements with consistent padding
• Markers are positioned at the top-left corner of their highlight box
• Numbers are sequential (1, 2, 3, ...) within each screenshot
• Numbers match the documentation step numbers
• No annotations overlap or obscure important UI content
• All annotations use #eb6900 orange colour with Roboto Bold 18px markers

Files:

• File names follow kebab-case convention
• Every image reference in index.md has a corresponding PNG file
• No orphaned PNGs (files present but unreferenced in the manual)
• PNGs are exported at 72 dpi