html-view

星标0

分支0

更新时间2026年2月11日 01:52

Render complex content as a styled HTML page and open in browser

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

来源

VCasecnikovs

VCasecnikovs/vadimskills

打开 GitHub 仓库查看创作者相关仓库

下载

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

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

HTML View Skill

Why This Exists

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

同仓库更多 Skills

同仓库更多 Skills

HTML View Skill

Why This Exists

When to Use

How It Works

HTML Template

Content Patterns

Table

Card Grid

Instructions

Style Guide

HTML View Skill

Why This Exists

When to Use

How It Works

HTML Template

Content Patterns

Table

Card Grid

Instructions

Style Guide