メニュー
Render complex content as a styled HTML page and open in browser
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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"