Get started

Installation

One terminal command, only what you need, or two CDN lines. No npm, no build, no account.

Everything at once

At the project root. Creates ./unslop/ with unslop.css, unslop.js and fonts/, plus the skill in .claude/skills/unslop/.

curl -fsSL unslop.leallabs.dev/i | sh

At the end, the installer prints the snippet to paste. This one:

<head>
  <link rel="stylesheet" href="unslop/unslop.css">
</head>
<body>
  <script src="unslop/unslop.js" defer></script>
</body>

Only what you need

add downloads only the charts or blocks you ask for, plus core.js, tokens.css and the fonts. You can ask for several at once.

curl -fsSL unslop.leallabs.dev/i | sh -s add sankey radar

A chart that depends on a shared shell pulls it in too, once and in the right order: family B charts bring b-shell, family C charts bring a-chartc. Each chart page says which one.

A block is the ready-made HTML of a whole card, saved in unslop/blocks/. It uses the CSS and JS from the full package.

curl -fsSL unslop.leallabs.dev/i | sh -s add chart-sankey wall-tasks

To see the names available:

curl -fsSL unslop.leallabs.dev/i | sh -s list

add knows charts and blocks. Button, select, slider and the other components live in the unslop.css and unslop.js of the full install.

Options

Option	What it does
`--dir <pasta>`	Target folder, instead of `./unslop`. It has to be relative and stay inside the current directory, no `..`.
`--no-skill`	Skips installing the skill in `.claude/skills/unslop/`.
`--force`	Overwrites the skill if it already exists. Without the flag, the skill already there stays untouched.
`-h`, `--help`	Shows the help.

Options go after sh -s --:

curl -fsSL unslop.leallabs.dev/i | sh -s -- --dir assets/unslop --no-skill

curl -fsSL unslop.leallabs.dev/i | sh -s -- --force

The installer only downloads over https, writes each file to a temp file and only moves it once the download finishes. Nothing is left half-written.

From the CDN

Nothing to download: the two lines point at the site itself, which serves the CSS and JS with open CORS.

<link rel="stylesheet" href="https://unslop.leallabs.dev/unslop.css">
<script src="https://unslop.leallabs.dev/unslop.js" defer></script>

To use the <u-*> elements, swap unslop.js for unslop.elements.js. It ships the same JS and defines all 33 elements, so data-u keeps working on the same page.

<script src="https://unslop.leallabs.dev/unslop.elements.js" defer></script>

<u-select label="Period" value="Month" props='{"options":["Week","Month","Year"]}'></u-select>

Skill for agents

The full install already includes the skill. It teaches your coding agent to use these components and tokens instead of making up styles. More in Skill for agents.

curl -fsSL unslop.leallabs.dev/i | sh -s -- --force