Frame Data Chart Nyt

Name: Frame Data Chart Nyt
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

This is a copy of frame-data-chart-nyt by nexu-io - installs and ranking accrue to the original listing.

Helps with ai & agent building tasks.

About

frame-data-chart-nyt is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

frame-data-chart-nyt
AI & Agent Building
AI-coding skill

Frame Data Chart Nyt by the numbers

1 all-time installs (skills.sh)
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill frame-data-chart-nyt

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/frame-data-chart-nyt.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-data-chart-nyt)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

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

{
  "name": "@html-video/template-frame-data-chart-nyt",
  "version": "0.1.0",
  "description": "html-video template: frame-data-chart-nyt (cherry-picked from nexu-io/open-design)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>NYT Chart · AI Agent MAU 2018–2026</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
  body { font-family:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif; background:#f7f5ee; color:#1a1a1a; margin:0; }
  .serif { font-family:'Source Serif Pro',Georgia,serif; }
  .mono { font-family:'IBM Plex Mono',ui-monospace,monospace; }
  .nyt-red { color:#a91d1d; }
  .nyt-red-fill { fill:#a91d1d; }
  .kicker { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
  @keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
  .line { stroke-dasharray:1000; animation: draw 1.4s ease-out forwards; animation-delay: .4s; opacity:0; animation-fill-mode: forwards; }
  .line { animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards; }
  @keyframes fadeIn { to { opacity:1 } }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-12">
  <article class="w-[1280px] max-w-full">
    <header class="flex items-baseline justify-between">
      <div class="kicker nyt-red font-semibold">GLOBAL · MONTHLY ACTIVE USERS · 2018–2026</div>
      <div class="kicker opacity-60 mono">FRAME 04 · CHART</div>
    </header>

    <h1 class="serif mt-3 leading-[1.05] font-medium" style="font-size:clamp(36px,4.4vw,68px)">
      AI agent 月活在 <span class="nyt-red italic">2024 之后</span> 进入两段抛物线 ——<br/>
      第一段由云端 Claude / GPT 推动, 第二段由本地 CLI agent 普及。
    </h1>

    <!-- chart -->
    <svg viewBox="0 0 1100 460" class="mt-8 w-full">
      <!-- y axis hairlines -->
      <g stroke="#1a1a1a" stroke-width="0.5" opacity="0.25">
        <line x1="60" y1="60" x2="1040" y2="60"/>
        <line x1="60" y1="180" x2="1040" y2="180"/>
        <line x1="60" y1="300" x2="1040" y2="300"/>
        <line x1="60" y1="420" x2="1040" y2="420"/>
      </g>
      <!-- y labels -->
      <g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
        <text x="20" y="64">640M</text>
        <text x="20" y="184">420M</text>
        <text x="20" y="304">210M</text>
        <text x="20" y="424">0</text>
      </g>
      <!-- area band -->
      <path d="M 60 410 L 180 405 L 300 395 L 420 380 L 540 355 L 660 320 L 780 270 L 900 195 L 1020 90 L 1020 420 L 60 420 Z" fill="#a91d1d" opacity="0.06"/>
      <!-- main line -->
      <polyline class="line" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
        points="60,410 180,405 300,395 420,380 540,355 660,320 780,270 900,195 1020,90" />
      <!-- accent inflection -->
      <polyline fill="none" stroke="#a91d1d" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 5"
        points="780,270 900,195 1020,90" />
      <!-- data points -->
      <g>
        <circle cx="60" cy="410" r="4" fill="#1a1a1a"/>
        <circle cx="180" cy="405" r="4" fill="#1a1a1a"/>
        <circle cx="300" cy="395" r="4" fill="#1a1a1a"/>
        <circle cx="420" cy="380" r="4" fill="#1a1a1a"/>
        <circle cx="540" cy="355" r="4" fill="#1a1a1a"/>
        <circle cx="660" cy="320" r="4" fill="#1a1a1a"/>
        <circle cx="780" cy="270" r="6" class="nyt-red-fill"/>
        <circle cx="900" cy="195" r="6" class="nyt-red-fill"/>
        <circle cx="1020" cy="90" r="6" class="nyt-red-fill"/>
      </g>
      <!-- annotations -->
      <g class="mono" font-size="11" fill="#1a1a1a">
        <text x="784" y="250">2024 · 310M</text>
        <text x="894" y="175" class="nyt-red-fill">2025 · 468M</text>
        <text x="1010" y="70" class="nyt-red-fill" text-anchor="end">2026 · 640M</text>
      </g>
      <!-- inflection callout -->
      <g class="serif" font-style="italic" fill="#a91d1d">
        <text x="800" y="380" font-size="14">⤴ Inflection point</text>
        <text x="800" y="398" font-size="14">local CLI agents普及</text>
      </g>
      <!-- x labels -->
      <g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
        <text x="60" y="445" text-anchor="middle">'18</text>
        <text x="180" y="445" text-anchor="middle">'19</text>
        <text x="300" y="445" text-anchor="middle">'20</text>
        <text x="420" y="445" text-anchor="middle">'21</text>
        <text x="540" y="445" text-anchor="middle">'22</text>
        <text x="660" y="445" text-anchor="middle">'23</text>
        <text x="780" y="445" text-anchor="middle">'24</text>
        <text x="900" y="445" text-anchor="middle">'25</text>
        <text x="1020" y="445" text-anchor="middle">'26</text>
      </g>
    </svg>

    <footer class="mt-3 flex items-baseline justify-between mono text-[10.5px] opacity-60">
      <span>Source · Synthesized industry estimates, 2026-05</span>
      <span>Chart by HTML-Anything</span>
      <span>NYT-STYLE · FRAME-DATA-CHART-NYT</span>
    </footer>
  </article>
</body>
</html>

spec_version: 1
id: frame-data-chart-nyt
name: NYT Data Chart
description: >
  New York Times-style animated data chart with counter animation and editorial typography.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: data-viz
subcategory: bar-chart
tags: [chart, bar, data, nyt, journalism, number-counter]

best_for:
  - "Editorial data viz"
  - "Annual report"
  - "Comparison reveal"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 5
    max_sec: 20
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [title, data]
    properties:
      title:
        type: "string"
        maxLength: 100
        description: "Chart headline"
      subtitle:
        type: "string"
        maxLength: 200
        description: "Secondary line / source"
      data:
        type: "array"
        minItems: 2
        maxItems: 12
        items:
          type: object
          required: ['label', 'value']
          properties:
            label: { type: string }
            value: { type: number }
      duration_sec:
        type: "number"
        minimum: 5
        maximum: 20
        default: 8
  examples:
    - {"title": "OD plugin library", "subtitle": "by category, 2026-05", "data": [{"label": "Templates", "value": 231}, {"label": "Skills", "value": 15}, {"label": "Systems", "value": 150}, {"label": "Craft", "value": 11}], "duration_sec": 8}

license:
  spdx: Apache-2.0
  attribution_required: false
  redistribution_allowed: true
  commercial_use: true

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-05-27
    notes: Cherry-picked from open-design/repo/skills/frame-data-chart-nyt/example.html

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 8
    render_wall_clock_sec: 14
    machine: "M2 MacBook Air"