Menu
Render complex content as a styled HTML page and open in browser
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Open relevant web pages based on current context
Copy text to macOS clipboard using pbcopy
Open Finder at relevant location
Open markdown files in Typora editor for comfortable reading
| name | html-view |
| description | Render complex content as a styled HTML page and open in browser |
| user_invocable | true |
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.
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.
Use this skill proactively when content would be hard to read in terminal:
Do NOT use for:
/tmp/claude-view-{timestamp}.htmlopen commandUse 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>
<table>
<thead><tr><th>Column</th><th>Column</th></tr></thead>
<tbody><tr><td>Value</td><td>Value</td></tr></tbody>
</table>
<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>
<style>)FILE="/tmp/claude-view-$(date +%s).html"
open "$FILE"