Review UI Screenshots Skill

Analyze UI screenshots captured during testing to identify visual issues, UX problems, and suggest improvements.

When to Use

After /download-ci-artifacts retrieves screenshots
After running Slicer integration tests locally
When asked to "review the UI"
When asked to "improve the widget"

Screenshot Location

# From CI artifacts
ls ci-artifacts/screenshots/
cat ci-artifacts/screenshots/manifest.json

# From local test run
ls MouseMaster/Testing/Python/screenshots/
cat MouseMaster/Testing/Python/screenshots/manifest.json

Manifest Format

{
  "screenshots": [
    {
      "filename": "001.png",
      "description": "[MouseMaster] Initial state",
      "group": "full_workflow",
      "capture_type": "widget",
      "metadata": {"widget_class": "QWidget"}
    }
  ]
}

Analysis Workflow

1. Read the manifest

cat ci-artifacts/screenshots/manifest.json | python -m json.tool

2. Review each screenshot

For each screenshot, Claude Code can view the image:

# View screenshot (Claude Code can read images)
# Just provide the path and Claude will analyze it

3. Check for issues

Layout Issues

[ ] Widgets properly aligned
[ ] Spacing consistent
[ ] No overlapping elements
[ ] Responsive to window size

Text Issues

[ ] Labels readable
[ ] No truncated text
[ ] Proper capitalization
[ ] Consistent terminology

State Issues

[ ] Correct enabled/disabled states
[ ] Selection highlighting visible
[ ] Error states clear
[ ] Loading indicators present

Usability Issues

[ ] Controls discoverable
[ ] Actions have feedback
[ ] Navigation intuitive
[ ] Error messages helpful

4. Document findings

## Screenshot Review: [filename]

**Description**: [from manifest]
**Workflow Step**: [what user just did]

### Issues Found
- [ ] Issue 1 description
- [ ] Issue 2 description

### Recommendations
1. Recommendation 1
2. Recommendation 2

### Code Changes Needed
- `MouseMaster.py:line` - Change X to Y

Common UI Fixes

Alignment issues

# Use layouts instead of absolute positioning
layout = qt.QVBoxLayout()
layout.addWidget(self.label)
layout.addWidget(self.combo)

Text truncation

# Set minimum width
self.comboBox.setMinimumWidth(200)

# Or use elide mode
self.label.setTextElideMode(qt.Qt.ElideRight)

Disabled state unclear

# Add tooltip explaining why disabled
self.button.setToolTip("Select a mouse first")

Missing feedback

# Add status message
slicer.util.showStatusMessage("Preset saved", 2000)

Workflow Comparison

Compare sequential screenshots to verify:

State transitions - UI updates after actions
Data persistence - Selections maintained
Error recovery - UI recovers from errors

Integration with Code

After identifying issues, edit the widget code:

# MouseMaster/MouseMaster.py - MouseMasterWidget class

def setup(self):
    # Apply fixes here
    pass

Report Format

## UI Screenshot Review Report

**Screenshots Analyzed**: X
**Issues Found**: Y

### Critical Issues (fix immediately)
| Screenshot | Issue | Fix |
|------------|-------|-----|
| 003.png | Button truncated | Increase min width |

### Minor Issues (nice to have)
| Screenshot | Issue | Recommendation |
|------------|-------|----------------|
| 005.png | Inconsistent spacing | Use standard margins |

### Positive Observations
- Widget layout is clean
- Color scheme consistent

### Recommended Changes
1. File: line - Change
2. File: line - Change

Verification

After making changes:

Run Slicer integration tests
Compare new screenshots to old
Verify issues resolved

Related Skills

/download-ci-artifacts - Get screenshots
/analyze-test-results - Fix test failures
/generate-screenshots - Capture new screenshots