Portable Artifacts Deck

What the portable-artifacts plugin builds, how to use it, and where it stops

Date: 2026-10-13
Branch: feat/visual-artifacts
Repo: claude-skills

The idea

A script builds the page from model JSON

Good

Diagrams, dashboards, videos and explainers share the same themes. Each page opens offline in any browser.

Every page makes no network requests when it is viewed.
Validation runs before the render and names the JSON path and the fix.
Claude Haiku passes the eval gates for all three skills.

Skills

Each skill covers one kind of artifact

make-diagram

Architecture, flow, sequence and state diagrams with zoom and hover tracing.
make-dashboard

Charts and KPI pages built from local CSV, Parquet, JSON, DuckDB or SQLite files.
make-motion

Short animated MP4 videos rendered from a JSON scene list.
make-explainer

Recaps, checklists, concept pages and slide decks like this one.

Clip

A make-motion clip plays on its own slide

Workflow

Every skill follows the same four steps

Write the spec

The agent writes one JSON file.
Validate it

Each problem prints a JSON path, the problem and the fix.
Build it

The build writes one themed HTML page.
Check it

An optional headless check opens the page at two widths.

Install

One command installs all three skills together

bash

npx skills add abhijitbansal/claude-skills --skill make-explainer make-diagram make-dashboard

Name all three skills. Installing make-explainer alone fails on its first diagram or chart section.

Eval build

Claude Haiku built every eval prompt

Dashboard builds: 14 of 14; Claude Haiku, measured
Diagram builds: 8 of 8; Claude Haiku, measured
Explainer builds: 8 of 8; Claude Haiku, measured
Median validate runs: 1; Median for each of the three skills

Haiku vs Sonnet

Haiku and Sonnet both pass every build

Measured with node eval/run-eval.mjs. A local gemma4 model passed fewer builds and is kept for reference only.
Skill	Model	Valid builds	Median seconds
make-dashboard v2	Claude Haiku	14 of 14	23
make-dashboard v2	Claude Sonnet	14 of 14	22
make-diagram	Claude Haiku	8 of 8	21
make-diagram	Claude Sonnet	8 of 8	24
make-explainer	Claude Haiku	8 of 8	36
make-explainer	Claude Sonnet	8 of 8	34

Limits

Four limits to plan around before you ship

Severity	Risk	Mitigation
Medium	A local gemma4 model fails most explainer builds	Run the explainer on Claude Haiku or Claude Sonnet.
Medium	make-motion was not re-evaluated on this branch	Check its output by hand before a release.
Low	Browser find searches only the current slide in a deck	Use the O key to open the outline and jump to a slide.
Low	Each static chart ships four drawings, which adds page weight	Keep long pages to a few charts.

Before you start

Install all three skills before asking for decks

The explainer embeds diagrams and charts from its sibling skills. Each page works offline; keep a page and its assets folder together when you share it.