跳到正文
cccskills
免费在 GitHub 公开

data-report

Turn supplied CSV, Excel, or JSON data into a visual report page with key metric cards, multiple charts, and a data table. Include the reporting period, data sources, written observations, and a collapsible explanation of the methods used.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

把 CSV/Excel/JSON 数据转成漂亮的可视化报告页

集成工具Excel
查看安装方法

适用场景

  • Turning weekly performance data into a report page
  • Reviewing key metrics and year-over-year changes
  • Sharing data trends with charts and supporting tables

包含的文件(3)

  • SKILL.md1.7 KB
  • example.html10.3 KB
  • example.md599 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

  • 头部: 报告标题 + 时间区间 + 数据来源说明。
  • 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 + 中性色阶, 图表用调色板。
  • 必须解析用户提供的实际数据, 不要捏造。

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Format long articles for blogs and newsletters with a magazine-style layout inspired by Substack and Medium. A centered text column, contrasting headings, styled quotations, and labeled code blocks give readers clear visual cues throughout the page.

中文简介正在准备中。当前显示英语简介。

  • Formatting a long blog article
  • Preparing an essay or newsletter for publication
  • Laying out articles with quotations and code examples
nexu-io/html-anything91862026年10月13日 更新

Turn a concept’s origins into a magazine-style visual story. Six distinct layouts combine diagrams, annotations, and typography to trace a concrete problem through failed attempts and a turning point, revealing the concept’s name at the end.

中文简介正在准备中。当前显示英语简介。

  • Illustrating how a concept emerged
  • Creating visual learning materials about failed attempts
  • Presenting a concept’s history as a magazine feature
nexu-io/html-anything91862026年10月13日 更新

blog-post

免费

Create magazine-style pages for long blog posts, essays, and case studies. The layout combines readable single-column text with a prominent title, captioned figures, highlighted quotations, author details, and related article cards.

中文简介正在准备中。当前显示英语简介。

  • Designing a long-form blog page
  • Presenting an essay with magazine-style typography
  • Laying out a case study with figures and quotations
nexu-io/html-anything91862026年10月13日 更新

Create a landscape card for an X post, featuring a short quote, insight, or data point. The layout combines prominent text with attribution, a handle, a category label, and a brand watermark.

中文简介正在准备中。当前显示英语简介。

  • Sharing a quote with author attribution on X
  • Highlighting a data point in a social post
  • Creating branded cards for short insights
nexu-io/html-anything91862026年10月13日 更新

Create a series of Xiaohongshu-style knowledge cards with a cover, focused content cards, and a closing summary. Soft colors, large text, and spacious layouts make the cards suitable for mobile reading and screenshots for social posts.

中文简介正在准备中。当前显示英语简介。

  • Turn practical tips into a series of social media cards
  • Explain one key idea per card for mobile readers
  • Prepare card layouts for social post screenshots
nexu-io/html-anything91862026年10月13日 更新

Turn supplied competitor research into a product strategy report. Compare positioning, features, pricing, and user feedback, then identify opportunities and propose actions for the next 30, 90, and 180 days, while marking missing evidence.

中文简介正在准备中。当前显示英语简介。

  • Comparing competitors to guide product decisions
  • Reviewing pricing and plan differences
  • Turning research notes into a strategy report
nexu-io/html-anything91862026年10月13日 更新

查看 nexu-io 的全部技能

报告此技能的问题