快速查看工具：生成极简HTML查看结构化数据，提升终端输出可读性

quick-view by shipshitdev/library

75 周安装量

19 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/shipshitdev/library --skill quick-view

数据可视化开发命令行工具

🇨🇳中文介绍

快速查看

在浏览器中生成最简化的 HTML 以查看结构化数据。样式极简，可读性最大化。

使用时机

用户想要查看在终端中难以阅读的输出
列表、表格、草稿、摘要等受益于视觉布局的内容
用户说："给我看看"、"查看这个"、"让它可查看"、"作为网页打开"

输出规则

务必：

使用语义化 HTML：<table>、<ul>、<details>、<pre>、<h1-3>
使用带有 CSS 变量的基础模板
写入 _private/views/ 目录
使用 open _private/views/{filename} 命令打开

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

896,800 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

290,500 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

233,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

163,300 周安装

在基础模板之外添加装饰性样式
使用 CSS 框架
过度设计或"美化"

视图文件有一个生命周期：临时 → 保留 → 归档。

阶段	文件名	时机
临时	`name-temp.html`	新视图的默认状态
保留	`name.html`	用户说"保留这个"、"这个不错"时
归档	`name.2025-01-01.html`	在提升新版本时，之前的保留文件

始终使用 -temp 后缀创建 — 每个新视图都以 name-temp.html 开始
批准后提升 — 当用户批准时，重命名为 name.html
替换前先归档 — 如果 name.html 已存在，在提升新版本前将其重命名为 name.DATE.html
切勿重新生成保留文件 — 只重新生成 -temp 文件

# 第一次迭代
drafts-temp.html  ← 已创建

# 用户："保留这个"
drafts.html       ← 已提升（临时文件删除）

# 后续迭代
drafts-temp.html  ← 新的临时文件创建
drafts.html       ← 保留文件保持不变

# 用户："这个更好，保留它"
drafts.2025-01-01.html  ← 旧的保留文件归档
drafts.html             ← 新的保留文件提升

触发提升的短语：

"保留这个"、"这个不错"、"保存这个"
"把这个设为默认"、"锁定这个"
"我喜欢这个"

