bklit-studio-chart-performance
Reusable Studio chart performance audit and fix workflow. Use when a chart feels sluggish in /studio (pan, slider ticks, legend hover) but siblings like pie-chart feel fine.
- Installs
- 669
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bklit/bklit-ui --skill bklit-studio-chart-performance- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads bklit-studio-chart-performance automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Studio chart performance
Use when a chart feels sluggish in Studio but similar charts (e.g. pie-chart) are fine.
One-line rule
Keep enter animation on paths if you need it, then drop Motion path subscriptions and isolate hover so Studio slider and legend updates don't replay expensive arc/path math across every series every frame.
1. Find what re-renders on every interaction
Studio updates displayState on every slider tick and on legend/slice hover. Trace:
- Does hover live in the same context as data, scales, and animation config?
- Does the preview recreate children (
data.map, pattern defs, motion props) every render? - Does the chart remount unnecessarily (
keytied to motion signature vs manual replay)?
Pattern: Split context like cartesian / pie charts — stable slice (data, geometry, animation config) vs hover slice (hoveredIndex, tooltip). Consumers that don't need hover use only the stable hook (usePieStable, useRingStable, useChartStable, …).
Studio pan: Wrap chart render in StudioChartRender (packages/studio/src/components/studio-chart-render.tsx) so camera pan / FPS counter parent updates skip the chart tree when render props are unchanged.
2. Treat SVG path d animation as expensive
Animating d with Motion / useTransform + d3 arc (or similar) runs layout + paint every frame, per series.
| Prefer | Avoid |
|---|---|
transform / opacity for hover (compositor-friendly) | Continuous d morphing after enter is done |
Static d once enter finishes | Keeping Motion subscriptions on d for the chart's lifetime |
| Enter animation only, then static paths | Re-running enter path math on unrelated prop changes |
Pattern: useMountProgress for enter → when progress ≥ 1 (useEnterComplete), render static paths and only animate hover with x/y/opacity/scale on a motion.g wrapper (not per-path scale on motion.path).
Shared hook: packages/ui/src/charts/use-enter-complete.ts
3. Memoize chart shell context
Unmemoized provider values force all children to reconcile on every parent render.
- Memoize the stable context object with explicit deps (data, arcs/radii, dimensions, callbacks).
- Memoize hover context on
hoveredIndex+ stablesetHoveredIndex(useCallbackin chart shell). - Match
isLoadedto ring/cartesian:useEffect+ timeout, not a lazyuseStateinitializer.
Reference: pie-context.tsx, ring-context.tsx, chart-context.tsx, PieChartCore / RingChartCore useMemo on provider value.
4. Studio preview–specific wins
Chart-agnostic; apply in packages/studio/src/components/charts/*-studio*.tsx:
| Win | How |
|---|---|
| Conditional defs | Only pass patternDefs / gradients when a series uses patterns |
| Memo derived data | Colored/mapped data arrays; slice/series lists (useMemo, deps: dataSeed + design fields that affect color) |
| Memo motion enter | Don't call getStudioMotionEnterProps inline; useMemo with motion-only deps (not full state) |
| Memo legend hover | { hoveredIndex, setHoveredIndex } in useMemo — already in studio-legend-hover.tsx |
| Memo chart body | memo() wrapper; pass primitives (chartKey, chartSize, data) not whole ctx so pan/shell re-renders skip rebuild |
| Disable glow in Studio | showGlow={false} on series components |
Reference: pie-studio-preview.tsx, ring-studio-preview.tsx
5. Compare against a “fast” sibling in Studio
Diff the slow chart against one that feels smooth in the same editor (usually pie-chart):
| Check | Slow chart often has | Fast chart often has |
|---|---|---|
| Shell | Inline render, extra defs | StudioChartShell + conditional patterns |
| Series count | Many animated paths | Fewer paths or simpler geometry |
| Hover | Context + full tree re-render | Stable subscribers; hover on motion.g / translate |
| Enter | Path d wipe per series | Static d after enter; transform-only hover |
| Pan | Chart tree rebuilds every frame | StudioChartRender memo boundary |
6. Validation bar
Before opening a PR:
pnpm lint
pnpm --filter @bklitui/ui check-types
pnpm --filter @bklitui/studio check-types
# scoped production build when touching studio/web
Manual /studio?chart=<slug>:
- Enter animation
- Hover / legend sync
- Drag geometry sliders (no unnecessary remount)
- Canvas pan (space + drag) after enter — FPS near pie-chart baseline
- Pattern/gradient mode if supported
Chart status (bklit-ui)
| Chart | Slug | Status |
|---|---|---|
| Pie | pie-chart | ✅ Reference (#120) |
| Ring | ring-chart | ✅ Aligned to checklist (context split, static paths, StudioChartRender, preview memo) |
| Radar / Funnel / Choropleth | various | Partial — run checklist |
| Cartesian / scatter / live-line | various | ✅ #91 decimation + hover batching |
| Sankey | sankey-chart | useTransform on link stroke — candidate for useEnterComplete |
| Gauge | gauge-chart | Low priority (single arc) |
Key files
| Area | Path |
|---|---|
| Enter-complete hook | packages/ui/src/charts/use-enter-complete.ts |
| Pie reference | packages/ui/src/charts/pie-slice.tsx, pie-context.tsx, pie-studio-preview.tsx |
| Ring | packages/ui/src/charts/ring.tsx, ring-chart.tsx, ring-studio-preview.tsx |
| Pan isolation | packages/studio/src/components/studio-chart-render.tsx |
| Registry | packages/studio/src/lib/registry.tsx |
FAQ
What does the bklit-studio-chart-performance skill do?
Reusable Studio chart performance audit and fix workflow. Use when a chart feels sluggish in /studio (pan, slider ticks, legend hover) but siblings like pie-chart feel fine.
How do I install bklit-studio-chart-performance?
Run npx skills add https://github.com/bklit/bklit-ui --skill bklit-studio-chart-performance in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/bklit-studio-chart-performance/ (personal) or .claude/skills/bklit-studio-chart-performance/ (project).
Which AI agents can use bklit-studio-chart-performance?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is bklit-studio-chart-performance safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains bklit-studio-chart-performance?
It is published by bklit in bklit/bklit-ui. It has 669 recorded installs.
More from bklit/bklit-ui
bklit-ui
bklit/bklit-ui
Install, compose, theme, and animate Bklit UI charts (the @bklit shadcn registry) in a React / Next.js app. Use when the user wants a chart, graph, or data visualization: line, area, bar, live/streaming line, composed, scatter, candlestick/OHLC, pie, ring/donut, radar, gauge, heatmap, funnel, sankey, sunburst, or choropleth/world map; a sparkline or tiny inline chart (LineSparkline, AreaSparkline, BarSparkline, useSparklineHover) for tables, KPI cards, or dense dashboards; a dashboard, analytics page, KPI or stat card; chart tooltips, crosshairs, legends, markers, reference bands, projections, trend lines, axes, or grids; or when code imports from components/charts/ or mentions @bklit/ or bklit.com. For styling vocabulary (patterns, squircle/rounded/3D bars, fades, loading looks, matching the app theme) also use bklit-ui-design. For moving from Recharts, shadcn ChartContainer, or TanStack Charts to Bklit, use bklit-ui-migrate.
unit-tests
bklit/bklit-ui
Guardrails for adding unit tests in bklit-ui without over-testing. Use when the user mentions unit test, unit tests, tests, test coverage, add tests, write tests, vitest, jest, or asks whether something should be tested.
turborepo
bklit/bklit-ui
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
bklit-ship
bklit/bklit-ui
bklit-ui monorepo contributors only — ship a chart or component from Studio prototype to production in packages/ui with docs and registry.
bklit-playground
bklit/bklit-ui
DEPRECATED — use bklit-studio instead. Local /playground is no longer the chart development workflow for bklit-ui contributors.
pr-open
bklit/bklit-ui
Open a pull request the bklit-ui way: stage and commit with pre-commit hooks, run ultracite from the repo root, rebuild the shadcn registry, run a production test build, fix failures, push, and create a PR with a structured summary. Use when the user asks to commit, push, open a PR, "ship it", or run the full pre-PR checklist.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.