Claude MarketplacesSubmit
nexu-io avatar

Data Report

nexu-io/open-design

Converts your CSV, Excel, or JSON files into a standalone HTML report with Chart.js visualizations, KPI cards, and data tables. The template includes trend lines, comparison metrics, and a clean professional layout designed for finance and business reporting. One critical detail: every chart container needs an explicit pixel height or Chart.js falls into a ResizeObserver loop that freezes the browser. The skill parses your actual data rather than using placeholders, so you get real numbers in the output. Best for weekly KPI reports, growth dashboards, or any scenario where you need to hand someone a self-contained visual summary without firing up a BI tool.

skills.sh installs
3.2K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill data-report --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Categories
Design & UI/UX, Office & Documents
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1nexu-io avatar8-bit-orbit-video-templatenexu-io/open-designHyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced tr3Kskills.sh installs
2nexu-io avatarslidesnexu-io/open-designCreate and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.3Kskills.sh installs
3nexu-io avatargsap-scrolltriggernexu-io/open-designOfficial GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, 3Kskills.sh installs
4nexu-io avatartheme-factorynexu-io/open-designApply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.3Kskills.sh installs
5nexu-io avatarshader-devnexu-io/open-designGLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.2.9Kskills.sh installs
6nexu-io avatargsap-reactnexu-io/open-designOfficial GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with Reac2.9Kskills.sh installs