Data Report

data-report

Turns CSV, Excel, or JSON data into a polished visual report page.

nexu-io/open-design·2.9Kinstalls99.5KstarsDesign & UI/UX

SKILL.md

Full skill instructions

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

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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/nexu-io/open-design --skill data-report

View on GitHub

data-report

More Design & UI/UX skills

View all

Design & UI/UX

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K

View

Design & UI/UX

image-to-code

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K

View

Design & UI/UX

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Design & UI/UX

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Design & UI/UX

Emil Design Engineering

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K

View

Design & UI/UX

impeccable

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K

View

Design & UI/UX

extract-design-system

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K

View

Design & UI/UX

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K

View

Design & UI/UX

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K

View

Design & UI/UX

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K

View

Design & UI/UX

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K

View