ikenga-artifact-builder · Apache-2.0
Build a live interactive HTML file, then review it like a designer.
Author a self-contained artifact from any Claude Code session. Render it in any browser with no build step. Open it inside the shell to grid-review variants, pin feedback, compare, and promote.
Most tools do one half of this loop. You can ask Claude to generate a dashboard and get an HTML file. Or you have a design-review tool where you annotate screenshots. Rarely both, in the same workspace. The Artifacts workflow covers the full cycle: author with a standalone skill that works anywhere, then review inside the shell — thumbnail grid, side-by-side compare, pinned feedback routed to your agent, and one-click promote.
npx skills add royalti-io/ikenga-artifact-builder No Ikenga shell required for authoring. Works with Claude Code, Codex, Cursor, and any agent that reads a .claude/skills/ directory. The shell unlocks the review half: grid, compare, pin, and promote.
The problem it removes
Claude generates useful HTML outputs — dashboards, summaries, comparisons, mockups — but they disappear into a folder you forget to open, or land as a wall of code you paste into a browser. There is no connection between the agent that built the thing and the place where you decide whether it's right.
The skill closes the authoring gap: every output it produces has structured mock data, a fallback for offline use, and the right shape to light up with live data inside the shell. The Artifact Studio closes the review gap: instead of opening files one by one and losing track of which version you liked, you get a grid view, a compare view, inline pinned feedback routed directly to your agent, and a version strip that makes branching and promoting trivial.
Act one
Build
1. Install the skill
ikenga-artifact-builder is a Claude Code skill. Install
it globally so it's available in every project, or scoped to a
single repo to commit it alongside your team's setup.
- Global — available across all projects:
npx skills add royalti-io/ikenga-artifact-builder -g - Project — committed with your repo, shared with your team:
npx skills add royalti-io/ikenga-artifact-builder - Targeted — if you have several agents configured:
npx skills add royalti-io/ikenga-artifact-builder -g -a claude-code
No Ikenga shell required. The skill works with Claude Code, Codex,
Cursor, and any agent that reads a .claude/skills/ directory.
2. Ask Claude to build an artifact
In any Claude Code session, ask for a dashboard, view, summary, comparison, mockup, or prototype. The skill takes over automatically.
From a terminal session it runs a short discover path: five focused questions — what are you building, which archetype fits (dashboard, one-pager, slides, social card, site, scrollytelling), where the file should live, which sub-skills are available, do you want to riff on past work. On confirmation, it builds.
Inside the Ikenga shell, the wizard fast-path skips the discovery entirely. Open the artifact-creation wizard (⌘⇧N), pick an archetype and folder, and the agent starts building immediately with the project and path already resolved.
3. What comes out
Every artifact is a single self-contained HTML file.
- Renders anywhere with no build step — open it with
file://, paste it into the claude.ai artifact viewer, or share it as a standalone file. - Realistic mock data embedded as a
<script type="application/json">block, so it works offline and in review even when live sources are unavailable. - Live data when opened inside the shell — the bridge connects declared data sources (Supabase, local SQLite, HTTP, MCP) and refreshes on your chosen interval.
- Reacts to the shell's theme — light/dark toggle and the palette apply via the injected token bridge; outside the shell it follows the OS color scheme.
The skill ships three worked reference artifacts:
hello-world.html (~150 lines, minimal),
cfo-daily.html (~330 lines, four data sources, KPI tiles,
AR aging table, FX rates), and ceo-overview.html (~470
lines, six sources, cross-artifact links). All open directly in a
browser without a server.
Act two
Review
The review half requires the Ikenga desktop shell. Once installed, the Artifact Studio is built in — no additional packages needed.
4. Open a folder as a grid
Open any folder of .html artifacts as the Artifact
Studio grid: from the sidebar, use Browse folder
to pick the directory, or navigate to /artifacts/home
and click into an archetype group. The grid renders a live thumbnail
for each artifact using the same renderer the full view uses — a
scaled-down iframe, not a screenshot.
Artifacts that share a naming family (report.html,
report-v2.html, report-v3.html) stack
under a single cell. Click + var to expand the
stack in place and see all variants alongside their parent.
5. Inspect one at loupe density
Double-click any thumbnail to open it at loupe density
— a full-size preview with a right rail offering four tabs: Chat,
Code, DOM, and Manifest. The Code tab shows the raw source with a
live save path; the DOM tab shows the accessibility tree of the
rendered iframe; the Manifest tab is an inline JSON editor for the
artifact's ikenga-manifest block.
At the bottom, a version strip lists every member of the artifact's naming family — canonical first (marked ◉), variants after. Click any entry to switch to it; right-click a variant to jump straight to compare.
A + new button at the end of the version strip copies the current artifact to the next free variant name and opens it in the editor so you can brief the agent on what to change — without losing the previous version.
6. Pin feedback at the element
Switch to comment mode (the pin icon in the loupe chrome, or the floating comment button the bridge injects into every artifact). The cursor becomes a crosshair. Click any element — a chart bar, a table row, a headline — to attach a numbered pin dot at that position. Type the feedback and send.
Pinned feedback routes to your active Claude session so the agent reads the full payload — selector, screenshot, text, artifact path — without you describing it. If no session is connected, it stays in the side-pane review queue.
Back in the grid view, pin dots overlay every thumbnail at the positions you set. Open or in-progress pins show in red or amber; resolved pins fade. Click a dot to re-dispatch to the agent; ⌥-click to override the routing sink for that one dispatch.
7. Compare variants side by side
From the version strip, right-click any variant to open it in compare density next to the current artifact. Both iframes render at full height with a resizable split; the right rail carries a Chat thread shared by both sides.
Use swap to flip sides. When you've decided which variant wins, click Promote on that side: the shell performs an atomic rename on disk, making the chosen variant the canonical file and the former canonical a numbered sibling. The view updates immediately.
8. Promote to folder
When a single-file artifact grows complex — extracted CSS, separate
JSX, large data files — use Promote to folder from
the loupe's action menu. The dialog lets you choose what to split:
CSS into assets/styles.css, JSX into
assets/app.jsx, mock data into
assets/mock.json. The resulting folder structure is a
fully working artifact under the same schema; the split files are
wired back in as references so nothing breaks.
Install
The skill — authoring, no shell required
npx skills add royalti-io/ikenga-artifact-builder -g
Global install — available across all projects. Omit -g
for a project-scoped install committed with your repo. Works with
Claude Code, Codex, Cursor, and any agent that loads a
.claude/skills/ directory.
The shell — review half
The Artifact Studio (grid, loupe, compare, pin, and promote) is built into the Ikenga desktop shell. Install the shell to unlock the review half.
Install the shellWorks with / requires
| Capability | Requires |
|---|---|
| Author artifacts (standalone) | Claude Code + ikenga-artifact-builder skill |
| Live data | Ikenga desktop shell + bridge, declared data sources in the artifact manifest |
| Artifact Studio (grid, loupe, compare, pin, promote) | Ikenga desktop shell |
| Pin routing to your agent | Active Claude session connected via the mcp-iyke bridge |
| Cross-artifact links and MCP sources | Ikenga shell + declared MCP server in the artifact manifest |
Apache-2.0. Read it.