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 Diagramming

by asgeirtj in asgeirtj/system_prompts_leaks

Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

CC0-1.0Auto-check passed

Install Artifact Diagramming

skills CLI
$ npx skills add asgeirtj/system_prompts_leaks --skill artifact-diagramming -a claude-code

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

GitHub CLI
$ gh skill install asgeirtj/system_prompts_leaks artifact-diagramming --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/asgeirtj/system_prompts_leaks.git skills-src && mkdir -p .claude/skills && cp -r skills-src/Anthropic/claude-code/skills/artifact-diagramming .claude/skills/artifact-diagramming && 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-diagramming
GitHub stars
69k
Token cost
~1k tokens
SKILL.md length
608 words
Files
1
Skills in repo
128
Repo updated
First seen
Licence
CC0-1.0

At a glance

Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

  • SKILL.md covers What to draw and Inline SVG mechanics
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Artifact Diagramming is an agent skill from asgeirtj/system_prompts_leaks. Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Documented system prompts from Anthropic - Claude Fable 5.1, Opus 5.5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro… The licence is CC0-1.0.

Example prompts

  • “/artifact-diagramming”

What it can do on your machine

Read from SKILL.md and the folder at commit 60d44cc. 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.

    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 Diagramming loads about 1k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 608 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~1k

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 asgeirtj/system_prompts_leaks at commit 60d44cc, republished under its CC0-1.0 licence (© asgeirtj). 608 words, ~1,015 tokens.

