메뉴
Author self-contained moss-html blocks for HTML previews, embedded HTML, interactive prototypes, and behavior demos in Moss notes.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.