artifactkit

A UI kit for AI agents that write HTML. Reports, dashboards, kanbans, wikis, scorecards and decks, as one self-contained .html file that opens by double-click with no server, no build and no network.

Zero dependencies in the core. No third-party code in this repository.

→ Live gallery

Why

I ask an agent for a dashboard or a report most weeks. Every time I get different conventions, a CDN link that dies the moment the file leaves my laptop, and a chart that quietly plots a half-finished month beside closed ones. Correcting the same five things on every artifact is not a workflow. So the corrections live here instead: one vocabulary, a set of content rules, and two validators that fail the build when an artifact breaks them.

What it fixes

Agents get the same things wrong:

• a partial period plotted beside closed ones, drawing a cliff that reads as a collapse
• an invented value where the source had nothing, instead of – and a reason
• CSV export dumping the raw dataset, not the rows you filtered to
• a sorted table that never says which column is sorted
• six colours on one measure, encoding nothing

None of that is a styling problem, which is why the CSS is the smallest part of this. canoncss measured it across 130 generations: unconstrained output agrees with itself on 58–67% of its styling vocabulary, a written specification lifts that to ~90%, and a strict prompt over plain Tailwind matched a closed vocabulary. The specification does the work.

Templates

Copy one and change the data. Each is a single file with no dependencies.

Report

Demo · source

A quarterly review. Action title that states the finding, a KPI strip carrying a concentration risk rather than only totals, a banner naming the excluded partial period, and one margin shown as – because the source did not deliver it.

Dashboard

Demo · source

Filter chips, search, sparklines in cells, sticky first column. Row detail is a drilldown, not a modal, because a modal hides what you were comparing against. KPIs derive from the filtered set so they cannot drift from the screen, and the view state lives in the URL so a filtered view is shareable.

Tracker

Demo · source

Native drag between columns, counts and KPIs recomputed on drop, blocked cards carrying the blocking reason. Save writes the board back into the file itself through an allow-listed serializer.

Deck

Demo · audience build · source

N opens a presenter window: notes, pace against a stated budget, and next-up, on your screen only. O overview, ? keys, P one slide per page. The audience build has the notes physically stripped, not hidden, because hiding still ships the text.

Wiki

Demo · source

Decisions kept separate from open questions. Contents built from the document so it cannot drift, search on /, and rejected alternatives recorded rather than forgotten.

Scorecard

Demo · source

Weighted dimensions with the rubric stated in full, because a scorecard without its rubric is an opinion in a grid. Reviewer spread above a threshold is flagged rather than averaged away.

Comparison matrix

Demo · source

Weights fixed before scoring, "do nothing" kept in as the honest baseline, and what each option costs to be wrong. A gate row shows why the highest-scoring option is still not the recommendation: a weighted score ranks the options that remain viable, it does not decide which ones are.

Swatch

Demo · source

Every component on one page. If it looks wrong here it is wrong everywhere.

Try it

Theme

Edit the constants. Everything else derives through color-mix, so fills and rules invert on their own when the ground goes dark.

/*!ak-theme-start*/
:root{
  --t-bg:#F1ECE1;  --t-ink:#1A1A18;  --t-accent:#14496B;
  --t-density:1;   --t-size:15px;    --t-maxw:1120px;
}
/*!ak-theme-end*/

The ground is RAL 9010 #F1ECE1, converted from the CIELAB definition (93.613, −0.425, 6.008). RAL publishes no normative hex and the third-party charts disagree from #EFEEE5 to #FFFFFF. It is a warm off-white. Pure white is wrong.

System fonts only, so it works offline and does not look like everything else.

Core

Plus the long tail whose absence is what makes agent output diverge: stepper, timeline, disclosure, drilldown, KPI strip, scorecard, breadcrumb, TOC, banner, empty state, freshness chip, provenance footer.

For agents

Published at both discovery paths, so it works in Claude Code, Copilot, Cursor and Codex:

.agents/skills/artifactkit/     Copilot · Cursor · Codex
.claude/skills/artifactkit/     Claude Code

SKILL.md has the gates, build procedure, content rules and gotchas. RECIPES.md has worked patterns per artifact type. MODULES.md covers optional libraries and what to avoid. EVAL-RESULTS.md is the measured trigger rate: 0.90, zero false fires, across three model families.

Optional modules

Nothing is vendored here. --with fetches at build time and inlines the library plus its licence text:

node scripts/build.mjs report.html -o out.html --with marked,prism

marked, prism, minisearch, papaparse, sortablejs, chartjs, reveal. All MIT/ISC/BSD, all UMD. Network is needed at build time only, and if it is unreachable the build fails loudly rather than shipping something half-broken.

Constraints

Measured in Chromium, because the documentation on this is thin and often wrong:

• file:// is a secure context, so File System Access and WebCrypto work
• every file:// page shares one localStorage area, so keys must be namespaced by artifact id or unrelated artifacts read and clobber each other
• ES modules are CORS-blocked, classic scripts load, so everything must be UMD
• cross-origin fetch works only against APIs that send CORS headers
• OPFS is blocked
• OAuth from file:// is impossible. Entra needs an https or localhost redirect URI and an Origin header, and file:// sends null. Fetch the data at build time and inline it

Desktop Windows and macOS. No mobile, no touch.

Commands

npm run build && npm run check          # no install step, there are no dependencies

node scripts/build.mjs in.html -o out.html --id slug [--with marked] [--strip-notes]
node scripts/validate.mjs out.html     # self-containment, credentials, accessibility
node scripts/drift.mjs out.html        # structural integrity
node scripts/sync-skill.mjs            # after editing src/
node scripts/shots.mjs                 # regenerate the screenshots

Two checkers because one is not enough: a rule checker sees vocabulary, not erosion. Strip every takeaway and source line from a report and validate.mjs passes it with zero warnings while drift.mjs fails it four ways.

Contributing notes, including two Windows traps that have already bitten, are in CONTRIBUTING.md.

Licence

MIT. Libraries fetched with --with keep their own, inlined into each artifact automatically.