# Lieflat Charts: an Agent Skill that turns data into styled HTML charts > Lieflat Charts is a SKILL.md-format data visualization skill for moxt, Claude Code and Codex, with three visual styles, four color systems and twelve full-page report templates. It is a design system for agent output, not a charting library you call from code. **larashero3-dotcom/lieflat-charts** — Data visualization Skill for AI Agents, turning data into polished, interactive HTML charts. 面向 AI Agents 的数据可视化 Skill，将数据快速生成精致、可交互的 HTML 图表。 - Repository: https://github.com/larashero3-dotcom/lieflat-charts - Stars: 5,836 · Forks: 363 - Language: HTML - License: NOASSERTION - Published: 2026-09-10 · Updated: 2026-09-10 · Language: en - Canonical page: https://hysenlabs.com/projects/larashero3-dotcom-lieflat-charts ## What Lieflat Charts actually solves for an agent workflow Ask a general-purpose coding agent to chart a dataset and you get a matplotlib default, or a Plotly call with a random palette, or an inline SVG with the axis labels cropped. The chart is technically correct and visually unrelated to the last one the same agent produced. Lieflat Charts targets that gap. It is a skill, distributed in the Agent Skills format built around a SKILL.md file, and the repository states it works with moxt, Claude Code, Codex and other agents that are compatible with SKILL.md. The audience is therefore narrow and specific: people who already run one of those agents and want the chart step to follow a fixed visual grammar rather than a per-prompt guess. The project was made at moxt.ai, per the README, and its output is HTML rather than an image file, which matters because the result stays interactive and editable after generation. ## Three visual styles and the color system the agent picks for you The skill defines three named styles. Lupi is the editorial one: thin lines, dot matrices, record-by-record layout and generous whitespace, aimed at papers, long-form articles and annual reports. Glance aggregates first, using thick bars, large numerals and color blocks so a reader gets high, low, change and anomaly within seconds; the README positions it for weekly reports, briefings and dashboards. Basics keeps the familiar bar, line and donut outlines but adds countable ticks, hairline strokes and editorial typography, for simple or small datasets. The README counts 19 Lupi editorial templates, 20 Glance templates and 17 Basics templates, plus standalone interactive pieces for networks, paths and multi-stage flows. Color is handled by the agent, not by a flag. The README states the agent chooses between Mono, Porcelain (a blue), Palm (a green) and Wire (an editorial red with a fluorescent orange focal point) based on data structure and use case, and falls back to Mono when the mapping is unclear. Porcelain is a single-hue lightness ramp for ordered data and single series. Palm uses hue to separate a small number of unordered categories. Wire is greyscale plus one controlled focal color. If you supply brand colors or values, a custom palette can be built instead. One constraint is stated plainly: a single HTML file or one set of charts uses exactly one color system. ## Installing the skill and generating a first chart There is no package manager step in the README. The skill is a repository you place where your agent looks for SKILL.md files, so installation means getting the repository into that location and pointing the agent at it. Clone it first: ```bash git clone https://github.com/larashero3-dotcom/lieflat-charts.git ``` The repository layout is the map of what you get. SKILL.md is the entry point the agent reads. templates/ holds the chart templates, report-catalog.md and catalog.md index them, color-presets.js and mono-tokens.js carry the palettes and design tokens, and examples/ contains a worked sample, examples/lenny-2026-survey.html, plus an examples/reports/ directory. Read SKILL.md before the first run; the README does not spell out the exact invocation string, so the file itself is the authority on how your agent should call the skill. Once the skill is in place, the workflow is a prompt rather than a function call. Hand the agent a dataset and describe the reading situation. The README's own framing is that charts default to an editorial treatment, and that a full HTML report is generated only when you explicitly ask for a report, annual report, monthly report, whitepaper, poster or brief. The interactive templates can be opened directly in a browser; the README links the Force Graph template at templates/big-force.html for drag and zoom. Expect an HTML file back, not a PNG. ## Report mode and the twelve full-page templates Version 1.2.0 added report mode, and it is the part that changes what the project is. Instead of one chart, the agent can assemble a complete HTML report from twelve full-page templates, each with a Chinese and an English version. The catalog covers research reports and one-page studies, annual reviews, monthly business and financial reports, product and project impact stories, long-cycle yearbooks, market collage posters, people and socioeconomic data pages, business and financial dashboards, personal exercise and travel records, research and financial briefing cards, and periodic data bulletins. The README is explicit that a template name describes the layout's character rather than a usage limit, so R03 (annual data report or annual poster) can carry a different kind of data if the structure fits. That flexibility is real but it pushes judgement back onto the agent and onto you: nothing in the catalog validates that the data suits the layout you picked. ## Where the skill breaks down, and when to reach for something else The strongest constraint is that this is not a library. There is no import, no function signature, no programmatic chart object you can test in CI. The output depends on an agent interpreting your prompt against SKILL.md, templates and tokens, which means the same request can produce different markup on different runs. If you need deterministic, reproducible charts generated inside a build pipeline, this is the wrong tool, and a code-first library is the right one: Vega-Lite takes a declarative JSON specification and compiles it to a rendered chart, which gives you a spec you can diff, version and regenerate byte for byte. The trade is that Vega-Lite gives you no visual identity out of the box; you supply the theme. Lieflat Charts supplies the identity and gives up the determinism. A second limitation is scope: the README does not document rollback, versioning of generated output, or how a chart behaves when the dataset is large enough that an HTML page becomes heavy. The interactive network templates are the likeliest place to hit that, and the README does not state a size ceiling. Finally, the repository declares the licence as NOASSERTION, and both LICENSE and THIRD_PARTY_NOTICES.md sit at the top level. Until you read them, you do not know what you may redistribute. ## Maintenance, releases and what upgrading costs The repository is not archived, and the last push was on 2026-09-05. Two releases are listed: v1.1.0 on 2026-08-05, which the release note labels as adding color mode, and v1.2.0 on 2026-08-14, which adds report mode. That is a steady cadence across roughly six weeks, and the two changes are additive rather than breaking: color systems arrived, then report templates. Upgrade cost is therefore low in the mechanical sense, because there is no dependency graph to reconcile. The cost sits elsewhere. If you have edited templates or tokens locally, a pull will collide with them, and the README's rule that one HTML file uses exactly one color system means a palette change forces a re-check of contrast, visual hierarchy and what each color is asserting about the data. Budget for that review, not for a package bump. On licensing, the repository's own LICENSE and THIRD_PARTY_NOTICES.md are the only sources that matter here; NOASSERTION means GitHub could not map the terms to a known identifier, so read both files before shipping generated HTML anywhere public. This is not legal advice. ## Conclusion Adopt Lieflat Charts if you already drive moxt, Claude Code or Codex and want chart output that follows one visual grammar instead of whatever the model improvises. Do not adopt it if you need a scriptable charting API, server-side rendering, or a licence you can read in one line: the repository declares NOASSERTION, and the LICENSE and THIRD_PARTY_NOTICES.md files are where that has to be resolved before anything ships. Before you commit, open SKILL.md and confirm the invocation the agent actually expects, then generate one chart against your own data and check whether the auto-selected color system and the real units survive the round trip. ## FAQ ### What are the four basic chart types in Lieflat Charts? The README does not frame the project around four basic chart types. It describes three visual styles (Lupi, Glance and Basics) and states that the Basics set covers 17 templates including bar, line, area, donut, scatter, treemap, histogram, box plot and candlestick shapes. ### What do the line charts in Lieflat Charts show? The README lists line charts among the Basics templates without describing what they display. The project's stated aim is that every chart keeps the data's real units while titles, annotations, sources and page structure carry part of the meaning. ### Which agents can use Lieflat Charts? The README states the skill follows the Agent Skills format and works with moxt, Claude Code, Codex and other agents compatible with SKILL.md. It was made at moxt.ai. ### Does Lieflat Charts work without asking for a report? Yes. The README says charts default to an editorial treatment, and that full-page HTML reports are generated only when the user explicitly asks for a report, annual report, monthly report, whitepaper, poster or brief. ### Can I use my own brand colors with Lieflat Charts? The README states that when a user explicitly provides brand colors or color values, a custom palette can be established. It also notes that one HTML file or one set of charts uses only one color system, and that a palette change requires rechecking contrast, visual hierarchy and the data meaning the colors carry. ## Sources - [Issues](https://github.com/larashero3-dotcom/lieflat-charts/issues) - [larashero3-dotcom/lieflat-charts on GitHub](https://github.com/larashero3-dotcom/lieflat-charts) - [README](https://github.com/larashero3-dotcom/lieflat-charts/blob/main/README.md) - [Releases](https://github.com/larashero3-dotcom/lieflat-charts/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/larashero3-dotcom-lieflat-charts