bklit-ui-migrate
Installation
SKILL.md
Recharts / TanStack Charts → 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 | Before/after: multi-line, stacked bar, horizontal bar, donut, radar, gradient area, tiny line/area/bar → sparklines, TanStack KPI sparkline |
| references/tanstack-charts.md | TanStack Charts (@tanstack/charts): marks → sparklines (well covered) and full charts (high-level only) |
| rules/gaps.md | Features with no bklit prop — workaround or keep Recharts (Incorrect/Correct) |
| scripts/detect-recharts.mjs | Zero-dependency inventory + classification (Recharts, shadcn wrapper, TanStack Charts, tiny charts → sparkline) |
Docs for each chart: https://bklit.com/docs/components/<slug>.