每个快速查看 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{title}</title>
  <style>
    :root {
      --bg: #fff;
      --text: #222;
      --muted: #666;
      --border: #ddd;
      --accent: #1976d2;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #1a1a1a;
        --text: #e0e0e0;
        --muted: #999;
        --border: #333;
        --accent: #64b5f6;
      }
    }
    body {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
      font-family: system-ui;
      background: var(--bg);
      color: var(--text);
    }
    table { border-collapse: collapse; width: 100%; }
    td, th { border: 1px solid var(--border); padding: 8px; text-align: left; }
    .meta { color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem; }
    details { margin: 0.5rem 0; }
    summary { cursor: pointer; }
    pre {
      background: var(--border);
      padding: 1rem;
      overflow-x: auto;
      border-radius: 4px;
    }

    /* 长内容截断 */
    .truncate {
      max-height: 200px;
      overflow: hidden;
      position: relative;
    }
    .truncate.expanded { max-height: none; }
    .truncate:not(.expanded)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(transparent, var(--bg));
    }
    .expand-btn {
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem 0;
      font-size: 0.875rem;
    }

    /* 类型边框 */
    .type-user { border-left: 3px solid var(--accent); padding-left: 1rem; }
    .type-draft { border-left: 3px solid #ff9800; padding-left: 1rem; }
    .type-done { border-left: 3px solid #4caf50; padding-left: 1rem; }

    /* 来源归属 */
    .source { color: var(--muted); font-size: 0.75rem; }
    .source a { color: var(--muted); }
    .source a:hover { color: var(--accent); }
  </style>
</head>
<body>
<p class="meta">生成时间: {timestamp} · {count} 个项目</p>
{content}
<script>
// 截断切换
document.querySelectorAll('.truncate').forEach(el => {
  if (el.scrollHeight > 220) {
    const btn = document.createElement('button');
    btn.className = 'expand-btn';
    btn.textContent = '显示更多';
    btn.onclick = () => {
      el.classList.toggle('expanded');
      btn.textContent = el.classList.contains('expanded') ? '显示更少' : '显示更多';
    };
    el.after(btn);
  } else {
    el.classList.add('expanded'); // 无需截断
  }
});
</script>
</body>
</html>

<h1>标题</h1>
<ul>
  <li><strong>@username</strong> — 待办事项</li>
</ul>

<table>
  <tr><th>联系人</th><th>操作</th><th>草稿</th></tr>
  <tr><td>@name</td><td>跟进</td><td>你好...</td></tr>
</table>

可展开区域（用于长内容）

<details>
  <summary><strong>@username</strong> — 操作</summary>
  <div class="truncate">
    <pre>可能需要截断的长内容...</pre>
  </div>
</details>

<div class="type-user">用户消息或输入</div>
<div class="type-draft">草稿内容</div>
<div class="type-done">已完成项目</div>

<p>
  <a href="tg://resolve?domain=username">打开 Telegram</a> ·
  <button onclick="navigator.clipboard.writeText('draft text')">复制</button>
</p>

带来源的数据（引用和深入查看）

当显示从外部来源收集的数据时，始终包含用于深入查看的归属链接。

添加到基础模板 CSS：

.source { color: var(--muted); font-size: 0.75rem; }
.source a { color: var(--muted); }
.source a:hover { color: var(--accent); }

内联归属（列表首选）：

<div class="tip">
  <strong>提示标题</strong> — 提示描述。
  <span class="source">— <a href="https://x.com/user/status/123">@username</a></span>
</div>

带来源列的表格：

<table>
  <tr><th>提示</th><th>来源</th></tr>
  <tr>
    <td>此处描述</td>
    <td class="source"><a href="https://x.com/user/status/123">@user</a></td>
  </tr>
</table>

摘要中带来源的可展开内容：

<details>
  <summary><strong>提示标题</strong> <span class="source">— <a href="URL">@source</a></span></summary>
  <p>完整内容...</p>
</details>

带主要来源的元数据头部：

<p class="meta">
  生成时间: {timestamp} · {count} 个项目 ·
  来源: <a href="https://x.com/user/status/123">原始主题</a>
</p>

当数据来自外部来源时，始终链接到原始出处
社交媒体使用 @username，文章使用域名
来源链接应低调/不显眼，不应突出
对于来自单一来源的集合，在元数据头部包含主要来源

可编辑草稿（带差异跟踪）

适用于用户在发送前可能编辑的草稿。跟踪原始版本与编辑版本以供后续分析。

<details>
  <summary><strong>@username</strong> — 操作 <span class="status"></span></summary>
  <pre contenteditable="true"
       data-username="username"
       data-original="原始草稿文本在此"
       onblur="saveDraft(this)">原始草稿文本在此</pre>
  <div class="actions">
    <a href="tg://resolve?domain=username">打开 Telegram</a>
    <button onclick="copyDraft(this)">复制</button>
  </div>
</details>

在 <body> 结束前（在 </body> 标签之前）包含此脚本块：

function saveDraft(el) {
  const key = 'draft_' + el.dataset.username;
  const edited = el.textContent.trim();
  const original = el.dataset.original;
  if (edited !== original) {
    localStorage.setItem(key, edited);
    el.closest('details').querySelector('.status').textContent = '(已编辑)';
  }
}

function copyDraft(btn) {
  const pre = btn.closest('details').querySelector('pre');
  navigator.clipboard.writeText(pre.textContent.trim());
  btn.textContent = '已复制！';
  setTimeout(() => btn.textContent = '复制', 1500);
}

function restoreEdits() {
  document.querySelectorAll('pre[data-username]').forEach(el => {
    const saved = localStorage.getItem('draft_' + el.dataset.username);
    if (saved) {
      el.textContent = saved;
      el.closest('details').querySelector('.status').textContent = '(已编辑)';
    }
  });
}

function exportEdits() {
  const edits = [];
  document.querySelectorAll('pre[data-username]').forEach(el => {
    const original = el.dataset.original;
    const current = el.textContent.trim();
    if (original !== current) {
      edits.push({ username: el.dataset.username, original, edited: current });
    }
  });
  if (edits.length === 0) { alert('没有可导出的编辑'); return; }
  const blob = new Blob([JSON.stringify({exported_at: new Date().toISOString(), edits}, null, 2)], {type: 'application/json'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'draft_edits.json';
  a.click();
}

restoreEdits();

使用可编辑草稿时，在头部添加导出按钮：

<p class="meta">生成时间: {timestamp} · {count} 个草稿 · <button onclick="exportEdits()">导出编辑</button></p>

确定要显示的数据（文件、变量、最近的输出）
选择模式：列表、表格或可展开区域
使用上述模板生成 HTML
写入 _private/views/{name}-temp.html
运行 open _private/views/{name}-temp.html
如果用户批准，提升为 {name}.html

用户："给我看看草稿"

读取 _private/drafts/outreach_drafts.md
解析每个草稿（标题 = 联系人，正文 = 草稿）
为每个草稿生成带有 <details> 的 HTML
写入 _private/views/drafts-temp.html
运行 open _private/views/drafts-temp.html

结果：浏览器打开，用户看到可展开的草稿列表，自动深色/浅色模式，长内容被截断并带有"显示更多"按钮，可以复制每个草稿。

用户："看起来不错，保留它"

重命名 drafts-temp.html → drafts.html
确认："已保存为 drafts.html"

此技能生成功能性的 HTML，样式极简。如需完整的视觉样式，请在生成后调用 html-style 技能。

快速查看使用的类（与 html-style 兼容）：

类	用途
`.type-user`	用户输入/消息
`.type-draft`	草稿内容
`.type-done`	已完成项目
`.source`	归属链接
`.meta`	元数据头部
`.truncate`	长内容容器
`.actions`	操作按钮容器

用于 JS 钩子的数据属性：

data-username — 草稿的标识符
data-original — 用于差异跟踪的原始文本

截断模式和 CSS 变量方法灵感来源于 simon willison's claude-code-transcripts。

🇺🇸English

Quick View

Generate minimal HTML to review structured data in a browser. Minimal styling, maximum readability.

When to Use

User wants to review output that's hard to read in terminal
Lists, tables, drafts, summaries that benefit from visual layout
User says: "show me", "view this", "make reviewable", "open as webpage"

Output Rules

DO:

Semantic HTML: <table>, <ul>, <details>, <pre>, <h1-3>
Use the base template with CSS variables
Write to _private/views/
Open with open _private/views/{filename}

DO NOT:

Add decorative styling beyond the base template
Use CSS frameworks
Over-engineer or "make it nice"

File Naming

Views have a lifecycle: temporary → keeper → archived.

Stage	Filename	When
Temporary	`name-temp.html`	Default for new views
Keeper	`name.html`	User says "keep this", "this is good"
Archived	`name.2025-01-01.html`	Previous keeper when promoting new one

Rules:

Always create with-temp suffix — Every new view starts as name-temp.html
Promote on approval — When user approves, rename to name.html
Archive before replacing — If name.html exists, rename to name.DATE.html before promoting
Never regenerate keepers — Only regenerate -temp files

Workflow:

# First iteration
drafts-temp.html  ← created

# User: "keep this"
drafts.html       ← promoted (temp deleted)

# Later iteration
drafts-temp.html  ← new temp created
drafts.html       ← keeper untouched

# User: "this is better, keep it"
drafts.2025-01-01.html  ← old keeper archived
drafts.html             ← new keeper promoted

Trigger phrases for promotion:

"keep this", "this is good", "save this"
"make this the default", "lock this in"
"I like this one"

Base Template

Every quick-view HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{title}</title>
  <style>
    :root {
      --bg: #fff;
      --text: #222;
      --muted: #666;
      --border: #ddd;
      --accent: #1976d2;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #1a1a1a;
        --text: #e0e0e0;
        --muted: #999;
        --border: #333;
        --accent: #64b5f6;
      }
    }
    body {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
      font-family: system-ui;
      background: var(--bg);
      color: var(--text);
    }
    table { border-collapse: collapse; width: 100%; }
    td, th { border: 1px solid var(--border); padding: 8px; text-align: left; }
    .meta { color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem; }
    details { margin: 0.5rem 0; }
    summary { cursor: pointer; }
    pre {
      background: var(--border);
      padding: 1rem;
      overflow-x: auto;
      border-radius: 4px;
    }

    /* Long content truncation */
    .truncate {
      max-height: 200px;
      overflow: hidden;
      position: relative;
    }
    .truncate.expanded { max-height: none; }
    .truncate:not(.expanded)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(transparent, var(--bg));
    }
    .expand-btn {
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem 0;
      font-size: 0.875rem;
    }

    /* Type borders */
    .type-user { border-left: 3px solid var(--accent); padding-left: 1rem; }
    .type-draft { border-left: 3px solid #ff9800; padding-left: 1rem; }
    .type-done { border-left: 3px solid #4caf50; padding-left: 1rem; }

    /* Source attribution */
    .source { color: var(--muted); font-size: 0.75rem; }
    .source a { color: var(--muted); }
    .source a:hover { color: var(--accent); }
  </style>
</head>
<body>
<p class="meta">Generated: {timestamp} · {count} items</p>
{content}
<script>
// Truncation toggle
document.querySelectorAll('.truncate').forEach(el => {
  if (el.scrollHeight > 220) {
    const btn = document.createElement('button');
    btn.className = 'expand-btn';
    btn.textContent = 'Show more';
    btn.onclick = () => {
      el.classList.toggle('expanded');
      btn.textContent = el.classList.contains('expanded') ? 'Show less' : 'Show more';
    };
    el.after(btn);
  } else {
    el.classList.add('expanded'); // No truncation needed
  }
});
</script>
</body>
</html>

Patterns

List of items

<h1>Title</h1>
<ul>
  <li><strong>@username</strong> — action item</li>
</ul>

Table

<table>
  <tr><th>Contact</th><th>Action</th><th>Draft</th></tr>
  <tr><td>@name</td><td>Follow up</td><td>Hey...</td></tr>
</table>

Expandable sections (for long content)

<details>
  <summary><strong>@username</strong> — action</summary>
  <div class="truncate">
    <pre>Long content here that may need truncation...</pre>
  </div>
</details>

Type-differentiated items

<div class="type-user">User message or input</div>
<div class="type-draft">Draft content</div>
<div class="type-done">Completed item</div>

With actions

<p>
  <a href="tg://resolve?domain=username">Open Telegram</a> ·
  <button onclick="navigator.clipboard.writeText('draft text')">Copy</button>
</p>

Sourced data (citations & drill-down)

When displaying data gathered from external sources, always include attribution links for drill-down.

Add to base template CSS:

.source { color: var(--muted); font-size: 0.75rem; }
.source a { color: var(--muted); }
.source a:hover { color: var(--accent); }

Inline attribution (preferred for lists):

<div class="tip">
  <strong>Tip title</strong> — Description of the tip.
  <span class="source">— <a href="https://x.com/user/status/123">@username</a></span>
</div>

Table with source column:

<table>
  <tr><th>Tip</th><th>Source</th></tr>
  <tr>
    <td>Description here</td>
    <td class="source"><a href="https://x.com/user/status/123">@user</a></td>
  </tr>
</table>

Expandable with source in summary:

<details>
  <summary><strong>Tip title</strong> <span class="source">— <a href="URL">@source</a></span></summary>
  <p>Full content...</p>
</details>

Meta header with main source:

<p class="meta">
  Generated: {timestamp} · {count} items ·
  Source: <a href="https://x.com/user/status/123">Original thread</a>
</p>

Principles:

Always link to original when data comes from external sources
Use @username for social media, domain for articles
Source links should be muted/subtle, not prominent
Include main source in meta header for collections from single source

Editable drafts (with diff tracking)

For drafts that user may edit before sending. Tracks original vs edited for later analysis.

<details>
  <summary><strong>@username</strong> — action <span class="status"></span></summary>
  <pre contenteditable="true"
       data-username="username"
       data-original="Original draft text here"
       onblur="saveDraft(this)">Original draft text here</pre>
  <div class="actions">
    <a href="tg://resolve?domain=username">Open Telegram</a>
    <button onclick="copyDraft(this)">Copy</button>
  </div>
</details>

Include this script block at end of <body> (before closing </body> tag):

function saveDraft(el) {
  const key = 'draft_' + el.dataset.username;
  const edited = el.textContent.trim();
  const original = el.dataset.original;
  if (edited !== original) {
    localStorage.setItem(key, edited);
    el.closest('details').querySelector('.status').textContent = '(edited)';
  }
}

function copyDraft(btn) {
  const pre = btn.closest('details').querySelector('pre');
  navigator.clipboard.writeText(pre.textContent.trim());
  btn.textContent = 'Copied!';
  setTimeout(() => btn.textContent = 'Copy', 1500);
}

function restoreEdits() {
  document.querySelectorAll('pre[data-username]').forEach(el => {
    const saved = localStorage.getItem('draft_' + el.dataset.username);
    if (saved) {
      el.textContent = saved;
      el.closest('details').querySelector('.status').textContent = '(edited)';
    }
  });
}

function exportEdits() {
  const edits = [];
  document.querySelectorAll('pre[data-username]').forEach(el => {
    const original = el.dataset.original;
    const current = el.textContent.trim();
    if (original !== current) {
      edits.push({ username: el.dataset.username, original, edited: current });
    }
  });
  if (edits.length === 0) { alert('No edits to export'); return; }
  const blob = new Blob([JSON.stringify({exported_at: new Date().toISOString(), edits}, null, 2)], {type: 'application/json'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'draft_edits.json';
  a.click();
}

restoreEdits();

Add export button in header when using editable drafts:

<p class="meta">Generated: {timestamp} · {count} drafts · <button onclick="exportEdits()">Export Edits</button></p>

Workflow

Identify the data to display (file, variable, recent output)
Choose pattern: list, table, or expandable sections
Generate HTML using template above
Write to _private/views/{name}-temp.html
Run open _private/views/{name}-temp.html
If user approves, promote to {name}.html

Example

User: "show me the drafts"

Claude:

Reads _private/drafts/outreach_drafts.md
Parses each draft (heading = contact, body = draft)
Generates HTML with <details> for each draft
Writes to _private/views/drafts-temp.html
Runs open _private/views/drafts-temp.html

Result: Browser opens, user sees expandable list of drafts with auto dark/light mode, long content truncated with "Show more", can copy each one.

User: "this looks good, keep it"

Claude:

Renames drafts-temp.html → drafts.html
Confirms: "Saved as drafts.html"

Styling Handoff

This skill produces functional HTML with minimal styling. For full visual styling, invoke the html-style skill after generating.

Classes used by quick-view (compatible with html-style):

Class	Purpose
`.type-user`	User input/message
`.type-draft`	Draft content
`.type-done`	Completed item
`.source`	Attribution links
`.meta`	Metadata header
`.truncate`	Long content container

Data attributes for JS hooks:

data-username — Identifier for drafts
data-original — Original text for diff tracking

Attribution

Truncation pattern and CSS variables approach inspired by simon willison's claude-code-transcripts.

Weekly Installs

Repository

shipshitdev/library

GitHub Stars

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykFail

Installed on

codex58

opencode57

gemini-cli56

cursor52

github-copilot49

claude-code49

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

120,000 周安装