portable-artifacts

/make-motion — a 15-second 1080p explainer from one prompt, narrated on request

Download the MP4 ↓ (H.264 + AAC voiceover)

The exact prompt

The follow-up (audio is opt-in)

/make-dashboard — a growth dashboard from two CSV files

Open full screen ↗

The exact prompt

/make-dashboard — a dashboard from a data file

You say "Revenue by region and the monthly trend from data/sales.csv". The agent inspects the data, writes dashboard.json (sources, SQL queries, KPIs, charts), validates it, and builds one offline index.html. Every chart expands to show its SQL, row count and refresh time. Rerun one command to refresh — no LLM involved. Sources: CSV, Parquet, JSON, DuckDB, SQLite, Postgres and MySQL.

/make-diagram — an architecture, flow, sequence or state diagram

You say "Draw the checkout request path from the browser to the orders DB". The agent writes diagram.json (a title, a type, nodes and edges, or participants and messages), validates it, and builds one offline HTML page under ~/.agent/diagrams/. Validation lays the diagram out and lints the geometry, so a spec that passes is buildable. "Add a queue between the API and the worker" changes a few fields.

/make-explainer — a recap, checklist, plan, explainer or slide deck

You say "Recap this branch for review, with a manual test checklist". A script reads the git branch (commits, files changed with line counts, test files) and scaffolds an explainer.json with the numbers, file list and timeline filled in. The agent replaces each TODO: with prose, validates, and builds one offline HTML page under ~/.agent/diagrams/. Validation fails on leftover placeholders, filler phrases such as "leverage" or "seamless", numbered titles, and (for slides) a slide that is too full. Emoji are allowed; dense emoji only warn. Section titles state the finding, not a label; the short label is what the contents list shows.

/make-motion — an animated explainer

You say "8-second clip: Q3 revenue up 18%, then a bar chart of Q1–Q3". The agent writes motion.json, validates it, opens a live preview with a scrubber, and renders a 1080p MP4 that comes out the same every time. "Slow scene 2" changes one field, not the whole video.

Audio is opt-in. Say "with background music from music.mp3" or "with a voiceover reading it". Narration is made locally with Kokoro, so no file is needed for it. Short UI sounds need no file either: a cues list of pop, click, whoosh, chime and impact is synthesised at render time, gives the same bytes every time, and the render ends with a line giving the integrated loudness and true peak.

Polish. Shapes and text can name theme colour tokens (surface, line, accent, cat1 to cat6 and more) that follow the theme; a rect can be an elevated card; a line takes a round cap and an arrow head. Charts default to about five ticks per axis, no tick marks, no vertical gridlines, rounded bars and 4 px round lines. A scene can crossfade over the previous one in 0.4 s, and a text can type itself out at 0.035 s per character.

Texture is opt-in. A vignette and static film grain (0 to 0.15) can go over every scene. They slow rendering: measured at 1920x1080 on one Apple-silicon Mac, about 17 to 33 ms per frame with none, 42 ms with the vignette, 100 ms with grain and 187 ms with both.

Themes. Themes follow the same rules as make-explainer, and a spec that names none renders in dusk. Colours a spec sets still win. For a themed look, mark a heading "role": "title" and give a scene "background": "art".

/make-scene — your data as a 3D city, forest, galaxy or terrain

You say "Show our commits per week per folder as a 3D city, with a tour of the busiest weeks". The agent gets the rows (a script reads the git history, or it uses your CSV or JSON), writes scene.json (a title, data or a lift, and a short camera tour), validates it, and builds one offline three.js page. It then runs check.mjs, which opens the page at desktop and phone width and fails on a blank canvas or a tour that cannot finish. The agent never writes three.js, coordinates, CSS or HTML, and the spec accepts none. Switching to another world is one command that spends no model tokens.

Cheaper model on Copilot and Codex

Writing a spec is a small job, so the installer can also write a small artifact-builder agent file that names a cheap model, and each skill has a "Cheaper model" section that tells the running agent to hand the work to it. Two ways to use it: pick the agent yourself (copilot --agent artifact-builder; the runs below used copilot -p with that flag) or let the skill hand off (advisory: the main agent may not do it). Claude Code reads model: haiku from each SKILL.md per its docs; that was not measured here.

Installed with npx skills? That copies skill folders only, so there is no installer. Each skill carries its own writer instead: where ~/.copilot or ~/.codex exists, the doctor lists the missing agent file as optional, and after you agree this writes it at user level (an existing file is kept). A host may need a new session before it lists the agent.

Details, the per-host table and the results: USAGE.md.

Every page: favicon, theme toggle and who made it

Each page has an inline favicon and a sun, moon or auto button that cycles Auto, Light and Dark, even when the browser blocks storage. The make-motion preview is a dark-only local tool, so it has no toggle. A footer line (under the title in a diagram) and a <meta name="generator"> record the model, effort level and agent that made the page.

Before the first build: doctor

Each skill has a scripts/doctor.mjs that needs only Node, so it runs before npm ci. It lists what is missing, with the size and the fix for your OS. The agent runs it first, tells you what it found in one message and asks once; on yes it installs what it reported. Anything that needs sudo or has no automatic fix comes back to you as the exact command to run (in Claude Code, prefix it with !). On no, the skill does what it can without it.

Codex syntax

Codex invokes skills with $: $make-dashboard …, $make-diagram …, $make-explainer …, $make-scene … or $make-motion … (or browse with /skills).

Dashboards run model-written SQL — read-only, boxed in

Each query must parse (DuckDB's own parser) as a single SELECT, and an allowlist over its syntax tree lets it read only the declared sources and its own CTEs: no query(), read_*, duckdb_*, system catalogs or sqlite_*/postgres_*/mysql_* bridges. It runs wrapped in a row limit and a timeout, against a DuckDB connection locked to the exact declared files (allowed_paths, external access off, configuration locked). Sources must live under the spec's folder unless you pass --allow-outside. For Postgres and MySQL, READ_ONLY only limits DuckDB: use a read-only database role. Credentials come only from environment variables and are scrubbed from errors and results as defence in depth; the SQL allowlist is the control.

Built pages embed the query results

Publishing index.html publishes the data.

No network from specs

Chart url/data/usermeta keys are rejected at any depth; motion colours can't be url(); pages run under a CSP without unsafe-eval; the renderer aborts any non-local request; local servers bind 127.0.0.1 and check the Host header.

The optional hero image sends text off your machine

Only make-explainer's --image-api <https-endpoint> flag uses the network, and only when you pass it. It sends the page title and subtitle to the host you name, with your key from PA_IMAGE_API_KEY, and the build says so before it sends. Each build with the flag is one request your image service may bill. The key is never written to the page, the reply must be a PNG, JPEG or WebP image, and any failure stops the build.