What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Data 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

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.

1. Pick the chart type (input: data + what you want to say → output: chart recommendation)

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.

1. Prep the data (input: raw data → output: JS array)

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".

1. Apply the template (input: array → output: working HTML)

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.

1. Add annotations (input: chart → output: annotated chart)

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.

1. Anti-misleading check (input: annotated chart → output: pass/fail)

Tell the user three things: which lines hold the data, how to edit (change the array only), how to reuse (copy the whole chart