I expected the interesting part of Lieflat Charts to be its large gallery. After three small tests, I think the gallery is secondary. The useful part is the argument it forces an agent to make before drawing anything: what does one mark mean, how long will the reader look, and which real template can carry that job without inventing data? The tests also exposed something the launch screenshots cannot show. A good template can still produce a crowded annotation, an overflowing report, or an online dependency hidden inside a “single HTML file.”
What happened when we used it three different ways
We manually followed the pinned SKILL.md against three synthetic, reproducible briefs. This was an explicit workflow test, not a test of Codex's implicit Skill activation. Each run began with a different reading job: a category decision, a full-year operating pattern, and a fixed-frame research brief.
Testing note. We froze the inputs, compared eligible templates, rendered every retained page in Chrome, and checked each visible claim against its source totals. Two of the three first renders failed visual review. Open the underlying Run 01 record, Run 02 record, and Run 03 record; each includes its input data or deterministic generation rule, candidate decisions, repair notes, and output hashes.
| Run | Reader's question | Selected template | Observed result |
|---|---|---|---|
| 01 — category comparison | Which component owns the blocking-defect queue? | F5 Tick Rows | Passed after the first render; long labels stayed readable and every tick retained a real unit. |
| 02 — operating year | When does automation work cluster across 52 weeks? | L17 Calendar Heat | The data encoding worked, but the first peak annotation crossed the October dots and needed repair. |
| 03 — research brief | Where should an operations director move intake structure upstream? | R11 Research Brief Card | The report rendered, but longer English copy pushed the first layout beyond its fixed frame; the retained version is the repaired second render. |
Run 01: long labels made the choice for us
The first fixture contained six product components and 104 open blocking defects. Import sync held 31 of them, or 29.8%. We compared F5 Tick Rows with L2 Dot Cascade and F1 Rung Bars. The conclusion did not require a dramatic chart; it required six labels to remain visible beside countable units. F5 won because the horizontal queue gave “Account settings” and “Checkout rules” enough room. L2's vertical label treatment and F1's column layout made the same data slower to scan.
This is the kind of decision the Skill handles well. The winning template was not the most distinctive shape in the catalog. It was the one whose label geometry matched the data. The output also made the title checkable: 31 out of 104 is “nearly a third,” not “most” and not “the majority.” That small distinction matters more than the hand-drawn ticks.
Run 02: the correct chart still needed editing
The second fixture represented 364 daily records: 52 complete weeks, 230 active days, 2,476 completed automation runs, and a 17-run peak. L3 Barcode Lollipop was too short-horizon for a complete operating year. F10 Dot Heat answers a weekday-by-hour question rather than preserving calendar dates. L17 Calendar Heat is therefore one of the Skill's documented direct-use exceptions.
The first render was not ready. Its peak-day leader line and note ran across a dense cluster of October dots. Nothing in the numeric encoding was wrong, but the annotation competed with the evidence it was supposed to explain. We moved the note into the quiet area below the calendar and rendered again. The screenshot below is the repaired version.
That repair is useful evidence about the Skill itself. It supplies a strong starting grammar—one day per dot, square-root area for counts, a visible quiet-day state—but it does not replace editorial judgment. The output still needs someone to notice collisions, read the title literally, and decide whether a marginal note helps or merely decorates.
Run 03: report mode turned copy length into a design constraint
The third brief explicitly asked for a report, so we compared R01 Survey One-Pager, R08 Population One-Pager, and R11 Research Brief Card. R11 fit the job because the reader needed one decision, two compact evidence views, and a screenshot-ready frame. The synthetic channel shares were Email 48%, Slack 31%, Form 16%, and API 5%, so the hero claim—79% arriving through Email or Slack—reconciles exactly.
The first version overflowed near the takeaway. The 600 × 1,000 template has a real content budget; it cannot absorb any headline, panel title, and note simply because the text is grammatically correct. We shortened the headline, tightened two panel labels, reduced the lower chart's height, and rendered a second time. That is not a cosmetic footnote. For a fixed social card, editing is part of layout engineering.
This run also confirmed a dependency boundary. R11 loads Chart.js and ECharts from jsDelivr. With network access, both charts rendered. Without approved access or locally bundled libraries, those regions can be blank. “Single-file HTML” describes the handoff shape, not necessarily an offline artifact.
The useful idea is a chart-selection system
Most AI chart requests begin too late. Someone asks for a “clean dashboard,” a familiar library is loaded, and styling starts before the metric, missing-value rule, or reading task is settled. Lieflat Charts starts with the data shape and the reader's available attention. It then asks the agent to compare real implementations instead of inventing a fashionable approximation.
The repository divides charts by reading behavior as much as geometry. Lupi Editorial exposes records, hairlines, annotations, and whitespace for a reader willing to stay with the page. Lupi Basics keeps familiar bar, line, area, donut, scatter, heatmap, and treemap silhouettes while using countable units and editorial typography. Glance aggregates earlier, using heavy shapes and large values for dashboards and quick decisions.
| Family | Default reading job | What it emphasizes | Typical failure |
|---|---|---|---|
| Lupi Editorial | Slow reading, public data story, annual review | Records, exceptions, annotations, source context | Beautiful density can overwhelm a quick operational decision. |
| Lupi Basics | Familiar chart with editorial treatment | Recognizable geometry and countable units | Unit marks can become decoration when the unit itself is not meaningful. |
| Glance | Dashboard, monitoring, weekly report, fast comparison | Ranking, change, anomaly, large summary values | Early aggregation can hide the records and uncertainty behind a result. |
| Maps and interactive charts | Explicit geographic or relationship question | Location, adjacency, paths, dense networks | Interaction or geography can look meaningful when the data contract does not support it. |
A weekly operations meeting and an annual review may use the same values but require different reading speeds. “Use a bar chart” does not capture that difference. “The reader must identify the largest queue in under ten seconds” does. That is the design decision the catalog makes explicit.
Four constraints are doing most of the work
Chart mode stays the default. Supplying data or asking for analysis does not automatically justify a report. The Skill moves to one of 12 bilingual report structures only when the request names a report-like deliverable. This prevents a common agent failure: inflating a small question into a polished but unnecessary page.
Template selection follows an order. The agent compares Lupi Editorial and Lupi Basics before falling back to Glance, unless the user explicitly needs a dashboard or seconds-level scan. Maps require an explicit geographic request. Our first run showed why the order matters: a primary Basics template fit, so a heavier Glance treatment would have been an unjustified detour.
One chart carries one independent conclusion. Chart count follows findings, not columns. One bounded question normally gets one chart. A report can justify several only when each adds a different comparison, relationship, or time pattern. This is a simple rule, but it resists the “six charts because there are six slots” behavior that makes AI reports feel synthetic.
One delivery uses one color system. Mono is the safe fallback. Porcelain, Palm, and Wire add constrained color roles for ordered values, small unordered categories, or one controlled point of emphasis. Custom colors are allowed when the user supplies them, but the delivery cannot mix systems. Color becomes part of the data contract instead of a final decorative pass.
What the repository actually contains
At the checked commit, the repository contains one large instruction file, a chart catalog, a report catalog, shared monochrome and color tokens, gallery pages, 12 Chinese and 12 English report templates, interactive examples, OpenAI metadata, and two validation scripts. Pure SVG variants can run without a chart library. Other variants use Chart.js, ECharts, remote GeoJSON, or online fonts.
The launch post says “more than 60” chart types, which is fair at that level. A precise number is less tidy. We counted 20 Glance rows, 19 Lupi Editorial rows, 17 Lupi Basics rows, two maps, and three independent interactive charts: 61 concrete entries. The same catalog heading says 63. This looks like documentation drift, not evidence of a product problem, but it is why inventory claims should stay tied to a revision.
The catalog contract is stronger than the count. A candlestick is reserved for OHLC data. A calendar heatmap is reserved for a complete date-by-count year. A two-sided aggregate flow is separated from a path-level interactive view. These boundaries make it harder for an agent to choose a striking shape that the data cannot honestly support.
Where it earns its place—and where it does not
Our How to Make Charts With ChatGPT guide covers the evidence foundation: freeze the source values, define the metric, reject misleading axes and causal titles, and preserve an accessible equivalent. Lieflat Charts begins after those decisions. It adds a reusable visual vocabulary and actual HTML skeletons for teams that repeatedly need editorial output.
That makes it more useful than a page of style adjectives. It still cannot repair an ambiguous denominator, decide whether missing means zero, or prove that an aggregation is valid. A source table, transformation record, data definition, and release owner remain outside the Skill. If the input is weak, a stronger template only makes the mistake easier to share.
Five checks to make before installing it
- Resolve the license. The repository uses the PolyForm Noncommercial License 1.0.0. It permits stated noncommercial purposes but does not grant commercial use under those terms. A client report, monetized publication, internal business workflow, or product feature may require separate permission. This review is not a license opinion or grant.
- Use the current Codex location. The upstream README uses
~/.codex/skills. Current official OpenAI documentation lists repository and user locations under.agents/skills, plus the built-in$skill-installer. Pin and inspect the source, confirm discovery with/skills, and invoke$lieflat-chartsexplicitly in a disposable project before relying on implicit selection. - Inventory network calls. Search the generated HTML for remote fonts, scripts, map files, analytics, and data requests. If the output must stay offline, inline or remove those dependencies and test with the network disabled. Our R11 test would lose both chart regions without its CDN libraries.
- Review accessibility beyond motion. The Skill includes reduced-motion guidance, but a production chart can still need contrast checks, keyboard-reachable controls, focus states, concise alt text, a longer explanation, and an adjacent table or CSV. The static first frame should carry the conclusion without hover or animation.
- Choose the destination before the effect. An HTML animation, GIF, or video can sit inside a presentation, but it is not a native editable PowerPoint chart. If the recipient needs to update values, inspect embedded data, or restyle a series, supply a native chart or a separate data table.
A first request that gives the Skill a fair test
“Make these numbers beautiful” gives the agent no evidence boundary. A useful first request names the reader, decision, metric, missing-value rule, and delivery environment:
Use $lieflat-charts to create one standalone HTML chart from the
supplied CSV. This is chart mode, not a report.
Reader: [who will use it]
Decision: [the one decision the chart should support]
Question: [the one analytical question]
Metric definition: [numerator, denominator, unit, date range]
Missing-value rule: preserve missing values; never convert them to zero
Source note: [dataset owner, extraction date, transformation file]
Reading time: [under 10 seconds / approximately 30 seconds]
Environment: [offline / approved remote dependencies]
Before rendering:
1. Profile the fields, row count, types, missingness, and value range.
2. Compare at least three eligible Lupi Editorial or Lupi Basics
candidates. Use Glance only if those candidates cannot meet the
reading task, and explain why.
3. Name the selected template ID and the data-to-mark contract.
4. Reject any chart that needs an unsupported aggregation,
misleading baseline, unreadable labels, or invented values.
For the deliverable:
- lock one color system;
- keep the static first frame understandable;
- include reduced-motion behavior;
- include a source line, alt text, a longer description, and the
plotted data as an adjacent table or CSV;
- list every remote font, script, map, or data request;
- write only inside [output folder];
- do not publish, upload, or transmit the data.
Return the HTML path, selected and rejected templates, dependency list,
and a release checklist. Mark anything not tested as unknown.Review the result as a claim, not a picture
- Reconcile the values. Compare every plotted value, category, date, unit, and missing observation with the frozen source or reproducible transformation.
- Read the title literally. Remove causal, target, performance, or trend language that the data does not establish.
- Inspect the visual contract. Check baselines, ordering, area and length encodings, color meaning, aggregation, and whether each mark maps to a real unit.
- Inspect the first render, not only the final screenshot. Our tests found an annotation collision and a fixed-frame overflow that a numeric check would not catch.
- Test the destination. Open the page at the intended width, with reduced motion, keyboard navigation, and—when required—network access disabled.
- Preserve an equivalent. Keep the plotted table or CSV, source note, alt text, and long description beside the visual.
- Resolve rights and release state. Confirm the license, data permission, owner approval, and publication decision. A locally opened HTML file is not a published report.
Verdict
Lieflat Charts is worth studying because it treats visual taste as a sequence of decisions rather than a magic adjective. Its selection order, one-conclusion rule, deterministic rendering guidance, report boundary, and refusal cases gave our three tests useful discipline. The category chart was good on the first pass. The calendar and fixed-frame report were not; both needed human-visible layout repair. That mixed result is more persuasive than a gallery claim because it shows where the system helps and where the editor still matters.
For a noncommercial, source-controlled HTML workflow, it is a serious candidate for an isolated test. It is not a drop-in answer for every data job. Commercial users need permission. Offline and private environments need dependency review. PowerPoint users may need another output. Accessibility and data reconciliation remain separate responsibilities.
If those boundaries fit, review the pinned repository and begin with one dataset whose correct answer you already know. A useful first test should make the Skill prove its selection logic and survive a second render—not merely produce a striking screenshot.
