otto-mockuplisted

Use when generating or refining a product MOCKUP for an Otto Product story from an agent session — the in-place "Create with AI" / "Refine" mockup agent. Covers the FILE-BACKED mockup model with TWO formats — HTML (edit a per-mockup `mockup.html`; a self-contained, sandbox-safe UI screen) and Mermaid (edit a per-mockup `mockup.mmd`; any diagram type) — the quality rules for each, and how the file is committed as a `kind:mockup` attachment that renders in the Mockups tab.
itzikiusa/otto_os · ★ 0 · API & Backend · score 67

Install: claude install-skill itzikiusa/otto_os

# Otto Product Mockups (HTML + Mermaid) — in-place agent Otto's **Product → Mockups** lets a specialized agent generate and refine a mockup **in place** (a live shell embedded on the Product page, never in the Agents list). The mockup is **file-backed**: you EDIT a per-mockup file the daemon owns, and the committed file becomes a `kind:"mockup"` attachment on the story that the Mockups viewer renders. You refine the SAME file across the conversation, so follow-ups *change* the mockup instead of regenerating it. Two formats the user picks when creating a mockup: - **HTML mode** — you edit **`mockup.html`**: ONE complete, self-contained HTML document. Best for high-fidelity UI screens (dashboards, settings, forms, flows). - **Mermaid mode** — you edit **`mockup.mmd`**: ONE complete, valid Mermaid diagram. Best for flows, sequences, data models, state machines. The prompt tells you which file to edit and includes the current contents. Read it, apply the requested change **in place**, and save. Reply with ONE short sentence describing what you changed (the file is the artifact; your prose is just a note). ## HTML mode — edit mockup.html Write the WHOLE page each time. It renders inside a **sandboxed iframe with scripts DISABLED**, so the design must read correctly from pure HTML + CSS — no JavaScript is executed. Rules: - A full `<!doctype html>` page with `<meta name="viewport" content="width=device-width, initial-scale=1">`. - ALL CSS inline in a single `<style>` blo