Editorial-Grade Charts From Raw Data With lieflat-charts

Agent-generated charts usually look like a library default: right data, wrong voice. lieflat-charts is a data-visualization and report-generation skill in the Agent Skills format — usable from moxt, Claude Code, Codex, and other agents that read SKILL.md — that builds charts with an editorial visual grammar: consistent type, whitespace, hairlines, and motion, with the real unit of the data kept visible.

Why This Skill Matters

The skill offers two reading speeds. Lupi templates spread records out for slow reading — thin lines, dot grids, margins, side notes — for papers, annual reports, and data stories. Glance templates aggregate up front — bold bars, big numbers, clear ordering — so a reader gets rankings, changes, and anomalies in seconds, which suits weekly reports and dashboards. Basics keeps familiar shapes (bars, lines, donuts) but adds countable scales and editorial typography.

Its catalog.md indexes 49 chart types by data contract: 15 Lupi Editorial, 13 Lupi Basics, 18 Glance, and 3 Interactive templates for networks, paths, and flows. On top of single charts, a report mode generates full-page HTML reports from 12 templates, each shipped in Chinese and English versions.

Installation

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

On Codex, install to ~/.codex/skills/lieflat-charts instead. The skill was designed and iterated on the moxt agent hub — its native environment — and the README recommends moxt for the shortest path, but it installs anywhere SKILL.md files load.

Real Workflow: Turn a Research Dataset Into an Article-Ready Chart Set

1. Install the skill, then hand your agent the data and the target medium.

把这份调研数据做成适合公众号长文的 5 张中文版图表。
默认先比较 Lupi Editorial 和 Lupi Basics 候选；两组都不适配时，再使用 Glance。

2. The agent compares candidates against the data contract before drawing — chart shape follows the data, not a library default.
3. For a weekly report instead, ask for the other reading speed:

这是一份周报数据，要求 10 秒内看懂排名、变化和异常。

4. Color is chosen automatically between Mono (the stable black-white-gray fallback) and three presets — Porcelain, Palm, and Wire — and you can request a specific one:

用青瓷蓝预设重做这张图，用明度深浅表示数值大小，不改变原图的结构。

5. Count charts by conclusions, not by fields: the skill's own guidance is usually one chart for a single question, 2–3 charts for 2–3 conclusions, 4–6 for a full article or paper, and no more than 6 per page by default.

Tips

• Ask for the report mode when a chart is not enough: the 12 templates cover research reports, business dashboards, financial briefs, posters, and personal record pages, each with Chinese and English layouts.
• One HTML file or one chart set should stick to one color system. The README warns that recoloring means re-checking contrast, visual hierarchy, and what each color says about the data.
• Lupi and Basics render mostly as native SVG; Glance and some other templates load Chart.js or ECharts from a CDN, so they need a network connection to display fully.
• Trust the defaults on color: when the fit between data and a color preset is unclear, the skill falls back to Mono.

When Not to Use This

The license is PolyForm Noncommercial 1.0.0 — learning, modification, sharing, and noncommercial use are allowed, but commercial use requires a separate license from the author. And when the goal is a quick exploratory plot rather than a published artifact, a plain matplotlib or ECharts call is faster than an editorial design system.

See the leaderboard for more skills.