This entire file contains chat messages for an agent, NOT terminal commands. Do not paste them into a shell.
Why use it: this is the main path. Provide data and context, and receive HTML that opens with a double-click.
What it produces: one or a few standalone .html files (inline tokens, no build needed).
Minimal example
Dùng lieflat-charts. Đây là dữ liệu:
<dán CSV/bảng/số liệu>
Bối cảnh: <đăng bài blog / slide họp / báo cáo nội bộ>.
Ngôn ngữ: <tiếng Việt / English>.
You do not need to name a chart type. SKILL.md §1 requires the agent to examine the shape of the data first, then choose a template.
How many charts the agent returns (SKILL.md §1.2)
| What you provide | Default chart count |
|---|---|
| One question / one metric | 1 |
| Two or three distinct conclusions | 2–3 |
| An entire article / paper / case study | 4–6 |
| You specify a number | your number (while still removing charts with duplicate conclusions) |
Default ceiling: 6 charts per page; split into pages beyond that. Chart count is determined by the number of independent conclusions , rather than the number of data columns.
Steer the agent when needed
The skill's fixed selection order: Lupi Editorial (L1–L15) → Lupi Basics (F1–F13) → only then Glance. To override it, say so explicitly:
Đây là số liệu tuần, tôi cần đọc hiểu trong 10 giây — dùng Glance / dashboard.
Vẽ bản đồ phân bố theo quốc gia.
↑ You must explicitly request a "map". A country column does not automatically enable M1/M2 (SKILL.md §7).
Dùng preset porcelain, độ đậm nhạt thể hiện giá trị, giữ nguyên cấu trúc hình.
Màu thương hiệu của tôi là #0B5FFF. Dựng custom palette theo luật role của skill.
Tôi cần file chạy offline hoàn toàn — inline hết dependency, đừng nạp font/CDN.
Three "no" answers you will encounter (correctly)
SKILL.md §7 allows the agent to refuse and offer alternatives:
- Bars with a broken axis (broken axis) → refuse and suggest 3 honest alternatives.
- Glow / glassmorphism / 3D → refuse and preserve the visual grammar.
- More than 6 categories while still demanding color → fall back to Mono grayscale.
- Data too sparse for the chosen chart type (3 nodes with a force graph requested) → simplify and explain.
This is a feature, not a stubborn agent.
Require evidence for the chart selection
The skill's §8 checklist requires at least 3 candidates and reasons for rejecting them. Require it to submit:
Trước khi vẽ, liệt kê 3 template ứng viên (mã hình + file gallery + tiêu đề thẻ),
nói rõ loại cái nào vì sao, rồi mới sinh HTML.
The answer must take the form L13 Hourglass Stream · templates/lupi-gallery.html · "The funnel, poured". If the agent merely says "I used a bar chart", it is making things up rather than reading the gallery.
Accepting the delivered file
- Open with a double-click; no server is needed.
- Refresh twice → identical charts (the skill prohibits
Math.random, usingMONO.rnddeterministically). - The title is a conclusion, rather than a chart-type name.
- The subtitle explains the legend without reading code.
- The entire file uses one color system (Mono, or one preset, or one custom system) — mixing them requires a redo.
- For offline use, open it with the network disconnected; text and charts must remain correct.