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-diagram-creator/CHANGELOG.md
+++ b/skills/benchmarking/html-diagram-creator/CHANGELOG.md
@@ -0,0 +1,17 @@
+# Changelog
+
+All notable changes to the html-diagram-creator 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 release with publication-quality HTML diagram generation
+- Academic styling based on HELM, BetterBench, EleutherAI papers
+- Color-coded component stages (Data/Execution/Analysis)
+- Three copy-paste templates (Linear, Branching, Comparison)
+- Arrow SVG snippets for horizontal, vertical, and bidirectional flows
+- Integration guidance with html-to-png-converter and markdown-to-pdf-converter
+- Mandatory completion checklist for quality assurance
--- a/skills/benchmarking/html-diagram-creator/README.md
+++ b/skills/benchmarking/html-diagram-creator/README.md
@@ -0,0 +1,48 @@
+# HTML Diagram Creator
+
+Publication-quality architecture diagrams as HTML files following academic paper conventions.
+
+## Overview
+
+This skill generates HTML-based diagrams styled after major ML benchmark papers (HELM, BetterBench, EleutherAI Evaluation Harness). Output can be exported to PNG for embedding in research papers, documentation, and presentations.
+
+## Key Features
+
+- **Academic styling**: Rounded corners, subtle shadows, figure numbering
+- **Color-coded stages**: Data Preparation (blue), Execution (green), Analysis (orange)
+- **TikZ-inspired design**: Follows LaTeX academic paper conventions
+- **Export-ready**: HTML viewable in browser, exportable to PNG via Playwright
+
+## Quick Start
+
+```bash
+# Trigger the skill
+"Create an architecture diagram for [your pipeline]"
+
+# Export to PNG (after HTML is generated)
+npx playwright screenshot --full-page --device-scale-factor=2 "file://$(pwd)/diagram.html" diagram@2x.png
+```
+
+## Trigger Phrases
+
+- "create an architecture diagram"
+- "make a pipeline diagram for my paper"
+- "publication-ready figure"
+- "academic diagram"
+- "benchmark visualization"
+
+## Templates Available
+
+- **Linear Pipeline**: 3-box horizontal flow
+- **Branching Architecture**: Y-split parallel paths
+- **Comparison**: Before/After side-by-side
+
+## Related Skills
+
+- `html-to-png-converter` - Export HTML diagrams to PNG
+- `markdown-to-pdf-converter` - Embed PNG in professional PDFs
+- `ascii-diagram-creator` - Terminal-compatible text diagrams
+
+## Documentation
+
+See [SKILL.md](SKILL.md) for complete templates, CSS reference, and workflow details.
--- a/skills/benchmarking/html-diagram-creator/SKILL.md
+++ b/skills/benchmarking/html-diagram-creator/SKILL.md
@@ -0,0 +1,146 @@
+---
+name: html-diagram-creator
+version: 0.1.0
+description: Use PROACTIVELY when user needs publication-quality architecture diagrams for research papers, documentation, or presentations. Triggers on "architecture diagram", "pipeline diagram", "figure for paper", "academic diagram", "benchmark visualization", or "publication-ready figure". Generates HTML diagrams following academic paper conventions (HELM, BetterBench, EleutherAI) with proper color coding, rounded corners, figure numbering, and export to PNG. Not for ASCII diagrams or flowcharts.
+---
+
+# HTML Diagram Creator
+
+## Overview
+
+Generates **publication-quality architecture diagrams** as HTML files for research papers, documentation, and presentations. Follows academic conventions from HELM, BetterBench, and EleutherAI papers.
+
+**Key Capabilities**:
+- Academic styling (rounded corners, shadows, figure numbering)
+- Color-coded components (Data/Execution/Analysis stages)
+- Browser-based with PNG export via Playwright
+- Stage grouping with labels and legends
+
+## When to Use This Skill
+
+**Trigger Phrases**:
+- "create an architecture diagram"
+- "make a pipeline diagram for my paper"
+- "publication-ready figure"
+- "academic diagram"
+- "benchmark visualization"
+
+**Use PROACTIVELY when**:
+- User is writing research documentation or papers
+- User mentions "publication", "paper", "academic"
+- User requests "PNG diagram" or "exportable diagram"
+
+**Do NOT use when**:
+- User wants ASCII diagrams (use ascii-diagram-creator)
+- User needs interactive flowcharts (use Mermaid)
+- User wants UML diagrams
+
+## Quick Reference
+
+### Color Palette
+
+| Stage | Fill | Border | Usage |
+|-------|------|--------|-------|
+| Data Preparation | `#E3F2FD` | `#1976D2` | Input processing, loaders |
+| Execution | `#E8F5E9` | `#388E3C` | API calls, inference |
+| Analysis | `#FFF3E0` | `#F57C00` | Evaluation, scoring |
+| Terminals | `#FF6B6B` | `#FF6B6B` | Input/Output markers |
+
+### Visual Standards
+
+| Element | Implementation |
+|---------|----------------|
+| Corners | `border-radius: 6px` |
+| Shadows | `box-shadow: 0 2px 4px rgba(0,0,0,0.08)` |
+| Arrows | Dark slate `#546E7A` with triangular heads |
+| Figure label | "Figure N" format above title |
+
+## Workflow
+
+| Phase | Description | Details |
+|-------|-------------|---------|
+| 1 | Requirements Gathering | Identify components, flow type, stage categories |
+| 2 | HTML Generation | Create standalone HTML with academic CSS |
+| 3 | Component Layout | Structure with flexbox alignment |
+| 4 | Export | PNG via Playwright or screenshot |
+
+### Phase 1: Requirements
+
+1. **Identify components**: What boxes/stages need to be shown?
+2. **Determine flow**: Linear pipeline? Branching? Multi-path?
+3. **Categorize stages**: Data (blue), Execution (green), Analysis (orange)
+
+### Phase 2: HTML Structure
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>[Diagram Title]</title>
+  <style>/* Academic styling */</style>
+</head>
+<body>
+  <div class="diagram-container">
+    <div class="figure-label">Figure [N]</div>
+    <h2 class="diagram-title">[Title]</h2>
+    <!-- Pipeline components -->
+    <p class="figure-caption">[Caption]</p>
+  </div>
+</body>
+</html>
+```
+
+### Phase 3: Component Layout
+
+```html
+<div class="pipeline">
+  <div class="component-box data-prep">
+    <span class="component-name">[Name]</span>
+    <span class="component-tech">[Tech]</span>
+  </div>
+  <div class="arrow"></div>
+  <!-- More components -->
+</div>
+```
+
+### Phase 4: Export
+
+```bash
+# Retina quality (recommended)
+npx playwright screenshot --full-page --device-scale-factor=2 \
+  "file://$(pwd)/diagram.html" diagram@2x.png
+
+# Standard resolution
+npx playwright screenshot --full-page "file://$(pwd)/diagram.html" diagram.png
+```
+
+## Templates
+
+Copy-paste ready templates available in [reference/html-templates.md](reference/html-templates.md):
+- **Linear Pipeline**: 3-box horizontal flow
+- **Branching Architecture**: Y-split parallel paths
+- **Comparison**: Before/After side-by-side
+- **Arrow Snippets**: Horizontal, vertical, bidirectional
+
+## Reference
+
+- [HTML Templates](reference/html-templates.md) - Copy-paste ready diagrams
+- [CSS Components](reference/css-components.md) - Complete class definitions
+- [Additional Templates](reference/templates.md) - More pipeline variants
+
+## Completion Checklist
+
+- [ ] HTML file generated with academic styling
+- [ ] Figure numbering applied
+- [ ] Color-coded by stage
+- [ ] Rounded corners (6px) and shadows
+- [ ] Export method explained
+
+## Related Skills
+
+- **html-to-png-converter**: Export HTML to PNG with retina support
+- **markdown-to-pdf-converter**: Embed diagrams in PDFs
+- **ascii-diagram-creator**: Terminal-compatible text diagrams
+
+**Pipeline**: Create diagram → Export to PNG → Embed in markdown → Generate PDF
--- a/skills/benchmarking/html-diagram-creator/reference/css-components.md
+++ b/skills/benchmarking/html-diagram-creator/reference/css-components.md
@@ -0,0 +1,276 @@
+# CSS Components Reference
+
+Complete CSS class definitions for academic-style diagrams.
+
+## Base Container
+
+```css
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: #ffffff;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+}
+
+.diagram-container {
+  background: #fafbfc;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 40px 50px;
+  max-width: 1200px;
+}
+```
+
+## Typography
+
+```css
+.figure-label {
+  font-size: 12px;
+  color: #57606a;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.diagram-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #24292f;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.figure-caption {
+  text-align: center;
+  margin-top: 25px;
+  font-size: 12px;
+  color: #57606a;
+  font-style: italic;
+}
+```
+
+## Stage Labels
+
+```css
+.stage-labels {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 30px;
+  margin-bottom: 15px;
+}
+
+.stage-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #6e7781;
+  text-align: center;
+}
+```
+
+## Component Boxes
+
+```css
+.component {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.component-box {
+  width: 130px;
+  height: 72px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+  border: 1px solid;
+}
+
+.component-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #24292f;
+  line-height: 1.3;
+}
+
+.component-tech {
+  font-size: 9px;
+  color: #57606a;
+  margin-top: 4px;
+  font-style: italic;
+}
+```
+
+## Color-Coded Stages
+
+```css
+/* Data Preparation - Blue */
+.component-box.data-prep {
+  background: #e3f2fd;
+  border-color: #1976d2;
+}
+
+/* Execution - Green */
+.component-box.execution {
+  background: #e8f5e9;
+  border-color: #388e3c;
+}
+
+/* Analysis - Orange */
+.component-box.analysis {
+  background: #fff3e0;
+  border-color: #f57c00;
+}
+```
+
+## Data Labels
+
+```css
+.data-label {
+  font-size: 9px;
+  color: #57606a;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  height: 14px;
+}
+```
+
+## Terminal Circles
+
+```css
+.terminal {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.terminal.input {
+  background: #fff;
+  border: 3px solid #ff6b6b;
+  color: #ff6b6b;
+}
+
+.terminal.output {
+  background: #ff6b6b;
+  border: 3px solid #ff6b6b;
+  color: #fff;
+}
+```
+
+## Arrows
+
+```css
+.arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  flex-shrink: 0;
+  padding-top: 20px;
+}
+
+.arrow svg {
+  width: 40px;
+  height: 16px;
+}
+
+.arrow path {
+  fill: none;
+  stroke: #546e7a;
+  stroke-width: 2;
+}
+
+.arrow polygon {
+  fill: #546e7a;
+}
+```
+
+**Arrow SVG Template**:
+```html
+<svg viewBox="0 0 40 16">
+  <path d="M0,8 L30,8" />
+  <polygon points="30,4 38,8 30,12" />
+</svg>
+```
+
+## Stage Brackets
+
+```css
+.stage-brackets {
+  display: flex;
+  justify-content: center;
+  padding: 0 30px;
+  margin-top: 5px;
+}
+
+.bracket {
+  height: 12px;
+  border-left: 2px solid #d0d7de;
+  border-right: 2px solid #d0d7de;
+  border-bottom: 2px solid #d0d7de;
+  border-radius: 0 0 4px 4px;
+}
+```
+
+## Legend
+
+```css
+.legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #e1e4e8;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  color: #57606a;
+}
+
+.legend-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: 1px solid;
+}
+```
+
+## Alternative Color Schemes
+
+### Monochrome (Print-Friendly)
+
+```css
+.component-box.data-prep { background: #f5f5f5; border-color: #9e9e9e; }
+.component-box.execution { background: #e0e0e0; border-color: #757575; }
+.component-box.analysis { background: #bdbdbd; border-color: #616161; }
+```
+
+### Dark Theme
+
+```css
+.diagram-container { background: #1e1e1e; border-color: #333; }
+.diagram-title { color: #e0e0e0; }
+.component-box.data-prep { background: #1e3a5f; border-color: #42a5f5; }
+.component-box.execution { background: #1b5e20; border-color: #66bb6a; }
+.component-box.analysis { background: #e65100; border-color: #ffa726; }
+```
--- a/skills/benchmarking/html-diagram-creator/reference/html-templates.md
+++ b/skills/benchmarking/html-diagram-creator/reference/html-templates.md
@@ -0,0 +1,185 @@
+# HTML Diagram Templates
+
+Copy-paste ready HTML templates for common diagram types.
+
+## Linear Pipeline (3 boxes)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pipeline Diagram</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; padding: 2em; background: #f8f9fa; }
+    .diagram-container { max-width: 900px; margin: 0 auto; background: white; padding: 2em; border-radius: 8px; }
+    .figure-label { font-size: 12px; color: #57606a; margin-bottom: 0.5em; }
+    .diagram-title { font-size: 18px; font-weight: 600; color: #24292f; margin: 0 0 1.5em 0; }
+    .pipeline { display: flex; align-items: center; justify-content: center; gap: 0; }
+    .component-box { padding: 1em 1.5em; border-radius: 6px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.08); min-width: 120px; }
+    .component-name { font-size: 12px; font-weight: 600; display: block; }
+    .component-tech { font-size: 9px; font-style: italic; color: #57606a; }
+    .data-prep { background: #E3F2FD; border: 1px solid #1976D2; }
+    .execution { background: #E8F5E9; border: 1px solid #388E3C; }
+    .analysis { background: #FFF3E0; border: 1px solid #F57C00; }
+    .arrow { width: 40px; height: 2px; background: #546E7A; position: relative; margin: 0 -1px; }
+    .arrow::after { content: ''; position: absolute; right: -6px; top: -4px; border: 5px solid transparent; border-left: 6px solid #546E7A; }
+    .figure-caption { font-style: italic; color: #57606a; text-align: center; margin-top: 1.5em; font-size: 14px; }
+  </style>
+</head>
+<body>
+  <div class="diagram-container">
+    <div class="figure-label">Figure 1</div>
+    <h2 class="diagram-title">Pipeline Architecture</h2>
+    <div class="pipeline">
+      <div class="component-box data-prep">
+        <span class="component-name">Data Loader</span>
+        <span class="component-tech">JSON/CSV</span>
+      </div>
+      <div class="arrow"></div>
+      <div class="component-box execution">
+        <span class="component-name">Processor</span>
+        <span class="component-tech">Node.js</span>
+      </div>
+      <div class="arrow"></div>
+      <div class="component-box analysis">
+        <span class="component-name">Analyzer</span>
+        <span class="component-tech">Statistics</span>
+      </div>
+    </div>
+    <p class="figure-caption">Data flows through preparation, execution, and analysis stages.</p>
+  </div>
+</body>
+</html>
+```
+
+## Branching Architecture (Y-split)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Branching Diagram</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; padding: 2em; background: #f8f9fa; }
+    .diagram-container { max-width: 700px; margin: 0 auto; background: white; padding: 2em; border-radius: 8px; }
+    .figure-label { font-size: 12px; color: #57606a; }
+    .diagram-title { font-size: 18px; font-weight: 600; color: #24292f; margin: 0.5em 0 1.5em 0; }
+    .component-box { padding: 1em 1.5em; border-radius: 6px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
+    .component-name { font-size: 12px; font-weight: 600; display: block; }
+    .input { background: #E3F2FD; border: 1px solid #1976D2; width: fit-content; margin: 0 auto 1em auto; }
+    .branch-a { background: #E8F5E9; border: 1px solid #388E3C; }
+    .branch-b { background: #FFF3E0; border: 1px solid #F57C00; }
+    .branches { display: flex; justify-content: center; gap: 3em; margin-top: 1em; }
+    .branch { text-align: center; }
+    .vertical-arrow { width: 2px; height: 30px; background: #546E7A; margin: 0 auto; position: relative; }
+    .vertical-arrow::after { content: ''; position: absolute; bottom: -6px; left: -4px; border: 5px solid transparent; border-top: 6px solid #546E7A; }
+    .figure-caption { font-style: italic; color: #57606a; text-align: center; margin-top: 1.5em; font-size: 14px; }
+  </style>
+</head>
+<body>
+  <div class="diagram-container">
+    <div class="figure-label">Figure 2</div>
+    <h2 class="diagram-title">Branching Architecture</h2>
+    <div class="component-box input"><span class="component-name">Input Router</span></div>
+    <div class="branches">
+      <div class="branch">
+        <div class="vertical-arrow"></div>
+        <div class="component-box branch-a"><span class="component-name">Path A</span></div>
+      </div>
+      <div class="branch">
+        <div class="vertical-arrow"></div>
+        <div class="component-box branch-b"><span class="component-name">Path B</span></div>
+      </div>
+    </div>
+    <p class="figure-caption">Input is routed to parallel processing paths.</p>
+  </div>
+</body>
+</html>
+```
+
+## Comparison (Before/After)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Comparison Diagram</title>
+  <style>
+    body { font-family: -apple-system, sans-serif; padding: 2em; background: #f8f9fa; }
+    .diagram-container { max-width: 800px; margin: 0 auto; background: white; padding: 2em; border-radius: 8px; }
+    .figure-label { font-size: 12px; color: #57606a; }
+    .diagram-title { font-size: 18px; font-weight: 600; color: #24292f; margin: 0.5em 0 1.5em 0; }
+    .comparison { display: flex; gap: 2em; justify-content: center; }
+    .side { flex: 1; max-width: 300px; }
+    .side-label { font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 1em; padding: 0.5em; border-radius: 4px; }
+    .before-label { background: #ffebee; color: #c62828; }
+    .after-label { background: #e8f5e9; color: #2e7d32; }
+    .component-box { padding: 0.8em 1em; border-radius: 6px; text-align: center; margin-bottom: 0.5em; font-size: 12px; }
+    .old { background: #fafafa; border: 1px solid #ccc; color: #666; }
+    .new { background: #E3F2FD; border: 1px solid #1976D2; }
+    .figure-caption { font-style: italic; color: #57606a; text-align: center; margin-top: 1.5em; font-size: 14px; }
+  </style>
+</head>
+<body>
+  <div class="diagram-container">
+    <div class="figure-label">Figure 3</div>
+    <h2 class="diagram-title">Architecture Comparison</h2>
+    <div class="comparison">
+      <div class="side">
+        <div class="side-label before-label">Before</div>
+        <div class="component-box old">Legacy Component A</div>
+        <div class="component-box old">Legacy Component B</div>
+        <div class="component-box old">Legacy Component C</div>
+      </div>
+      <div class="side">
+        <div class="side-label after-label">After</div>
+        <div class="component-box new">Modern Service</div>
+        <div class="component-box new">Unified API</div>
+      </div>
+    </div>
+    <p class="figure-caption">Migration consolidates three legacy components into two modern services.</p>
+  </div>
+</body>
+</html>
+```
+
+## Arrow SVG Snippets
+
+### Horizontal Arrow (right)
+```html
+<div class="arrow" style="width: 40px; height: 2px; background: #546E7A; position: relative;">
+  <div style="position: absolute; right: -6px; top: -4px; border: 5px solid transparent; border-left: 6px solid #546E7A;"></div>
+</div>
+```
+
+### Horizontal Arrow (left)
+```html
+<div class="arrow" style="width: 40px; height: 2px; background: #546E7A; position: relative;">
+  <div style="position: absolute; left: -6px; top: -4px; border: 5px solid transparent; border-right: 6px solid #546E7A;"></div>
+</div>
+```
+
+### Vertical Arrow (down)
+```html
+<div style="width: 2px; height: 30px; background: #546E7A; margin: 0 auto; position: relative;">
+  <div style="position: absolute; bottom: -6px; left: -4px; border: 5px solid transparent; border-top: 6px solid #546E7A;"></div>
+</div>
+```
+
+### Vertical Arrow (up)
+```html
+<div style="width: 2px; height: 30px; background: #546E7A; margin: 0 auto; position: relative;">
+  <div style="position: absolute; top: -6px; left: -4px; border: 5px solid transparent; border-bottom: 6px solid #546E7A;"></div>
+</div>
+```
+
+### Bidirectional Arrow (horizontal)
+```html
+<div style="width: 40px; height: 2px; background: #546E7A; position: relative; margin: 0 8px;">
+  <div style="position: absolute; left: -6px; top: -4px; border: 5px solid transparent; border-right: 6px solid #546E7A;"></div>
+  <div style="position: absolute; right: -6px; top: -4px; border: 5px solid transparent; border-left: 6px solid #546E7A;"></div>
+</div>
+```
--- a/skills/benchmarking/html-diagram-creator/reference/templates.md
+++ b/skills/benchmarking/html-diagram-creator/reference/templates.md
@@ -0,0 +1,225 @@
+# Diagram Templates
+
+Ready-to-use HTML templates for common diagram patterns.
+
+## Linear Pipeline Template
+
+Standard left-to-right data flow (most common for benchmarks).
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>[TITLE]</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #fff;
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40px;
+    }
+    .diagram-container {
+      background: #fafbfc;
+      border: 1px solid #e1e4e8;
+      border-radius: 8px;
+      padding: 40px 50px;
+      max-width: 1200px;
+    }
+    .figure-label { font-size: 12px; color: #57606a; margin-bottom: 8px; font-weight: 500; }
+    .diagram-title { font-size: 18px; font-weight: 600; color: #24292f; text-align: center; margin-bottom: 30px; }
+    .pipeline { display: flex; align-items: center; justify-content: center; }
+    .component { display: flex; flex-direction: column; align-items: center; }
+    .component-box {
+      width: 130px; height: 72px; border-radius: 6px;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      text-align: center; padding: 10px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.08); border: 1px solid;
+    }
+    .component-box.data-prep { background: #e3f2fd; border-color: #1976d2; }
+    .component-box.execution { background: #e8f5e9; border-color: #388e3c; }
+    .component-box.analysis { background: #fff3e0; border-color: #f57c00; }
+    .component-name { font-size: 12px; font-weight: 600; color: #24292f; line-height: 1.3; }
+    .component-tech { font-size: 9px; color: #57606a; margin-top: 4px; font-style: italic; }
+    .data-label { font-size: 9px; color: #57606a; font-family: monospace; margin-bottom: 6px; height: 14px; }
+    .terminal {
+      width: 44px; height: 44px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 11px; font-weight: 600;
+    }
+    .terminal.input { background: #fff; border: 3px solid #ff6b6b; color: #ff6b6b; }
+    .terminal.output { background: #ff6b6b; border: 3px solid #ff6b6b; color: #fff; }
+    .arrow { display: flex; align-items: center; justify-content: center; width: 50px; padding-top: 20px; }
+    .arrow svg { width: 40px; height: 16px; }
+    .arrow path { fill: none; stroke: #546e7a; stroke-width: 2; }
+    .arrow polygon { fill: #546e7a; }
+    .figure-caption { text-align: center; margin-top: 25px; font-size: 12px; color: #57606a; font-style: italic; }
+    .legend { display: flex; justify-content: center; gap: 24px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e1e4e8; }
+    .legend-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #57606a; }
+    .legend-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid; }
+    .legend-swatch.data-prep { background: #e3f2fd; border-color: #1976d2; }
+    .legend-swatch.execution { background: #e8f5e9; border-color: #388e3c; }
+    .legend-swatch.analysis { background: #fff3e0; border-color: #f57c00; }
+  </style>
+</head>
+<body>
+  <div class="diagram-container">
+    <div class="figure-label">Figure [N]</div>
+    <h2 class="diagram-title">[TITLE]</h2>
+    <div class="pipeline">
+      <!-- Input Terminal -->
+      <div class="component">
+        <span class="data-label">&nbsp;</span>
+        <div class="terminal input">In</div>
+      </div>
+      <div class="arrow"><svg viewBox="0 0 40 16"><path d="M0,8 L30,8"/><polygon points="30,4 38,8 30,12"/></svg></div>
+
+      <!-- Component 1 -->
+      <div class="component">
+        <span class="data-label">[data_type_1]</span>
+        <div class="component-box data-prep">
+          <span class="component-name">[Name 1]</span>
+          <span class="component-tech">[Technology]</span>
+        </div>
+      </div>
+      <div class="arrow"><svg viewBox="0 0 40 16"><path d="M0,8 L30,8"/><polygon points="30,4 38,8 30,12"/></svg></div>
+
+      <!-- Component 2 -->
+      <div class="component">
+        <span class="data-label">[data_type_2]</span>
+        <div class="component-box execution">
+          <span class="component-name">[Name 2]</span>
+          <span class="component-tech">[Technology]</span>
+        </div>
+      </div>
+      <div class="arrow"><svg viewBox="0 0 40 16"><path d="M0,8 L30,8"/><polygon points="30,4 38,8 30,12"/></svg></div>
+
+      <!-- Component 3 -->
+      <div class="component">
+        <span class="data-label">[data_type_3]</span>
+        <div class="component-box analysis">
+          <span class="component-name">[Name 3]</span>
+          <span class="component-tech">[Technology]</span>
+        </div>
+      </div>
+      <div class="arrow"><svg viewBox="0 0 40 16"><path d="M0,8 L30,8"/><polygon points="30,4 38,8 30,12"/></svg></div>
+
+      <!-- Output Terminal -->
+      <div class="component">
+        <span class="data-label">Results</span>
+        <div class="terminal output">Out</div>
+      </div>
+    </div>
+    <p class="figure-caption">[CAPTION - Describe what the diagram shows]</p>
+    <div class="legend">
+      <div class="legend-item"><div class="legend-swatch data-prep"></div><span>Data Preparation</span></div>
+      <div class="legend-item"><div class="legend-swatch execution"></div><span>Execution</span></div>
+      <div class="legend-item"><div class="legend-swatch analysis"></div><span>Analysis</span></div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+## Branching Architecture Template
+
+For systems with parallel processing or multiple output paths.
+
+```html
+<!-- Add to body after pipeline -->
+<div class="branch-container">
+  <div class="branch-label">Branch A</div>
+  <div class="pipeline branch">
+    <!-- Branch A components -->
+  </div>
+  <div class="branch-label">Branch B</div>
+  <div class="pipeline branch">
+    <!-- Branch B components -->
+  </div>
+</div>
+
+<style>
+  .branch-container { margin-top: 20px; }
+  .branch-label {
+    font-size: 10px; font-weight: 600;
+    color: #57606a; margin: 10px 0 5px 50px;
+  }
+  .pipeline.branch {
+    padding-left: 50px;
+    border-left: 2px solid #d0d7de;
+  }
+</style>
+```
+
+## Multi-Stage with Grouping Template
+
+For showing distinct phases with visual grouping.
+
+```html
+<!-- Add stage labels above pipeline -->
+<div class="stage-labels">
+  <span class="stage-label" style="width: 280px;">Data Preparation</span>
+  <span class="stage-label" style="width: 140px;">Execution</span>
+  <span class="stage-label" style="width: 280px;">Analysis</span>
+</div>
+
+<!-- Add brackets below pipeline -->
+<div class="stage-brackets">
+  <div class="bracket" style="width: 340px; margin-right: 10px;"></div>
+  <div class="bracket" style="width: 130px; margin-right: 10px;"></div>
+  <div class="bracket" style="width: 340px;"></div>
+</div>
+
+<style>
+  .stage-labels {
+    display: flex; justify-content: space-between;
+    padding: 0 30px; margin-bottom: 15px;
+  }
+  .stage-label {
+    font-size: 10px; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.5px;
+    color: #6e7781; text-align: center;
+  }
+  .stage-brackets {
+    display: flex; justify-content: center;
+    padding: 0 30px; margin-top: 5px;
+  }
+  .bracket {
+    height: 12px;
+    border-left: 2px solid #d0d7de;
+    border-right: 2px solid #d0d7de;
+    border-bottom: 2px solid #d0d7de;
+    border-radius: 0 0 4px 4px;
+  }
+</style>
+```
+
+## Vertical Stack Template
+
+For systems with top-to-bottom flow.
+
+```html
+<style>
+  .pipeline.vertical {
+    flex-direction: column;
+    gap: 0;
+  }
+  .arrow.vertical {
+    transform: rotate(90deg);
+    height: 50px;
+    width: auto;
+    padding: 0 20px;
+  }
+</style>
+```
+
+## Usage Notes
+
+1. **Replace placeholders**: `[TITLE]`, `[N]`, `[Name]`, `[Technology]`, `[data_type]`, `[CAPTION]`
+2. **Adjust widths**: Modify `.stage-label` and `.bracket` widths to match component count
+3. **Add/remove components**: Copy component blocks as needed
+4. **Change stages**: Use appropriate class (`data-prep`, `execution`, `analysis`)
--- 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
+```
--- a/skills/benchmarking/markdown-to-pdf-converter/CHANGELOG.md
+++ b/skills/benchmarking/markdown-to-pdf-converter/CHANGELOG.md
@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to this skill will be documented in this file.
+
+## [0.1.0] - 2025-11-27
+
+### Added
+- Initial release of markdown-to-pdf-converter skill
+- Academic-style CSS template (pdf-style.css)
+- Playwright diagram capture script
+- Figure centering patterns that work with weasyprint
+- Manual page break documentation
+- Common issues troubleshooting guide
+
+### Based On
+- paralleLLM empathy-experiment-v1.0.pdf formatting standards
+- pandoc + weasyprint toolchain
+- Playwright for HTML → PNG capture
--- a/skills/benchmarking/markdown-to-pdf-converter/README.md
+++ b/skills/benchmarking/markdown-to-pdf-converter/README.md
@@ -0,0 +1,71 @@
+# Markdown to PDF Converter
+
+A Claude Code skill for converting markdown documents to professional, print-ready PDFs using pandoc and weasyprint with academic styling.
+
+## Overview
+
+This skill automates the markdown-to-PDF pipeline with:
+- Academic-style CSS (system fonts, proper tables, page breaks)
+- HTML diagram capture via Playwright at retina quality
+- Iterative refinement workflow for complex documents
+
+## Prerequisites
+
+```bash
+# Required
+brew install pandoc
+pip install weasyprint
+
+# Optional (for diagram capture)
+npm install playwright
+npx playwright install chromium
+```
+
+## Usage
+
+Trigger the skill with phrases like:
+- "convert this markdown to PDF"
+- "generate a PDF from this document"
+- "create a professional PDF report"
+
+## Key Features
+
+### Academic Table Styling
+Tables use traditional academic formatting with top/bottom borders on headers and clean cell spacing.
+
+### Smart Page Breaks
+- Headings stay with following content
+- Tables and figures don't split across pages
+- Manual page breaks via `<div style="page-break-before: always;"></div>`
+
+### Figure Centering
+Proper figure centering that works in weasyprint (not all CSS properties are supported).
+
+### Retina-Quality Diagrams
+Playwright captures HTML diagrams at 2x resolution for crisp print output.
+
+## File Structure
+
+```
+markdown-to-pdf-converter/
+├── SKILL.md           # Main skill instructions
+├── README.md          # This file
+├── CHANGELOG.md       # Version history
+├── templates/
+│   ├── pdf-style.css          # Academic CSS stylesheet
+│   └── capture-diagrams.js    # Playwright screenshot script
+├── examples/
+│   └── report-template.md     # Example markdown structure
+├── reference/
+│   └── weasyprint-notes.md    # CSS compatibility notes
+└── workflow/
+    └── iterative-refinement.md # Page break tuning process
+```
+
+## Version
+
+1.0.0 - Initial release based on paralleLLM empathy-experiment-v1.0.pdf
+
+## Author
+
+Connor Skiro
--- a/skills/benchmarking/markdown-to-pdf-converter/SKILL.md
+++ b/skills/benchmarking/markdown-to-pdf-converter/SKILL.md
@@ -0,0 +1,221 @@
+---
+name: markdown-to-pdf-converter
+description: "Use PROACTIVELY when converting markdown documents to professional PDFs. Automates the pandoc + weasyprint pipeline with academic-style CSS, proper page breaks, and HTML diagram capture via Playwright. Supports reports, papers, and technical documentation. Not for slides or complex layouts requiring InDesign."
+version: "0.1.0"
+author: "Connor Skiro"
+---
+
+# Markdown to PDF Converter
+
+Converts markdown documents to professional, print-ready PDFs using pandoc and weasyprint with academic styling.
+
+## Overview
+
+This skill provides a complete pipeline for converting markdown to publication-quality PDFs:
+
+1. **Markdown → HTML**: pandoc with standalone CSS
+2. **HTML → PDF**: weasyprint with academic styling
+3. **HTML → PNG**: Playwright for diagram capture (optional)
+
+Key features: academic table borders, proper page breaks, figure centering, retina-quality diagram export.
+
+## When to Use
+
+**Trigger Phrases**:
+- "convert this markdown to PDF"
+- "generate a PDF from this document"
+- "create a professional PDF report"
+- "export markdown as PDF"
+
+**Use Cases**:
+- Technical reports and whitepapers
+- Research papers and academic documents
+- Project documentation
+- Experiment analysis reports
+
+**NOT for**:
+- Presentation slides (use Marp or reveal.js)
+- Complex multi-column layouts
+- Documents requiring precise InDesign-level control
+
+## Quick Start
+
+```bash
+# Prerequisites
+brew install pandoc
+pip install weasyprint
+npm install playwright  # For diagram capture
+
+# Verify installation
+which pandoc weasyprint  # Both should return paths
+
+# Basic conversion (two-step)
+pandoc document.md -o document.html --standalone --css=pdf-style.css
+weasyprint document.html document.pdf
+
+# One-liner (pipe pandoc to weasyprint)
+pandoc document.md --standalone --css=pdf-style.css -t html | weasyprint - document.pdf
+```
+
+## Workflow Modes
+
+| Mode | Use Case | Process |
+|------|----------|---------|
+| Quick Convert | Simple docs | Markdown → HTML → PDF |
+| Academic Report | Papers with figures | + CSS styling + diagram capture |
+| Iterative | Complex layout | Review PDF, adjust page breaks, regenerate |
+
+## Academic PDF Style Standards
+
+### Typography
+```css
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2em;
+}
+```
+
+### Tables (Academic Style)
+- Top border: 2px solid on header
+- Bottom border: 2px solid on header AND last row
+- Cell padding: 0.5em 0.75em
+- Page break avoidance: `page-break-inside: avoid`
+
+### Page Control
+| Element | Rule |
+|---------|------|
+| Page margins | 2cm |
+| Headings | `page-break-after: avoid` |
+| Figures | `page-break-inside: avoid` |
+| Tables | `page-break-inside: avoid` |
+| Orphans/widows | 3 lines minimum |
+
+### Figure Centering (Critical)
+```html
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center;">
+  <img src="diagram.png" alt="Description" style="max-width: 100%; height: auto; display: inline-block;">
+  <figcaption style="text-align: center; font-style: italic; margin-top: 1em;">
+    Figure 1: Caption text
+  </figcaption>
+</figure>
+```
+
+### Manual Page Breaks
+```html
+<div style="page-break-before: always;"></div>
+```
+
+## Diagram Capture with Playwright
+
+For HTML diagrams that need PNG export:
+
+```javascript
+const { chromium } = require('playwright');
+
+async function captureDiagram(htmlPath, pngPath) {
+  const browser = await chromium.launch();
+  const context = await browser.newContext({ deviceScaleFactor: 2 }); // Retina quality
+  const page = await context.newPage();
+
+  await page.goto(`file://${htmlPath}`);
+  const element = await page.locator('.diagram-container');
+  await element.screenshot({ path: pngPath, type: 'png' });
+
+  await browser.close();
+}
+```
+
+**Key settings**:
+- `deviceScaleFactor: 2` for retina-quality PNGs
+- Target `.diagram-container` selector for clean capture
+- Use `max-width: 100%` in CSS, NOT `min-width`
+
+## CSS Template Location
+
+See `templates/pdf-style.css` for full academic stylesheet.
+
+## Markdown Structure for Reports
+
+```markdown
+# Title
+
+## Subtitle (optional)
+
+**Metadata** (date, author, etc.)
+
+---
+
+## Abstract
+
+Summary paragraph...
+
+---
+
+## 1. Section Title
+
+### 1.1 Subsection
+
+Content with tables, figures...
+
+---
+
+## Appendix A: Title
+
+Supporting materials...
+```
+
+## Success Criteria
+
+- [ ] PDF renders without weasyprint errors
+- [ ] All images display correctly
+- [ ] Tables don't split across pages
+- [ ] Figures are centered with captions
+- [ ] No orphaned headings at page bottoms
+- [ ] Manual page breaks work as expected
+- [ ] Text is readable (not cut off)
+
+## Common Issues
+
+| Issue | Solution |
+|-------|----------|
+| Image cut off | Remove `min-width`, use `max-width: 100%` |
+| Image off-center | Add `margin: auto; text-align: center` to figure |
+| Table split across pages | Add `page-break-inside: avoid` |
+| Heading orphaned | CSS already handles with `page-break-after: avoid` |
+| Too much whitespace | Remove unnecessary `<div style="page-break-before: always;">` |
+
+## Weasyprint CSS Compatibility
+
+Weasyprint does not support all CSS properties. The following will generate warnings (safe to ignore, but can be removed for cleaner output):
+
+| Unsupported Property | Alternative |
+|---------------------|-------------|
+| `gap` | Use `margin` on child elements |
+| `overflow-x` | Not needed for print |
+| `user-select` | Not needed for print |
+| `flex-gap` | Use `margin` instead |
+| `backdrop-filter` | Not supported in print |
+| `scroll-behavior` | Not needed for print |
+
+**Clean CSS template tip**: Remove these properties from your stylesheet to avoid warning messages during conversion.
+
+## Reference Files
+
+- `templates/pdf-style.css` - Full CSS stylesheet
+- `templates/capture-diagrams.js` - Playwright capture script
+- `examples/report-template.md` - Example markdown structure
+- `workflow/iterative-refinement.md` - Page break tuning process
+
+## Related Skills
+
+- **html-diagram-creator**: Create publication-quality HTML diagrams
+- **html-to-png-converter**: Convert HTML diagrams to PNG for embedding
+
+**Documentation Pipeline**: Create diagrams (html-diagram-creator) → Convert to PNG (html-to-png-converter) → Embed in markdown → Export to PDF (this skill)
+
+---
+
+**Based on**: paralleLLM empathy-experiment-v1.0.pdf
--- a/skills/benchmarking/markdown-to-pdf-converter/examples/report-template.md
+++ b/skills/benchmarking/markdown-to-pdf-converter/examples/report-template.md
@@ -0,0 +1,154 @@
+# Report Title
+
+## Subtitle or Description
+
+**Date:** YYYY-MM-DD
+
+**Author:** Name
+
+**Version:** 1.0
+
+---
+
+## Abstract
+
+Brief summary of the document (1-2 paragraphs). State the key findings or purpose upfront.
+
+---
+
+## Executive Summary
+
+| Metric | Result |
+|--------|--------|
+| Key Finding 1 | Brief description |
+| Key Finding 2 | Brief description |
+| Sample Size | n = X |
+
+---
+
+## 1. Introduction
+
+### 1.1 Background
+
+Context and motivation for this work...
+
+### 1.2 Objectives
+
+1. **Objective 1**: Description
+2. **Objective 2**: Description
+3. **Objective 3**: Description
+
+---
+
+## 2. Methodology
+
+### 2.1 Approach
+
+Description of the approach taken...
+
+### 2.2 Variables
+
+**Independent Variable**: Description
+
+| Level | Description | Example |
+|-------|-------------|---------|
+| Level 1 | Description | Example |
+| Level 2 | Description | Example |
+
+<div style="page-break-before: always;"></div>
+
+**Dependent Variables**:
+
+| Variable | Type | Measurement |
+|----------|------|-------------|
+| Variable 1 | Type | How measured |
+| Variable 2 | Type | How measured |
+
+### 2.3 Infrastructure
+
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center;">
+  <img src="architecture_diagram.png" alt="System Architecture" style="max-width: 100%; height: auto; display: inline-block;">
+  <figcaption style="text-align: center; font-style: italic; margin-top: 1em;">
+    Figure 1: System architecture diagram
+  </figcaption>
+</figure>
+
+---
+
+## 3. Results
+
+### 3.1 Summary Statistics
+
+| Category | N | Mean | Std Dev | Key Metric |
+|----------|---|------|---------|------------|
+| Category A | 100 | 0.5 | 0.1 | 50% |
+| Category B | 100 | 0.6 | 0.2 | 60% |
+
+### 3.2 Key Findings
+
+**Finding 1: Title**
+
+Description of the finding with supporting data...
+
+**Finding 2: Title**
+
+Description of the finding with supporting data...
+
+---
+
+## 4. Discussion
+
+### 4.1 Interpretation
+
+Analysis of what the results mean...
+
+### 4.2 Implications
+
+| Scenario | Risk Level | Recommendation |
+|----------|------------|----------------|
+| Scenario A | **Low** | Safe to proceed |
+| Scenario B | **High** | Exercise caution |
+
+---
+
+## 5. Limitations
+
+1. **Limitation 1**: Description and impact
+
+2. **Limitation 2**: Description and impact
+
+---
+
+## 6. Future Work
+
+1. **Direction 1**: Description
+2. **Direction 2**: Description
+
+---
+
+## 7. Conclusion
+
+Summary of key findings and their significance...
+
+**Bottom line**: One-sentence takeaway.
+
+---
+
+## Appendix A: Supporting Materials
+
+### A.1 Sample Data
+
+> Example content or data samples shown in blockquote format
+
+### A.2 Additional Figures
+
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center;">
+  <img src="appendix_figure.png" alt="Additional Figure" style="max-width: 100%; height: auto; display: inline-block;">
+  <figcaption style="text-align: center; font-style: italic; margin-top: 1em;">
+    Figure A.1: Additional supporting figure
+  </figcaption>
+</figure>
+
+---
+
+*Report generated by [Author Name]*
--- a/skills/benchmarking/markdown-to-pdf-converter/reference/weasyprint-notes.md
+++ b/skills/benchmarking/markdown-to-pdf-converter/reference/weasyprint-notes.md
@@ -0,0 +1,82 @@
+# WeasyPrint CSS Compatibility Notes
+
+WeasyPrint doesn't support all CSS properties. This reference documents what works and what doesn't.
+
+## Supported (Works)
+
+### Layout
+- `max-width`, `min-width` (but avoid min-width on images)
+- `margin`, `padding`
+- `display: block`, `display: inline-block`
+- `text-align`
+- `width`, `height` (with units)
+
+### Typography
+- `font-family`, `font-size`, `font-weight`, `font-style`
+- `line-height`
+- `color`
+
+### Tables
+- `border-collapse`
+- `border` properties
+- `padding` on cells
+
+### Print/Page
+- `@page { margin: ... }`
+- `page-break-before`, `page-break-after`, `page-break-inside`
+- `orphans`, `widows`
+
+### Backgrounds
+- `background-color`
+- `background` (simple)
+
+## NOT Supported (Ignored)
+
+### Modern CSS
+- `gap` (use margin instead)
+- `overflow-x`, `overflow-y`
+- CSS Grid layout
+- Flexbox (limited support)
+- CSS variables (`--custom-property`)
+- `min()`, `max()`, `clamp()` functions
+
+### Advanced Selectors
+- `:has()` (limited)
+- Complex pseudo-selectors
+
+## Common Warnings
+
+```
+WARNING: Ignored `gap: min(4vw, 1.5em)` at X:Y, invalid value.
+WARNING: Ignored `overflow-x: auto` at X:Y, unknown property.
+```
+
+These warnings are informational and don't affect the output. The CSS fallbacks handle them.
+
+## Image Centering Pattern
+
+WeasyPrint-compatible centering:
+
+```html
+<!-- This works -->
+<figure style="margin: 2em auto; text-align: center;">
+  <img style="max-width: 100%; display: inline-block;">
+</figure>
+
+<!-- This does NOT work reliably -->
+<figure style="display: flex; justify-content: center;">
+  <img>
+</figure>
+```
+
+## Page Break Pattern
+
+```html
+<!-- Explicit page break -->
+<div style="page-break-before: always;"></div>
+
+<!-- Keep together -->
+<div style="page-break-inside: avoid;">
+  Content that should stay together
+</div>
+```
--- a/skills/benchmarking/markdown-to-pdf-converter/templates/capture-diagrams.js
+++ b/skills/benchmarking/markdown-to-pdf-converter/templates/capture-diagrams.js
@@ -0,0 +1,105 @@
+/**
+ * Diagram Capture Script
+ * Converts HTML diagrams to high-resolution PNGs using Playwright
+ *
+ * Usage:
+ *   node capture-diagrams.js [html-file] [output-png]
+ *   node capture-diagrams.js  # Captures all diagrams in current directory
+ *
+ * Prerequisites:
+ *   npm install playwright
+ *   npx playwright install chromium
+ */
+
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+
+// Configuration
+const CONFIG = {
+  deviceScaleFactor: 2,  // 2x for retina quality
+  selector: '.diagram-container',  // Default container selector
+};
+
+/**
+ * Capture a single HTML file to PNG
+ */
+async function captureScreenshot(htmlPath, pngPath, selector = CONFIG.selector) {
+  const browser = await chromium.launch();
+  const context = await browser.newContext({
+    deviceScaleFactor: CONFIG.deviceScaleFactor,
+  });
+  const page = await context.newPage();
+
+  const absoluteHtmlPath = path.resolve(htmlPath);
+  console.log(`Capturing ${htmlPath}...`);
+
+  await page.goto(`file://${absoluteHtmlPath}`);
+
+  const element = await page.locator(selector);
+  await element.screenshot({
+    path: pngPath,
+    type: 'png',
+  });
+
+  console.log(`  → Saved to ${pngPath}`);
+  await browser.close();
+}
+
+/**
+ * Capture all HTML diagrams in a directory
+ */
+async function captureAllDiagrams(directory = '.') {
+  const browser = await chromium.launch();
+  const context = await browser.newContext({
+    deviceScaleFactor: CONFIG.deviceScaleFactor,
+  });
+  const page = await context.newPage();
+
+  // Find all *_diagram*.html files
+  const files = fs.readdirSync(directory)
+    .filter(f => f.endsWith('.html') && f.includes('diagram'));
+
+  if (files.length === 0) {
+    console.log('No diagram HTML files found in directory');
+    await browser.close();
+    return;
+  }
+
+  for (const htmlFile of files) {
+    const htmlPath = path.join(directory, htmlFile);
+    const pngPath = htmlPath.replace('.html', '.png');
+
+    console.log(`Capturing ${htmlFile}...`);
+    await page.goto(`file://${path.resolve(htmlPath)}`);
+
+    try {
+      const element = await page.locator(CONFIG.selector);
+      await element.screenshot({ path: pngPath, type: 'png' });
+      console.log(`  → Saved to ${path.basename(pngPath)}`);
+    } catch (error) {
+      console.log(`  ✗ Failed: ${error.message}`);
+    }
+  }
+
+  await browser.close();
+  console.log('\nAll diagrams captured successfully!');
+}
+
+// Main execution
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 2) {
+    // Single file mode: node capture-diagrams.js input.html output.png
+    await captureScreenshot(args[0], args[1]);
+  } else if (args.length === 1) {
+    // Directory mode: node capture-diagrams.js ./docs
+    await captureAllDiagrams(args[0]);
+  } else {
+    // Default: capture all diagrams in current directory
+    await captureAllDiagrams('.');
+  }
+}
+
+main().catch(console.error);
--- a/skills/benchmarking/markdown-to-pdf-converter/templates/pdf-style.css
+++ b/skills/benchmarking/markdown-to-pdf-converter/templates/pdf-style.css
@@ -0,0 +1,164 @@
+/* Academic PDF Style Template
+ * For use with pandoc + weasyprint
+ * Based on: paralleLLM empathy-experiment-v1.0.pdf
+ */
+
+/* ==========================================================================
+   Base Typography
+   ========================================================================== */
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2em;
+}
+
+h1, h2, h3, h4 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+h2 {
+  margin-top: 2em;
+}
+
+h3 {
+  margin-top: 1.5em;
+}
+
+/* ==========================================================================
+   Tables (Academic Style)
+   ========================================================================== */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  page-break-inside: avoid;
+}
+
+table th, table td {
+  padding: 0.5em 0.75em;
+  text-align: left;
+  vertical-align: top;
+}
+
+/* Academic-style borders: top/bottom on header, bottom on last row */
+table thead th {
+  border-top: 2px solid #000;
+  border-bottom: 2px solid #000;
+  font-weight: bold;
+}
+
+table tbody td {
+  border-bottom: 1px solid #ddd;
+}
+
+table tbody tr:last-child td {
+  border-bottom: 2px solid #000;
+}
+
+/* ==========================================================================
+   Block Elements
+   ========================================================================== */
+
+blockquote {
+  border-left: 4px solid #ddd;
+  margin: 1em 0;
+  padding-left: 1em;
+  color: #555;
+  page-break-inside: avoid;
+}
+
+code {
+  background: #f5f5f5;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+pre {
+  background: #f5f5f5;
+  padding: 1em;
+  border-radius: 5px;
+  page-break-inside: avoid;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #ddd;
+  margin: 2em 0;
+}
+
+/* ==========================================================================
+   Figures and Images
+   ========================================================================== */
+
+figure {
+  page-break-inside: avoid;
+  margin: 1.5em 0;
+}
+
+figure img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+figcaption {
+  text-align: center;
+  font-style: italic;
+  margin-top: 0.5em;
+  font-size: 0.9em;
+}
+
+/* ==========================================================================
+   Page Control (Print/PDF)
+   ========================================================================== */
+
+@page {
+  margin: 2cm;
+}
+
+/* Keep headings with following content */
+h2, h3, h4 {
+  page-break-after: avoid;
+}
+
+/* Prevent orphan paragraphs */
+p {
+  orphans: 3;
+  widows: 3;
+}
+
+/* Keep lists together when possible */
+ul, ol {
+  page-break-inside: avoid;
+}
+
+/* ==========================================================================
+   Utility Classes
+   ========================================================================== */
+
+/* For centered figures in weasyprint */
+.figure-centered {
+  margin: 2em auto;
+  text-align: center;
+}
+
+.figure-centered img {
+  display: inline-block;
+  max-width: 100%;
+}
+
+/* Small text for appendix tables */
+.small-text {
+  font-size: 0.85em;
+}
--- a/skills/benchmarking/markdown-to-pdf-converter/workflow/iterative-refinement.md
+++ b/skills/benchmarking/markdown-to-pdf-converter/workflow/iterative-refinement.md
@@ -0,0 +1,83 @@
+# Iterative PDF Refinement Workflow
+
+Step-by-step process for tuning page breaks and layout in complex documents.
+
+## Phase 1: Initial Conversion
+
+```bash
+# Generate HTML with CSS
+pandoc document.md -o document.html --standalone --css=pdf-style.css
+
+# Generate PDF
+weasyprint document.html document.pdf
+```
+
+## Phase 2: Review PDF
+
+Open the PDF and check for:
+
+1. **Orphaned headings** - Heading at bottom of page, content on next
+2. **Split tables** - Table breaks across pages
+3. **Cut-off images** - Image doesn't fit, gets cropped
+4. **Excessive whitespace** - Large gaps from unnecessary page breaks
+5. **Off-center figures** - Images aligned left instead of center
+
+## Phase 3: Fix Issues
+
+### Orphaned Headings
+CSS already handles this with `page-break-after: avoid`. If still occurring, add manual page break BEFORE the heading:
+
+```html
+<div style="page-break-before: always;"></div>
+
+### Section Title
+```
+
+### Split Tables
+Add to the table's container:
+```html
+<div style="page-break-inside: avoid;">
+
+| Column 1 | Column 2 |
+|----------|----------|
+| data     | data     |
+
+</div>
+```
+
+### Cut-off Images
+Remove any `min-width` constraints. Use only:
+```html
+<img style="max-width: 100%; height: auto;">
+```
+
+### Excessive Whitespace
+Remove unnecessary `<div style="page-break-before: always;">` tags. Let content flow naturally and only add page breaks where truly needed.
+
+### Off-center Figures
+Use the full figure pattern:
+```html
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center;">
+  <img src="image.png" style="max-width: 100%; height: auto; display: inline-block;">
+  <figcaption style="text-align: center; font-style: italic; margin-top: 1em;">
+    Figure N: Caption
+  </figcaption>
+</figure>
+```
+
+## Phase 4: Regenerate and Verify
+
+```bash
+# Regenerate after each fix
+pandoc document.md -o document.html --standalone --css=pdf-style.css
+weasyprint document.html document.pdf
+```
+
+Repeat until all issues resolved.
+
+## Tips
+
+1. **Work section by section** - Don't try to fix everything at once
+2. **Check page count** - Unnecessary page breaks inflate page count
+3. **Test at actual print size** - View at 100% zoom
+4. **Version your PDFs** - Keep v1.0, v1.1, etc. during refinement
--- a/skills/benchmarking/report-creator/CHANGELOG.md
+++ b/skills/benchmarking/report-creator/CHANGELOG.md
@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to the report-creator 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 release with Academic Research Report template
+- Complete 7-section document structure (Background through Conclusion)
+- Academic-style CSS template for PDF export
+- Table formatting guidelines (summary statistics, hypothesis evaluation, variables)
+- Figure embedding patterns with page-break protection
+- Typography conventions for academic writing
+- Report quality checklist
+- Integration with html-diagram-creator and markdown-to-pdf-converter
+
+### Based On
+- paralleLLM empathy-experiment-v1.0.pdf (17 pages, November 2024)
--- a/skills/benchmarking/report-creator/README.md
+++ b/skills/benchmarking/report-creator/README.md
@@ -0,0 +1,56 @@
+# Report Creator
+
+Publication-quality academic research report templates with professional structure and PDF export optimization.
+
+## Overview
+
+This skill provides templates for creating research reports, experiment writeups, technical whitepapers, and empirical studies. Templates follow academic paper conventions with proper structure, table formatting, and PDF export optimization.
+
+## Key Features
+
+- **Academic structure**: Abstract, Executive Summary, numbered sections, Appendices
+- **Professional tables**: Academic-style borders (2px top/bottom on headers)
+- **Figure support**: Centered figures with captions, page-break protection
+- **PDF-optimized CSS**: Proper page breaks, orphan/widow control, margins
+
+## Quick Start
+
+```bash
+# Trigger the skill
+"Create a research report for [your experiment]"
+
+# Convert to PDF (after markdown is generated)
+pandoc report.md --standalone --css=pdf-style.css -t html | weasyprint - report.pdf
+```
+
+## Trigger Phrases
+
+- "create a research report"
+- "write up my experiment results"
+- "technical whitepaper template"
+- "empirical study format"
+- "academic report structure"
+
+## Document Structure
+
+1. Title and Metadata
+2. Abstract (150-250 words)
+3. Executive Summary with metrics table
+4. Background and Motivation
+5. Methodology
+6. Results
+7. Analysis and Discussion
+8. Limitations
+9. Future Work
+10. Conclusion
+11. Appendices
+
+## Related Skills
+
+- `html-diagram-creator` - Create publication-quality figures
+- `html-to-png-converter` - Export diagrams to PNG
+- `markdown-to-pdf-converter` - Convert markdown to PDF
+
+## Documentation
+
+See [SKILL.md](SKILL.md) for complete templates, CSS styling, and formatting guidelines.
--- a/skills/benchmarking/report-creator/SKILL.md
+++ b/skills/benchmarking/report-creator/SKILL.md
@@ -0,0 +1,134 @@
+---
+name: report-creator
+description: "Use PROACTIVELY when user needs to create research reports, experiment writeups, technical whitepapers, or empirical studies. Provides templates with professional structure, CSS styling for PDF export, and proper figure/table formatting. Currently supports: Academic Research Report. Based on publication-quality standards."
+version: "0.1.0"
+author: "Connor Skiro"
+category: documentation
+---
+
+# Report Creator
+
+## Overview
+
+Provides templates for creating publication-quality research reports with professional structure, styling, and PDF export optimization.
+
+**Available Templates**:
+- **Academic Research Report**: Full empirical study format
+
+**Key Capabilities**:
+- Academic structure (Abstract, Methodology, Results, Discussion)
+- Professional tables with academic borders
+- Figure support with captions and page-break protection
+- PDF-optimized CSS via pandoc + weasyprint
+
+## When to Use
+
+**Trigger Phrases**:
+- "create a research report"
+- "write up my experiment results"
+- "technical whitepaper template"
+- "empirical study format"
+
+**Use Cases**:
+- AI/ML experiment reports
+- Benchmark evaluation writeups
+- Technical research documentation
+- Empirical study publications
+
+**NOT for**:
+- Blog posts or casual documentation
+- API documentation
+- Presentation slides
+- Quick README files
+
+## Document Structure
+
+| Section | Content |
+|---------|---------|
+| Abstract | 150-250 word summary |
+| Executive Summary | Key finding + metrics table |
+| 1. Background | Research context, hypotheses |
+| 2. Methodology | Design, variables, protocol |
+| 3. Results | Statistics, observations |
+| 4. Discussion | Hypothesis evaluation, implications |
+| 5. Limitations | Methodological, dataset, evaluation |
+| 6. Future Work | Research directions |
+| 7. Conclusion | Synthesis, bottom line |
+| Appendices | Supporting materials |
+
+## Quick Start
+
+1. Copy template from [reference/report-template.md](reference/report-template.md)
+2. Fill in sections with your research data
+3. Add figures using HTML figure tags
+4. Export to PDF:
+
+```bash
+# One-liner conversion
+pandoc report.md --standalone --css=pdf-style.css -t html | weasyprint - report.pdf
+```
+
+## Reference Files
+
+| File | Content |
+|------|---------|
+| [report-template.md](reference/report-template.md) | Full markdown template |
+| [pdf-style.css](reference/pdf-style.css) | Academic CSS styling |
+| [table-patterns.md](reference/table-patterns.md) | Table and figure patterns |
+
+## Key Formatting Patterns
+
+### Tables (Academic Style)
+- 2px borders on header top/bottom
+- 1px borders between rows
+- 2px border on final row
+- `page-break-inside: avoid`
+
+### Figures
+```html
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center;">
+  <img src="figure-1.png" alt="Description" style="max-width: 100%;">
+  <figcaption>Figure 1: Caption text.</figcaption>
+</figure>
+```
+
+### Typography
+| Element | Usage |
+|---------|-------|
+| **Bold** | Key findings, hypothesis status |
+| *Italic* | Figure captions, emphasis |
+| `code` | Model IDs, file names |
+| > Quote | Sample prompts, messages |
+
+## Conversion Commands
+
+```bash
+# Prerequisites
+which pandoc weasyprint  # Both required
+
+# Two-step
+pandoc report.md -o report.html --standalone --css=pdf-style.css
+weasyprint report.html report.pdf
+
+# One-liner
+pandoc report.md --standalone --css=pdf-style.css -t html | weasyprint - report.pdf
+```
+
+## Completion Checklist
+
+- [ ] All 7 main sections present
+- [ ] Abstract summarizes question, method, findings
+- [ ] Executive summary has metrics table
+- [ ] Tables have academic borders
+- [ ] Figures have numbered captions
+- [ ] No orphaned headings at page bottoms
+
+## Related Skills
+
+- **html-diagram-creator**: Create figures for embedding
+- **html-to-png-converter**: Export diagrams to PNG
+- **markdown-to-pdf-converter**: General markdown conversion
+
+---
+
+**Based on**: paralleLLM empathy-experiment-v1.0.pdf (17 pages, November 2024)
--- a/skills/benchmarking/report-creator/reference/pdf-style.css
+++ b/skills/benchmarking/report-creator/reference/pdf-style.css
@@ -0,0 +1,136 @@
+/* Academic Report PDF Styling
+ * For use with pandoc + weasyprint
+ * Based on paralleLLM empathy-experiment-v1.0.pdf conventions
+ */
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2em;
+}
+
+h1, h2, h3, h4 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Academic-style tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  page-break-inside: avoid;
+}
+
+table th, table td {
+  padding: 0.5em 0.75em;
+  text-align: left;
+  vertical-align: top;
+}
+
+table thead th {
+  border-top: 2px solid #000;
+  border-bottom: 2px solid #000;
+  font-weight: bold;
+}
+
+table tbody td {
+  border-bottom: 1px solid #ddd;
+}
+
+table tbody tr:last-child td {
+  border-bottom: 2px solid #000;
+}
+
+/* Blockquotes for prompts/examples */
+blockquote {
+  border-left: 4px solid #ddd;
+  margin: 1em 0;
+  padding-left: 1em;
+  color: #555;
+  page-break-inside: avoid;
+}
+
+/* Code blocks */
+code {
+  background: #f5f5f5;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+pre {
+  background: #f5f5f5;
+  padding: 1em;
+  overflow-x: auto;
+  border-radius: 5px;
+  page-break-inside: avoid;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Horizontal rules as section dividers */
+hr {
+  border: none;
+  border-top: 1px solid #ddd;
+  margin: 2em 0;
+}
+
+/* Page break control */
+@page {
+  margin: 2cm;
+}
+
+figure {
+  page-break-inside: avoid;
+  margin: 1.5em 0;
+}
+
+figure img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+figcaption {
+  text-align: center;
+  font-style: italic;
+  margin-top: 0.5em;
+  font-size: 0.9em;
+}
+
+/* Keep headings with following content */
+h2, h3, h4 {
+  page-break-after: avoid;
+}
+
+h2 {
+  page-break-before: auto;
+  margin-top: 2em;
+}
+
+/* Prevent orphan paragraphs */
+p {
+  orphans: 3;
+  widows: 3;
+}
+
+/* Keep lists together */
+ul, ol {
+  page-break-inside: avoid;
+}
+
+/* Reduced spacing for subsections */
+h3 {
+  margin-top: 1.5em;
+}
+
+/* Bold findings/labels stay with content */
+p strong:first-child {
+  page-break-after: avoid;
+}
--- a/skills/benchmarking/report-creator/reference/report-template.md
+++ b/skills/benchmarking/report-creator/reference/report-template.md
@@ -0,0 +1,218 @@
+# Academic Research Report Template
+
+Complete markdown template for research reports following academic conventions.
+
+## Full Template
+
+```markdown
+# [Title]
+## [Subtitle - descriptive]
+
+**Date**: [Date]
+**Model Tested**: [model-id] (if applicable)
+**Trials**: [sample size description]
+
+---
+
+## Abstract
+
+[150-250 word summary of research question, methodology, key findings, implications]
+
+---
+
+## Executive Summary
+
+**Key Finding**: [One-sentence summary of most important result]
+
+| Metric | Result |
+|--------|--------|
+| Primary hypothesis | [Supported/Rejected] — [brief reason] |
+| Secondary hypothesis | [Status] — [brief reason] |
+| Sample size | n = [N] |
+| Practical implication | [Key takeaway] |
+
+---
+
+## 1. Background and Motivation
+
+### 1.1 Research Context
+[Problem statement, why this matters, prior work]
+
+### 1.2 Hypotheses
+**H1 (Primary)**: [Testable prediction]
+**H2 (Secondary)**: [Additional prediction]
+
+---
+
+## 2. Methodology
+
+### 2.1 Experimental Design
+
+#### 2.1.1 Overview
+[Design summary: conditions × scenarios × trials]
+
+#### 2.1.2 Variables
+
+**Independent Variable**: [What you manipulated]
+
+| Level | Description | Example |
+|-------|-------------|---------|
+| 1. [Condition] | [Description] | [Example framing] |
+| 2. [Condition] | [Description] | [Example framing] |
+
+**Dependent Variables**:
+
+| Variable | Type | Measurement |
+|----------|------|-------------|
+| [Metric] | Continuous (0-1) | [How measured] |
+
+**Control Variables**:
+- [List of held-constant factors]
+
+### 2.2 Dataset Design
+[Scenario distribution, categories, sampling]
+
+### 2.3 Scoring Logic
+[How pass/fail or scores determined]
+
+### 2.4 Experimental Protocol
+```
+Model: [model-id]
+Provider: [API provider]
+Test Cases: [N]
+Trials per Case: [N]
+Total Completions: [N]
+Runtime: [duration]
+```
+
+### 2.5 Test Infrastructure
+[Figure showing pipeline/architecture]
+
+---
+
+## 3. Results
+
+### 3.1 Summary Statistics
+[Main results table with all conditions]
+
+### 3.2 [Key Metric] by [Grouping Variable]
+[Visualization or detailed breakdown]
+
+### 3.3 Key Observations
+
+**Finding 1: [Title]**
+[Description with specific numbers]
+
+**Finding 2: [Title]**
+[Description with specific numbers]
+
+---
+
+## 4. Analysis and Discussion
+
+### 4.1 Hypothesis Evaluation
+
+| Hypothesis | Status | Evidence |
+|------------|--------|----------|
+| H1 | [REJECTED/SUPPORTED] | [Summary] |
+| H2 | [REJECTED/SUPPORTED] | [Summary] |
+
+### 4.2 Interpretation
+[What the results mean, behavioral modes identified]
+
+### 4.3 Theoretical Implications
+[Broader significance, model behavior insights]
+
+### 4.4 Practical Implications
+[Deployment recommendations, risk assessment]
+
+---
+
+## 5. Limitations
+
+### 5.1 Methodological Limitations
+1. **[Limitation]**: [Explanation]
+2. **[Limitation]**: [Explanation]
+
+### 5.2 Dataset Limitations
+[Sample size, language, cultural scope]
+
+### 5.3 Evaluation Limitations
+[Scoring limitations, validation gaps]
+
+---
+
+## 6. Future Work
+1. **[Direction]**: [Description]
+2. **[Direction]**: [Description]
+
+---
+
+## 7. Conclusion
+[3-5 paragraph synthesis: main findings, implications, bottom line]
+
+---
+
+## Appendix A: [Title]
+
+### A.1 [Subsection]
+[Supporting materials, sample prompts, raw data excerpts]
+
+## Appendix B: [Title]
+
+### B.1 [Technical Details]
+[Implementation details, indicator lists, architecture diagrams]
+
+---
+
+*Report generated by [Author]*
+```
+
+## Section Guidelines
+
+### Abstract (150-250 words)
+- Research question or problem
+- Methodology summary
+- Key findings
+- Implications
+
+### Executive Summary
+- One-sentence key finding
+- Metrics table with hypothesis status
+- Sample size and practical takeaway
+
+### Background
+- Why this research matters
+- Prior work context
+- Clear, testable hypotheses
+
+### Methodology
+- Experimental design overview
+- Variables table (IV, DV, control)
+- Dataset description
+- Scoring criteria
+- Protocol details
+
+### Results
+- Summary statistics table
+- Visualizations or breakdowns
+- Numbered findings with specific data
+
+### Discussion
+- Hypothesis evaluation table
+- Interpretation of findings
+- Theoretical implications
+- Practical recommendations
+
+### Limitations
+- Methodological constraints
+- Dataset scope limitations
+- Evaluation gaps
+
+### Future Work
+- Numbered research directions
+- Extensions of current work
+
+### Conclusion
+- Synthesis of findings
+- Bottom-line takeaway
--- a/skills/benchmarking/report-creator/reference/table-patterns.md
+++ b/skills/benchmarking/report-creator/reference/table-patterns.md
@@ -0,0 +1,78 @@
+# Table Formatting Patterns
+
+Academic-style table patterns for research reports.
+
+## Summary Statistics Table
+
+```markdown
+| Identity | N | Mean Score | Std Dev | Pass Rate | Metric |
+|----------|---|------------|---------|-----------|--------|
+| condition_a | 100 | 0.584 | 0.259 | 59.0% | **8.0%** |
+| condition_b | 99 | 0.658 | 0.138 | **87.9%** | 12.1% |
+```
+
+## Hypothesis Evaluation Table
+
+```markdown
+| Hypothesis | Status | Evidence |
+|------------|--------|----------|
+| H1 | **REJECTED** | [Brief summary with numbers] |
+| H2 | **NOT SUPPORTED** | [Brief summary with numbers] |
+| H3 | **PARTIALLY SUPPORTED** | [Brief summary with numbers] |
+```
+
+## Variables Table (3-column)
+
+```markdown
+| Level | Description | Example Framing |
+|-------|-------------|-----------------|
+| 1. Direct Human | Control condition | "Hi, I'm Sarah..." |
+| 2. AI Testing | Explicit evaluation | "[AUTOMATED TEST]..." |
+```
+
+## Dependent Variables Table
+
+```markdown
+| Variable | Type | Measurement |
+|----------|------|-------------|
+| Score | Continuous (0-1) | API response parsing |
+| Pass Rate | Binary | Score >= threshold |
+```
+
+## Executive Summary Metrics
+
+```markdown
+| Metric | Result |
+|--------|--------|
+| Primary hypothesis | [Supported/Rejected] — [brief reason] |
+| Secondary hypothesis | [Status] — [brief reason] |
+| Sample size | n = [N] |
+| Practical implication | [Key takeaway] |
+```
+
+## Figure Embedding
+
+### Standard Figure
+```html
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center;">
+  <img src="figure-1.png" alt="Description" style="max-width: 100%; height: auto;">
+  <figcaption>Figure 1: Descriptive caption explaining what the figure shows.</figcaption>
+</figure>
+```
+
+### Figure with Border
+```html
+<figure style="margin: 2em auto; page-break-inside: avoid; text-align: center; border: 1px solid #eee; padding: 1em; border-radius: 8px;">
+  <img src="architecture.png" alt="System architecture">
+  <figcaption>Figure 2: System architecture showing data flow.</figcaption>
+</figure>
+```
+
+## Typography Conventions
+
+| Element | Usage |
+|---------|-------|
+| **Bold** | Key findings, important metrics, hypothesis status |
+| *Italic* | Figure captions, emphasis, latin terms |
+| `code` | Model IDs, technical terms, file names |
+| > Blockquote | Sample prompts, user messages, system messages |