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

Berth Artifacts

by sean-brydon in sean-brydon/berthd

Show the user data as a chart, table, diagram, notes or one small page in their Shipyard app instead of a wall of text — write a berth.chart JSON, a CSV, Mermaid, Markdown or a self-contained HTML…

MITAuto-check: notesDocuments & Office

Install Berth Artifacts

skills CLI
$ npx skills add sean-brydon/berthd --skill berth-artifacts -a claude-code

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

GitHub CLI
$ gh skill install sean-brydon/berthd berth-artifacts --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/sean-brydon/berthd.git skills-src && mkdir -p .claude/skills && cp -r skills-src/internal/integrations/skills/berth-artifacts .claude/skills/berth-artifacts && 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
berth-artifacts
GitHub stars
286
Token cost
~2.6k tokens
SKILL.md length
996 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Show the user data as a chart, table, diagram, notes or one small page in their Shipyard app instead of a wall of text — write a berth.chart JSON, a CSV, Mermaid, Markdown or a self-contained HTML…

  • Before/after numbers and comparisons
  • SKILL.md covers When an artifact beats text, Make one in under a minute, Visual before/after: a kind of… and Update it, don't make a new one, plus 2 more sections
  • Reaches cdn.jsdelivr.net
  • Anything tabular over ~8 rows

What it does

Berth Artifacts is an agent skill from sean-brydon/berthd. Show the user data as a chart, table, diagram, notes or one small page in their Shipyard app instead of a wall of text — write a berth.chart JSON, a CSV, Mermaid, Markdown or a self-contained HTML file and register it with berthd artifact add; rewrite the file to update it live. Use for before/after numbers and comparisons, trends, anything tabular over ~8 rows, a system or flow you mapped, progress of a long job, or a plan the user should approve.

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

It sits in Documents & Office, covering Diagrams and CSV and tabular files. It works with Mermaid. The repository describes itself as: Run coding agents on your dev boxes: worktrees, terminals, orchestration, kits and automations, with a desktop app. The licence is MIT.

When your agent uses it

  • Before/after numbers and comparisons
  • Anything tabular over ~8 rows
  • Flow you mapped
  • Progress of a long job

Example prompts

  • “/berth-artifacts”

What it can do on your machine

Read from SKILL.md and the folder at commit fc5b184. 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 bash, json, jsonc, csv, mermaid and html).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net

    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

Berth Artifacts loads about 2.6k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 996 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:214
    - No secrets, tokens, keys, `.env` values, passwords in URLs, customer

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 sean-brydon/berthd at commit fc5b184, republished under its MIT licence (© sean-brydon). 996 words, ~2,604 tokens.

