bklit-ui-design

Bklit UI デザイン

人々の 言葉（「端に向かってフェードするハッチング背景」）を、Bklit が備えているもの（<Background />）に対応づけ、組み込むアプリに自然になじむようにします。

Bklit のチャートはソースとして npx shadcn@latest add @bklit/<item> でインストールし（プロジェクトで使っている実行ツールを使用してください：pnpm dlx、bunx --bun など）、プロジェクトのエイリアスからインポートします。たとえば @/components/charts/background です。@bklitui/ui/charts からはインポートしないでください。これはプライベートなモノレポパッケージです。

ワークフロー

1. ホストのデザインを検出する

ユーザーのプロジェクトルートから、同梱の検出ツールを実行します。<skill-dir> は、この SKILL.md が含まれているフォルダーです（通常は .claude/skills/bklit-ui-design、.agents/skills/bklit-ui-design、または ~/.claude/skills/bklit-ui-design）：

node <skill-dir>/scripts/detect-design.mjs

依存関係はなく、Node ≥ 18 で動作し、例外をスローすることはありません。JSON を出力します：tailwindVersion、cssPath、colorFormat、darkMode、tokens（--primary、--radius など）、chartVars（ライト／ダークの --chart-*）、themeInline、components（components.json から取得）、primitives、chartLibs、bklit.installed、warnings。シェルにアクセスできないエージェントは、components.json、そこに記載されたグローバル CSS ファイル、package.json を読み取り、同じ情報を手作業で集めてください。

最初に warnings を確認してください。チャートの表示が崩れる原因となる問題（グレーのデフォルトパレット、Tailwind v3 の HSL トークン、@theme マッピングの不足）が示されています。

2. リクエストをデザイン意図に分解する

文を意図（背景、フェード、形状、塗り、線、マーカー、ツールチップ、グリッド、凡例、ローディング、モーション、注釈）に分解し、references/vocabulary.md でそれぞれを調べます。例：

「スクワークル形状の棒、ゴーストトラック、ホバー時のリング」 → 形状：BarSquares squareRadius={0.5} + BarChart squareSnap · トラック：BarColumnTrack · ツールチップ：ChartTooltip dotVariant="ring" dotRadiusFraction={0.5}

「すべての辺でフェードアウトする斜線パターンの背景」 → <Background />（斜線と4辺のフェードがデフォルトです）

3. レシピを選び、調整する

ゼロから組み立てるのではなく、references/recipes.md にある最も近い構成を起点にします。ここにあるのは、ギャラリーで実績のあるスタイルです。その後、検出結果に合わせて調整します：

• 色 → var(--chart-1..5) / chartCssVars。リテラル値は使いません。
• 角のスタイル → ホストの --radius（rules/taste.md §4）。
• 密度 → グリッド行を減らす／小さなダッシュボードカードでは背景を使わない。
• パレット、ダークモード、Tailwind v3 の癖 → rules/theming.md。

4. レジストリーのアイテムをインストールする

構成で使うすべてのアイテムをインストールします（各エクスポートを提供するスラッグは、vocabulary のインポート表に記載されています）。例：

npx shadcn@latest add @bklit/bar-chart @bklit/bar-depth @bklit/chart-tooltip

shadcn は、ホストに既存の CSS 変数を上書きせず、不足している変数を追加します。@bklit を解決できない場合は、bklit-ui スキルのインストール手順を参照してください。

5. インストールしたソースで props を確認する

インストールしたファイル（components/charts/<file>.tsx）を開き、使用する予定の各 prop が、想定どおりの型で存在することを確認します。レジストリーのソースが正式な仕様です。このスキルの内容は古くなっている場合があります。

6. テイストのルールを適用する

rules/taste.md に目を通します：装飾レイヤーは1つ、背景は控えめに、エフェクトを重ねない、角は --radius に合わせる、リングには四角形、トークンのみを使う、ダークモードを検証する、パターン ID を一意にする。

7. 対応範囲の不足を正直に伝える

リクエストに Bklit が備えていない機能が必要な場合は（vocabulary の「Not supported」を参照。例：六角形の Background プリセット、線のグロー、積み上げ面グラフ、棒上のラベル）、その旨を明確に伝え、最も近い対応済みのスタイルか、小規模なカスタム構成を提案します（レシピ15にパターンがあります）。pattern="hexagons" や glow のような props を捏造しないでください。

出力チェックリスト

• 正確な @bklit/<item> スラッグを指定したインストールコマンド。
• プロジェクトのエイリアスからインポートする、完全な JSX。
• ライトモードとダークモードの両方について、ホストの色形式で指定した CSS トークンの変更。
• 正直な制約やトレードオフを一つずつ記載。
• 必要に応じて、以下のリンクを記載します：https://bklit.com/docs/components/<slug>、 https://bklit.com/charts/<slug>、https://bklit.com/studio?chart=<slug>。

ファイル

ファイル	用途
references/vocabulary.md	表現 → JSX/props → レジストリのスラッグ、インポートマップ、未対応リスト
references/recipes.md	名前付きの見た目を再現する、15 個の完全な構成例
rules/taste.md	不正解／正解の組み合わせを含むデザインルール
rules/theming.md	ホストのシグナル → チャートのトークン上書き（v4、v3、ダークモード）
scripts/detect-design.mjs	デザイン検出（JSON）
evals/evals.json	このスキルの動作チェック