bklitOfficial·11 Agent Skills Included

bklit-ui

Build, customize, and ship animated React charts with AI

Installs and composes open-source React chart components from the Bklit UI shadcn registry, covering line, bar, pie, candlestick, sankey, and more. Guides your AI agent through chart theming, animation, tooltips, and Studio prototyping without hand-writing SVG or guessing props. Handles contributor workflows like performance audits, testing, registry rebuilds, and pull requests to ship charts faster.

1,458|89

↗

npx skills add bklit/bklit-ui --all -g -y

Available:

Tells the AI agent which skill to load for each chart task, routing work to Studio prototyping, shipping, performance audits, or PR workflows with the correct file paths.

All Skills in This Repository (11)

Pure Emerald Level Indicators

📦 In Repo

bklit

bklit-studio

Standardize bklit-ui chart development workflows via the /studio surface.

pr-open

Automate pre-PR workflows for the bklit-ui monorepo with validation and structured GitHub pull requests.

shadcn

Manage shadcn/ui component lifecycle and configuration in React projects.

unit-tests

Evaluate and write unit tests for bklit-ui utility functions.

wiki-llms-txt

Generate spec-compliant llms.txt and llms-full.txt files from wiki documentation.

add-x-tweet

Fetch X/Twitter tweet metadata via FxTwitter API and format testimonials for the bklit UI homepage.

bklit-studio-chart-performance

Optimize Bklit Studio chart performance by memoizing components and splitting contexts.

turborepo

Configure Turborepo task pipelines and caching for JavaScript monorepos.

bklit-playground

Direct bklit-ui contributors from the deprecated /playground route to the Studio workflow.

bklit-ship

Guide bklit-ui contributors through production shipping checklists for Studio-validated charts.

bklit-ui

Configure Bklit UI chart components in React via the @bklit shadcn registry.

Official

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install bklit-ui?▼

Run `npx skills add bklit/bklit-ui --all -g -y` in your terminal to install all skills in this suite globally.

How do I add a Bklit chart to my React project?▼

Initialize shadcn in your project, then run `npx shadcn@latest add @bklit/line-chart` (or any chart slug). The CLI copies the component source into your project and installs dependencies.

What chart types does Bklit UI include?▼

It includes 14 chart types: line, area, bar, pie, ring, radar, scatter, gauge, funnel, sankey, candlestick, choropleth, composed, and live-line charts, all customizable via the Studio playground.

Does bklit-ui work with AI coding agents?▼

Yes. The skills follow the universal SKILL.md standard and work in Claude Code, Cursor, Codex, and OpenClaw, teaching the agent correct chart composition, theming, and animation rules.

Can I customize chart colors and animations?▼

Yes. Charts use theme tokens like --chart-1 through --chart-5 and the chartCssVars helper, and you can tune styling and motion live in Bklit Studio before copying the generated code.