bklit-studio

Bklit Studio スキル（チャート開発）

モノレポのコントリビューターのみが対象です。 チャートの作成、編集、プロトタイプ作成を行う際は、bklit-ship で公開する前に、このスキルを必ず自動的に使用してください。

/studio の Studio が唯一の開発環境です。完全なエディターシェル、コンポーネントツリー、プロパティ、モーション、コード生成、レジストリプレビューを備えています。apps/web/app/playground/ をスキャフォールドしないでください。

使用する場面（自動トリガー）

• チャート（新規または既存）の作成、プロトタイプ作成、編集
• プロパティ、レイヤー、データ、スタイル、アニメーションの調整
• Studio、/studio、レジストリプレビュー、チャートコントロールへの言及
• 以前のプレイグラウンドタスクの続きの作業 → 代わりに Studio を使用

クイックスタート

pnpm dev   # repo root

http://localhost:3000/studio を開きます（任意のクエリ：?chart=line-chart）。

タスク	URL
既存のチャートを編集	/studio?chart=<slug> — スラッグは packages/studio/src/chart-slugs.ts にあります
利益／損失ラインモード	/studio?chart=line-chart&lineChartMode=profitLoss

エディターのレイアウト

領域	用途
左	チャートタイプ（Studio の全機能版）、レイヤー一覧、データコントロール、アニメーション
中央	キャンバス、ルーラー、サイズ変更可能なフレーム、リプレイ／スクランブル
右	選択中のレイヤーのプロパティ

ペインのルール： アニメーション → 左（チャート設定の motionPanel）；レイヤーごとのプロパティ → 右；表示設定 → レイヤーの目のアイコン（URL 状態の hiddenComponents を使用）。

実装場所（既存のチャート）

チャートは 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/
スラッグ	packages/studio/src/chart-slugs.ts と registry.tsx の studioRegistry
Studio 専用プレビュー	packages/studio/src/components/charts/*-studio-preview.tsx

registry.tsx の render におけるパターン

コミット済みのヘルパーを再利用してください（再実装しないでください）。

• StudioChartShell + studioCartesianLegendItems — 凡例グリッドと showLegend
• StudioVisibleLayer + componentId — レンダリングをレイヤーの表示設定に連動させます（line.grid、line.series.0、…）
• getStudioCssRevealPropsForPreview — モーション／リビール
• isStudioComponentVisible(state, componentId) — 子要素の条件付き表示
• seriesStrokePropsFromState、fadeEdgesPropValue、chartTooltipPropsFromState

参考実装：registry.tsx の lineConfig.render。

新しいチャート（まだレジストリにない場合）

1. packages/ui/src/charts/ にコンポーネントを実装します（まずは最小限の API から）。
2. packages/studio/src/chart-slugs.ts にスラッグを追加します。
3. registry.tsx の studioRegistry に StudioChartConfig を追加します。
   • render(state, ctx) — StudioShell 経由で EditorChartFrame 内にプレビューを表示
   • studio-components.ts の resolveComponents
   • controlGroups／resolveControlGroups
   • コードシート用の generateCode
4. /studio?chart=<new-slug> を開いて調整します。
5. 安定したら、ドキュメント、ギャラリー、shadcn レジストリについて bklit-ship の手順に従います。

プロパティまたはレイヤーの追加

1. キーがない場合は、studio-parsers.ts の StudioUrlState／defaultStudioState に追加します。
2. registry-control-groups.ts の右側のレイヤーにコントロールを追加するか、studio-components.ts のコンポーネントごとの controlGroups に追加します。
3. registry.tsx の render と（packages/ui のチャートコードで）プロパティを接続します。
4. プロパティがアニメーションに影響する場合 → チャート設定で motionPanel: true になっていることを確認します。
5. Studio でレイヤー一覧、表示切り替え、プロパティ、リプレイを確認します。

公開

API が安定したら、.agents/skills/bklit-ship/SKILL.md を確認してください。プロトタイプコードはすでに packages/ui と packages/studio に配置されているはずです。移行が必要なプレイグラウンドのルートはありません。

非推奨：/playground

ローカルの /playground ルートと bklit-playground スキルは非推奨です。/playground は /studio にリダイレクトされます。新しい作業では、playground-editor-shell や apps/web/components/playground/ をコピーしないでください。

ファイル参照

項目	パス
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