# Chartsy
A chart design system for coding agents, built on [bklit UI](https://bklit.com/docs).
Chartsy is an [Agent Skill](https://agentskills.io). Install it once and your agent picks the right chart for the question, installs it from the bklit shadcn registry, themes it from 12 palettes and checks the result, the same way every time.
[](https://skills.sh/David-glitc/chartsy)
Site and live demos: https://chartsy-bklit.pages.dev
## Install the skill
```bash
npx skills add David-glitc/chartsy
```
Or without the CLI:
```bash
mkdir -p ~/.claude/skills && curl -fsSL https://chartsy-bklit.pages.dev/chartsy-skill.tar.gz | tar -xz -C ~/.claude/skills
```
Then ask your agent for a chart in plain language:
```
add a revenue vs costs chart to the dashboard
```
The skill is for React projects that use Tailwind v4 and shadcn/ui.
## What the agent gets
| File | What it is for |
| --- | --- |
| [`SKILL.md`](skills/chartsy/SKILL.md) | The seven-step workflow, and a table of known problems with their fixes |
| [`references/chart-picker.md`](skills/chartsy/references/chart-picker.md) | Which of 15 charts answers which question |
| [`references/recipes.md`](skills/chartsy/references/recipes.md) | Code, imports and data shapes for all 15 charts |
| [`references/design-rules.md`](skills/chartsy/references/design-rules.md) | Colour, labels, layout, motion and a review checklist |
| [`references/palettes.md`](skills/chartsy/references/palettes.md) | 12 palettes as CSS variables |
| [`assets/chartsy.css`](skills/chartsy/assets/chartsy.css) | The default tokens, light and dark |
## Use the theme without an agent
Every palette is a shadcn theme item. It sets `--chart-1` to `--chart-5` and a sequential scale on top of any bklit chart.
```bash
npx shadcn@latest add https://chartsy-bklit.pages.dev/r/chartsy.json
```
Other palettes: replace `chartsy` with `chartsy-<id>`, where `<id>` is one of `tide`, `grove`, `dusk`, `neon`, `citrus`, `glacier`, `terra`, `orchid`, `candy`, `cobalt`, `ink`.
## Charts covered
Area, line, bar, candlestick, live line, scatter, radar, pie and donut, ring, sunburst, gauge, sankey, funnel, heatmap, sparkline.
## Develop
```bash
pnpm install
pnpm dev
```
`pnpm build` runs `scripts/pack.mjs` first. That script reads `src/palettes.json` and generates the palette reference, the token stylesheet, the shadcn theme items, the downloadable skill archive and `llms.txt`. Edit palettes in `src/palettes.json` only.
## Status
The recipes were built and rendered on the site. The skill has not yet been run end to end by an agent in a fresh project; reports are welcome in issues.
## Credits and license
Charts are [bklit UI](https://github.com/bklit/bklit-ui) components (MIT), copied into `src/components/charts` through its shadcn registry. Chartsy is MIT licensed. See [LICENSE](LICENSE) and [NOTICE](NOTICE).
