메뉴
Render complex content as a styled HTML page and open in browser
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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"
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