Chart Kit
データ1行を変えるだけ——グラフは自動で描かれます
そのまま使える単一ファイルのグラフスニペットです（折れ線・棒・円）。手書きのcanvasで依存関係ゼロ。JSのデータ配列を編集するだけで完成します。
3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入（$4.99）し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
実際の活用事例
実際のユーザーがAIエージェントで、まさにこの仕事をやり遂げた事例です。
Pull Substack post stats via computer use
事例を読む →活用事例Run company departments with persistent self-hosted agents
事例を読む →活用事例Run Monte Carlo simulations on a retirement portfolio
事例を読む →パックの内容
SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：
Chart Kit
When to use
- A report or slide deck needs a chart, but you don't want to install ECharts or wrestle with complex config
- A web page needs a simple data graphic: one file, copy-paste, done
- Data changes often and you want "edit the numbers in the array, the chart follows automatically"
- Data for a client or boss must be clean, clearly labeled, and non-misleading
- Offline or intranet environments where external chart CDNs are off-limits
Workflow
- Pick the chart type (input: data + what you want to say → output: chart recommendation)
Line for trends (time series), bar for comparisons (≤8 categories), pie for shares (≤6 slices, with an "Other" catch-all). Nail the one-sentence takeaway first (e.g. "Q3 sales up 40% MoM"), then pick the chart that tells it. - Prep the data (input: raw data → output: JS array)
Reformat into the template's array format: line/bar use{labels:[], values:[]}, pie uses a{name, value}list. Check: units consistent, missing values marked null (the line breaks — never invented), time labels continuous. - Apply the template (input: array → output: working HTML)
Copy the matching chart block from template.html, paste in your data array, update the title and units. Use the default 6-color palette (colorblind-friendly); never use red/green contrast to mean anything other than "bad vs. good". - Add annotations (input: chart → output: annotated chart)
Three required items: ① title (with time range) ② data source (one small line) ③ key-point annotations (e.g. dashed line + label at the peak). Axes must carry units; the Y-axis starts at zero by default. - Anti-misleading check (input: annotated chart → output: pass/fail)
Walk through each: does the Y-axis start at zero (if not, the reason must be stated on the chart), do pie slices add to 100%, are bar widths consistent, is anything using area/3D effects to exaggerate differences. Fix whatever fails. - Deliver (input: checked HTML → output: usage notes)
Tell the user three things: which lines hold the data, how to edit (change the array only), how to reuse (copy the whole chartblock). Include the line: "To change the data, you never touch the code."Output spec
テンプレートのプレビュー
Data Chart Kit · Demo /* Page styles: demo only — each chart block can be copied out on its own */ body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; max-width:720px;margin:0 auto;padding:24px 16px;color:#333;background:#fafafa} h1{font-size:24px;margin-bottom:8px} .chart{background:#fff;border:1px solid #e5e5e5;border-radius:12px; padding:16px;margin:20px 0} .chart h3{margin:0 0 4px;font-size:17px} .src{font-size:12px;color:#999;margin-top:8px} canvas{width:100%;height:260px;display:block;cursor:default} .tip{position:fixed;pointer-events:none;background:#333;color:#fff; font-size:12px;padding:4px 10px;border-radius:6px;display:none;z-index:99} Data Chart Kit
スキルパック本体（SKILL.md とテンプレート）は英語で書かれています。
こちらもおすすめです
