Bklit UI is an open-source collection of customizable interface components and charts for building React applications with shadcn. Developers use it to add data visualizations such as funnels, gauges, maps, financial charts, and other interactive displays. The catalogue add-ons provide workflows for using its components and chart registry.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add bklit/bklit-ui --skill bklit-ui-migrategit clone --depth 1 https://github.com/bklit/bklit-uiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bklit/bklit-ui/bklit-ui-migrate)<a href="https://agentmods.dev/skills/bklit/bklit-ui/bklit-ui-migrate"><img src="https://agentmods.dev/badge/skills/bklit/bklit-ui/bklit-ui-migrate/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/bklit/bklit-ui/bklit-ui-migrate"><img src="https://agentmods.dev/badge/skills/bklit/bklit-ui/bklit-ui-migrate.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00163 | $0.03301 |
| Opus 5.5 | $0.00065 | $0.01320 |
| Sonnet 5.5 | $0.00033 | $0.00660 |
| Haiku 4.5 | $0.00016 | $0.00330 |
Grade A, and why
bklit-ui-migrate scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Recharts → Bklit UI migration
Bklit charts are shadcn registry components: npx shadcn@latest add @bklit/<slug> copies source into the user's project and the code imports it from their own alias, e.g. @/components/charts/line-chart. Never import from @bklitui/ui/charts — that is bklit's private monorepo package.
Work through the steps in order. Do not start rewriting before the inventory (step 1) and classification (step 2) have been shown to the user.
References
| File | Use it for |
|---|---|
| references/component-map.md | Recharts component → bklit export, registry slug, import path |
| references/prop-map.md | Prop-by-prop mapping, units, defaults |
| references/shadcn-chart.md | ChartContainer / ChartConfig / ChartTooltipContent / ChartLegendContent, var(--color-*), full before/after |
| references/examples.md | Verified before/after: multi-line, stacked bar, horizontal bar, donut, radar, gradient area |
| rules/gaps.md | Features with no bklit prop — workaround or keep Recharts (Incorrect/Correct) |
| scripts/detect-recharts.mjs | Zero-dependency inventory + classification |
Docs for each chart: https://bklit.com/docs/components/<slug>.
Ground rules
- Never invent props. If a Recharts prop has no row in
prop-map.md, it is a gap — readrules/gaps.md. bklit has notickFormatteronXAxis, nodomainonYAxis, nostackId, nolayout, noconnectNulls, nosyncId. - Line / Area / Composed / Scatter are time-series charts. x values must be
Dates (or ISO strings / epoch ms). Categorical x →BarChartor a workaround. - Preserve data, colours and labels. Same series, same colours (resolved from
ChartConfig), same human labels in tooltip and legend. - One file at a time, typecheck after each.
- Ask before any "needs workaround" conversion — it changes how the chart looks or reads.
- Leave "keep Recharts" charts untouched. A partial migration is a valid outcome.
What ships with it
26 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/evals.json 11 KB
- evals/files/bar-layout-vertical/components/browser-share.tsx 821 B
- evals/files/bar-layout-vertical/package.json 184 B
- evals/files/donut-pie-center/components/plan-mix.tsx 802 B
- evals/files/donut-pie-center/package.json 181 B
- evals/files/line-multi-series/components/traffic-chart.tsx 1.3 KB
- evals/files/line-multi-series/package.json 182 B
- evals/files/radar-normalize/components/skills-radar.tsx 1.1 KB
- evals/files/radar-normalize/package.json 180 B
- evals/files/scatter-numeric-x/components/height-weight.tsx 864 B
- evals/files/scatter-numeric-x/package.json 182 B
- evals/files/shadcn-area-interactive/components/chart-area-interactive.tsx 3.8 KB
- evals/files/shadcn-area-interactive/components/ui/chart.tsx 4.4 KB
- evals/files/shadcn-area-interactive/package.json 189 B
- evals/files/shadcn-stacked-bar/components/chart-bar-stacked.tsx 1.6 KB
- evals/files/shadcn-stacked-bar/components/ui/chart.tsx 4.4 KB
- evals/files/shadcn-stacked-bar/package.json 184 B
- evals/files/treemap-keep/components/monthly-bars.tsx 514 B
- evals/files/treemap-keep/components/storage-treemap.tsx 663 B
- evals/files/treemap-keep/package.json 177 B
- references/component-map.md 8.0 KB
- references/examples.md 15 KB
- references/prop-map.md 11 KB
- references/shadcn-chart.md 13 KB
- rules/gaps.md 9.0 KB
- scripts/detect-recharts.mjs 29 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- today First seen · 159 lines · 163 tokens per session scan A ec9f0b50d322
bklit-ui-migrate is a skill published in the GitHub repository bklit/bklit-ui (1,772 stars, last pushed yesterday), licensed MIT. It adds 163 tokens to every session and 3,301 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-16.
Other skills, from other repositories
commit
Create git commits in the Unovis repo that pass its commitlint rules. Unovis uses a CUSTOM commit format (Type | Scope | Subscope: Sentence-case subject), NOT Conventional Commits, so feat:/fix: will be rejected by the commit-msg hook. Use this whenever staging and committing changes, writing or rewriting a commit…
add-component
Add a new visualization component to Unovis end to end — the TypeScript core, the shared registry, the generated framework wrappers, a dev example, a gallery example, and docs. Use when asked to add/create a new component, chart type, plot, or diagram to the library, or to wire an existing core component through to…
add-gallery-example
Add an example to the Unovis gallery — a per-framework example directory under packages/shared/examples, registered in examples-list.tsx, with light/dark previews. Use when asked to add a gallery example, showcase a chart in the gallery, or create the gallery entry that accompanies a new component.
open-pr
Open a pull request for the Unovis repo with the project's conventions — correct branch off main, the standard commit grouping, and the checklist-style PR body used by the maintainers. Use when asked to open/create/submit a pull request, prepare a branch for review, or write a PR description in this repository.
lieflat-charts
A template-based tool for making data visualizations and publishable HTML reports. It can use real implementations from included chart galleries and choose from 12 full-page report templates based on the data’s meaning.
chart-description-writer
Writes a precise, accessible text description of a data visualization — covering the chart type, what it shows, the key finding, and the data range — suitable for publication as a caption, alt-text, or standfirst alongside the chart.