📊
DataHTML

Data Report

by nexu-io

Data Report is a Data skill for Claude Code, published by nexu-io in html-anything.

8.3K stars810 forkson nexu-io/html-anythingAdded 2026/08/15+1% in starsRepository updated 2026/08/11
agent-skillsagenticai-agentsai-designai-editorbyokclaudeclaude-codeclaude-skillscoding-agentsgenerative-aihtmlhtml-editorhyperframeslocal-firstmarkdownnextjsvibe-codingwechatxiaohongshu
Install in seconds
Install Data Report
Copy Data Report into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/data-report ~/.claude/skills/data-report

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/nexu-io/html-anything.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
next/src/lib/templates/skills/data-report/SKILL.md in nexu-io/html-anything
Installs to
~/.claude/skills/data-report
Collection
One of 25 skills cataloged from this repository
Category
Data668 skills

What Data Report does

Data Report converts CSV, Excel, or JSON data into a polished visual report page with KPI cards, charts, tables, and insights. Use it when you need to turn raw data into a shareable HTML report.

Data Report is cataloged under Data on DirSkills. Data Report comes from a repository tagged agent-skills, agentic, ai-agents, ai-design and ai-editor.

Documentation

README

【模板: 数据可视化报告】

  • 头部: 报告标题 + 时间区间 + 数据来源说明。
  • KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
  • 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
  • 图表容器必须有固定高度: 每个 <canvas> 外层包一个 <div style="position:relative;height:NNNpx"> (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 responsive:true, maintainAspectRatio:false 时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。绝对不要直接给 canvas 写 height= 属性当布局, 那个只是初始值。
  • 数据表格: 用户原始数据节选, 使用 <table> + 现代化样式 (zebra stripe, hover, sticky header)。
  • 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。
  • 底部"方法论"折叠区。
  • 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。
  • 必须解析用户提供的实际数据, 不要捏造。

Frequently asked about Data Report

  • What else does nexu-io publish alongside Data Report?

    Data Report is one of 25 skills that DirSkills catalogs from nexu-io/html-anything, the repository it ships in. Its siblings there include Article Magazine, Blog Post and Competitive Teardown. Each one is a separate skill with its own page in this directory, installs the same way Data Report does, and is maintained by nexu-io in that same repository. The rest of the collection is listed on the nexu-io/html-anything page.

  • How does Data Report compare to other Data skills?

    Data Report ranks #134 by stars among the 668 Data skills in this catalog. The most-starred ones next to it are Benchmark Methodology, Jupyter Notebook and Solana. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Data Report against them. Open each page to compare what they document and how they install.

More from nexu-io/html-anything

Data Report is one of 25 skills cataloged on DirSkills from nexu-io/html-anything.

See all 25 skills
📰
2w ago

Article Magazine

Article Magazine provides a magazine-style HTML template for long-form articles, suited for publishing on blogs, WeChat, and newsletters. It includes hero sections, serif headings, styled quotes, code blocks, and custom bullets.
Frontend
8.3K810
📰
2w ago

Blog Post

Blog Post provides a magazine-style long-form article template with masthead, hero, figures, pull quotes, and author byline. Use it when you need a polished editorial layout for articles over 600 words.
Frontend
8.3K810
📊
2w ago

Competitive Teardown

Competitive Teardown turns competitor research into a product decision report with a positioning map, feature matrix, pricing comparison, and opportunity windows. Use it when you have materials on 2-6 competitors and need actionable product strategy, not a generic article.
Data
8.3K810
🎓
2w ago

Course Module Deck

Course Module Deck generates an HTML course or training deck with a warm paper background, Playfair serif typography, persistent learning objectives on the left, concept pages, MCQ self-test pages, and a wrap-up with next module preview.
Frontend
8.3K810
📊
2w ago

Dashboard

Dashboard builds a standard admin/analytics single-page layout with a fixed left sidebar, top bar, KPI card grid, one or two main charts, and a recent activity list.
Frontend
8.3K810
📊
2w ago

Dating Web

Dating Web is a consumer-feel matching dashboard template with an editorial layout: left rail navigation, ticker bar, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block.
Frontend
8.3K810