{"slug":"open-octo-artifact-design","name":"artifact-design","description":"Design guidance for any HTML/Markdown file shown in octo's Artifacts panel — reports, dashboards, architecture/system diagrams, generated UIs, slide-style pages, 3D scenes. Read this BEFORE writing the file, not after — it calibrates how much design effort the request warrants and covers the panel's real constraints (the page runs on its own origin and can reference files beside it, external resources gated to an allowlist of CDN hosts, narrow default width, no live theme push). Use when the user asks to \"画架构图\" / \"generate a diagram\" / \"make a dashboard\" / \"produce a report page\" / \"visualize this as a page\" / build any artifact meant to be looked at rather than edited. If the page contains a chart, graph, plot, heatmap, or stat tile, also read references/charts.md — chart-type selection, color systems, legend/axis/tooltip conventions.","long_description":"---\nname: artifact-design\ndescription: Design guidance for any HTML/Markdown file shown in octo's Artifacts panel — reports, dashboards, architecture/system diagrams, generated UIs, slide-style pages, 3D scenes. Read this BEFORE writing the file, not after — it calibrates how much design effort the request warrants and covers the panel's real constraints (the page runs on its own origin and can reference files beside it, external resources gated to an allowlist of CDN hosts, narrow default width, no live theme push). Use when the user asks to \"画架构图\" / \"generate a diagram\" / \"make a dashboard\" / \"produce a report page\" / \"visualize this as a page\" / build any artifact meant to be looked at rather than edited. If the page contains a chart, graph, plot, heatmap, or stat tile, also read references/charts.md — chart-type selection, color systems, legend/axis/tooltip conventions.\n---\n\n# Artifact design\n\nAn artifact is any `.html`/`.htm`/`.md`/`.markdown`/`.png`/`.jpg`/`.jpeg`/`.gif`/`.svg`/`.webp`\nfile the agent produces. Writing one through `write_file`/`edit_file` surfaces it\nautomatically in the web UI's Artifacts panel; a file built some other way (a\nscript, a build step, a download) needs one `show_artifact` call with its\nabsolute path. This skill is about what to put *inside* the HTML — read it\nbefore writing the first line.\n\nIf the page contains any chart, graph, plot, heatmap, sparkline, or stat\ntile, read `references/charts.md` before writing the chart — chart-type\nselection, the color system (with a validated default palette in\n`references/palette.md`), legend/axis/tooltip conventions, and chart\nlegibility at the panel's docked width.\n\n## How the panel actually works — design within these constraints\n\n- **The page runs on its own origin — a real one, not the app's.** HTML\n renders from `http://.artifacts.localhost:/` inside a frame, so\n everything a normal web page can do locally works: `localStorage` and\n IndexedDB persist, `` saves a file, `requestFullscreen()` and\n pointer lock work, WebGL and Web Audio work. Its network is fenced by a\n Content-Security-Policy: the page may load from and talk to its own origin\n and the allowlisted CDN hosts below, and nothing else — no `fetch` to other\n APIs, no images or media from other hosts, no reaching octo's `/api`. Data\n the page needs must be in the page or in a file beside it; do not write code\n that calls external services or octo's API from inside the page.\n- **Files beside the page load by relative path.** `