Initial commit

2025-11-29 18:16:40 +08:00
commit f125e90b9f
370 changed files with 67769 additions and 0 deletions
--- a/skills/benchmarking/html-to-png-converter/CHANGELOG.md
+++ b/skills/benchmarking/html-to-png-converter/CHANGELOG.md
@@ -0,0 +1,17 @@
+# Changelog
+
+All notable changes to this skill will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-11-27
+
+### Added
+- Initial skill implementation
+- Playwright CLI screenshot automation
+- Full-page capture support
+- File protocol URL handling
+- Batch conversion workflow
+- Troubleshooting reference
+- Example commands for common use cases
--- a/skills/benchmarking/html-to-png-converter/README.md
+++ b/skills/benchmarking/html-to-png-converter/README.md
@@ -0,0 +1,64 @@
+# HTML to PNG Converter
+
+A Claude Code skill for converting HTML files to PNG images using Playwright's CLI screenshot functionality.
+
+## Purpose
+
+Automates the conversion of HTML diagrams, charts, and documents to PNG images for use in:
+- Academic papers and research publications
+- Technical documentation
+- Presentations and slide decks
+- README files and project docs
+
+## Prerequisites
+
+- Node.js >= 16
+- Playwright (`npm install -g playwright` or use via `npx`)
+
+## Quick Start
+
+```bash
+# Install Playwright (if not already installed)
+npm install -g playwright
+playwright install chromium
+
+# Convert HTML to PNG
+playwright screenshot --full-page "file://$(pwd)/diagram.html" diagram.png
+```
+
+## Usage
+
+### Single File
+
+```bash
+playwright screenshot --full-page "file:///absolute/path/to/file.html" output.png
+```
+
+### Batch Conversion
+
+```bash
+for f in docs/*.html; do
+  playwright screenshot --full-page "file://$(pwd)/$f" "${f%.html}.png"
+done
+```
+
+## Key Options
+
+| Option | Description |
+|--------|-------------|
+| `--full-page` | Capture entire document (not just viewport) |
+| `--viewport-size=WxH` | Set viewport dimensions (e.g., `1920x1080`) |
+| `--wait-for-timeout=ms` | Wait before screenshot (for dynamic content) |
+
+## Troubleshooting
+
+See `reference/troubleshooting.md` for common issues and solutions.
+
+## Related Skills
+
+- **png-diagram-creator**: Creates HTML diagrams with academic styling
+- **ascii-diagram-creator**: Terminal-compatible text diagrams
+
+## License
+
+MIT
--- a/skills/benchmarking/html-to-png-converter/SKILL.md
+++ b/skills/benchmarking/html-to-png-converter/SKILL.md
@@ -0,0 +1,160 @@
+---
+name: html-to-png-converter
+description: Use PROACTIVELY when user needs to convert HTML diagrams, charts, or documents to PNG images for papers, presentations, or documentation. Automates Playwright's screenshot command with proper file:// protocol handling, full-page capture, and output organization. Triggers on "convert HTML to PNG", "export diagram to image", "screenshot HTML file", or "make PNG from HTML". Not for live website screenshots, PDF generation, or image format conversions.
+version: 0.1.0
+author: Connor
+category: documentation
+---
+
+# HTML to PNG Converter
+
+## Overview
+
+This skill automates HTML-to-PNG conversion using Playwright's CLI screenshot functionality. It handles file protocol URLs, full-page capture, and output path management for academic papers, documentation, and presentations.
+
+**Key Capabilities**:
+- **Zero-browser-launch**: Uses Playwright CLI (no script required)
+- **Full-page capture**: Captures entire document, not just viewport
+- **File protocol handling**: Properly constructs `file://` URLs from paths
+- **Batch conversion**: Convert multiple HTML files in one operation
+- **Output organization**: Consistent naming and directory structure
+
+## When to Use This Skill
+
+**Trigger Phrases**:
+- "convert this HTML to PNG"
+- "export the diagram as an image"
+- "screenshot the HTML file"
+- "make a PNG from the HTML"
+- "turn diagram.html into diagram.png"
+
+**Use Cases**:
+- Converting HTML architecture diagrams to PNG for papers
+- Exporting HTML charts/visualizations for presentations
+- Creating static images from HTML reports
+- Batch converting multiple HTML files to images
+- Generating figures for academic publications
+
+**NOT for**:
+- Capturing live websites (use browser or dedicated tools)
+- PDF generation (use Print to PDF or wkhtmltopdf)
+- Image format conversions (use ImageMagick)
+- Animated/interactive content capture
+- Screenshots of running web applications
+
+## Quick Reference
+
+### Single File Conversion
+
+```bash
+# Basic usage (npx for portability)
+npx playwright screenshot --full-page "file://$(pwd)/path/to/diagram.html" output.png
+
+# Retina/high-DPI output (2x resolution for publications)
+npx playwright screenshot --full-page --device-scale-factor=2 "file://$(pwd)/diagram.html" output@2x.png
+
+# Custom viewport size (default is 1280x720)
+npx playwright screenshot --full-page --viewport-size=1920,1080 "file://$(pwd)/diagram.html" output.png
+
+# With absolute path
+npx playwright screenshot --full-page "file:///Users/you/project/diagram.html" diagram.png
+```
+
+### Batch Conversion
+
+```bash
+# Convert all HTML files in a directory
+for f in docs/*.html; do
+  npx playwright screenshot --full-page "file://$(pwd)/$f" "${f%.html}.png"
+done
+
+# Batch with retina quality
+for f in docs/*.html; do
+  npx playwright screenshot --full-page --device-scale-factor=2 "file://$(pwd)/$f" "${f%.html}@2x.png"
+done
+```
+
+### Common Viewport Sizes
+
+| Size | Use Case |
+|------|----------|
+| `1280,720` | Default, standard diagrams |
+| `1920,1080` | Full HD presentations |
+| `800,600` | Compact figures |
+| `2560,1440` | Large architecture diagrams |
+
+## Workflow
+
+### Phase 1: Prerequisite Check
+Verify Playwright is installed with browsers.
+→ **Details**: `workflow/phase-1-prerequisites.md`
+
+### Phase 2: Path Resolution
+Construct proper file:// URLs from relative/absolute paths.
+→ **Details**: `workflow/phase-2-paths.md`
+
+### Phase 3: Screenshot Capture
+Execute Playwright screenshot command with options.
+→ **Details**: `workflow/phase-3-capture.md`
+
+### Phase 4: Output Verification
+Verify PNG was created and check dimensions/quality.
+→ **Details**: `workflow/phase-4-verification.md`
+
+## Important Reminders
+
+1. **Always use file:// protocol** - Playwright requires full URLs
+2. **Use --full-page flag** - Without it, only captures viewport (800x600)
+3. **Absolute paths are safer** - Use `$(pwd)` or full paths to avoid issues
+4. **Check browser installation** - Run `playwright install` if needed
+5. **HTML must be self-contained** - External resources need absolute paths
+
+## Troubleshooting Quick Reference
+
+| Issue | Cause | Solution |
+|-------|-------|----------|
+| "Browser not found" | Browsers not installed | `npx playwright install` |
+| Blank/white image | File path wrong | Check file:// URL format |
+| Partial capture | Missing --full-page | Add `--full-page` flag |
+| Missing images/CSS | Relative paths in HTML | Use absolute paths or embed |
+| Command not found | Playwright not in PATH | Use `npx playwright screenshot` |
+| Image too small/blurry | Standard resolution | Add `--device-scale-factor=2` for retina |
+| Wrong dimensions | Default viewport | Use `--viewport-size=WIDTH,HEIGHT` |
+
+→ **Full troubleshooting**: `reference/troubleshooting.md`
+
+## Success Criteria
+
+- [ ] Playwright installed and accessible
+- [ ] HTML file path correctly resolved
+- [ ] file:// URL properly constructed
+- [ ] Screenshot command executed successfully
+- [ ] PNG file created at expected location
+- [ ] Image dimensions match content (not 800x600 viewport)
+- [ ] All visual elements rendered correctly
+
+## Limitations
+
+- Requires Node.js and Playwright installed
+- First run downloads browsers (~500MB)
+- Cannot capture dynamic/animated content
+- External resources in HTML may not load correctly
+- Very large HTML files may take longer to render
+
+## Related Skills
+
+- **html-diagram-creator**: Create HTML diagrams for conversion to PNG
+- **markdown-to-pdf-converter**: Full document pipeline (diagrams embedded in PDFs)
+
+## Reference Materials
+
+| Resource | Purpose |
+|----------|---------|
+| `workflow/*.md` | Detailed phase instructions |
+| `reference/troubleshooting.md` | Common issues and fixes |
+| `reference/playwright-cli.md` | Full CLI options reference |
+| `examples/` | Sample conversion commands |
+
+---
+
+**Total time**: ~5 seconds per conversion (after initial setup)
--- a/skills/benchmarking/html-to-png-converter/examples/conversion-examples.md
+++ b/skills/benchmarking/html-to-png-converter/examples/conversion-examples.md
@@ -0,0 +1,120 @@
+# Conversion Examples
+
+## Example 1: Academic Diagram
+
+Converting an architecture diagram for a research paper.
+
+**Context**: You have `docs/architecture_diagram.html` and need `docs/architecture_diagram.png`.
+
+```bash
+# Navigate to project root
+cd /path/to/project
+
+# Convert with full-page capture
+playwright screenshot --full-page "file://$(pwd)/docs/architecture_diagram.html" docs/architecture_diagram.png
+
+# Verify dimensions
+sips -g pixelHeight -g pixelWidth docs/architecture_diagram.png
+```
+
+## Example 2: Bar Chart
+
+Converting a bar chart visualization.
+
+**Context**: You have `docs/loophole_rate_diagram.html` showing experimental results.
+
+```bash
+# High-resolution output for publication
+playwright screenshot --full-page --scale=2 "file://$(pwd)/docs/loophole_rate_diagram.html" docs/loophole_rate_diagram.png
+```
+
+## Example 3: Batch Conversion
+
+Converting all HTML files in a directory.
+
+**Context**: Multiple diagrams in `docs/figures/`.
+
+```bash
+# Create output directory
+mkdir -p docs/figures/png
+
+# Batch convert all HTML files
+for f in docs/figures/*.html; do
+  filename=$(basename "$f" .html)
+  playwright screenshot --full-page "file://$(pwd)/$f" "docs/figures/png/${filename}.png"
+  echo "Converted: $f"
+done
+```
+
+## Example 4: Dark Mode Variant
+
+Creating light and dark mode versions of a diagram.
+
+```bash
+# Light mode (default)
+playwright screenshot --full-page "file://$(pwd)/diagram.html" diagram-light.png
+
+# Dark mode
+playwright screenshot --full-page --color-scheme=dark "file://$(pwd)/diagram.html" diagram-dark.png
+```
+
+## Example 5: From Empathy Experiment
+
+Real example from paralleLLM project:
+
+```bash
+# Convert the loophole rate bar chart
+playwright screenshot --full-page "file://$(pwd)/docs/loophole_rate_diagram.html" docs/loophole_rate_diagram.png
+
+# Convert architecture pipeline diagram
+playwright screenshot --full-page "file://$(pwd)/docs/architecture_diagram_v2.html" docs/architecture_diagram_v2.png
+```
+
+## Example 6: With Wait for Animations
+
+When HTML has CSS transitions or animations:
+
+```bash
+# Wait 1 second for animations to complete
+playwright screenshot --full-page --wait-for-timeout=1000 "file://$(pwd)/animated-diagram.html" output.png
+```
+
+## Shell Script for Project Integration
+
+Create a reusable script `scripts/html-to-png.sh`:
+
+```bash
+#!/bin/bash
+# html-to-png.sh - Convert HTML diagrams to PNG
+# Usage: ./scripts/html-to-png.sh <input.html> [output.png]
+
+set -e
+
+INPUT="$1"
+OUTPUT="${2:-${INPUT%.html}.png}"
+
+if [ -z "$INPUT" ]; then
+  echo "Usage: $0 <input.html> [output.png]"
+  exit 1
+fi
+
+if [ ! -f "$INPUT" ]; then
+  echo "Error: File not found: $INPUT"
+  exit 1
+fi
+
+echo "Converting: $INPUT -> $OUTPUT"
+playwright screenshot --full-page "file://$(pwd)/$INPUT" "$OUTPUT"
+echo "Done! Dimensions:"
+sips -g pixelHeight -g pixelWidth "$OUTPUT"
+```
+
+Make executable:
+```bash
+chmod +x scripts/html-to-png.sh
+```
+
+Use:
+```bash
+./scripts/html-to-png.sh docs/diagram.html docs/diagram.png
+```
--- a/skills/benchmarking/html-to-png-converter/reference/playwright-cli.md
+++ b/skills/benchmarking/html-to-png-converter/reference/playwright-cli.md
@@ -0,0 +1,109 @@
+# Playwright CLI Reference
+
+## Screenshot Command
+
+```bash
+playwright screenshot [options] <url> <output>
+```
+
+## Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--full-page` | Capture full scrollable page | Off (viewport only) |
+| `--viewport-size=WxH` | Set viewport size | 800x600 |
+| `--scale=N` | Device scale factor | 1 |
+| `--wait-for-timeout=ms` | Wait before screenshot | 0 |
+| `--wait-for-selector=sel` | Wait for element | None |
+| `--color-scheme=mode` | `light` or `dark` | System |
+| `--device=name` | Emulate device | None |
+| `--timeout=ms` | Navigation timeout | 30000 |
+| `--browser=name` | Browser to use | chromium |
+
+## Browser Options
+
+```bash
+# Use specific browser
+playwright screenshot --browser=firefox "file://$(pwd)/diagram.html" output.png
+playwright screenshot --browser=webkit "file://$(pwd)/diagram.html" output.png
+playwright screenshot --browser=chromium "file://$(pwd)/diagram.html" output.png
+```
+
+## Device Emulation
+
+```bash
+# Emulate specific device
+playwright screenshot --device="iPhone 12" "file://$(pwd)/diagram.html" output.png
+playwright screenshot --device="iPad Pro" "file://$(pwd)/diagram.html" output.png
+```
+
+List all devices:
+```bash
+playwright devices
+```
+
+## Examples
+
+### Basic Full Page
+
+```bash
+playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
+```
+
+### High Resolution (2x)
+
+```bash
+playwright screenshot --full-page --scale=2 "file://$(pwd)/diagram.html" output@2x.png
+```
+
+### Dark Mode
+
+```bash
+playwright screenshot --full-page --color-scheme=dark "file://$(pwd)/diagram.html" dark.png
+```
+
+### Custom Viewport
+
+```bash
+playwright screenshot --viewport-size=1920x1080 "file://$(pwd)/diagram.html" output.png
+```
+
+### Wait for Content
+
+```bash
+# Wait 2 seconds for dynamic content
+playwright screenshot --full-page --wait-for-timeout=2000 "file://$(pwd)/diagram.html" output.png
+
+# Wait for specific element
+playwright screenshot --full-page --wait-for-selector=".loaded" "file://$(pwd)/diagram.html" output.png
+```
+
+## PDF Generation (Alternative)
+
+For PDF output instead of PNG:
+
+```bash
+playwright pdf "file://$(pwd)/document.html" output.pdf
+```
+
+PDF-specific options:
+- `--format=Letter|A4|...`
+- `--landscape`
+- `--margin=top,right,bottom,left`
+- `--print-background`
+
+## Installation Commands
+
+```bash
+# Install Playwright
+npm install -g playwright
+
+# Install browsers
+playwright install              # All browsers
+playwright install chromium     # Chromium only
+playwright install firefox      # Firefox only
+playwright install webkit       # WebKit only
+
+# Check version
+playwright --version
+```
--- a/skills/benchmarking/html-to-png-converter/reference/troubleshooting.md
+++ b/skills/benchmarking/html-to-png-converter/reference/troubleshooting.md
@@ -0,0 +1,144 @@
+# Troubleshooting Guide
+
+## Common Issues and Solutions
+
+### "Browser not found" / "Executable doesn't exist"
+
+**Cause**: Playwright browsers not installed.
+
+**Solution**:
+```bash
+# Install browsers
+playwright install chromium
+
+# Or install all browsers
+playwright install
+```
+
+### "Command not found: playwright"
+
+**Cause**: Playwright not installed globally.
+
+**Solutions**:
+```bash
+# Option 1: Install globally
+npm install -g playwright
+
+# Option 2: Use via npx (no install needed)
+npx playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
+```
+
+### Blank or White Image
+
+**Cause**: File path not resolving correctly.
+
+**Debug**:
+```bash
+# Check the file exists
+ls -la diagram.html
+
+# Check URL format (should be file://...)
+echo "file://$(pwd)/diagram.html"
+```
+
+**Solution**: Ensure using `file://` protocol with absolute path.
+
+### Image is 800x600 (Viewport Only)
+
+**Cause**: Missing `--full-page` flag.
+
+**Solution**:
+```bash
+# Add --full-page flag
+playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
+```
+
+### Missing Images/CSS in Output
+
+**Cause**: HTML uses relative paths that don't resolve in file:// context.
+
+**Solutions**:
+
+1. **Use absolute paths in HTML**:
+```html
+<!-- Instead of -->
+<img src="images/logo.png">
+<!-- Use -->
+<img src="file:///Users/you/project/images/logo.png">
+```
+
+2. **Embed images as base64**:
+```html
+<img src="data:image/png;base64,iVBORw0KGgoAAAANS...">
+```
+
+3. **Inline CSS**:
+```html
+<style>
+  /* CSS inline instead of <link> */
+</style>
+```
+
+### Fonts Not Rendering
+
+**Cause**: Web fonts not loading in file:// context.
+
+**Solutions**:
+
+1. Use system fonts:
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+```
+
+2. Embed fonts as base64 in CSS.
+
+### Slow Conversion
+
+**Cause**: Browser startup overhead or large content.
+
+**Solutions**:
+```bash
+# For batch operations, reuse browser (requires script)
+# For single operations, ~3-5 seconds is normal
+
+# If content is dynamic, reduce wait time
+playwright screenshot --full-page --wait-for-timeout=500 "file://$(pwd)/diagram.html" output.png
+```
+
+### Permission Denied
+
+**Cause**: Cannot write to output directory.
+
+**Solution**:
+```bash
+# Check directory permissions
+ls -la $(dirname output.png)
+
+# Create directory if needed
+mkdir -p docs/images
+```
+
+### Fuzzy/Blurry Text
+
+**Cause**: Low DPI capture.
+
+**Solution**:
+```bash
+# Use 2x scale for retina-quality output
+playwright screenshot --full-page --scale=2 "file://$(pwd)/diagram.html" output.png
+```
+
+## Debug Mode
+
+For detailed troubleshooting:
+
+```bash
+# Enable debug output
+DEBUG=pw:api playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
+```
+
+## Getting Help
+
+1. Check Playwright docs: https://playwright.dev/docs/cli
+2. Verify HTML renders in browser: `open diagram.html`
+3. Test with simple HTML first to isolate issue
--- a/skills/benchmarking/html-to-png-converter/workflow/phase-1-prerequisites.md
+++ b/skills/benchmarking/html-to-png-converter/workflow/phase-1-prerequisites.md
@@ -0,0 +1,53 @@
+# Phase 1: Prerequisites Check
+
+## Overview
+
+Before converting HTML to PNG, verify Playwright is installed and browsers are available.
+
+## Steps
+
+### 1.1 Check Playwright Installation
+
+```bash
+# Check if playwright is available
+playwright --version
+```
+
+**If not found**:
+```bash
+# Install globally
+npm install -g playwright
+
+# Or use via npx (no global install)
+npx playwright --version
+```
+
+### 1.2 Install Browsers
+
+```bash
+# Install all browsers
+playwright install
+
+# Or just Chromium (smallest, ~150MB)
+playwright install chromium
+```
+
+### 1.3 Verify Setup
+
+```bash
+# Quick test - should create a PNG of example.com
+playwright screenshot https://example.com test.png && rm test.png
+echo "Playwright setup verified!"
+```
+
+## Common Issues
+
+| Issue | Solution |
+|-------|----------|
+| `command not found: playwright` | `npm install -g playwright` or use `npx playwright` |
+| Browser not found | Run `playwright install chromium` |
+| Permission denied | Use `sudo npm install -g playwright` or fix npm permissions |
+
+## Next Phase
+
+Once prerequisites are verified, proceed to **Phase 2: Path Resolution**.
--- a/skills/benchmarking/html-to-png-converter/workflow/phase-2-paths.md
+++ b/skills/benchmarking/html-to-png-converter/workflow/phase-2-paths.md
@@ -0,0 +1,67 @@
+# Phase 2: Path Resolution
+
+## Overview
+
+Playwright's screenshot command requires properly formatted `file://` URLs. This phase covers path construction patterns.
+
+## URL Format
+
+Playwright requires URLs, not bare file paths:
+
+```
+file:// + absolute_path = valid URL
+```
+
+## Path Patterns
+
+### From Current Directory
+
+```bash
+# Using $(pwd) for absolute path
+playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
+```
+
+### From Absolute Path
+
+```bash
+# Direct absolute path
+playwright screenshot --full-page "file:///Users/connor/project/diagram.html" output.png
+```
+
+### Handling Spaces in Paths
+
+```bash
+# Quote the entire URL
+playwright screenshot --full-page "file://$(pwd)/my diagram.html" output.png
+```
+
+### Relative to Project Root
+
+```bash
+# Navigate from any subdirectory
+playwright screenshot --full-page "file://$(git rev-parse --show-toplevel)/docs/diagram.html" output.png
+```
+
+## Path Validation
+
+Before running conversion, verify the file exists:
+
+```bash
+# Check file exists
+test -f "diagram.html" && echo "File found" || echo "File not found"
+
+# List HTML files in current directory
+ls -la *.html
+```
+
+## Anti-Patterns
+
+| Wrong | Correct |
+|-------|---------|
+| `playwright screenshot diagram.html` | `playwright screenshot "file://$(pwd)/diagram.html"` |
+| `playwright screenshot ./diagram.html` | `playwright screenshot "file://$(pwd)/diagram.html"` |
+| `playwright screenshot file:diagram.html` | `playwright screenshot "file://$(pwd)/diagram.html"` |
+
+## Next Phase
+
+Once path is resolved, proceed to **Phase 3: Screenshot Capture**.
--- a/skills/benchmarking/html-to-png-converter/workflow/phase-3-capture.md
+++ b/skills/benchmarking/html-to-png-converter/workflow/phase-3-capture.md
@@ -0,0 +1,71 @@
+# Phase 3: Screenshot Capture
+
+## Overview
+
+Execute the Playwright screenshot command with appropriate options for your use case.
+
+## Basic Command
+
+```bash
+playwright screenshot --full-page "file://$(pwd)/diagram.html" output.png
+```
+
+## Command Options
+
+| Option | Purpose | Example |
+|--------|---------|---------|
+| `--full-page` | Capture entire document | Required for most diagrams |
+| `--viewport-size=WxH` | Set initial viewport | `--viewport-size=1920x1080` |
+| `--wait-for-timeout=ms` | Wait before capture | `--wait-for-timeout=1000` |
+| `--device=name` | Emulate device | `--device="iPhone 12"` |
+| `--color-scheme=mode` | Light/dark mode | `--color-scheme=dark` |
+
+## Common Patterns
+
+### Academic Diagrams (Most Common)
+
+```bash
+# Full page capture - lets content determine size
+playwright screenshot --full-page "file://$(pwd)/docs/architecture.html" docs/architecture.png
+```
+
+### Fixed Width Output
+
+```bash
+# Set specific width, full page height
+playwright screenshot --full-page --viewport-size=1200x800 "file://$(pwd)/diagram.html" output.png
+```
+
+### Wait for Dynamic Content
+
+```bash
+# Wait 2 seconds for animations/rendering
+playwright screenshot --full-page --wait-for-timeout=2000 "file://$(pwd)/diagram.html" output.png
+```
+
+### Dark Mode Diagram
+
+```bash
+playwright screenshot --full-page --color-scheme=dark "file://$(pwd)/diagram.html" output-dark.png
+```
+
+## Batch Conversion
+
+```bash
+# Convert all HTML files in docs/ to PNG
+for f in docs/*.html; do
+  output="${f%.html}.png"
+  playwright screenshot --full-page "file://$(pwd)/$f" "$output"
+  echo "Converted: $f -> $output"
+done
+```
+
+## Output Location
+
+- **Same directory**: Just use filename (`output.png`)
+- **Different directory**: Use path (`docs/images/output.png`)
+- **Ensure directory exists**: `mkdir -p docs/images` before running
+
+## Next Phase
+
+Proceed to **Phase 4: Output Verification** to validate the result.
--- a/skills/benchmarking/html-to-png-converter/workflow/phase-4-verification.md
+++ b/skills/benchmarking/html-to-png-converter/workflow/phase-4-verification.md
@@ -0,0 +1,84 @@
+# Phase 4: Output Verification
+
+## Overview
+
+After conversion, verify the PNG was created correctly with expected dimensions and content.
+
+## Verification Steps
+
+### 4.1 Check File Exists
+
+```bash
+# Verify file was created
+test -f output.png && echo "PNG created successfully" || echo "ERROR: PNG not found"
+```
+
+### 4.2 Check File Size
+
+```bash
+# Non-zero file size indicates content
+ls -lh output.png
+
+# If file is very small (<1KB), something may be wrong
+```
+
+### 4.3 Check Dimensions (macOS)
+
+```bash
+# Using sips (built into macOS)
+sips -g pixelHeight -g pixelWidth output.png
+```
+
+**Expected output**:
+```
+  pixelHeight: 1200
+  pixelWidth: 800
+```
+
+**Warning signs**:
+- 800x600 = viewport-only capture (missing `--full-page`)
+- Very small dimensions = content not rendering
+
+### 4.4 Visual Inspection
+
+```bash
+# Open in default image viewer (macOS)
+open output.png
+
+# Or in Preview specifically
+open -a Preview output.png
+```
+
+## Common Issues and Fixes
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| 800x600 dimensions | No `--full-page` | Add `--full-page` flag |
+| Blank/white image | Wrong file path | Check `file://` URL |
+| Missing images | Relative paths in HTML | Use absolute paths or embed base64 |
+| Cut off content | Viewport too small | Use `--full-page` or increase viewport |
+| Fuzzy text | Low DPI | Add `--scale=2` for retina |
+
+## Quality Checks
+
+- [ ] File exists and has reasonable size (>10KB for diagrams)
+- [ ] Dimensions match content (not 800x600)
+- [ ] All visual elements rendered (text, colors, borders)
+- [ ] No blank areas or missing components
+- [ ] Text is readable and sharp
+
+## Retina/High-DPI Output
+
+For sharper images (publications):
+
+```bash
+# 2x scale for retina
+playwright screenshot --full-page --scale=2 "file://$(pwd)/diagram.html" diagram@2x.png
+```
+
+## Cleanup
+
+```bash
+# Remove test files if any
+rm -f test.png
+```