About screenshot-surgery
screenshot-surgery is a design-analysis skill for examining visual hierarchy, spacing, color roles, and areas of tension in a design. It imposes an observation-first structure, including numbered elements and checks for competing visual priorities.
Key features
- 01Rank visible elements by visual weight
- 02Check hierarchy against content priority
- 03Analyze spacing and grouping
- 04Classify colors by role
- 05Identify intentional and accidental tension
Use cases
- 01Review a screenshot before redesign
- 02Assess whether visual emphasis matches content
- 03Find inconsistent spacing or grouping
- 04Document competing elements before suggesting changes
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/screenshot-surgeryin Claude Code to confirm it loaded.
Details
From the project READMEScreenshot Surgery
Map the anatomy of a design like a surgeon studying an X-ray.
How to use
/screenshot-surgeryApply clinical analysis constraints to any design in this conversation.
Constraints
Hierarchy Mapping
- MUST number visible elements 1-5 by visual weight (what demands attention first, second, third)
- MUST note whether the hierarchy matches the content priority
- MUST identify competing elements (two things at the same visual weight fighting for attention)
- SHOULD note what creates the hierarchy: scale, weight, contrast, color, position, or space
Spacing Analysis
- MUST identify whether a consistent spacing unit exists
- MUST note the relationship between element grouping and proximity
- SHOULD check vertical rhythm (are baselines and section spacing predictable?)
Color Mapping
- MUST identify each color's role: structural, semantic, accent, or decorative
- MUST note if any color serves multiple conflicting roles
Tension Points
- MUST identify where visual tension exists (elements competing, almost-alignment, conflicting signals)
- MUST distinguish between intentional tension (creates energy) and accidental tension (creates confusion)
Anti-Patterns
- Adding opinions during the observation phase
- Skipping annotation and jumping to recommendations
- Missing the forest for the trees (cataloging every pixel but missing the big hierarchy problem)
Comments
Markdown supported