Moss Html

Name: Moss Html
Author: brsbl

ASecurity

Author self-contained moss-html blocks for genuine interactive design artifacts, embedded HTML previews, prototypes, and behavior demonstrations that native Moss nodes cannot represent.

10 stars

0 votes

0 copies

1 views

Added 9/5/2026

ai-agentsjavascriptgojavashellnode

Works with

api

Security Analysis

A100/100

Scanned 9/5/2026

Install to Claude Code

$npx -y skills add brsbl/moss-skills --skill moss-html --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Moss Html?

Add the live security badge to your README — it updates automatically with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/brsbl-moss-html-moss-skills/badge)](https://www.skillsdirectory.com/skills/brsbl-moss-html-moss-skills)

More formats (shields.io, HTML) on the badges page.

Files

SKILL.md

---
name: moss-html
description: Author self-contained moss-html blocks for genuine interactive design artifacts, embedded HTML previews, prototypes, and behavior demonstrations that native Moss nodes cannot represent.
---

# Moss HTML

Use `moss-html` only for a genuine interactive design artifact or browser behavior that native Moss nodes cannot represent. Do not rebuild native tabs, tables, callouts, checklists, charts, comments, or review workflow. Keep requirements and review instructions in native Markdown.

## Complete Shell

~~~markdown
```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; }
  :root {
    color-scheme: light;
    --artifact-surface: rgb(253 250 246);
    --artifact-ink: rgb(72 67 60);
    --artifact-line: rgb(215 211 201);
    --artifact-accent: rgb(57 112 77);
  }
  body {
    width: 1200px;
    min-height: 900px;
    margin: 0;
    background: var(--artifact-surface);
    color: var(--artifact-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  .artifact { min-height: 900px; padding: 32px; }
</style>
</head>
<body>
  <main class="artifact"><!-- interactive artifact --></main>
</body>
</html>
```
~~~

Use a plain `moss-html` fence line; dimensions belong in the document CSS, not the fence.

## Runtime Contract

- The preview runs from an isolated data URL.
- Inline CSS and JavaScript are supported. Initialize behavior with `DOMContentLoaded`.
- `localStorage`, `sessionStorage`, cookies, same-origin fetches, parent/window APIs, and Moss internals are unavailable or unreliable.
- Note view shows a static screenshot before activating the live iframe. Make the initial state useful without JavaScript or network access.
- Set `width` and `height` or `min-height`; otherwise Moss uses 1200x900.
- Multiple jobs belong in separate focused fences.
- A visible button, tab, checkbox, filter, menu, or form control must work and use native semantics.

## Images And Dependencies

Workspace-relative asset paths do not resolve inside the HTML data URL. For a small required image, embed a self-contained data URL such as `src="data:image/png;base64,..."`; keep payload size reasonable. Remote images, fonts, scripts, and fetches may fail and must not be required for the first frame or core interaction.

Do not use `file://`, absolute local paths, Moss internal URLs, or placeholder image URLs.

## One Theme-Neutral Design

HTML nodes do not know the surrounding Moss theme. Use one fixed self-contained palette that remains legible in both light and dark Moss modes.

- Keep the canvas flush with the node; do not add a black or graphite outer frame.
- Use an opaque neutral surface, dark readable ink, restrained Moss-green accents, and subtle internal borders or shadows.
- Set `color-scheme` for native controls.
- Do not add a theme toggle or light/dark media query for the surrounding app.
- Do not use emojis as interface icons.

## Preservation And Validation

- Keep `<meta name="moss-html-version" content="v1">`.
- If the document contains literal triple backticks, wrap the outer fence with four or more backticks.
- Preserve existing behavior and self-contained dependencies when editing.
- Activate the iframe and test every visible control. Inspect the static first frame, live state, and fullscreen state when relevant.

## Final Check

- Native Moss nodes could not represent the artifact's interaction.
- The HTML is complete and self-contained.
- The first frame works without network or script execution.
- Every visible control behaves correctly.
- The fixed palette is readable in either Moss mode without a dark outer frame.

Moss Html

Works with

Security Analysis

Attribution

Comments (0)