Design and engineering skills for live data artifacts, interactive apps, and advanced financial charts — built for an environment where no charting library can ever load.
27 skills across three halves: artifact and app engineering, UI/UX craft, and financial chart
design. Plus chartkit.js, a tested dependency-free chart utility.
A published Claude artifact runs under a strict Content Security Policy that blocks every external
host. No D3. No Recharts. No Chart.js, Plotly, Highcharts, or ECharts. No Google Fonts, no CDN, no
remote images, no fetch to another origin.
Most charting advice silently assumes a library. Here you write the SVG.
To be precise about what the CSP blocks: the network, not JavaScript. Inline <script> runs
normally, so charts are as interactive as you build them — tooltips, zoom, linked legends, live
connector refresh are all shipped patterns (see app-interaction-patterns and
live-data-artifacts). "No external hosts" is not "static pages."
That turns out to be fine — scales, ticks, paths, and stacking are a few dozen lines each, and
chartkit.js ships them in ~8KB with 47 passing assertions. What it does mean is that the craft
matters more: no library will make the axis decision for you, and no default will save a chart whose
form is wrong for the question.
Two exceptions worth knowing: mermaid renders natively (see mermaid-in-artifacts), and pages
can read live data from the viewer's claude.ai connectors (see live-data-artifacts).
/plugin marketplace add Lukehle/chartroom
/plugin install chartroom
or
git clone https://github.com/Lukehle/chartroom.git && cd chartroom
./install.sh # macOS / Linux / Git Bash
pwsh ./install.ps1 # WindowsThe copy-tree installers include both skills and the /artifact and /chart command aliases.
Verify the chart kit:
node skills/svg-charting/scripts/chartkit.test.js # 47 assertions| Skill | For |
|---|---|
artifact-architecture |
Read first. The CSP, self-contained requirement, data-tier decision, page budget, naming, redeploy semantics |
live-data-artifacts |
Connector-backed live data — watchTool vs callTool, freshness UI, error codes, the observe-before-publish rule, degradation |
stateful-artifacts |
Pages that are the record — trackers, checklists, sign-off boards; sync regions and conflict handling |
artifact-data-loading |
Fitting data in — aggregating at source, embedding formats and real byte costs, pagination vs virtualization, downloads |
app-interaction-patterns |
Filtering, cross-filtering, drill-down, brushing, and the seven-state machine every data surface needs |
artifact-performance |
Render budgets, the SVG→canvas threshold, delegation, layout thrash, rAF and debounce |
artifact-testing |
The nine pre-publish passes. Publishing distributes — this is the gate |
| Skill | For |
|---|---|
visual-hierarchy |
Rank-then-lay-out, grouping by proximity, spacing scale, density for a professional audience |
data-typography |
Tabular figures, alignment, precision, negatives, the label/value pair, type scale |
design-tokens |
Role-named colour, spacing and type scales, chart palettes, semantic direction |
artifact-theming |
The three theme states, the transparent-body bug, charts under theme change, print and greyscale |
forms-and-controls |
Period pickers, numeric inputs that accept (1,234.56), scenario controls, validation timing |
microcopy-and-states |
Labels, the four different empty states, error copy, provenance lines, disclosure |
motion-and-transitions |
Object constancy, durations, what never to animate, reduced motion |
artifact-accessibility |
Non-colour encoding, contrast, keyboard, screen-reader structure for SVG, data-table fallbacks |
ui-antipatterns |
The generated-page signature, dashboard clichés, chart misleads, false precision |
| Skill | For |
|---|---|
chart-selection |
Start here. Question → form decision table, and when not to chart at all |
bridge-charts |
ARR, EBITDA, cash and budget bridges; anchors, subtotals, and the footing rule |
cohort-charts |
Triangle heatmaps, retention curves, layer cake; fixed denominators, suppression, the diagonal read |
variance-charts |
Bullet, deviation, dumbbell, slope, variance bands; favourable-vs-unfavourable encoding |
timeseries-finance |
Indexing, log scale, TTM vs run-rate, seasonality, forecast boundaries, restatement |
uncertainty-charts |
Fan charts, scenario bands, tornado, Monte Carlo output, and the honesty rules |
flow-charts |
Sankey for cash and customer movement, marimekko, stacked vs 100% stacked, treemaps |
financial-tables |
Hierarchical P&L layout, column order, conditional formatting that earns its ink, sparklines |
chart-annotation |
Takeaway titles, direct labels, reference lines, benchmark vintage, provenance |
| Skill | For |
|---|---|
svg-charting |
Hand-built charts + chartkit.js — scales, ticks, paths, stacking, waterfall layout, collision |
mermaid-in-artifacts |
The one thing that renders natively; what it is good and bad for |
Dependency-free, ~8KB, ESM / CJS / <script>.
chartkit.scaleLinear(domain, range) chartkit.scaleBand(domain, range, padding)
chartkit.niceTicks(lo, hi, count) chartkit.niceDomain(lo, hi, count)
chartkit.linePath(points) chartkit.areaPath(points, baseline)
chartkit.barPath(x, y, w, h, r) chartkit.stack(series, {normalize})
chartkit.waterfallLayout(items) chartkit.avoidOverlap(positions, gap, bounds)
chartkit.formatCompact(v, {currency}) chartkit.formatAccounting(v, decimals)Three behaviours are deliberate and regression-guarded:
waterfallLayoutreports whether the bridge foots. A bridge whose bars do not sum to its closing anchor is a wrong analysis. Checkfooting.okand fail loudly — never plug the chart.linePathbreaks at nulls by default. Connecting across a missing month draws data that does not exist.stacksends negatives below zero rather than folding them into the positive stack, which would silently overstate the total.
- The title is the finding, not the subject. "Churn offset half of new ARR" beats "ARR Bridge". If you cannot write that sentence, you do not yet know what the chart is for.
- Plot the variance, not two lines the reader must subtract.
- There are three theme states, not two — and the one that stamps no attribute is the default.
- Hover reveals detail, never the primary value. Hover is dead on touch, in print, and by keyboard.
- Empty and filtered-to-nothing are different states with different messages.
- Snapshot by default. A board figure that silently changes between sending and reading is a defect, not a freshness feature.
- Often the answer is not a chart. One number with a comparison, or a well-set table, wins more often than dashboards admit.
| closeloop | Finance operations — close, reconciliation, flux, three-statement integrity, SaaS metrics, NetSuite and warehouse pipelines. Its fin-artifact points here for the visualization craft |
| claude-quorum | Adversarial multi-perspective review. Its design-quorum adapter is the review gate for anything built with this pack — run artifact-testing first for omissions, then the quorum for misreads |
Use them together or separately; none depends on the others.
MIT — see LICENSE.
Part of a family: toolroom (the harness layer and umbrella - guard hooks, model routing, loops, skill routing, Enterprise runbook) - closeloop (finance) - chartroom (charts/artifacts) - vaultkit (vault memory + Notion) - claude-quorum (verification).