frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Install / Use
npx skills add nexu-io/open-design --skill frame-data-chart-nytInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
Development & EngineeringSupported Platforms
Tags
Our assessment of frame-data-chart-nyt
frame-data-chart-nyt scores 73/100 on our quality scale, 1063rd of 1,947 Development & Engineering skills we index.
Its SKILL.md is 2.9 KB long, written without headings and no code examples: a solid amount of guidance for an agent.
With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated yesterday, so frame-data-chart-nyt is actively maintained.
- It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
Safety scan
No issues foundOur scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands.
Automated pattern scan on 2026-09-26. It catches known dangerous patterns, not every risk — read a skill before letting an agent act on it.
frame-data-chart-nyt compared with similar skills
All 4 of these similar skills score higher than frame-data-chart-nyt; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| frame-data-chart-nyt (this skill)by nexu-io | 73 | 97.9k | 1d ago | SKILL.md |
| ai-job-searchby MadsLorentzen | 100 | 44.0k | 4d ago | CLAUDE.md |
| claude-howtoby luongnv89 | 100 | 41.7k | today | CLAUDE.md |
| algorithmic-artby anthropics | 100 | 177.9k | 3d ago | SKILL.md |
| pptxby anthropics | 100 | 177.9k | 3d ago | SKILL.md |
Frequently asked questions
- How do I install frame-data-chart-nyt?
- Run
npx skills add nexu-io/open-design --skill frame-data-chart-nyt. The install tabs above show the steps for each supported agent. - Which AI agents does frame-data-chart-nyt work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is frame-data-chart-nyt safe to use?
- Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is frame-data-chart-nyt still maintained?
- The repository was last updated yesterday, so frame-data-chart-nyt is actively maintained.
Skill content
View source on GitHubname: frame-data-chart-nyt zh_name: "NYT 风数据图表帧" en_name: "NYT-Style Data Chart Frame" emoji: "📈" description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)." zh_description: "NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)" en_description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band)." category: video scenario: video aspect_hint: "1920×1080 (16:9)" featured: 46 tags: ["data", "chart", "nyt", "editorial", "frame"] example_id: sample-frame-data-chart-nyt example_name: "NYT 风折线图 · 全球用户量" example_format: markdown example_tagline: "编辑级图表 + 错峰揭示" example_desc: "8 年周活跃用户折线 + NYT red accent + 注释 mono" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · data-chart" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the NYT-Style Data Chart Frame template to turn my content into a frame with NYT-newsroom typography, staggered reveal animation, and editorial-grade charts. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 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。
- 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注
- 底部 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); bodyIBM 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; 数据点旁注释格式:
<text class="annot">2024 · 412M</text>。
Related Skills
ai-job-search
44.0kThe job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.
claude-howto
41.7kA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
pptx
177.9kUse this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.