Agent skills for design and migration

Bklit UI ships agent skills — instructions your coding agent loads so it uses the right components and props instead of guessing. Two new ones join the core skill.

npx skills add bklit/bklit-ui

bklit-ui-design

Describe the look you want in plain words — "faded pattern background", "squircle bars", "3D glass bars", "hatched area", "skeleton loading", "match our brand" — and the agent maps it to real Bklit components and props. It checks your Tailwind version, colour format, dark mode and corner radius first, so the result fits your app.

bklit-ui-migrate

Point your agent at a codebase using Recharts, directly or through shadcn's chart component. It finds every chart, sorts them into ones that convert cleanly, ones that need a workaround, and ones to leave on Recharts, then converts them to Bklit UI and checks the result.

The core bklit-ui skill has been rewritten alongside them.

Gauge has a new orientation="linear" mode that lays its notches along a horizontal bar — the same geometry, fills, gradients and enter animations as the arc, in a shape that fits table rows and cards.

The center label is optional. In linear mode, place it above or below the track with labelPlacement and align it with labelAlign — the same six positions as a chart legend.

See the Gauge docs.

HeatmapChart is here. Cells animate smoothly between the loading and ready states, and every level from Less to More shares one style — a base color plus an optional pattern, used by both the cells and the legend.

In Studio, the levels live in collapsible panes with the same pattern controls as Background.

The heatmap is in the docs, the gallery and the shadcn registry. See the heatmap chart docs.