nexu-io/html-anything
Skills for Real Engineers. Straight from my .agents directory.
39 skills
How to install data-report
install data-report
# install the html-anything pack with the skills CLI
npx skills add nexu-io/html-anything# or add only this skill to Claude Code: copy the folder
next/src/lib/templates/skills/data-report/
# into
~/.claude/skills/data-report/ (all projects)
.claude/skills/data-report/ (one project)
1【模板: 数据可视化报告】2- 头部: 报告标题 + 时间区间 + 数据来源说明。3- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。4- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。5- **图表容器必须有固定高度**: 每个 `<canvas>` 外层包一个 `<div style="position:relative;height:NNNpx">` (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 `responsive:true, maintainAspectRatio:false` 时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。**绝对不要**直接给 canvas 写 `height=` 属性当布局, 那个只是初始值。6- 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stripe, hover, sticky header)。7- 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。8- 底部"方法论"折叠区。9- 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。10- **必须解析用户提供的实际数据**, 不要捏造。
Excerpt shown under the repository's Apache-2.0 license.
More skills in html-anything
Keep exploring
Similar skill repositories
Public repository for Agent Skills
20 skills
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
CCCXGHGM+135 skills
Production-grade engineering skills for AI coding agents.
CCCXCU25 skills
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.
40 skills
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
CCCXOC1 skill