Skills

Skills give AI coding agents project-aware context about Bklit UI. Once installed, your agent knows how to install charts from the @bklit registry, import them from the files the CLI wrote, compose and theme them, style them with Bklit's design vocabulary, and migrate existing charts.

For example, you can ask your agent to:

• "Add an area chart with tooltips to my dashboard."
• "Build a KPI stat card with a revenue sparkline."
• "Add a sparkline to each row of the pricing table that shows the hovered value."
• "Give the bar chart rounded tops and a diagonal pattern that matches our theme."
• "Use a diagonal pattern background that fades out on all sides."
• "Replace our Recharts line chart with the Bklit one."
• "Migrate all our shadcn charts to Bklit."
• "Swap our TanStack Charts KPI sparklines for Bklit sparklines."
• "Fix the crosshair color on my candlestick chart tooltip."

Install

npx skills add bklit/bklit-ui

This installs all three public skills. To install just one, pass --skill:

npx skills add bklit/bklit-ui --skill bklit-ui
npx skills add bklit/bklit-ui --skill bklit-ui-design
npx skills add bklit/bklit-ui --skill bklit-ui-migrate

Your agent loads each skill automatically when a request matches it. Learn more about skills at skills.sh.

Public skills

What bklit-ui covers

Project context

The skill runs shadcn info --json to read your project's framework, Tailwind version, aliases, and installed components (agents that don't run the injection are told to run it themselves). If the @bklit registry isn't configured, it falls back to adding the namespace or installing by URL.

Installation and imports

Charts install as source with the shadcn CLI:

npx shadcn@latest add @bklit/line-chart

Files land in components/charts/, so imports use your project's alias — for example @/components/charts/line-chart, @/components/charts/tooltip, and @/components/charts/chart-context for chartCssVars. After installing, the agent reads the installed source to confirm props, since you own that code.

Composition and theming

Root chart → Grid → series → axes → overlays → ChartTooltip; chartCssVars for typed tokens; series colors from --chart-1 … --chart-5, which shadcn add leaves untouched if your theme already defines them; sequential --chart-scale-01 … --chart-scale-05 for heatmaps and choropleths.

Tooltips, overlays, animation, and loading

ChartTooltip props (content, rows, indicatorColor, dotVariant, …), legends, markers, reference areas, projection lines, range bands, backgrounds, enter-animation defaults and replay, and the status="loading" hand-off.

Catalog

18 chart items — area, bar, line, sparkline (line, area and bar, with useSparklineHover), live line, composed, scatter, candlestick, profit/loss line, pie, ring, radar, gauge, heatmap, funnel, sankey, sunburst, and choropleth — plus add-ons (axes, grid, tooltip, legend, markers, background, patterns, reference area, projection line, band, bar depth, stat flow) and stat-card blocks, each with install commands and links to docs, the charts gallery, and Studio.

What bklit-ui-design covers

Reading your app's design

Before styling, the skill runs a small dependency-free script, detect-design.mjs, that reports your Tailwind version, color format (oklch or hsl), dark-mode strategy, --radius, existing --chart-* palette, components.json style, and UI primitives. Charts are styled to fit what it finds, using your tokens rather than hardcoded colors.

Design vocabulary

Plain-English requests map to exact components and props. For example:

Recipes, taste, and theming

Fifteen ready-made compositions from the charts gallery, opinionated taste rules (one decorative layer, subtle patterns, faded backgrounds, corner style that matches your --radius), and theming guidance for light and dark mode, including fixes for Tailwind v3 projects.

When you ask for something Bklit doesn't support, such as a wave or hexagon background preset, the skill says so and offers the closest composition instead of inventing props.

What bklit-ui-migrate covers

Finding your charts

A dependency-free script, detect-recharts.mjs, lists every chart that uses Recharts directly or through shadcn's components/ui/chart.tsx (ChartContainer, ChartConfig, ChartTooltipContent), and every TanStack Charts (@tanstack/charts) defineChart definition. Tiny charts with one series and no axes, such as Recharts' "Tiny" line, area and bar charts or a TanStack KPI sparkline, are flagged as sparklines.

Planning the migration

Each chart is classified as:

• Clean: a direct Bklit equivalent, such as line, area, bar, pie, radar, funnel, or sankey charts, or a tiny chart that becomes a LineSparkline, AreaSparkline, or BarSparkline.
• Needs a workaround: for example numeric x values on a line chart, stacked areas, a fixed y domain, or a tooltip on a sparkline (sparklines show the hovered value through useSparklineHover instead). The agent asks before converting these.
• Keep on Recharts or TanStack Charts: no Bklit equivalent yet, such as Treemap or ErrorBar, or TanStack marks like dot, cell, or text.

TanStack Charts coverage focuses on what Bklit supports: sparklines map closely, while full lineY, areaY, and barY charts map to line, area, and bar charts at a high level and need a manual check of scales and axes.

Converting

Files are converted one at a time: data is reshaped where needed (for example, x values to dates), components and props are mapped, and ChartConfig colors and labels carry over to series and tooltip rows. components/ui/chart.tsx and the recharts or @tanstack/charts dependency are removed only once nothing imports them, then the project is typechecked and built.

Learn more

• Installation — Set up the @bklit registry in your project
• Theming — CSS variables and chartCssVars
• Components — Chart API reference
• Charts gallery — Interactive examples
• Studio — Tune props and copy generated code
• skills.sh — Learn more about agent skills

Contributing to bklit-ui

If you cloned the bklit-ui repository to contribute, contributor-only skills live in .agents/skills/ (see AGENTS.md):

These skills are marked internal in their frontmatter, so npx skills add bklit/bklit-ui does not install them — they are for monorepo development only.