Visual Explainer

Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.

Proactive table rendering. When you're about to present tabular data as an ASCII box-drawing table in the terminal (comparisons, audits, feature matrices, status reports, any structured rows/columns), generate an HTML page instead. The threshold: if the table has 4+ rows or 3+ columns, it belongs in the browser. Don't wait for the user to ask — render it as HTML automatically and tell them the file path. You can still include a brief text summary in the chat, but the table itself should be the HTML page.

Standard Template (MANDATORY)

Every visualize output MUST start from ./templates/standard.html. This file defines the complete Lerian Studio brand system.

Before generating any HTML, MUST read ./templates/standard.html and copy:

1. The complete <style> block (everything above the "DO NOT MODIFY" marker)
2. The <header class="lerian-header"> with the inline Lerian logo SVG
3. The <footer class="lerian-footer"> with logo, company name, and "Generated with Ring"
4. The date auto-fill <script>

Then add diagram-specific styles after the "TEMPLATE-SPECIFIC STYLES" marker.

What is Fixed (CANNOT change)