Menu
Author self-contained moss-html blocks for HTML previews, embedded HTML, interactive prototypes, and behavior demos in Moss notes.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create or edit Moss canvas blocks and choose between moss-canvas and plain ASCII sketches for proposal notes, UI option cards, ASCII wireframes, rough diagrams, flows, and spatial visual thinking.
Comment annotation syntax for Moss notes. Use when adding, preserving, or editing note comments and their sidecar metadata.
Create or edit Moss formulas and variables, including editable anchors, derived values, bound references, display values, IDs, metadata, and table-cell usage.
YAML frontmatter rules for Moss note metadata. Use when adding or editing the optional metadata block at the top of a note.
Create or edit Moss links, including wiki note links, heading links, aliases, Markdown links, YouTube embeds, and media/link preservation rules.
Syntax and file rules for creating or editing Moss notes under ~/Moss/Notes/. Use when authoring or modifying notes, choosing a node type, or following Moss markdown conventions.
| name | moss-html |
| description | Author self-contained moss-html blocks for HTML previews, embedded HTML, interactive prototypes, and behavior demos in Moss notes. |
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>
body {
width: 1200px;
min-height: 900px;
margin: 0;
padding: 40px;
}
</style>
</head>
<body>
<!-- HTML preview or prototype content -->
</body>
</html>
```
Rules:
moss-html fence line; do not add dimensions to the fence.localStorage, sessionStorage, cookies, same-origin fetches, parent/window APIs, or Moss internals.width and height or min-height on body or html; otherwise Moss uses a 1200x900 preview.DOMContentLoaded.divs.<meta name="moss-html-version" content="v1">. Moss may normalize the document shell; keep the UI self-contained.