Mmcp.market

frame-data-chart-nyt skill

by nexu-io·nexu-io/html-anything·9.0k stars·Apache-2.0

NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)

A100/100content scan

Is the frame-data-chart-nyt skill safe?

Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.

No findings.

Install the frame-data-chart-nyt skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything
mkdir -p ~/.claude/skills
cp -r /tmp/html-anything/next/src/lib/templates/skills/frame-data-chart-nyt ~/.claude/skills/frame-data-chart-nyt
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

【模板: NYT 风数据图表帧】 【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。

【画布】1920×1080, 暖白底 #f7f5ee 或墨黑底 #0e0e0e 二选一; 文字色和背景相反。

【布局】

  • 顶部 kicker (11px uppercase letterspace 0.14em, 颜色 = accent 红 #a91d1d 或 mint #5fb38a): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。
  • 大字标题 (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。结论必须从用户数据中提炼, 不是描述图。
  • 图表区 (占画布 55-65%):
  • 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 2024 · 412M 黑色 mono 小字。
  • 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。
  • 范围带 (range band): 浅灰填充 #e6e2d2 包络 + 中线 ink。
  • 底部 source + footnote (10px mono, opacity 0.6): "Source: 用户数据 · Chart by html-anything"。
  • 错峰揭示动画: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 prefers-reduced-motion 关闭。

【设计细节】

  • 绝不: 使用 chart.js / d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。
  • 字体: 标题 Source Serif Pro 或 Cheltenham (无则用 Playfair Display); body IBM Plex Sans 或 Inter; 数据标签 IBM Plex Mono。
  • 1 个主色 (ink) + 1 个 accent (NYT red #a91d1d / 编辑 mint #5fb38a / 暖橙 #d97757 三选一)。
  • Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。
  • 严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。
  • 必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 "schematic"); 如果是 CSV/JSON, 直接绘制。
  • 单文件 HTML; 数据点旁注释格式: 2024 · 412M。

More skills from nexu-io/html-anything

  • Aarticle-magazineSubstack / Medium 高级感长文排版, 适合公众号、博客发布
  • Aarticle-sketchnote-editorial把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
  • Ablog-post杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
  • Acard-twitter推特金句 / 数据卡, 适合配推文
  • Acard-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览
  • Acompetitive-teardown定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
  • Adashboard固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
  • Adata-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
  • Adating-web消费感配对仪表板: 信号 ticker + KPI + 30 天柱状 + 趋势
  • Adeck-blueprint奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
  • Adeck-course-module暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
  • Adeck-dir-key-nav8 页单色背景, 160px display + 4px accent + Mono 箭头列表

All agent skills → · MCP servers