name: html-view description: Render complex content as a styled HTML page and open in browser user_invocable: true

HTML View Skill

Render complex, large, or visually dense content as a beautiful HTML page and open it in the browser. Terminal is great for short answers - but for big tables, long lists, reports, and structured data, a browser page is much better.

Why This Exists

Claude Code often responds with long reports (20+ items). Reading them in terminal means scrolling up - but any keystroke snaps the view back to the bottom. You can't read and type at the same time. This skill renders the output in a browser window so you can read in one window and type in another.

When to Use

Use this skill proactively when content would be hard to read in terminal:

Large tables (5+ columns or 10+ rows)
Long structured lists (20+ items)
Reports with multiple sections
Side-by-side comparisons
Timelines, dashboards, status overviews
Any output where formatting matters for comprehension

Do NOT use for:

Short answers (< 20 lines)
Simple lists
Code snippets
Conversational responses

How It Works

Generate a self-contained HTML file with inline CSS
Save to /tmp/claude-view-{timestamp}.html
Open in default browser via open command
Tell the user what was rendered

HTML Template

Use this base structure. Adapt layout/components to the content type.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{TITLE}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    background: #fafafa;
    color: #1a1a1a;
    line-height: 1.6;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #111;
  }

  .subtitle {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 2rem;
  }

  h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: #333;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
  }

  th {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #555;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f0f0f0;
  }

  tr:hover { background: #f8f8f8; }

  .card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 0.75rem 0;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
  }

  .tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .tag-green  { background: #e6f9e6; color: #1a7a1a; }
  .tag-yellow { background: #fff8e0; color: #8a6d00; }
  .tag-red    { background: #fde8e8; color: #b91c1c; }
  .tag-blue   { background: #e8f0fe; color: #1a56db; }
  .tag-gray   { background: #f0f0f0; color: #666; }

  ul, ol { padding-left: 1.5rem; margin: 0.5rem 0; }
  li { margin: 0.3rem 0; }

  .muted { color: #999; }
  .bold { font-weight: 600; }
  .mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.85em; }

  @media (max-width: 768px) {
    body { padding: 1rem; }
    .card-grid { grid-template-columns: 1fr; }
    table { font-size: 0.8rem; }
  }
</style>
</head>
<body>
  <h1>{TITLE}</h1>
  <div class="subtitle">Generated by Claude Code</div>

  {CONTENT}

</body>
</html>

Content Patterns

Table

<table>
  <thead><tr><th>Column</th><th>Column</th></tr></thead>
  <tbody><tr><td>Value</td><td>Value</td></tr></tbody>
</table>

Card Grid

<div class="card-grid">
  <div class="card">
    <div class="bold">Title</div>
    <div class="muted">Description</div>
    <span class="tag tag-green">Status</span>
  </div>
</div>

Instructions

Determine the best layout for the content (table, cards, list, mixed)
Generate complete self-contained HTML (all CSS inline in <style>)
No external dependencies - everything must work offline

Write file:

FILE="/tmp/claude-view-$(date +%s).html"

Use the Write tool to create the HTML file
Open in browser:
```
open "$FILE"
```
Briefly confirm what was rendered

Style Guide

Clean, minimal Apple-inspired aesthetic
No heavy colors or gradients
Use tags/badges for status indicators
Generous whitespace
Readable font sizes

HTML View

Recommended for