{"id":"f6430ba6-fd09-48cf-b75a-033a52765668","shortId":"2w8zsZ","kind":"skill","title":"data-report","tagline":"把 CSV/Excel/JSON 数据转成漂亮的可视化报告页","description":"【模板: 数据可视化报告】\n- 头部: 报告标题 + 时间区间 + 数据来源说明。\n- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。\n- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。\n- **图表容器必须有固定高度**: 每个 `<canvas>` 外层包一个 `<div style=\"position:relative;height:NNNpx\">` (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 `responsive:true, maintainAspectRatio:false` 时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。**绝对不要**直接给 canvas 写 `height=` 属性当布局, 那个只是初始值。\n- 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stripe, hover, sticky header)。\n- 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。\n- 底部\"方法论\"折叠区。\n- 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。\n- **必须解析用户提供的实际数据**, 不要捏造。","tags":["data","report","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-data-report","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/data-report","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (639 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:10.930Z","embedding":null,"createdAt":"2026-05-15T12:50:26.293Z","updatedAt":"2026-05-18T18:50:10.930Z","lastSeenAt":"2026-05-18T18:50:10.930Z","tsv":"'-5':16,75 '1':86 '2':23 '240':44 '280px':45 '3':15,74 '40px':42 'canva':59 'cdn':34 'chart.js':30,46 'csv/excel/json':5 'data':2 'data-report':1 'echart':32 'emoji':78 'fals':51 'header':72 'height':61 'hover':70 'jsdelivr':33 'kpi':13,40 'maintainaspectratio':50 'report':3 'resizeobserv':54 'respons':48 'skill' 'skill-data-report' 'source-nexu-io' 'sticki':71 'stripe':69 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'true':49 'zebra':68 '不要捏造':90 '个图表':24 '个最重要指标':17 '中性色阶':87 '主图表':43 '主图表区':21 '主色':85 '会陷入':53 '使用':29,66 '像产品周报':80 '写':60 '卡片网格':14 '同比变化':19 '图表容器必须有固定高度':37 '图表无限增高直至卡死浏览器':56 '图表用调色板':88 '外层包一个':39 '头部':9 '属性当布局':62 '底部':81 '开头':79 '引入':35 '微型趋势线':20 '必须解析用户提供的实际数据':89 '或':31 '把':4 '折叠区':83 '折线':26 '报告标题':10 '散点':28 '数据从用户输入解析得到':36 '数据可视化报告':8 '数据来源说明':12 '数据表格':64 '数据转成漂亮的可视化报告页':6 '方法论':82 '时若父容器没有显式高度':52 '时间区间':11 '条文字洞察':76 '柱状':25 '模板':7 '死循环':55 '每个':38 '每个卡片显示数值':18 '洞察块':73 '现代化样式':67 '用':47,77 '用户原始数据节选':65 '直接给':58 '绝对不要':57 '至少':22 '迷你图':41 '那个只是初始值':63 '配色克制专业':84 '饼':27","prices":[{"id":"0ae27f23-106a-4494-9dd3-75fa06a49c00","listingId":"f6430ba6-fd09-48cf-b75a-033a52765668","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:26.293Z"}],"sources":[{"listingId":"f6430ba6-fd09-48cf-b75a-033a52765668","source":"github","sourceId":"nexu-io/open-design/data-report","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/data-report","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:26.293Z","lastSeenAt":"2026-05-18T18:50:10.930Z"}],"details":{"listingId":"f6430ba6-fd09-48cf-b75a-033a52765668","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"data-report","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"ce141304daf2bdd09c0d6f08d0adb198b5297cd3","skill_md_path":"skills/data-report/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/data-report"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"data-report","description":"把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/data-report"},"updatedAt":"2026-05-18T18:50:10.930Z"}}