Back to Details

bklit-studio

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Bklit Studio Skill (chart development)

Bklit Studio Skill（图表开发）

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/
.
仅面向Monorepo贡献者使用。 每当你构建、编辑或制作图表原型时，请自动使用此技能——在通过bklit-ship发布之前。
位于**
/studio
**的Studio是唯一的开发界面：包含完整编辑器外壳、组件树、属性面板、动效设置、代码生成和注册表预览。请勿搭建
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
  • 构建、制作原型或编辑图表（新图表或已有图表）
  • 调整props、图层、数据、样式或动画
  • 涉及Studio、
    /studio
    、注册表预览或图表控件的工作
  • 从之前的playground任务继续开发→改用Studio

Quick start

快速开始

bash
pnpm dev   # repo root
Open http://localhost:3000/studio (optional query: 
?chart=line-chart
).
TaskURL
Edit existing chart
/studio?chart=<slug>
— slugs in 
packages/studio/src/chart-slugs.ts
Profit/loss line mode
/studio?chart=line-chart&lineChartMode=profitLoss
bash
pnpm dev   # 仓库根目录
打开**http://localhost:3000/studio**（可选参数：`?chart=line-chart`）。
任务URL
编辑已有图表
/studio?chart=<slug>
— slugs定义在
packages/studio/src/chart-slugs.ts
中
盈亏折线模式
/studio?chart=line-chart&lineChartMode=profitLoss

Editor layout

编辑器布局

RegionPurpose
LeftChart type (in full Studio), layer list, data controls, animation
CenterCanvas, rulers, resizable frame, replay/scramble
RightProperties for the selected layer
Pane rules: animation → left (
motionPanel
on chart config); per-layer props → right; visibility → eye icon on layer (uses 
hiddenComponents
in URL state).
区域用途
左侧图表类型（完整Studio中）、图层列表、数据控件、动效设置
中间画布、标尺、可调整大小的框架、重放/随机打乱
右侧选中图层的属性面板
面板规则：动效设置→左侧（图表配置中的
motionPanel
）；图层专属props→右侧；可见性→图层上的眼睛图标（使用URL状态中的
hiddenComponents
）。

Where to implement (existing charts)

已有图表的实现位置

Edit the chart in 
packages/studio
 and 
packages/ui
 — not 
apps/web/components/playground/
.
ConcernPath
Chart preview + codegen
packages/studio/src/lib/registry.tsx
(
render
, 
generateCode
)
Layer tree (components panel)
packages/studio/src/lib/studio-components.ts
(
resolve*Components
)
Control groups (properties)
packages/studio/src/lib/registry-control-groups.ts
URL / default state
packages/studio/src/lib/studio-parsers.ts
Chart UI
packages/ui/src/charts/
Slugs
packages/studio/src/chart-slugs.ts
+ 
studioRegistry
in 
registry.tsx
Studio-only previews
packages/studio/src/components/charts/*-studio-preview.tsx
在**
packages/studio
和
packages/ui
**中编辑图表——不要在
apps/web/components/playground/
中操作。
关注点路径
图表预览 + 代码生成
packages/studio/src/lib/registry.tsx
（
render
、
generateCode
方法）
图层树（组件面板）
packages/studio/src/lib/studio-components.ts
（
resolve*Components
方法）
控件组（属性面板）
packages/studio/src/lib/registry-control-groups.ts
URL / 默认状态
packages/studio/src/lib/studio-parsers.ts
图表UI
packages/ui/src/charts/
Slugs
packages/studio/src/chart-slugs.ts
+ 
registry.tsx
中的
studioRegistry
Studio专属预览组件
packages/studio/src/components/charts/*-studio-preview.tsx

Patterns in 
registry.tsx
render

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
.
复用已提交的工具方法（请勿重新实现）：
  • StudioChartShell
    + 
    studioCartesianLegendItems
    — 图例网格 + 
    showLegend
    属性
  • StudioVisibleLayer
    + 
    componentId
    — 将渲染与图层可见性绑定（如
    line.grid
    、
    line.series.0
    等）
  • getStudioCssRevealPropsForPreview
    — 动效/显示过渡
  • isStudioComponentVisible(state, componentId)
    — 条件渲染子组件
  • seriesStrokePropsFromState
    , 
    fadeEdgesPropValue
    , 
    chartTooltipPropsFromState
参考实现：
registry.tsx
中的
lineConfig.render
方法。

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
  4. Open 
    /studio?chart=<new-slug>
    and iterate.
  5. When stable, follow bklit-ship for docs, gallery, shadcn registry.
  1. 在
    packages/ui/src/charts/
    中实现组件（优先实现最小化API）。
  2. 在
    packages/studio/src/chart-slugs.ts
    中添加slug。
  3. 在
    registry.tsx
    的
    studioRegistry
    中添加
    StudioChartConfig
    ： 
    • render(state, ctx)
      — 通过
      StudioShell
      在
      EditorChartFrame
      内渲染预览
    • 在
      studio-components.ts
      中实现
      resolveComponents
      方法
    • controlGroups
      / 
      resolveControlGroups
      配置
    • 为代码面板实现
      generateCode
      方法
  4. 打开
    /studio?chart=<new-slug>
    并迭代开发。
  5. 稳定后，遵循bklit-ship流程完成文档、画廊和shadcn注册表的提交。

Adding a prop or layer

添加props或图层

  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.
  1. 如果
    studio-parsers.ts
    中的
    StudioUrlState
    / 
    defaultStudioState
    缺少对应键，添加该键。
  2. 在
    registry-control-groups.ts
    的对应图层上添加控件，或在
    studio-components.ts
    的组件专属
    controlGroups
    中添加。
  3. 在
    registry.tsx
    的
    render
    方法中关联该props（同时在
    packages/ui
    的图表代码中关联）。
  4. 如果该props影响动画→确保图表配置中
    motionPanel: true
    。
  5. 在Studio中验证：图层列表、可见性切换、属性面板、重放功能。

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.
当API稳定后，阅读
.agents/skills/bklit-ship/SKILL.md
——原型代码应已存放在
packages/ui
+ 
packages/studio
中；无需迁移playground路由。

Deprecated: 
/playground

已废弃：
/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.
本地**
/playground
路由和
bklit-playground
**技能已被废弃。
/playground
会重定向到
/studio
。请勿为新工作复制
playground-editor-shell
或
apps/web/components/playground/
目录。

File reference

文件参考

ItemPath
Studio app route
apps/web/app/studio/page.tsx
(
StudioShell
)
Studio package
packages/studio/
Studio skill
.agents/skills/bklit-studio/SKILL.md
Ship checklist
.agents/skills/bklit-ship/SKILL.md
Performance audit
.agents/skills/bklit-studio-chart-performance/SKILL.md
项目路径
Studio应用路由
apps/web/app/studio/page.tsx
（
StudioShell
组件）
Studio包
packages/studio/
Studio技能文档
.agents/skills/bklit-studio/SKILL.md
发布检查清单
.agents/skills/bklit-ship/SKILL.md
性能审计文档
.agents/skills/bklit-studio-chart-performance/SKILL.md