Home / nexu-io / html-anything · GitHub

frame-data-chart-nyt SKILL.md skillA

frame-data-chart-nyt from nexu-io/html-anything is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned

mdr add nexu-io/html-anything/frame-data-chart-nyt@git:20260518.b799c28

Pins git:20260518.b799c28 in mdr.lock. Pin the fingerprint instead.

Audit grade: A, 17 of 17 checks passed
Kind: SKILL.md skill
Repository: nexu-io/html-anything
Path: next/src/lib/templates/skills/frame-data-chart-nyt/SKILL.md
Versions recorded: 1
Latest version: git:20260518.b799c28, committed May 18, 2026
Size: 2,853 bytes
Repository stars: 9,204
License: Apache-2.0

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

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

【模板: 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`。
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint

mdr add nexu-io/html-anything/frame-data-chart-nyt@sha256:8536e1ce1ea4a6b8

The line at the top of this page pins the label git:20260518.b799c28, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

[![mdr](https://markdownregistry.com/badge/art_jaywokcrgew5iclz.svg)](https://markdownregistry.com/a/art_jaywokcrgew5iclz)

1 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 1 version of this file, committed on May 18, 2026.

version	committed	commit	size	audit
git:20260518.b799c28 latest	2026-05-18	b799c28	2,853 B	A	view

Audit of the latest version

A 17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.

pass: Frontmatter block present
pass: Frontmatter declares a name
pass: Frontmatter declares a description
pass: Size between 200 bytes and 200 KB (2853 bytes)
pass: No zero-width or bidi control characters
pass: No instruction hidden inside an HTML comment
pass: No link to an exfiltration or paste host
pass: No credential-shaped string
pass: No instruction to send local credentials anywhere
pass: No text hidden with inline styles
pass: No prompt-injection phrasing
pass: No curl or wget piped into a shell
pass: No recursive delete of root, home or parent
pass: No instruction to read or print local credentials
pass: No base64 blob over 200 characters
pass: No link to a raw IP address
pass: No script tag

Source

GitHub

nexu-io/html-anything · 9,204 stars · license Apache-2.0 · pushed 2026-10-13 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_jaywokcrgew5iclz
GET https://markdownregistry.com/api/v1/resolve?ref=nexu-io/html-anything/frame-data-chart-nyt
GET https://markdownregistry.com/api/v1/blob/8536e1ce1ea4a6b877f940e46235c175a3358a42c8970bb8decc65dace92b847

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.