bklit-uilisted
Install: claude install-skill webmilmind1/claude-plugins
# Bklit UI
Composable chart components for React, distributed via the `@bklit` shadcn registry. Charts are installed as source into the user's project.
> **IMPORTANT:** Run shadcn CLI commands with the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`.
## Current Project Context
Before adding charts, run `npx shadcn@latest info --json` in the project and use its JSON output for framework, aliases, Tailwind version, installed components, and resolved paths. Confirm the `@bklit` registry is configured before adding charts.
## Principles
1. **Install before inventing.** Use `npx shadcn@latest add @bklit/<chart>` — charts are registry components, not hand-rolled SVG.
2. **Compose, don't flatten.** Root chart → `Grid` → series → axes → `ChartTooltip`. See [composition.md](./rules/composition.md).
3. **Theme with tokens.** Use `chartCssVars` and `--chart-*` variables — never hardcode one-off colors. See [theming.md](./rules/theming.md).
4. **Read the doc page first.** Each chart has props, data shape, and examples at `https://ui.bklit.com/docs/components/<slug>`.
5. **Browse variants.** Gallery: `https://ui.bklit.com/charts/<slug>` — Studio: `https://ui.bklit.com/studio?chart=<slug>`.
## Critical Rules
These rules are **always enforced**. Each links to Incorrect/Correct examples.
### Composition → [composition.md](./rules/composition.md)
- **Series and axes live inside the root chart** — `LineChart`, `BarChart`, `AreaCh