Bklit Studio Skill (chart development)

Monorepo contributors only. Use this skill automatically whenever you build, edit, or prototype a chart — before shipping via bklit-ship.

Studio at /studio is the single development surface: full editor shell, component tree, properties, motion, codegen, and registry previews. Do not scaffold apps/web/app/playground/.

When to use (auto-trigger)

• Build, prototype, or edit a chart (new or existing)
• Tune props, layers, data, styling, or animation
• Mentions Studio, /studio, registry preview, or chart controls
• Work continues from a prior playground task → use Studio instead

Quick start

pnpm dev   # repo root

Open http://localhost:3000/studio (optional query: ?chart=line-chart).

Editor layout

Pane rules: animation → left (motionPanel on chart config); per-layer props → right; visibility → eye icon on layer (uses hiddenComponents in URL state).

Where to implement (existing charts)

Edit the chart in packages/studio and packages/ui — not apps/web/components/playground/.

Patterns in registry.tsx render

Reuse committed helpers (do not reimplement):

• StudioChartShell + studioCartesianLegendItems — legend grid + showLegend
• StudioVisibleLayer + componentId — ties render to layer visibility (line.grid, line.series.0, …)
• getStudioCssRevealPropsForPreview — motion / reveal
• isStudioComponentVisible(state, componentId) — conditional children
• seriesStrokePropsFromState, fadeEdgesPropValue, chartTooltipPropsFromState

Reference implementation: lineConfig.render in registry.tsx.

New chart (not in registry yet)

1. Implement component(s) in packages/ui/src/charts/ (minimal API first).
2. Add slug to packages/studio/src/chart-slugs.ts.
3. Add StudioChartConfig to studioRegistry in registry.tsx:

- render(state, ctx) — preview inside EditorChartFrame via StudioShell - resolveComponents in studio-components.ts - controlGroups / resolveControlGroups - generateCode for the code sheet

1. Open /studio?chart=<new-slug> and iterate.
2. When stable, follow bklit-ship for docs, gallery, shadcn registry.

Adding a prop or layer

1. Add key to StudioUrlState / defaultStudioState in studio-parsers.ts if missing.
2. Add control(s) on the right layer in registry-control-groups.ts or per-component controlGroups in studio-components.ts.
3. Wire prop in registry.tsx render (and in packages/ui chart code).
4. If the prop affects animation → ensure motionPanel: true on chart config.
5. Verify in Studio: layer list, visibility toggle, properties, replay.

Shipping

When the API is stable, read .agents/skills/bklit-ship/SKILL.md — prototype code should already live in packages/ui + packages/studio; no playground route to migrate.

Deprecated: /playground

The local /playground route and bklit-playground skill are deprecated. /playground redirects to /studio. Do not copy playground-editor-shell or apps/web/components/playground/ for new work.

File reference