Initial commit

skills/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.