Skills should produce artifacts, not markdown

Today we open-sourced ikenga-artifact-builder — a Claude Code skill that teaches the agent to produce single-file HTML artifacts instead of markdown for anything visual, interactive, or data-bearing. Apache-2.0. Install with npx skills add Royalti-io/ikenga-artifact-builder.

The markdown ceiling

The pattern most agent skills follow today: take a request, produce a markdown response. It's the path of least resistance because markdown is what chat interfaces render natively. But the moment the thing you wanted is a dashboard, a comparison table you'll sort, a status page you'll refresh, or a mockup you'll iterate on — markdown is the wrong container. You end up either screenshot-and-paste, or copying numbers into a separate tool, or just accepting that the "summary" is a degraded snapshot.

We hit this wall hard while building Ikenga's exec views. CFO-daily is six numbers, two tables, a chart, and a "what changed since yesterday." Every markdown version of that brief lost something — usually the sortability of the AR-aging table, or the ability to refresh a single tile without re-running the whole conversation.

Single-file HTML as the new floor

So we shipped ikenga-artifact-builder — a Claude Code skill that teaches the agent to produce single-file HTML artifacts instead of markdown for anything visual, interactive, or data-bearing. The hard rules:

• One file, self-contained.
• Renders with no network, using mock data declared inline.
• Renders in any browser — file://, claude.ai's artifact viewer, our shell.
• A manifest declares its data sources (Supabase / SQL / fetch / MCP / file-watch) so when the artifact opens inside the Ikenga shell, the bridge resolves those sources and the artifact lights up with live data. Same file. Different host. Different behavior.

Why single-file: shareability. You can paste it into chat, drop it in Slack, attach it to a ticket. No build step, no folder of assets, no "install this first." The whole artifact is in the file the agent just wrote.

Why declarative data sources: the artifact doesn't know whether it's running offline or inside a shell with database access. It declares what it needs; the host (or the mock-data block) provides it. Same code path ships through every channel — that's what makes it forwardable without breaking.

Why Claude Code skill format: the skill spec is portable across 50+ agent runtimes via the open agent-skills ecosystem (skills.sh). Install once, the same artifact-authoring behavior shows up in Claude Code, Codex, Cursor, OpenCode, anything that speaks the format.

Install + what's next

The skill is Apache-2.0 and ships with four working references — open any of them in a browser, no clone, no build:

• Hello, Artifact — the smallest valid artifact (~150 lines, one fetch source)
• CFO Daily — financial dashboard with KPI tiles, AR aging, and FX (~330 lines, four source types)
• CEO Overview — exec digest with cross-artifact links (~470 lines, six sources)
• Ikenga, the symbol — editorial scrollytelling piece on the brand's namesake; 12 numbered citations, real Wikimedia museum imagery, the case in point for "replaces a long .md"

Install paths:

npx skills add Royalti-io/ikenga-artifact-builder -g

This is the first piece of Ikenga we've open-sourced. The artifact builder is the part we wanted in everyone's hands first. Markdown summaries should be a fallback, not the default.

Repo: github.com/Royalti-io/ikenga-artifact-builder