htmlify-v2

Please deep think / ultrathink as this is a complex task.

htmlify-v2

Static HTML document generator — takes any content the user points to (markdown files, notes, specs, plans, conversation context) and produces a polished, self-contained HTML file. Zero dependencies, opens directly in a browser, ready to share or print to PDF.

User input:

$ARGUMENTS

Expected usage patterns:
```bash
/htmlify <source>                           # HTMLify a file or path
/htmlify <source> --output path/to/out.html # Specify output path
/htmlify                                    # HTMLify from conversation context
/htmlify --dark                             # Use dark variant
```

Where `<source>` can be:
- A file path (markdown, text, any readable file)
- A directory (concatenates relevant files)
- Omitted — uses the current conversation context or the user's description

Purpose

Produce beautiful, zero-dependency static HTML documents from raw content. The output should look like a polished report you'd share with stakeholders — not a raw markdown render. Think Notion page or Linear changelog — clean, readable, professional.

Flow

1) Parse Arguments

• Determine the source content (file path, directory, or conversation context)
• Determine the output path (default: same directory as source, with .html extension; for context-based, use ./scratch/ or current directory)
• Determine theme (default: light; --dark for dark variant)

2) Load & Analyse Source Content

• Read the source content fully
• Identify the document structure:
  • Title and subtitle
  • Sections and their hierarchy
  • Tables, lists, code blocks
  • Diagrams (mermaid candidates)
  • Key findings, recommendations, callouts
  • Metrics or summary data
• Determine which components best represent each content element

3) Generate HTML

Rules:

• Use semantic HTML throughout — real HTML elements, NOT markdown rendered at runtime
• First line of the output file MUST be: <!-- Generated by htmlify-v2 -->
• All CSS is inlined in a <style> block — single self-contained file
• Select appropriate accent colours from the palette to visually distinguish sections
• Use callout variants to match tone (see palette below)
• Use tables for structured comparisons — don't force everything into cards
• Add anchor navigation bar if the document has 3+ sections
• Include mermaid diagrams where content describes flows, architectures, or relationships
• Add mermaid.js CDN script ONLY if mermaid diagrams are present
• Preserve the substance and detail of the source — don't summarise or truncate