New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Artifact Design

by open-octo in open-octo/octo-agent

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.

MITAuto-check passedGame Development

Install Artifact Design

skills CLI
$ npx skills add open-octo/octo-agent --skill artifact-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install open-octo/octo-agent artifact-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/open-octo/octo-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/internal/skills/defaults/artifact-design .claude/skills/artifact-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
artifact-design
GitHub stars
125
Token cost
~2.7k tokens
SKILL.md length
1,178 words
Files
3 (incl. references)
Skills in repo
40
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Tasks that involve Diagrams
  • SKILL.md covers How the panel actually works —…, Calibrate effort to the ask, Before you write and The box-and-arrow diagram…
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve 3D graphics and WebGL

What it does

Artifact Design is an agent skill from open-octo/octo-agent. 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 is a real web page that can reference files beside it by relative path, narrow default width, no live theme push). Use when the user asks to "画架构图" / "generate a diagram" / "make a…

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/charts.md` and `references/palette.md`).

It sits in Game Development, covering Diagrams, 3D graphics and WebGL and Slides and decks. The repository describes itself as: Open-source, single-binary, self-hosted AI agent — your models and data stay on your machine. A coding agent on par with Claude Code and a personal assistant lighter than… The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams
  • Tasks that involve 3D graphics and WebGL
  • Tasks that involve Slides and decks

Example prompts

  • “generate a diagram”
  • “make a dashboard”
  • “produce a report page”
  • “/artifact-design”

What it can do on your machine

Read from SKILL.md and the folder at commit 81448b2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Artifact Design loads about 2.7k tokens when it runs, and up to ~4.5k if it reads all its reference files. Until then it costs about 206 tokens; SKILL.md has 1,178 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~206
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from open-octo/octo-agent at commit 81448b2, republished under its MIT licence (© open-octo). 1,178 words, ~2,667 tokens.

Download SKILL.mdSave it as .claude/skills/artifact-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
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 is a real web page that can reference files beside it by relative path, 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.

Artifact design

An artifact is any .html/.htm/.md/.markdown/.png/.jpg/.jpeg/.gif/.svg/.webp file the agent produces. Writing one through write_file/edit_file surfaces it automatically in the web UI's Artifacts panel; a file built some other way (a script, a build step, a download) needs one show_artifact call with its absolute path. This skill is about what to put inside the HTML — read it before writing the first line.

If the page contains any chart, graph, plot, heatmap, sparkline, or stat tile, read references/charts.md before writing the chart — chart-type selection, the color system (with a validated default palette in references/palette.md), legend/axis/tooltip conventions, and chart legibility at the panel's docked width.

How the panel actually works — design within these constraints

  • The page is a real web page. HTML renders inside a frame from a path on octo's own address, so everything a normal web page can do works: localStorage persists (the page's keys are kept apart from octo's own and from other pages'), <a download> saves a file, requestFullscreen() and pointer lock work, WebGL and Web Audio work, and fetch can reach public APIs. Do not write code that calls octo's own API from inside the page.

  • Files beside the page load by relative path. <script src="./app.js">, <link href="./style.css">, <img src="./chart.png">, loader.load('./model.glb'), fetch('./data.json'), fonts, audio, video and other .html pages in the same directory (or a subdirectory) are served with the page. Never start such a path with /: the page lives under a path prefix, and an absolute path lands outside it. A single file is still the simplest artifact; split into sibling files when the page has a real script or a binary asset (a model, a font, a recording) that would be absurd to inline.

  • External resources load from anywhere — which is why to be sparing. Pin exact versions; if the user is in mainland China, prefer a mirror reachable there (cdn.bootcdn.net, cdn.staticfile.net, registry.npmmirror.com). Reach for a CDN only when the page needs a real library (React, ECharts, Chart.js, three.js, …) — a page that depends on one shows nothing when that host is unreachable, and a saved Light App has to keep working for years.

  • The default viewport is narrow. The panel is a 420px-wide docked sidebar by default; the user can maximize it to min(900px, 75vw), but don't design for that as the common case. Build the layout to read cleanly at ~380–420px first, then let it use extra space gracefully above that — not the other way around. This is the opposite of most artifact platforms, where the canvas starts wide. Multi-column layouts, wide tables, and side-by-side diagram lanes need an explicit @media (max-width: 720px) (or tighter) fallback to a single column, or they'll clip or force horizontal scroll in the default view.

  • The theme arrives on the URL — read it. octo loads the page with ?theme=dark or ?theme=light: the palette the user picked in the Web UI, which is not necessarily the OS's. Nothing applies it for you, so a page that only watches prefers-color-scheme follows the OS and becomes the one dark rectangle on a light screen the moment the two disagree. Apply it at startup and key the palette off data-theme, keeping the media query as the fallback for a page opened bare in a browser tab:

    html
    <script>
  document.documentElement.dataset.theme =
    new URLSearchParams(location.search).get('theme')
    ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
</script>

    Put it in <head>, before the body paints, or the page flashes the wrong palette first. octo reloads the frame when the theme changes, so reading it once at load is enough — no listener.

  • Don't out-dark the UI. octo's own dark surfaces are #1E1E20 (layout) and #2C2C2E (containers). A page that goes to near-black reads as a hole punched in the window rather than part of it.

  • Update in place, not by versioning. Re-running write_file/edit_file against the same absolute path updates that same panel entry rather than creating a new one. If you're iterating on a diagram, keep writing the same file.

  • No title/gallery metadata to set. The panel derives the display name from the file's basename and its type label from the extension — there is no favicon or description field to populate. A <title> tag is harmless but cosmetically inert here.

  • Markdown gets code-block styling for free (the panel inlines a highlight.js theme for .md previews) — don't hand-roll code-fence CSS in a Markdown artifact; that's only a concern for HTML artifacts.

Show full SKILL.md (472 more words)Show less

Calibrate effort to the ask

Don't build a dashboard when a status note was asked for, and don't ship a bare unstyled div when the user asked for something they'll actually look at and share. Match investment to what's being requested:

  • A one-off answer, a small table, a short report → a clean, readable page. Spend your effort on typography and spacing, not on custom components.
  • A named artifact meant to be referred back to (an architecture diagram, a dashboard, a generated tool UI) → invest in layout structure, a real color system, and responsive behavior — this is the case the rest of this skill is written for.

Before you write

Before calling write_file/show_artifact, confirm:

  • Every <script src> / <link rel="stylesheet" href> is either a relative path to a file you also wrote beside the page, or a CDN URL with a pinned version
  • Every relative reference names a file that really exists in the page's directory, and none starts with /
  • Web fonts only from fonts.googleapis.com or a .woff2 beside the page, always with a system-stack fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif — or skip the web font and use the stack alone
  • Any image is a file beside the page or a data: URI, never a network URL at the network's mercy
  • The theme is read off the URL in <head>, and :root[data-theme="dark"] covers every color used, and every color has a light-mode default that isn't just "assume light"
  • The narrowest layout (~380px) has no fixed-pixel widths wider than the viewport and no unintended horizontal scroll on the page body — wrap any table/code block that must be wide in its own overflow-x: auto container instead

The box-and-arrow diagram pattern

For architecture/system/flow diagrams, hand-written CSS beats reaching for a charting or graph-layout library — you get exact visual control, real theme support, and no library to inline. This is the same technique behind well-made "layered boxes with a few connectors" diagrams:

  • Zones — a <div> per architectural layer/boundary, colored via a CSS variable per zone (--accent, --serve, --agent, …), laid out with display:flex/grid, not absolute positioning
  • Cards inside a zone — one per component, a title + one or two lines of description, not a paragraph
  • Connectors — Unicode arrow glyphs (↕ ↓ ↑ → ←) centered in their own small <div>, not actual line-drawing; this keeps everything reflow-safe when the panel width changes, which real SVG connectors are not
  • Legend — a row of colored dots (<span class="dot"> with background: var(--accent)) mapped 1:1 to the zone colors, so readers decode color without following a line
  • Numbered steps — <ol> with CSS counters (counter-increment/content: counter(s)) rendered as a small filled circle, cheaper and crisper than an actual numbered-badge image

Skeleton:

html
<script>
  // The theme octo resolved, applied before anything paints. See above.
  document.documentElement.dataset.theme =
    new URLSearchParams(location.search).get('theme')
    ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
</script>
<style>
  :root { --bg:#fafaf9; --ink:#1c1917; --line:#d6d3d1; --accent:#2563eb; --accent-soft:#eff6ff; }
  :root[data-theme="dark"] { --bg:#1e1e20; --ink:#f5f5f4; --line:#3a3a3d; --accent:#60a5fa; --accent-soft:#172033; }
  :root[data-theme="light"] { --bg:#fafaf9; --ink:#1c1917; --line:#d6d3d1; --accent:#2563eb; --accent-soft:#eff6ff; }
  /* The fallback for a page opened outside octo, where no theme rides the URL. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { --bg:#1e1e20; --ink:#f5f5f4; --line:#3a3a3d; --accent:#60a5fa; --accent-soft:#172033; }
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system,BlinkMacSystemFont,sans-serif; }
  .wrap { padding: 20px 16px; }
  .zone { background:var(--accent-soft); border:1px solid var(--line); border-radius:12px; padding:14px; }
  .cards { display:grid; gap:10px; }
  .card { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
  .connector { text-align:center; color:var(--line); font-size:20px; margin:6px 0; }
  @media (min-width: 640px) { .cards.two { grid-template-columns: 1fr 1fr; } }
</style>
<div class="wrap">
  <div class="zone">
    <div class="cards">
      <div class="card"><b>Component</b><br><span style="color:var(--line)">one line of description</span></div>
    </div>
  </div>
  <div class="connector">↓</div>
</div>

Reach for real SVG or an inlined graph library only when the diagram has many interconnected nodes needing automatic layout, or edges that genuinely cross at arbitrary points — most system/architecture diagrams are layered boxes and don't need that.

© open-octo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in internal/skills/defaults/artifact-design of open-octo/octo-agent.

  • SKILL.md
  • references/charts.md
  • references/palette.md

Open the folder on GitHubat commit 81448b2

Compare with similar skills

Artifact Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Artifact Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Artifact Design this skillopen-octo/octo-agent125—~2.7kAutomated safety check: PassMIT
Magazine Web Pptsanqiufong/slides-from-anything1322 repos~2.4kAutomated safety check: PassMIT
Mira 3Dsandeco/mira-animator218—~3.6kAutomated safety check: PassCustom licence
Mira Offlinesandeco/mira-animator218—~1.3kAutomated safety check: PassCustom licence
Strategy Consulting Visualizationkgraph57/mckinsey-style-visualization-skill128—~3.2kAutomated safety check: PassMIT
Visualizedisplay-dev/visualize136—~7.4kAutomated safety check: PassMIT

Similar skills

  • Magazine Web Ppt

    sanqiufong/slides-from-anything

    生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editorial magazine"、"e-ink presentation"时使用。

    132 GitHub starsUsed in 2 repos~2.4k tokens
    Game DevelopmentAuto-check passed

  • Mira 3D

    sandeco/mira-animator

    Adiciona elementos 3D reais (profundidade, rotação contínua, arrastar e zoom) ao canvas de um slide do Mira, em card limpo com o 3D maximizado.

    218 GitHub stars~3.6k tokensUpdated 24 days ago
    Game DevelopmentAuto-check passed

  • Mira Offline

    sandeco/mira-animator

    Converte um deck do Mira já criado para modo OFFLINE (self-contained, sem CDN em runtime), para abrir por file:// mesmo atrás do firewall corporativo que bloqueia as CDNs (Tailwind, AOS, Lucide, D3…

    218 GitHub stars~1.3k tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed

  • Strategy Consulting Visualization

    kgraph57/mckinsey-style-visualization-skill

    A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…

    128 GitHub stars~3.2k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Visualize

    display-dev/visualize

    Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.

    136 GitHub stars~7.4k tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed

  • Single-File HTML Composer

    oaustegard/claude-skills

    Builds self-contained single-file HTML pages such as reports, decks, postmortems, flowcharts and prototypes from a small spec using a bundled Python composer and templates.

    150 GitHub stars~3.2k tokensUpdated today
    Frontend & DesignAuto-check passed

More from open-octo/octo-agent

All 40 skills in this repo

  • Image Gen

    open-octo/octo-agent

    Acquire images as files — generate them with an AI image model (14 providers: OpenAI/gpt-image, Gemini, Qwen, Zhipu, Volcengine, Stability, FLUX, Ideogram, MiniMax, and more), search openly-licensed…

    125 GitHub stars~3.1k tokensUpdated today
    Auto-check: notes

  • Office XLSX

    open-octo/octo-agent

    Create, read, and edit Excel (.xlsx) spreadsheets programmatically with openpyxl — cell values, formulas, styling (fonts/fills/borders/alignment/number formats), merged cells, multiple sheets…

    125 GitHub stars~1.8k tokensUpdated today
    Auto-check: notes

  • Code Review

    open-octo/octo-agent

    Review local code changes. An agent skill from open-octo/octo-agent.

    125 GitHub stars~942 tokensUpdated today
    Auto-check passed

  • Ppt Master

    open-octo/octo-agent

    AI-driven multi-format SVG content generation system. An agent skill from open-octo/octo-agent.

    125 GitHub stars~23k tokensUpdated today
    Auto-check: warnings

  • Config Setup

    open-octo/octo-agent

    Configure octo's global settings through guided conversation — set up AI model endpoints (providers, API keys, models), adjust agent defaults (reasoning effort, permission mode, coauthor, workspace…

    125 GitHub stars~3.3k tokensUpdated today
    Auto-check passed

  • Contract Review

    open-octo/octo-agent

    审阅合同条款、识别风险点、给出修改建议。Use when 用户贴出或上传合同文本要求审查， 或提到"合同审查""帮我看看这份合同""这条款有没有问题""重大不利条款""合同风险" "review this contract"等。覆盖服务协议、劳动合同、保密协议(NDA)、采购合同、 租赁合同等常见合同类型，风险条款库为中英双语。仅做通俗的条款风险提示，…

    125 GitHub stars~666 tokensUpdated today
    Auto-check passed

Categories

Questions about Artifact Design

What does Artifact Design do?

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. Artifact Design is an agent skill from open-octo/octo-agent. 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.

When should I use Artifact Design?

Artifact Design fits situations like: tasks that involve Diagrams; tasks that involve 3D graphics and WebGL; tasks that involve Slides and decks.

How do I install Artifact Design in Claude Code?

Run `npx skills add open-octo/octo-agent --skill artifact-design -a claude-code`. Or copy the skill folder (internal/skills/defaults/artifact-design in open-octo/octo-agent) into .claude/skills/artifact-design in your project. Claude Code loads it when a task matches its description.

How do I install Artifact Design in Codex?

Run `npx skills add open-octo/octo-agent --skill artifact-design -a codex`. Or copy the skill folder (internal/skills/defaults/artifact-design in open-octo/octo-agent) into .agents/skills/artifact-design in your project. Codex loads it when a task matches its description.

Can I use Artifact Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add open-octo/octo-agent --skill artifact-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/artifact-design, .gemini/skills/artifact-design, .github/skills/artifact-design and .opencode/skills/artifact-design in your project.

What does Artifact Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Artifact Design is instructions for the agent only.

Does Artifact Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Artifact Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Artifact Design use?

Artifact Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Artifact Design use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.9k tokens, read only when the agent opens those files.

What are the alternatives to Artifact Design?

Skills that share tags, products or a category with Artifact Design: Magazine Web Ppt (sanqiufong/slides-from-anything, 132 stars), Mira 3D (sandeco/mira-animator, 218 stars), Mira Offline (sandeco/mira-animator, 218 stars) and Strategy Consulting Visualization (kgraph57/mckinsey-style-visualization-skill, 128 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Artifact Design?

open-octo (a GitHub organization) maintains it in open-octo/octo-agent, which has 125 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on October 9, 2026.

Source: open-octo/octo-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.