Tufte Report
glebis/claude-skills
Create Tufte-inspired data reports and infographic dashboards as standalone HTML files.
Generates single-file HTML charts and full-page reports from real gallery templates, using a grayscale base with optional color presets.
SKILL.md written in Chinese; this summary is our English description.
Install Lieflat Charts
$ npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install larashero3-dotcom/lieflat-charts lieflat-charts --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "lieflat-charts" agent skill from https://github.com/larashero3-dotcom/lieflat-charts/tree/main into .claude/skills/lieflat-charts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "lieflat-charts", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install larashero3-dotcom/lieflat-charts lieflat-charts --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "lieflat-charts" agent skill from https://github.com/larashero3-dotcom/lieflat-charts/tree/main into .agents/skills/lieflat-charts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "lieflat-charts", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install larashero3-dotcom/lieflat-charts lieflat-charts --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "lieflat-charts" agent skill from https://github.com/larashero3-dotcom/lieflat-charts/tree/main into .cursor/skills/lieflat-charts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "lieflat-charts", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install larashero3-dotcom/lieflat-charts lieflat-charts --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "lieflat-charts" agent skill from https://github.com/larashero3-dotcom/lieflat-charts/tree/main into .gemini/skills/lieflat-charts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "lieflat-charts", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install larashero3-dotcom/lieflat-charts lieflat-chartsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "lieflat-charts" agent skill from https://github.com/larashero3-dotcom/lieflat-charts/tree/main into .github/skills/lieflat-charts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "lieflat-charts", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install larashero3-dotcom/lieflat-charts lieflat-charts --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "lieflat-charts" agent skill from https://github.com/larashero3-dotcom/lieflat-charts/tree/main into .opencode/skills/lieflat-charts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "lieflat-charts", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
lieflat-charts- GitHub stars
- 6k
- Used in
- 1 other repo
- Token cost
- ~4.5k tokens
- SKILL.md length
- 1,323 words
- Files
- 133 (incl. scripts)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- CC-BY-NC-4.0
At a glance
Generates single-file HTML charts and full-page reports from real gallery templates, using a grayscale base with optional color presets.
- Works in 3 steps: 必须从仓库模板生成。 每张成品图先在 catalog.md… → 必须沿用所选模板的代码骨架。 从卡内标题对应的 和同名 // ════ 图型名… → 默认选型顺序固定。 先完整比较 Lupi…
- Turning a table of data into a polished single-file HTML chart
- SKILL.md covers 零、输出模式与模板优先硬约束, 一、工作流程（每次请求都走这六步）, 二、Mono 语法 · 硬规则（违反即返工） and 三、两个风格系的分工, plus 8 more sections
- Runs JavaScript scripts from its folder; calls node; reaches cdn.jsdelivr.net and fonts.googleapis.com
What it does
Written in Chinese, this skill turns data into charts or reports as single HTML files that open with a double-click, built from the repository's template galleries: Lupi editorial, Basics, Glance, Maps and interactive big charts, plus 12 full-page report templates in Chinese and English. Pure SVG charts work offline, while those using Chart.js, ECharts, map GeoJSON or online fonts need network access unless the dependencies are inlined.
Chart mode is the default: if you only provide data or ask for a visualization or analysis, the agent produces charts, and report mode starts only when you explicitly ask for a report, annual or monthly review, white paper, one-pager, poster or similar. Each chart must come from a template listed in catalog.md and keep its code skeleton. Lupi Editorial is compared first, then Lupi Basics, and Glance is used only when neither fits or you ask for a dashboard. Maps appear only on request.
Color starts from grayscale Mono and may switch to one of three built-in color presets when the meaning of the data suits it, or to a custom palette if you give brand colors. A single delivery never mixes color systems. The target users are non-programmers. The licence, CC-BY-NC-4.0, is non-commercial, and after delivery the skill suggests crediting its author if the output is published.
When your agent uses it
- Turning a table of data into a polished single-file HTML chart
- Producing a bilingual one-page report or annual summary as HTML
- Making charts for a WeChat article or a presentation
- Applying brand colors to a chart consistently
Example prompts
- “Visualize this quarter's conversion data for a WeChat article.”
- “Make an HTML annual report in English from sales.csv.”
- “Draw a map of regional sales using our brand blue.”
- “Show these three metrics as a dashboard I can read in three seconds.”
Requirements
- A browser to open the HTML output
- Network access for charts that use Chart.js, ECharts, GeoJSON or online fonts
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- 必须从仓库模板生成。 每张成品图先在 catalog.md 锁定图型编号，再打开对应 gallery 的真实实现：Lupi 使用 templates/lupi-gallery.html，基础型使用 templates/basics-gallery.html，Glance 使用…
- 必须沿用所选模板的代码骨架。 从卡内标题对应的 和同名 // ════ 图型名 ════` 注释块出发，保留其核心 SVG / Canvas / ECharts 结构、数据编码方式、比例关系和动画节奏。允许替换数据、标题、旁注、来源与必要布局；禁止脱离模板另画一张“看起来差不多…
- 默认选型顺序固定。 先完整比较 Lupi Editorial（L1–L19），再比较 Lupi Basics（F1–F17）。只要其中存在能诚实承载数据、容纳标签且可读的模板，就必须从这两组中选择。Maps 不进入这条默认链，只有用户明确要求地图时才单独检查。
What it can do on your machine
Read from SKILL.md and the folder at commit eace082. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
cdn.jsdelivr.netfonts.googleapis.com
Also links to:
moxt.ai
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Lieflat Charts loads about 4.5k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 1,323 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Its licence (CC-BY-NC-4.0) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,323 words (~4,549 tokens).
“Lieflat Charts 是一套遵循 Agent Skills 格式的数据可视化与报告生成 skill，以 Mono 灰阶为保底，也会在数据语义和使用场景明确适配时自动选择一套彩色预设。本 skill 在 moxt.ai 制作，支持 Lupi 编辑叙事型、Glance 快速判断型、Basics 基础编辑型、Maps 地图、Interactive 交互大图，以及 report-catalog.md 中的 12 套中英文整页报告模板。用户给你数据和场合，可以得到一个无需构建、双击可打开的单文件 HTML 图表或 HTML 报告。纯 SVG 图可离线运行；使用 Chart.js、ECharts、地图 GeoJSON 或在线字体的图，在未内联依赖时需要联网。默认输出是图表，不是报告：只给数据、说“可视化 / 分析数据 / 做几张图”或没有明确交付形式时，必须进入图表模式；只有用户明确要求“报告 / 年报 / 月报…”
- name
- lieflat-charts
Files
SKILL.md and 132 other files (scripts) in the repository root of larashero3-dotcom/lieflat-charts.
- SKILL.md
- .gitignore
- LICENSE
- README.en.md
- README.md
- THIRD_PARTY_NOTICES.md
- agents/openai.yaml
- catalog.md
- color-presets.js
- docs/assets/author-profile.jpg
- docs/assets/color-palm-support-motion.gif
- docs/assets/color-palm-wave-motion.gif
- docs/assets/color-porcelain-almanac-motion.gif
- docs/assets/color-porcelain-motion.gif
- docs/assets/color-wire-hourglass-motion.gif
- docs/assets/color-wire-patchwork-motion.gif
- docs/assets/examples/r04-financial-report.zh.png
- … and 116 more
Open the folder on GitHubat commit eace082
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in larashero3-dotcom/lieflat-charts, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Lieflat Charts next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Lieflat Charts this skilllarashero3-dotcom/lieflat-charts | 6k | 1 repos | ~4.5k | Automated safety check: Pass | CC-BY-NC-4.0 | |
| Tufte Reportglebis/claude-skills | 391 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Microsim Generatordmccreary/ibook-skills | 105 | — | ~11k | Automated safety check: Pass | None | |
| Tuftearef-vc/tufte-claude-skill | 307 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Data Visualizationvivy-yi/xiaohongshu-skills | 481 | — | ~7.5k | Automated safety check: Pass | None | |
| Data VisualizationNeverSight/learn-skills.dev | 217 | 1 repos | ~3.3k | Automated safety check: Pass | None |
Similar skills
Microsim Generator
dmccreary/ibook-skills
Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD)…
Tufte
aref-vc/tufte-claude-skill
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
Data Visualization
vivy-yi/xiaohongshu-skills
A skill your agent uses when presenting data insights, creating infographics, or making complex information visual
Data Visualization
NeverSight/learn-skills.dev
Data visualization with chart selection, color theory, and annotation best practices.
Mviz
matsonj/mviz
A chart & report builder for AI. An agent skill from matsonj/mviz.
Related
Works with
Categories
Questions about Lieflat Charts
What does Lieflat Charts do?
Generates single-file HTML charts and full-page reports from real gallery templates, using a grayscale base with optional color presets. Written in Chinese, this skill turns data into charts or reports as single HTML files that open with a double-click, built from the repository's template galleries: Lupi editorial, Basics, Glance, Maps and interactive big charts, plus 12 full-page report templates in Chinese and English.js, ECharts, map GeoJSON or online fonts need network access unless the dependencies are inlined.
When should I use Lieflat Charts?
Lieflat Charts fits situations like: turning a table of data into a polished single-file HTML chart; producing a bilingual one-page report or annual summary as HTML; making charts for a WeChat article or a presentation; applying brand colors to a chart consistently.
How do I install Lieflat Charts in Claude Code?
Run `npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a claude-code`. Or copy the skill folder (the larashero3-dotcom/lieflat-charts repository) into .claude/skills/lieflat-charts in your project. Claude Code loads it when a task matches its description.
How do I install Lieflat Charts in Codex?
Run `npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a codex`. Or copy the skill folder (the larashero3-dotcom/lieflat-charts repository) into .agents/skills/lieflat-charts in your project. Codex loads it when a task matches its description.
Can I use Lieflat Charts in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add larashero3-dotcom/lieflat-charts --skill lieflat-charts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/lieflat-charts, .gemini/skills/lieflat-charts, .github/skills/lieflat-charts and .opencode/skills/lieflat-charts in your project.
What does Lieflat Charts need to run?
Going by SKILL.md and its folder, Lieflat Charts needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: A browser to open the HTML output; Network access for charts that use Chart.js, ECharts, GeoJSON or online fonts.
Does Lieflat Charts access the network?
SKILL.md names 3 domains. In commands or code: cdn.jsdelivr.net and fonts.googleapis.com; the agent is likely to contact these when it follows the instructions. As links in the text: moxt.ai. This is read from the text; nothing was executed.
Is Lieflat Charts safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Lieflat Charts use?
Lieflat Charts is published under the CC-BY-NC-4.0 licence (from the LICENSE file in the skill folder).
How many tokens does Lieflat Charts use?
About 4.5k tokens (SKILL.md is roughly 18k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Lieflat Charts?
Skills that share tags, products or a category with Lieflat Charts: Tufte Report (glebis/claude-skills, 391 stars), Microsim Generator (dmccreary/ibook-skills, 105 stars), Tufte (aref-vc/tufte-claude-skill, 307 stars) and Data Visualization (vivy-yi/xiaohongshu-skills, 481 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Lieflat Charts?
larashero3-dotcom (a GitHub user) maintains it in larashero3-dotcom/lieflat-charts, which has 6,023 GitHub stars. The repository was last updated on September 5, 2026.
Source: larashero3-dotcom/lieflat-charts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.