Automated summary

Generates a self-contained HTML page with inline CSS and opens it in the browser to display content that is too dense for the terminal.

Strengths

Ships a complete, adaptable HTML/CSS template with tables, cards, tags and a responsive grid
States clear trigger criteria: tables with 5+ columns, lists of 20+ items, multi-section reports
The file is self-contained and written to /tmp, so there are no dependencies or project clutter
Lets the user read the output in a separate window while continuing to type in the terminal

Limitations

Assumes a macOS-like environment with the `open` command and a /tmp filesystem
Only changes presentation, not content quality; it does not sort or filter the data
No cleanup mechanism for HTML files accumulating in /tmp

When to use it

Use it when a response produces a wide table, a long structured list or a multi-section report that is hard to read in the terminal.

When not to use it

Avoid it for short answers, code snippets, simple lists or conversational replies.

Security analysis

Safe

Quality score85/100

The skill only generates a self-contained local HTML file under /tmp and opens it with the macOS `open` command. There is no network access, no secret/token handling, no destructive filesystem operations, and no obfuscated or encoded payloads. The only execution is running the user's default browser on a locally-written file, which is low risk; the sole minor note is that `open` is macOS-specific and the skill implicitly requires Write/bash despite declaring no allowed-tools, but neither introduces a security concern.

No concerns found

How this analysis is made

Examples

Large comparison table

Compare the top 12 Postgres hosting providers across price, region, backups, HA and SLA in a table.

Long audit report

Audit this repo's dependencies and give me a full report of outdated packages, licenses and known CVEs.

Side-by-side architecture options

Lay out the three architecture options for our event pipeline side by side with pros, cons and costs.

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

HTML View Skill

Name: HTML View
Author: Skills Guide Bot

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

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/html-view-mryiqhcj/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/html-view-mryiqhcj' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/html-view-mryiqhcj/download' --output '.skill-downloads/html-view-mryiqhcj/SKILL.md.part' && mv '.skill-downloads/html-view-mryiqhcj/SKILL.md.part' '.skill-downloads/html-view-mryiqhcj/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code

test -f '.skill-downloads/html-view-mryiqhcj/SKILL.md' && test -s '.skill-downloads/html-view-mryiqhcj/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/html-view' && cp -R '.skill-downloads/html-view-mryiqhcj' '.claude/skills/html-view'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation

openskills install './.skill-downloads/html-view-mryiqhcj'

openskills read 'html-view-mryiqhcj'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/html-view-mryiqhcj/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

PDF Reader

Productivity

Read and extract text from PDF files, including documents, reports, contracts, and spreadsheets. Works with local files, URLs, and WhatsApp attachments. Use whenever PDF content is needed, even if not explicitly requested.

Claude CodeCursorCodexbeginnerSafe 20,122

Skills Guide Bot

Discord Messaging Workflows

Productivity

Use the message tool to send, edit, and moderate Discord messages with interactive components.

Claude CodeintermediateSafe 388,021

Skills Guide Bot

Interactive Verdict Preview

Productivity

Generate an interactive HTML preview of keep/drop verdicts for maintainer review, then process the pasted feedback JSON.

Claude CodeintermediateSafe 316,798

Skills Guide Bot

HTML View

Recommended for

Automated summary

Strengths

Limitations

Security analysis

Examples

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

How It Works

HTML Template

Content Patterns

Table

Card Grid

Instructions

Style Guide

From the file to a first result

1. Download the file

2. Check prerequisites

3. Load the skill

4. Try a first task

PDF Reader

Discord Messaging Workflows

Interactive Verdict Preview