moss-html - SKILL.md Agent Skill

name: moss-html description: Author self-contained moss-html blocks for HTML previews, embedded HTML, interactive prototypes, and behavior demos in Moss notes.

Moss HTML

Use moss-html when the artifact needs browser behavior or high-fidelity UI rendering: clickable controls, tabs, filters, menus, forms, animated states, realistic spacing/styling, or a small prototype that demonstrates how an interaction should work. Do not use HTML for plain prose, tables, simple diagrams, static screenshots, or rough spatial thinking; use semantic markdown, charts, callouts, Canvas, or images for those instead. For rough wireframes, flows, and spatial diagrams, use the Canvas node with the canonical moss-canvas fence.

Embed HTML directly in the note:

```moss-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="moss-html-version" content="v1">
<style>
  * { box-sizing: border-box; }
  html { background: rgb(253 250 246); }
  body {
    width: 1200px;
    min-height: 900px;
    margin: 0;
    padding: 40px;
    background: rgb(253 250 246);
    color: rgb(72 67 60);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
</style>
</head>
<body>
  <!-- HTML preview or prototype content -->
</body>
</html>
```

Rules:

Use a plain moss-html fence line; do not add dimensions to the fence.
Keep HTML self-contained in the fence. Inline CSS, JS, and images; workspace asset paths inside the fence do not resolve, and remote fonts, scripts, images, or other network assets are not reliable.
The iframe sandbox allows scripts, forms, modals, and popups, but not same-origin access. Do not rely on localStorage, sessionStorage, cookies, same-origin fetches, parent/window APIs, or Moss internals.
Define intrinsic size on body or html with width and height or min-height; Moss uses that footprint for the static PNG preview, defaulting to 1200x900 if omitted.
Note view shows a static screenshot first, then a live iframe after activation. Design a meaningful initial state without depending on JS or network.
Fullscreen mode exists, but the design should still read clearly within the note-view max height.
Multiple HTML previews should be separate fences. Prefer several small focused blocks over one oversized all-in-one preview.
Scripts, forms, dialogs, popups, and CSS-only interactions can be used.
Initialize script behavior with DOMContentLoaded.
If a control looks interactive (checkbox, toggle, tab, filter, menu, button), make it work with native controls and minimal script. Do not draw inert controls with plain divs.
Keep <meta name="moss-html-version" content="v1"> as the canonical Moss document marker. Moss may auto-wrap fragments and canonicalize the shell/head metadata on save; you own visible body content and any extra CSS/JS.
If the HTML contains literal triple backticks, wrap the fence with four or more backticks.
Use Moss visual language: warm page background, Moss green accents, subtle borders/shadows, no emojis.