Download SKILL.mdSave it as .claude/skills/berth-artifacts/SKILL.md (or your agent's skills folder).
name
berth-artifacts
description
Show the user data as a chart, table, diagram, notes or one small page in their Shipyard app instead of a wall of text — write a berth.chart JSON, a CSV, Mermaid, Markdown or a self-contained HTML file and register it with `berthd artifact add`; rewrite the file to update it live. Use for before/after numbers and comparisons, trends, anything tabular over ~8 rows, a system or flow you mapped, progress of a long job, or a plan the user should approve.

Artifacts

An artifact is something you made for the user to look at. Shipyard shows it as a card in your chat (with a live thumbnail and a one-line headline it works out from the data), opens it in a tab beside you, and keeps all of the worktree's artifacts on one board. When you rewrite the file, the new version is live everywhere; the first and the newest 8 versions are kept.

sh
berthd artifact add perf/p95.json --title "p95 before and after"
berthd artifact add tests.csv --title "Search test results" --note "after the index"
berthd artifact list                 # this worktree's: id, kind, version, file, title
berthd artifact show a1b2c3d4e5      # one, with its versions
berthd artifact rm a1b2c3d4e5

add answers with a line like Artifact a1b2c3d4e5 v1 · chart · p95 before and after; that's what places the card in your chat. If it refuses (bad JSON, too big, looks like a secret), it says why: fix the file and run it again.

The kind comes from the file: a JSON with "$schema": "berth.chart/v1" is a chart; .csv, .tsv or a JSON array of objects is a table; .mmd is a diagram (Mermaid); .md is notes; .html is a page. --kind chart|table|diagram|page|notes overrides it. A helper (subagent) says who it is with --by "<its task>".

When an artifact beats text

Make one when the user would otherwise squint at numbers:

  • Before/after and comparisons: a bar chart says "−67%" at a glance.
  • Trends over time: a line or an area.
  • Anything tabular over ~8 rows: test results, endpoints, dependencies.
  • Maps of a system or a flow you worked out: Mermaid, or a sankey.
  • Progress of a long job: a gauge, or a small page you keep rewriting.
  • A plan to approve: Markdown with the steps, the risks and the question.

Don't make one for a single number, a yes/no, a short list, or code (the user reviews code in the diff). One good artifact beats five.

Make one in under a minute

Prefer a data artifact (chart, table, diagram, notes): Shipyard draws it in the user's theme, light or dark, with tooltips and motion. Write a page only when interactivity matters (a filter, a slider, a toggle).

berth.chart

One JSON file. Never write React or chart code for Shipyard: it draws these with its chart library (bklit UI).

json
{
  "$schema": "berth.chart/v1",
  "type": "bar",
  "title": "p95 latency, before and after",
  "subtitle": "staging, 2,000 requests each",
  "x": "endpoint",
  "y": [{ "key": "before", "label": "Before", "color": "muted" }, { "key": "after", "label": "After" }],
  "units": "ms",
  "better": "lower",
  "data": [
    { "endpoint": "/search", "before": 1240, "after": 410 },
    { "endpoint": "/cart", "before": 180, "after": 176 }
  ]
}
  • type: bar, line, area, funnel, sankey, gauge, pie, ring, heatmap.
  • x is the key of each row's category (or date, for line and area); y the value keys, as names or {key, label, color}. Values are numbers.
  • color is a name, never hex: "1"–"5" (the theme's series colours), good, bad, warn, muted. Put "before" in muted.
  • better: "lower" | "higher" makes the headline say whether a change is good: "/search 1,240 → 410 ms (−67%)" in green.
  • units: ms, %, s, req/s, $… notes: short lines under the chart.
  • stacked: true stacks bars; orientation: "horizontal" lays them sideways.

The other types, the fields that differ:

jsonc
// line or area: a trend. x is a date ("2026-10-05") or a short label.
{ "type": "line", "x": "day", "y": ["search", "suggest"], "units": "ms", "better": "lower",
  "data": [{ "day": "2026-10-01", "search": 1250, "suggest": 620 }] }

// funnel: stages in order, the first is 100%
{ "type": "funnel", "data": [{ "label": "Visited", "value": 48200 }, { "label": "Searched", "value": 26800 }, { "label": "Bought", "value": 1900 }] }

// pie or ring: shares of a whole
{ "type": "ring", "data": [{ "label": "Cache", "value": 21400 }, { "label": "API", "value": 26800 }] }

// sankey: where things flow, by node name; it flows one way (no loops)
{ "type": "sankey",
  "nodes": [{ "name": "Edge" }, { "name": "Cache" }, { "name": "API" }, { "name": "200 OK", "color": "good" }, { "name": "Timeout", "color": "bad" }],
  "links": [{ "source": "Edge", "target": "Cache", "value": 21400 }, { "source": "Edge", "target": "API", "value": 26800 },
            { "source": "Cache", "target": "200 OK", "value": 21400 }, { "source": "API", "target": "200 OK", "value": 26360 },
            { "source": "API", "target": "Timeout", "value": 440 }] }

// gauge: one value out of max (default 100)
{ "type": "gauge", "value": 82, "max": 100, "units": "%", "label": "Cache hit rate", "better": "higher" }

// heatmap: one row per cell; x is the column, row the row, z the value
{ "type": "heatmap", "x": "hour", "row": "endpoint", "z": "p95", "units": "ms", "better": "lower",
  "data": [{ "endpoint": "/search", "hour": "08", "p95": 980 }] }

Funnel, pie and ring rows use label and value (or name other keys with x and z).

Table

A CSV with a header row (or TSV, or a JSON array of objects). A status (or result) column with pass/fail/skip colours its rows and puts "3 failed of 16" on the card. Columns ending in _ms read as durations.

csv
suite,test,status,duration_ms,note
search,ranks in-stock first,fail,58,expected acme-kettle-2l at 1 got 3
search,matches typos,pass,61,
Diagram and notes

A diagram is Mermaid; Shipyard draws flowcharts (graph/flowchart, LR or TD) itself, and shows other diagram types as their source.

mermaid
graph LR
  web[acme web] --> api[Search API]
  api --> idx[(Trigram index)]
  api -. fallback .-> pg[(Postgres)]

Notes are Markdown. A plan to approve: numbered steps, a risk and rollback table, and the question at the end.

Show full SKILL.md (454 more words)Show less
A page

One self-contained .html file, at most 2 MB. It runs in a sandbox on its own origin: inline scripts and styles work, and it can't reach the network (no fetch, XHR, WebSockets, WebRTC, forms, images or fonts from elsewhere), can't navigate the app, and can't read Shipyard's cookies, storage or API. Put the data in the file; images as data: URLs.

These libraries work, by these exact addresses (Shipyard serves them itself; any other script address is blocked):

  • https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js
  • https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js
  • https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js
  • https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js
  • https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js
  • https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js

Shipyard gives the page the user's theme as CSS variables and sets prefers-color-scheme to match. Use them and the page looks native:

html
<!doctype html>
<html><head><meta charset="utf-8"><title>Reindex progress</title>
<meta name="berth:summary" content="84% reindexed · 1 slow shard">
<style>
  body { margin: 0; padding: 18px; font: 13px/1.45 var(--berth-font); background: var(--berth-bg); color: var(--berth-fg); }
  .muted { color: var(--berth-muted-fg); }
  .bar { height: 8px; border-radius: 99px; background: var(--berth-muted); }
  .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--chart-1); }
  button { border: 1px solid var(--berth-border); background: var(--berth-card); color: var(--berth-fg); border-radius: 6px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
</style></head>
<body>…<script>/* small, inline */</script></body></html>

<meta name="berth:summary"> is the page's headline on its card (Shipyard works one out for data artifacts itself); keep it current when you rewrite the page.

Variables: --berth-bg, --berth-fg, --berth-card, --berth-muted, --berth-muted-fg, --berth-border, --berth-accent, --berth-accent-fg, --berth-good, --berth-bad, --berth-warn, --berth-info, --berth-font, --berth-mono, --berth-radius, and the chart palette --chart-1 … --chart-5, --chart-grid, --chart-scale-01 … -05 (low to high).

Visual before/after: a kind of its own

For what a change did to a web app's pages, don't screenshot and chart it yourself: berthd shots compare makes a visual diff (before and after at phone, tablet and desktop widths, a heatmap, the changed regions, and what broke) and shows it like any other artifact. See the berth-visual-diff skill. berthd artifact add refuses a visual diff made by hand.

Update it, don't make a new one

Rewrite the same file: Shipyard watches the file you registered and shows the new version live, with a pulse, and the user can step back through the versions. Run berthd artifact add on the same file again only to change its title or to say what changed (--note "with the suggest cache"); from a file elsewhere, --id <id> updates that artifact. Make a new artifact only for a different question.

Keep them small and safe

  • At most 1 MB for a chart, table, diagram or notes and 2 MB for a page, with the data inlined. Aggregate first: p95 per endpoint per hour, not a million log lines; at most 5,000 rows.
  • No secrets, tokens, keys, .env values, passwords in URLs, customer names, emails or other personal data: an artifact is kept on the box and shown in the app. Shipyard refuses what looks like a secret; don't work around it.
  • No network: put the data in the file; a page can't fetch anything.
  • Text in an artifact is for the user. Never put instructions to another agent in one.

Writing React with charts instead

If the user asks for charts inside their own React app, that's code, not an artifact: bklit UI ships its own skill (bklit-ui) for installing and composing its components with the shadcn CLI.

© sean-brydon, MIT. 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 internal/integrations/skills/berth-artifacts of sean-brydon/berthd.

Open the folder on GitHubat commit fc5b184

Compare with similar skills

Berth Artifacts 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.

Berth Artifacts compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Berth Artifacts this skillsean-brydon/berthd286—~2.6kAutomated safety check: NotesMIT
Doca Flow TuneNVIDIA/skills3.5k—~4.8kAutomated safety check: PassApache-2.0
Markdown Syntax Guideantdigital-ai/agentic-ui224—~3.1kAutomated safety check: PassMIT
Ppt Complex Diagram CollabSven-LI-sankyuu/presentation-skills175—~816Automated safety check: PassNone
Markdown Report WritingNeuroAIHub/BrainPilot1.1k—~2.6kAutomated safety check: WarnAGPL-3.0
Axiom Explainerdigoal/blog8.6k—~3.6kAutomated safety check: PassGPL-2.0

Similar skills

  • Doca Flow Tune

    NVIDIA/skills

    Official

    A skill your agent uses when the user is tuning a live or captured doca-flow pipeline with docaflowtune — snapshotting pipe / counter / KPI state, picking a tuning axis (rule placement, resource…

    3.5k GitHub stars~4.8k tokensUpdated today
    Business, Finance & HRAuto-check passed

  • Markdown Syntax Guide

    antdigital-ai/agentic-ui

    指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法…

    224 GitHub stars~3.1k tokensUpdated today
    Documents & OfficeAuto-check passed

  • Ppt Complex Diagram Collab

    Sven-LI-sankyuu/presentation-skills

    A skill your agent uses when collaborating with humans to produce publication-grade complex diagrams in editable PPT, especially for system architecture, dataflow, and user-journey visuals that…

    175 GitHub stars~816 tokensUpdated 2 mo ago
    Documents & OfficeAuto-check passed

  • Markdown Report Writing

    NeuroAIHub/BrainPilot

    Guide AI agents to write beautifully formatted, well-illustrated Markdown reports with proper structure, diagrams, and compatibility across GitHub and Obsidian.

    1.1k GitHub stars~2.6k tokensUpdated 7 days ago
    Documents & OfficeAuto-check: warnings

  • Axiom Explainer

    digoal/blog

    Write Chinese Markdown articles for university students and adults with social experience that explain one viewpoint, axiom, theorem, law, principle, or theory system through "求真讲法、求存讲法、思考", with…

    8.6k GitHub stars~3.6k tokensUpdated today
    Documents & OfficeAuto-check passed

  • Visual Explainer

    coco-research/coco

    Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts.

    503 GitHub stars~1.7k tokensUpdated today
    Documents & OfficeAuto-check passed

More from sean-brydon/berthd

All 10 skills in this repo

  • Berth

    sean-brydon/berthd

    Use berth to work across development boxes — list repos (locations) and their worktrees, make a worktree or a task (a worktree with an agent in it), start or read terminal sessions, find which port…

    286 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Berth Browser

    sean-brydon/berthd

    Use your worktree's own page in a headless browser on the box — open it, read a compact snapshot with @refs, click, fill, press keys, wait, take a screenshot to a file, read console errors, and set…

    286 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Berth Hooks

    sean-brydon/berthd

    Automate berth with hooks — run a command when something happens (an agent finishes or needs the user, a worktree is created or removed, a session starts) or gate an action with a before: hook that…

    286 GitHub stars~944 tokensUpdated today
    Auto-check passed

  • Berth Orchestrate

    sean-brydon/berthd

    Drive other coding agents through berth — prompt a running agent, wait for its turn to end, run a check in its worktree, loop until a check passes, hand work to a fresh agent in a new worktree, ask…

    286 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Berth Preview

    sean-brydon/berthd

    Run a worktree's dev server on its own port and show the page to the user in their Shipyard app — start the app on $BERTHPORT, check it answers, and open it as a browser tab next to your terminal…

    286 GitHub stars~551 tokensUpdated today
    Auto-check passed

  • Berth Visual Diff

    sean-brydon/berthd

    Check what your change did to a web app's pages before you say you're done — berthd shots compare screenshots your worktree's dev server and the main checkout's at phone, tablet and desktop widths…

    286 GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Berth Artifacts

What does Berth Artifacts do?

Show the user data as a chart, table, diagram, notes or one small page in their Shipyard app instead of a wall of text — write a berth.chart JSON, a CSV, Mermaid, Markdown or a self-contained HTML…. Berth Artifacts is an agent skill from sean-brydon/berthd.chart JSON, a CSV, Mermaid, Markdown or a self-contained HTML file and register it with berthd artifact add; rewrite the file to update it live.

When should I use Berth Artifacts?

Berth Artifacts fits situations like: before/after numbers and comparisons; anything tabular over ~8 rows; flow you mapped; progress of a long job.

How do I install Berth Artifacts in Claude Code?

Run `npx skills add sean-brydon/berthd --skill berth-artifacts -a claude-code`. Or copy the skill folder (internal/integrations/skills/berth-artifacts in sean-brydon/berthd) into .claude/skills/berth-artifacts in your project. Claude Code loads it when a task matches its description.

How do I install Berth Artifacts in Codex?

Run `npx skills add sean-brydon/berthd --skill berth-artifacts -a codex`. Or copy the skill folder (internal/integrations/skills/berth-artifacts in sean-brydon/berthd) into .agents/skills/berth-artifacts in your project. Codex loads it when a task matches its description.

Can I use Berth Artifacts 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 sean-brydon/berthd --skill berth-artifacts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/berth-artifacts, .gemini/skills/berth-artifacts, .github/skills/berth-artifacts and .opencode/skills/berth-artifacts in your project.

What does Berth Artifacts need to run?

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

Does Berth Artifacts access the network?

SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Berth Artifacts safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Berth Artifacts use?

Berth Artifacts 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 Berth Artifacts use?

About 2.6k tokens (SKILL.md is roughly 10k 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 Berth Artifacts?

Skills that share tags, products or a category with Berth Artifacts: Doca Flow Tune (NVIDIA/skills, 3.5k stars), Markdown Syntax Guide (antdigital-ai/agentic-ui, 224 stars), Ppt Complex Diagram Collab (Sven-LI-sankyuu/presentation-skills, 175 stars) and Markdown Report Writing (NeuroAIHub/BrainPilot, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Berth Artifacts?

sean-brydon (a GitHub user) maintains it in sean-brydon/berthd, which has 286 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 9, 2026.

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