Skills
Give AI agents project-aware context for Bklit charts in your application.
Skills give AI assistants project-aware context about Bklit UI. When installed, your agent knows how to install, compose, theme, and animate charts using the correct APIs and patterns for your project.
For example, you can ask your AI assistant to:
- "Add an area chart with tooltips to my dashboard."
- "Install and theme a gauge chart for this KPI card."
- "Build a stats page with bar and line charts using the @bklit registry."
- "Fix the crosshair color on my candlestick chart tooltip."
The skill reads your project's components.json and provides the assistant with your framework, aliases, installed components, and resolved paths so it can generate correct chart code on the first try.
Install
npx skills add bklit/bklit-uiThis installs the bklit-ui skill into your project. Once installed, your AI assistant automatically loads it when working with Bklit charts and data visualization.
Learn more about skills at skills.sh.
What's Included
The skill provides your AI assistant with the following knowledge:
Project Context
On every interaction, the skill runs shadcn info --json to get your project's configuration: framework, Tailwind version, aliases, installed components, and resolved file paths — including which @bklit charts are already installed.
Registry Installation
How to configure the @bklit namespace and install charts with the shadcn CLI:
npx shadcn@latest add @bklit/line-chartComposition and Theming
How to compose charts (LineChart → Grid → Line → XAxis → ChartTooltip), use chartCssVars for type-safe theming, and apply series palette tokens (--chart-1 … --chart-5).
Animation and Tooltips
Enter animation defaults, replay patterns via revealSignature, custom tooltip content, indicatorColor for candlesticks, and the useChart hook for custom indicators.
Chart Catalog
A decision guide for all 14 chart types with doc URLs, gallery links, and install commands — area, bar, line, live line, composed, scatter, candlestick, pie, ring, radar, gauge, funnel, sankey, and choropleth.
How It Works
- Project detection — The skill activates when working with
@bklitregistry components,@bklitui/ui/charts, or chart/data-visualization tasks. - Context injection — It runs
shadcn info --jsonto read your project configuration and injects the result into the assistant's context. - Pattern enforcement — The assistant follows Bklit composition rules: root chart + children, semantic chart CSS variables, and correct tooltip/crosshair patterns.
- Doc discovery — The assistant references ui.bklit.com documentation and the charts gallery before generating code.
Learn More
- Installation — Set up the
@bklitregistry 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 AI skills
Contributing to bklit-ui
If you cloned the bklit-ui repository to contribute new charts, additional contributor-only skills live in .agents/skills/:
| Skill | Purpose |
|---|---|
| bklit-playground | Auto-trigger when building/editing charts. Scaffold gitignored page.tsx from .agents/skills/bklit-playground/templates/page.tsx — editor shell, empty panes, control wiring rules. See AGENTS.md. |
| bklit-ship | Move a chart from playground prototype to packages/ui with docs, gallery, and registry |
These skills are not published to skills.sh — they are for monorepo development only.