html-effectivenesslisted

# HTML Effectiveness: Interactive Output Engine ## Core Principle **Markdown is a wall of text. HTML is a spatial, interactive document.** When you have multi-dimensional information to present, generate a single self-contained HTML file that users can explore, filter, compare, and interact with. The browser is the universal runtime - no build steps, no dependencies, no exports needed. ## When to Use This Skill **Use HTML output when ANY of these are true:** - Comparing 2+ options with trade-offs (side-by-side cards) - Presenting data with >5 rows (sortable/filterable table) - Showing a timeline or sequence of events - Explaining a concept with collapsible sections - Reviewing code changes (annotated diffs) - Presenting a plan with phases and dependencies - Showing architecture or system design (boxes + arrows) - Any output where the reader needs to SCAN, not read linearly - Any output where the reader needs to CHOOSE between options - Any output with tabular data, charts, or visual relationships **Use plain markdown when:** - Simple Q&A (one paragraph answer) - Inline code fixes - Brief status updates - Sequential instructions (do X, then Y, then Z) ## 9 Output Patterns Select the pattern that matches your information type: ### 1. Comparison Board **When:** Evaluating approaches, tools, libraries, strategies **Structure:** Side-by-side cards with clear trade-offs, rating badges, recommendation highlight **Interaction:** Hover to highlight, click to expand details #