Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Frame Data Chart Nyt · nexu-io | DecimalAI

nexu-io/frame-data-chart-nyt

SkillScore41Maintained

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

design-mediaby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-frame-data-chart-nyt/SKILL.md

decimalai skills pull nexu-io-frame-data-chart-nyt --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-frame-data-chart-nyt/SKILL.md https://app.decimal.ai/s/nexu-io-frame-data-chart-nyt/SKILL.md

Raw file: /s/nexu-io-frame-data-chart-nyt/SKILL.md ↗ · machine-readable summary at /s/nexu-io-frame-data-chart-nyt.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 47d ago

—+82% tokens0% turns41% of whole cases pass with skill (9/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-07	✗→✓	▲ Improved	184%	0%
case-11	✗→✓	▲ Improved	157%	0%
case-12	✗→✓	▲ Improved	191%	0%
case-13	✗→✓	▲ Improved	126%	0%
case-14	✗→✓	▲ Improved	112%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / html-anything

next/src/lib/templates/skills/frame-data-chart-nyt/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

【模板: 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; 数据点旁注释格式: <text class="annot">2024 · 412M</text>。

Illustrative Want to see what nexu-io/frame-data-chart-nyt would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/12/2026, 00:35 UTC · 22 cases

Measured on 21 comparable cases — below the 22 needed to publish a lift, so this result is shown here but not on the registry card or leaderboard.

Lift

+27%

41% vs 14%

Agent turns

0%

1.0 vs 1.0

Tokens

+82%

5,440.86 vs 2,986.48

fail → pass · 7pass → pass · 2fail → fail · 12pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 Here is our quarterly active user dataset from recent years: `[{"year": "2020", "users": "120M"}, {"year": "2022", "users": "280M"}, {"year": "2024", "users": "412M"}, {"year": "2025", "users": "490M"}]`. Please turn this into a standalone 1920x1080 HTML file with an animated line chart designed in a classic New York Times editorial graphic aesthetic. I need it ready for a video clip overlay, complete with a top metadata kicker, a key takeaway headline, data point annotations, and staggered entrance animations.	fail→fail	27,600	27,000	-2%	1	1	0%	6,293	7,036	+12%	0	0	—
case-02 I have a CSV snippet showing annual coffee consumption per capita: `Country,Kg\nFinland,12.0\nNorway,9.9\nIceland,9.0\nDenmark,8.7\nUSA,4.2`. Could you build a single-file HTML card rendering this as a bar chart styled like an NYT newsroom data visualization? It should fit a 1080p frame, include category labels, source credit at the bottom, and reveal the elements with CSS animations upon loading.	fail→fail	27,232	26,862	-1%	1	1	0%	6,234	6,995	+12%	0	0	—
case-03 Our latest market survey indicates that fully remote software engineering roles peaked at 62% in late 2021 before stabilizing around 35% in 2024. Please create a single HTML page featuring an inline SVG visualization frame for this text finding in the style of a New York Times column chart, including a prominent main headline, background layout, annotations near critical points, and motion effects for social media sharing.	fail→fail	28,198	27,269	-3%	1	1	0%	6,228	6,972	+12%	0	0	—
case-04 I have a CSV file with user demographic records. I need a standalone Node.js script using D3-dsv and D3-array to parse the CSV, group users by region, and calculate the median income for each group, saving the result to a JSON file.	fail→fail	10,565	27,395	+159%	1	1	0%	2,256	6,940	+208%	0	0	—
case-05 I am building a React dashboard using Chart.js and React-Chartjs-2. Can you write a React component that renders a multi-tab analytics dashboard with interactive tooltips, dynamic filtering controls, and custom legends using Chart.js options?	fail→fail	24,953	28,926	+16%	1	1	0%	5,836	6,935	+19%	0	0	—
case-06 We are configuring an automated pdf report generation server using Highcharts Export Server in Docker. Can you write a Highcharts JSON configuration file for a complex stacked area chart with custom export options and SVG rasterization settings?	fail→fail	38,792	31,049	-20%	1	1	0%	1,392	6,927	+398%	0	0	—
case-07 I want an editorial HTML card for global smartphone market share data. I've set up the basic HTML structure, but I need the top kicker section styled. I'm tempted to use a standard 14px gray sans-serif font like '#888888' with 0.05em tracking for 'GLOBAL · SMARTPHONE SHIPMENTS · 2024'. How should the kicker be styled?	fail→pass	12,252	25,914	+112%	1	1	0%	2,456	6,973	+184%	0	0	—
case-08 Here is a dataset of electric vehicle sales growth: 2020: 2M, 2022: 6M, 2024: 14M. I am creating an editorial static data frame HTML page. Should the main headline say 'Electric Vehicle Sales Chart (2020-2024)' or a synthesis of the data?	fail→fail	7,933	23,109	+191%	1	1	0%	1,419	6,243	+340%	0	0	—
case-09 When rendering a dual-line chart in inline SVG for an editorial card, I usually use 4px primary lines and 3px secondary lines with 10px blue markers and drop shadows. How should the line styles and key point annotations be formatted?	fail→fail	17,068	26,106	+53%	1	1	0%	3,236	6,937	+114%	0	0	—
case-10 I am rendering a bar chart frame in HTML for annual country GDP growth rates. I want to use gradient fills and drop shadows on each bar, with category labels in 12px Arial below the bars. What styling rules apply for editorial bar charts?	pass→pass	15,199	26,121	+72%	1	1	0%	2,529	6,936	+174%	0	0	—
case-11 For a confidence interval range band chart in an editorial data frame, I plan to use a bright blue transparent fill with a red dashed border. What colors and styling should be used for range envelope bands?	fail→pass	12,988	22,929	+77%	1	1	0%	2,270	5,828	+157%	0	0	—
case-12 What exact text structure and font styling should be placed in the footer of an editorial data chart card for a dataset sourced from the World Bank?	fail→pass	13,198	21,735	+65%	1	1	0%	1,921	5,593	+191%	0	0	—
case-13 I'm styling an editorial data chart HTML page and tempted to use a 5-color rainbow palette (#FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF) with a pure white background #FFFFFF. What is the allowable color scheme?	fail→pass	14,048	24,070	+71%	1	1	0%	2,653	5,990	+126%	0	0	—
case-14 In an editorial data visualization HTML page, I want to add full-canvas horizontal and vertical gridlines spaced every 20px with dashed blue lines across the entire 1920x1080 canvas. Is this permitted?	fail→pass	9,823	13,460	+37%	1	1	0%	1,754	3,715	+112%	0	0	—
case-15 I want all elements in my editorial chart HTML frame to animate simultaneously with a 2-second bounce keyframe. How should the entrance animations be timed across elements?	fail→fail	13,314	23,249	+75%	1	1	0%	2,420	5,800	+140%	0	0	—
case-16 I need to generate a standalone HTML data card for global carbon emissions data. What visual rendering approach should be used for the chart elements inside the standalone HTML card?	pass→fail	16,056	26,144	+63%	1	1	0%	2,702	6,917	+156%	0	0	—
case-17 How should numbers and category axis labels be formatted on an editorial bar chart card for retail sales by quarter?	fail→fail	15,197	26,094	+72%	1	1	0%	2,625	6,906	+163%	0	0	—
case-18 To make the data visualization card more engaging for social media, I'm thinking of adding 3D extruded bars with soft shadows and floating emoji indicators next to peak values. How should these elements be handled?	fail→fail	13,942	25,294	+81%	1	1	0%	2,052	6,081	+196%	0	0	—
case-19 I'm creating an editorial chart card frame. What are the standard pixel dimensions for the canvas, and what background/text contrast rule must be followed?	fail→pass	9,827	3,503	-64%	1	1	0%	1,711	1,286	-25%	0	0	—
case-20 In an editorial graphic HTML frame layout, what percentage of the total canvas space should be dedicated to the central chart visualization area versus text elements?	pass→pass	11,105	4,520	-59%	1	1	0%	1,919	1,426	-26%	0	0	—
case-21 When annotating key data points on a line chart SVG, what specific HTML/SVG tag format and class name should be used for data callouts like '2024 · 412M'?	fail→pass	11,861	5,363	-55%	1	1	0%	2,405	1,697	-29%	0	0	—
case-22 What font families are specified for body text and data labels in an editorial newsroom data frame HTML document?	fail→fail	10,556	1,925	-82%	1	1	0%	1,797	1,052	-41%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 21 counted toward the lift figure. The other 1 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +27 percentage points is the difference between those two pass rates over the 21 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 13.6%
Pass rate with the skill: 40.9%
Cases attempted: 22
Cases counted toward lift: 21
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/12/2026, 00:35 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-07

Prompt

I want an editorial HTML card for global smartphone market share data. I've set up the basic HTML structure, but I need the top kicker section styled. I'm tempted to use a standard 14px gray sans-serif font like '#888888' with 0.05em tracking for 'GLOBAL · SMARTPHONE SHIPMENTS · 2024'. How should the kicker be styled?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run41

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+88% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 47 days ago

Other measured skills in the registry, with their headline benchmark lift.