Moss html

Skill brsbl/moss-skills/skills/moss-html

Skills for working with https://www.mossnotes.app/

Install

npx -y skills add brsbl/moss-skills --skill moss-html

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.7 KB, as published. Nobody here has run it

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>
  body {
    width: 1200px;
    min-height: 900px;
    margin: 0;
    padding: 40px;
  }
</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 preview runs in an isolated data URL. Scripts, forms, modals, and popups work, but do not rely on localStorage, sessionStorage, cookies, same-origin fetches, parent/window APIs, or Moss internals.
Set width and height or min-height on body or html; otherwise Moss uses a 1200x900 preview.
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">. Moss may normalize the document shell; keep the UI self-contained.
If the HTML contains literal triple backticks, wrap the fence with four or more backticks.
Use Moss visual language: light canvas surfaces, Moss green accents, subtle borders/shadows, no emojis.

One thing to look at

What its author says it does

SKILL.md

Moss HTML

Keep looking