メニュー
Generate inline chart images (PNG) for embedding in chat responses. Use this skill when you need to create bar, line, or area charts for data visualization in chat.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
How to look up version-matched Agent Native framework docs and source in node_modules. Use before coding against @agent-native/core APIs or advanced features.
Creating, editing, and managing extensions — sandboxed Alpine.js mini-apps that run inside iframes. Use when a user asks for a dashboard, widget, calculator, or any interactive mini-app that calls external APIs. Distinct from LLM "tools" (function calls) — see note below.
Agent observability, evals, feedback, and experiments. Use when adding observability dashboards, configuring trace capture, setting up evals, creating A/B experiments, or collecting user feedback on agent responses.
Server-side analytics tracking with pluggable providers. Use when adding analytics events, registering custom tracking providers, or configuring built-in providers (PostHog, Mixpanel, Amplitude, Webhook).
Live calendar-backed meetings in Clips — upcoming Google Calendar events, desktop join/record reminders, live transcripts with mic + system-audio capture, AI summary / bullets / per-attendee action items, and the bidirectional recording↔meeting link. Use when listing meetings, opening a meeting detail, finalizing notes, connecting a calendar, or working with attendee-tagged transcript segments.
Declare, evaluate, manage, and remove framework feature flags. Use when shipping a capability gradually, targeting users or organizations, or replacing a compile-time rollout switch with a production-safe runtime flag.
| name | charts |
| description | Generate inline chart images (PNG) for embedding in chat responses. Use this skill when you need to create bar, line, or area charts for data visualization in chat. |
Charts are generated server-side as PNG images using chartjs-node-canvas (Chart.js) and served via /api/media/. The generate-chart script renders charts and returns a fully qualified URL for embedding in chat markdown.
pnpm action generate-chart --type=bar --title="Title" --labels='["A","B","C"]' --data='[1,2,3]' --color="#18B4F4"
| Param | Values | Default |
|---|---|---|
--type | bar, line, area | bar |
--title | Chart title (keep SHORT) | required |
--subtitle | Optional subtitle — avoid unless needed | — |
--labels | JSON array of x-axis labels | required |
--data | JSON array of numbers, OR array of {label, data, color} for multi-series | required |
--color | Primary hex color | #18B4F4 |
--theme | dark, light | auto from /api/theme |
--stacked | true for stacked bars | false |
--filename | Output filename (no ext) | auto from title |
--width / --height | Image dimensions | 800x400 |
{ filename, url, width, height } — the url is fully qualified with cache buster.
| Color | Hex | Use |
|---|---|---|
| Blue | #18B4F4 | Default/primary for all charts |
| Purple | #8b5cf6 | Secondary |
| Green | #22c55e | Tertiary |
| Amber | #f59e0b | |
| Indigo | #6366f1 | |
| Red | #ef4444 | |
| Teal | #14b8a6 | |
| Orange | #f97316 |
**Example Corp Product Usage — Last 30 Days**
**528 messages** over 18 active days | Peak: **89** (Feb 14)
When using QuickChart (https://quickchart.io/chart/create) with Chart.js v2:
#09090b (zinc-950)[3,3], color #27272a#52525b, 11px#fafafa, 16px bold#a1a1aa, 11px#18B4F4 (primary blue)#09090b, border #27272a, text #fafafa--stacked=true flag--data='[{"label":"User A","data":[...],"color":"#..."}]'stack: "stack1" on all datasetsAPP_ORIGIN)?v=<timestamp>) auto-appendedchartjs-node-canvas depends on canvas native module — pnpm.onlyBuiltDependencies must include "canvas". If not built, run pnpm rebuild canvasmedia/theme.json (set by sidebar toggle via POST /api/theme)