The HTML-Share Skill

A self-contained skill for creating and publishing browser-readable HTML documents.

What It Does

When chat text or a PDF is the wrong format, the html-share skill creates a composed HTML page and publishes it as a shareable link. Think visual reports, interactive comparisons, mockups, or dense reference documents you want someone to open in a browser.

Use this when: the user asks for an HTML mockup, explanation page, visual report, interactive document, comparison, design artifact, or any non-PDF deliverable they want to open/share in a browser.

The Workflow

1. Create

Write a single self-contained .html file. All CSS must be inline. No external dependencies.

2. Design

Apply the Kami design language (warm parchment, ink-blue accents, Charter typeface) unless the user gives different direction.

3. Publish

html-share upload /path/to/file.html --expiry 30d

4. Share

Return the url from the JSON output to the user. Done.

CLI Reference

html-share health
html-share upload ~/.hermes/cache/documents/html/example.html --expiry 30d
html-share upload ~/.hermes/cache/documents/html/example.html --expiry never

Allowed expiries: 1d, 7d, 30d, never. Default to 30d.

Success returns JSON:

{
  "success": true,
  "id": "...",
  "url": "https://.../u/...",
  "expiresAt": "...",
  "expiry": "30d",
  "file": "...",
  "bytes": 12345
}

Kami Design Language

Pages should feel editorial and composed, not like dashboards or widget boards.

Palette

Page: #f5f4ed warm parchment
Accent: #1B365D ink-blue
Body: #141413
Secondary: #3d3d3a
Muted: #6b6a64
Borders: #e8e6dc
Cards: #faf9f5

Typography

Font: Charter, Georgia, Palatino, serif
Mono: SF Mono, Menlo, Consolas
Titles: line-height 1.1–1.3
Dense body: line-height 1.4–1.45
Reading body: line-height 1.5–1.55
Metrics: tabular-nums

Styling Rules

Section titles: font-weight: 500, left border in ink-blue, 8pt padding
Tags: EEF2F7 background 1B365D text
Callouts: parchment background, left border in ink-blue
Code blocks: #eceae0 background, no syntax highlighting colors
Bullets: ink-blue markers
No bold serif beyond weight 500. No italic. No emoji. No gradients. No hard drop shadows.

Safety

Never upload secrets. Do not publish credentials, private keys, raw env files, or confidential customer data unless the user explicitly asks and understands the link is shareable.

Prefer summaries, redacted examples, and generated artifacts over raw private data. If the HTML includes sensitive business details, confirm the expiry window before publishing.

Minimum Template

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style>
  *{box-sizing:border-box}
  body{margin:0;background:#f5f4ed;color:#141413;
       font-family:Charter,Georgia,Palatino,serif;line-height:1.5}
  .page{max-width:920px;margin:0 auto;padding:48px 40px 72px}
  h1{font-size:26pt;font-weight:500;line-height:1.15;margin:0 0 10pt}
</style>
</head>
<body><main class="page"><h1>Title</h1><p>Body.</p></main></body>
</html>

This page was generated with the html-share skill to explain the html-share skill.