skills.rest
larashero3-dotcom
larashero3-dotcomCOMMUNITY
Explore all skills by this author →
GitHub

lieflat-charts

Generate single-file HTML charts and reports from data using template-driven SVG, Chart.js, and ECharts implementations.

3.0k|163|Updated Jul 16, 2026
Search Tags:#report generation#svg#echarts#Dashboard#editorial design#Data Visualization#HTML charts
One-click install
npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lieflat-charts
Source: https://github.com/larashero3-dotcom/lieflat-charts
Command: npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chart.js, echarts, and includes scripts (resource) components.

What problem does it solve?

Turning raw datasets into publication-quality charts and full-page reports usually requires design judgment, chart-type selection, and front-end coding that non-programmers lack. This Skill gives an AI agent a strict, template-driven workflow that converts plain-language data requests into polished single-file HTML visualizations.

Core Features & Use Cases

  • 64 chart templates across four families: Lupi Editorial (record-level narrative charts), Lupi Basics (familiar bar/line/donut forms with countable units), Glance (fast-reading dashboards), and Interactive (network, path, and flow diagrams), indexed by data shape in catalog.md.
  • 12 bilingual full-page report templates: Chinese and English HTML layouts for annual reports, monthly business reviews, research briefs, dashboards, posters, and personal data records.
  • Controlled color system: Mono grayscale by default, with three built-in presets (Porcelain, Palm, Wire) auto-selected by data semantics, plus user-specified custom palettes with contrast checks.
  • Use Case: Paste a CSV of weekly support tickets and ask for a report-ready chart; the agent audits candidate templates, picks an honest encoding (e.g., Tick Box or Calendar Heat), and delivers a double-clickable HTML file with editorial typography and motion.

Quick Start

Ask your agent to turn this dataset into a set of editorial-style HTML charts using lieflat-charts, comparing Lupi Editorial and Lupi Basics templates first.

Frequently Asked Questions about lieflat-charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an HTML chart from my data with an AI agent?▼

Install the skill into your agent's skills directory, then describe your data and audience in plain language. The agent audits candidate templates from the catalog, locks one chart type per conclusion, and outputs a single-file HTML you can open directly in a browser.

What chart types does lieflat-charts support?▼

It provides 64 chart types across four families: Lupi Editorial for record-level narrative charts, Lupi Basics for bars, lines, donuts, treemaps, box plots, and candlesticks, Glance for fast-reading dashboards, and interactive network, path, and flow diagrams.

Can lieflat-charts generate full reports instead of single charts?▼

Yes, but only when you explicitly ask for a report, annual review, monthly report, white paper, poster, or brief. It then selects one of 12 full-page templates, each available in Chinese and English, and fills chart slots with real catalog implementations.

Does lieflat-charts work offline?▼

Pure SVG charts run fully offline. Charts using Chart.js, ECharts, map GeoJSON, or the Inter web font load from CDNs and need internet access unless those dependencies are inlined into the HTML file.

How does lieflat-charts choose colors for charts?▼

Mono grayscale is the fallback, but the agent can auto-select one of three presets: Porcelain for ordered single-series data, Palm for a few unordered categories, and Wire for grayscale with one accent. One deliverable locks exactly one color system.

When should I not use lieflat-charts?▼

Avoid it for broken-axis bar charts, 3D or glassmorphism effects, multi-hue coloring of single series, and maps beyond US or world choropleths. The skill explicitly refuses these and proposes honest alternatives instead.

Related Skills

Explore More Data & Analytics Skills→
AllBeingsFutureAllBeingsFuture
9

allbeingsfuture/skills@xlsx

Open, clean, format, and convert spreadsheet files across xlsx, xlsm, csv, and tsv formats.

Community
Intermediate
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

website-to-video

Capture a website's layout and content to generate a HyperFrames video presentation.

Official
Advanced
liujiayi3703liujiayi3703

sci-figure

Convert Excel or CSV data into publication-grade scientific figures with statistical annotations.

Community
Advanced
SunS1eep1ngSunS1eep1ng

matplotlib

Create static, animated, and interactive plots with Matplotlib and NumPy.

Community
Advanced