Download SKILL.mdSave it as .claude/skills/artifact-diagramming/SKILL.md (or your agent's skills folder).
name
artifact-diagramming
description
Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

Draw as the engineer who has to live with the decision, not as a decorator: a diagram earns its place when it lets a cold reader see a mechanism they would otherwise have to assemble from prose - where data flows, which components talk, what changes between two options, what state a request moves through. If a sentence says it faster, write the sentence.

What to draw

Depict the mechanism, not its name. A box labeled "cache" says less than the prose; the path a request takes through it, the two stores it sits between, and the arrow that disappears when the cache is removed say what the words can't. Show the parts that the argument hinges on - the boundary being crossed, the hop being added, the data that moves - and leave out the parts that don't.

Comparing options? Draw the difference. Two architectures side by side, a before and an after, the one edge that each option adds or removes - the reader should be able to point at what they are choosing between. A separate labeled box per option, with nothing connecting them to the system, is not a comparison; it is a restated option list.

Match complexity to the stakes. A one-hop question is a three-box diagram; a migration that reroutes writes through a queue needs the queue, the writer, the reader, and the ordering arrow. Draw as much as the decision actually turns on - no forced minimalism, no inventory of the whole system either.

Label the arrows. An unlabeled arrow is "related somehow"; writes, invalidates, polls every 30s is information. A legend is only worth it when the same encoding (dashed, colored, doubled) repeats; otherwise put the meaning on the mark itself.

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

Inline SVG mechanics

These mechanics apply where the page renders inline SVG natively (HTML pages); a markdown-rendered page draws its diagrams in whatever fence that lane's renderer supports, and the skill that owns the lane says which. An artifact made from an Artifact type draws its diagrams the way the type's instructions, and the reference pages they name, say to; these mechanics apply there only where those say nothing about diagrams. Hand-author inline <svg> with native shapes (rect, circle, line, polyline, path) and <text> - no libraries, no runtime, no external images.

  • Size by viewBox. Set viewBox="0 0 W H" and let CSS scale it (max-width: 100%; height: auto); choose W and H for the content, not a preset. Wide flows read left-to-right; layered stacks read top-to-bottom.
  • Theme with currentColor. Strokes, text, and arrowheads in currentColor inherit the page's foreground in light and dark themes alike; reserve a literal hue for the one element that carries meaning (the option leaned toward, the hop under discussion), and make sure it reads on both grounds.
  • Arrowheads are markers or polygons. A <defs><marker> referenced by marker-end="url(#arrow)" (fragment-internal id) or a small <polygon> at the line's end - never an image.
  • Keep text legible. Roughly 11-13px at the drawn scale, text-anchor for alignment, short labels (a word or three); explanatory sentences belong in the caption below the figure, not in the drawing.
  • Align to a grid. Shared baselines and even gaps are most of what makes a hand diagram read as deliberate; eyeballed offsets read as noise.
  • One figure, one claim. Wrap the <svg> in <figure> with a <figcaption> that states what the picture shows, and give the <svg> role="img" plus an aria-label carrying the same claim for readers who cannot see it.
  • Stay self-contained. No <script>, <style>, or <foreignObject> inside the SVG; gradients, patterns, and <use> reference ids in the same fragment (href="#id"). Long decorative path data is a sign the drawing wants a real graphics tool - simplify instead.

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

Files

Just SKILL.md in Anthropic/claude-code/skills/artifact-diagramming of asgeirtj/system_prompts_leaks.

Open the folder on GitHubat commit 60d44cc

Compare with similar skills

Artifact Diagramming 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 Diagramming compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Artifact Diagramming this skillasgeirtj/system_prompts_leaks69k—~1kAutomated safety check: PassCC0-1.0
Diagram Makergarrytan/gstack136k—~4.1kAutomated safety check: NotesMIT
Diagram Makeropenclaw/openclaw392k2 repos~589Automated safety check: PassMIT
Docs Diagramsvercel/next.js143k—~2.9kAutomated safety check: PassMIT
Diagram Generatorsickn33/agentic-awesome-skills47k1 repos~2.3kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT

Similar skills

  • Diagram Maker

    garrytan/gstack

    Turns an English description or Mermaid source into a diagram set: the source, an editable .excalidraw file and rendered SVG and PNG images.

    136k GitHub stars~4.1k tokensUpdated today
    DevelopmentAuto-check: notes

  • Diagram Maker

    openclaw/openclaw

    Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

    392k GitHub starsUsed in 2 repos~589 tokens
    DevelopmentAuto-check passed

  • Docs Diagrams

    vercel/next.js

    Official

    Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".

    143k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Diagram Generator

    sickn33/agentic-awesome-skills

    Generate, refine, validate, and render diagrams from natural language, notes, code, schemas, or existing diagram sources: flowcharts, swimlanes, attack-path graphs, data-flow diagrams, architecture…

    47k GitHub starsUsed in 1 repo~2.3k tokens
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

  • Docs Diagrams

    mastra-ai/mastra

    Convert existing docs diagram images to Mermaid, and author new Mermaid diagrams for Mastra docs.

    29k GitHub stars~998 tokensUpdated today
    DevelopmentAuto-check passed

More from asgeirtj/system_prompts_leaks

All 125 skills in this repo

  • Fleet Manager for Agent Sessions

    asgeirtj/system_prompts_leaks

    Shows one digest of coding-agent sessions across your connected machines and lets you open, read, steer, approve, stop and close them, over Herdr, tmux or MSP.

    69k GitHub stars~2.5k tokensUpdated today
    Auto-check passed

  • Muse Code Product Doctor

    asgeirtj/system_prompts_leaks

    Diagnoses a Muse Code installation's own failures from binary and session evidence, instead of treating the report as an ordinary repository bug.

    69k GitHub stars~3.5k tokensUpdated today
    Auto-check passed

  • DOCX

    asgeirtj/system_prompts_leaks

    A skill your agent uses whenever the user wants to create, read, edit, or manipulate Word documents (.docx) or Word templates (.dotx).

    69k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • Agents Project Coordinator

    asgeirtj/system_prompts_leaks

    Runs a goal as a project in which the agent coordinates separate agent threads, judging when to split the work, and interviews you first when nothing can be verified.

    69k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Muse Plugin Creator

    asgeirtj/system_prompts_leaks

    Creates and validates a new native Muse plugin package in the current workspace, limited to five capability families, and leaves installation to you.

    69k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Deep Research

    asgeirtj/system_prompts_leaks

    A skill your agent uses when the user's prompt requires (1) researching a topic across multiple sources, comparing options or alternatives, analyzing trends or history, understanding markets or…

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

Questions about Artifact Diagramming

What does Artifact Diagramming do?

Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes. Artifact Diagramming is an agent skill from asgeirtj/system_prompts_leaks. Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

How do I install Artifact Diagramming in Claude Code?

Run `npx skills add asgeirtj/system_prompts_leaks --skill artifact-diagramming -a claude-code`. Or copy the skill folder (Anthropic/claude-code/skills/artifact-diagramming in asgeirtj/system_prompts_leaks) into .claude/skills/artifact-diagramming in your project. Claude Code loads it when a task matches its description.

How do I install Artifact Diagramming in Codex?

Run `npx skills add asgeirtj/system_prompts_leaks --skill artifact-diagramming -a codex`. Or copy the skill folder (Anthropic/claude-code/skills/artifact-diagramming in asgeirtj/system_prompts_leaks) into .agents/skills/artifact-diagramming in your project. Codex loads it when a task matches its description.

Can I use Artifact Diagramming 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 asgeirtj/system_prompts_leaks --skill artifact-diagramming -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-diagramming, .gemini/skills/artifact-diagramming, .github/skills/artifact-diagramming and .opencode/skills/artifact-diagramming in your project.

What does Artifact Diagramming need to run?

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

Does Artifact Diagramming 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 Diagramming 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 Diagramming use?

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

How many tokens does Artifact Diagramming use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Artifact Diagramming?

Skills that share tags, products or a category with Artifact Diagramming: Diagram Maker (garrytan/gstack, 136k stars), Diagram Maker (openclaw/openclaw, 392k stars), Docs Diagrams (vercel/next.js, 143k stars) and Diagram Generator (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Artifact Diagramming?

asgeirtj (a GitHub user) maintains it in asgeirtj/system_prompts_leaks, which has 69,280 GitHub stars. The repository holds 128 skills in this directory. The repository was last updated on October 10, 2026.

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