[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77TP9P27D3YST7RJS49311D":3,"skill-same:01M77TP9P27D3YST7RJS49311D":86},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":14,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":59,"ownerDescription":60,"updatedAt":61,"install":62,"resources":75},"01M77TP9P27D3YST7RJS49311D","frame-data-chart-nyt",null,"NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).","hiktan44\u002Fopen-design-app","hiktan44","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F140920746?v=4","01M77SNV7J2RH7G3TQVS2FXMW9","hikmet tanriverdi","01M77SNV87GR8D3BJ9WJHFMZ9Y",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-data-chart-nyt\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: frame-data-chart-nyt\nzh_name: \"NYT 风数据图表帧\"\nen_name: \"NYT-Style Data Chart Frame\"\nemoji: \"📈\"\ndescription: \"NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).\"\nzh_description: \"NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线\u002F柱\u002F范围带)\"\nen_description: \"NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).\"\ncategory: video\nscenario: video\naspect_hint: \"1920×1080 (16:9)\"\nfeatured: 46\ntags: [\"data\", \"chart\", \"nyt\", \"editorial\", \"frame\"]\nexample_id: sample-frame-data-chart-nyt\nexample_name: \"NYT 风折线图 · 全球用户量\"\nexample_format: markdown\nexample_tagline: \"编辑级图表 + 错峰揭示\"\nexample_desc: \"8 年周活跃用户折线 + NYT red accent + 注释 mono\"\nexample_source_url: \"https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog\"\nexample_source_label: \"hyperframes · data-chart\"\nod:\n  mode: video\n  surface: video\n  scenario: video\n  upstream: \"https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fhtml-anything\"\n  preview:\n    type: html\n    entry: index.html\n    reload: debounce-100\n  design_system:\n    requires: false\n  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.\"\n  example_prompt_i18n:\n    zh-CN: \"用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线\u002F柱\u002F范围带)」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。\"\n---\n\n【模板: NYT 风数据图表帧】\n【意图】把一段数据 (CSV \u002F JSON \u002F 一句结论) 做成《纽约时报》专栏感的单帧\u002F动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。\n\n【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。\n\n【布局】\n- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 \"GLOBAL · WEEKLY ACTIVE USERS · 2018–2026\"。\n- **大字标题** (Cheltenham \u002F Playfair \u002F Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。\n- **图表区** (占画布 55-65%):\n  - 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。\n  - 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。\n  - 范围带 (range band): 浅灰填充 `#e6e2d2` 包络 + 中线 ink。\n- **底部 source + footnote** (10px mono, opacity 0.6): \"Source: 用户数据 · Chart by html-anything\"。\n- **错峰揭示动画**: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 `prefers-reduced-motion` 关闭。\n\n【设计细节】\n- **绝不**: 使用 chart.js \u002F d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。\n- 字体: 标题 `Source Serif Pro` 或 `Cheltenham` (无则用 `Playfair Display`); body `IBM Plex Sans` 或 `Inter`; 数据标签 `IBM Plex Mono`。\n- 1 个主色 (ink) + 1 个 accent (NYT red `#a91d1d` \u002F 编辑 mint `#5fb38a` \u002F 暖橙 `#d97757` 三选一)。\n- Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。\n- 严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。\n- 必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 \"schematic\"); 如果是 CSV\u002FJSON, 直接绘制。\n- 单文件 HTML; 数据点旁注释格式: `\u003Ctext class=\"annot\">2024 · 412M\u003C\u002Ftext>`。\n","【模板: NYT 风数据图表帧】\n【意图】把一段数据 (CSV \u002F JSON \u002F 一句结论) 做成《纽约时报》专栏感的单帧\u002F动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。\n\n【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。\n\n【布局】\n- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 \"GLOBAL · WEEKLY ACTIVE USERS · 2018–2026\"。\n- **大字标题** (Cheltenham \u002F Playfair \u002F Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。\n- **图表区** (占画布 55-65%):\n  - 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。\n  - 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。\n  - 范围带 (range band): 浅灰填充 `#e6e2d2` 包络 + 中线 ink。\n- **底部 source + footnote** (10px mono, opacity 0.6): \"Source: 用户数据 · Chart by html-anything\"。\n- **错峰揭示动画**: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 `prefers-reduced-motion` 关闭。\n\n【设计细节】\n- **绝不**: 使用 chart.js \u002F d3 库 (除非 jsdelivr CDN 引入); 推荐手写 SVG, 不超过 80 行 inline。\n- 字体: 标题 `Source Serif Pro` 或 `Cheltenham` (无则用 `Playfair Display`); body `IBM Plex Sans` 或 `Inter`; 数据标签 `IBM Plex Mono`。\n- 1 个主色 (ink) + 1 个 accent (NYT red `#a91d1d` \u002F 编辑 mint `#5fb38a` \u002F 暖橙 `#d97757` 三选一)。\n- Y 轴刻度仅 hairline + 3-4 个 tick, 标签在轴外侧 mono 字。\n- 严禁 grid 全屏铺线、阴影、3D 立体柱; 严禁 emoji。\n- 必须用用户提供的数据。如果输入是文本结论, 自动估算合理坐标 (但要标注 \"schematic\"); 如果是 CSV\u002FJSON, 直接绘制。\n- 单文件 HTML; 数据点旁注释格式: `\u003Ctext class=\"annot\">2024 · 412M\u003C\u002Ftext>`。\n",{"od":24,"name":5,"tags":35,"emoji":41,"en_name":42,"zh_name":43,"category":25,"featured":44,"scenario":25,"example_id":45,"aspect_hint":46,"description":7,"example_desc":47,"example_name":48,"en_description":7,"example_format":49,"zh_description":50,"example_tagline":51,"example_source_url":52,"example_source_label":53},{"mode":25,"preview":26,"surface":25,"scenario":25,"upstream":30,"design_system":31,"example_prompt":32,"example_prompt_i18n":33},"video",{"type":27,"entry":28,"reload":29},"html","index.html","debounce-100","https:\u002F\u002Fgithub.com\u002Fnexu-io\u002Fhtml-anything",{"requires":20},"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.",{"zh-CN":34},"用「NYT 风数据图表帧」模板把我的内容做成一段「NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线\u002F柱\u002F范围带)」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。",[36,37,38,39,40],"data","chart","nyt","editorial","frame","📈","NYT-Style Data Chart Frame","NYT 风数据图表帧",46,"sample-frame-data-chart-nyt","1920×1080 (16:9)","8 年周活跃用户折线 + NYT red accent + 注释 mono","NYT 风折线图 · 全球用户量","markdown","NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线\u002F柱\u002F范围带)","编辑级图表 + 错峰揭示","https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog","hyperframes · data-chart","main","f403d5b733fab92eab16d13e9baf3ac951afed55","plugins\u002F_official\u002Fexamples\u002Fframe-data-chart-nyt","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app","https:\u002F\u002Fgithub.com\u002Fhiktan44","fasheone.com","Hikmet Tanrıverdi\r\nSTRATEJI DANIŞMANLIK, 2008-2018 İHKİB İSTANBUL HAZIR GİYİM BŞK, İTO MECLİS ÜYESİ, TEXMART DIŞ TİCARET YK STRATEGY CONSULTING, 2008-2018 PRESI","2026-10-11 23:59:08",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add hiktan44\u002Fopen-design-app --skill frame-data-chart-nyt",{"tool":68,"command":69},"bunx","bunx skills add hiktan44\u002Fopen-design-app --skill frame-data-chart-nyt",{"tool":71,"command":72},"pnpm","pnpm dlx skills add hiktan44\u002Fopen-design-app --skill frame-data-chart-nyt","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-data-chart-nyt\u002FSKILL.md",true,[76,82],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"example.html","REFERENCE","参考文档",5203,"https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-data-chart-nyt\u002Fexample.html",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"open-design.json",6091,"https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fframe-data-chart-nyt\u002Fopen-design.json",[87,94,101,108,115,124],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":19},"01M77WGV99HNV3Q6JN3H8Z70JE","Beta Skill","Instruction-only fixture skill.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Fbeta\u002FSKILL.md",[],[],{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":19},"01M77WGRXNRGHT9J1K929BPV5H","Alpha Skill","First fixture skill with a runnable demo.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Falpha\u002FSKILL.md",[],[],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":19},"01M77WGQK7F7R1W6RBFZFEZ53M","Deck One","A small deck template fixture.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fdesign-templates\u002Fdeck-one\u002FSKILL.md",[],[],{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":19},"01M77WGNPEGTDWMKDX659FS5DT","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":119,"licenseFileUrl":120,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":19},"01M77WGJ9KKT6Q4P10GAV3KC48","writing-guidelines","Review docs\u002Fprose for Writing Guidelines compliance. Use when asked to \"review my docs\", \"check writing style\", \"audit prose\", \"review docs voice and tone\", or \"check this page against the writing handbook\".","MIT","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":19},"01M77WGF9P0WT4XBXMM0B9WRGR","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Fhiktan44\u002Fopen-design-app\u002Fblob\u002Fmain\u002Fskills\u002Fwpds\u002FSKILL.md",[],[]]