← ClaudeAtlas

bklit-uilisted

Bklit UI charts and data visualization for any project using the @bklit shadcn registry. Install, compose, theme, and animate charts correctly. Triggers when working with @bklitui/ui/charts, @bklit components, data visualization, dashboards, or chart theming. Also invoke manually for chart tasks.
webmilmind1/claude-plugins · ★ 1 · Web & Frontend · score 65
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