Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Install Frame Data Chart Nyt
$ npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nexu-io/open-design frame-data-chart-nyt --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frame-data-chart-nyt .claude/skills/frame-data-chart-nyt && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frame-data-chart-nyt" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt into .claude/skills/frame-data-chart-nyt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frame-data-chart-nyt", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nytType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nexu-io/open-design frame-data-chart-nyt --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frame-data-chart-nyt .agents/skills/frame-data-chart-nyt && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frame-data-chart-nyt" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt into .agents/skills/frame-data-chart-nyt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frame-data-chart-nyt", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nexu-io/open-design frame-data-chart-nyt --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frame-data-chart-nyt .cursor/skills/frame-data-chart-nyt && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frame-data-chart-nyt" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt into .cursor/skills/frame-data-chart-nyt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frame-data-chart-nyt", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/nexu-io/open-design.git --path skills/frame-data-chart-nyt--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nexu-io/open-design frame-data-chart-nyt --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frame-data-chart-nyt .gemini/skills/frame-data-chart-nyt && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frame-data-chart-nyt" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt into .gemini/skills/frame-data-chart-nyt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frame-data-chart-nyt", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install nexu-io/open-design frame-data-chart-nytInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frame-data-chart-nyt .github/skills/frame-data-chart-nyt && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frame-data-chart-nyt" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt into .github/skills/frame-data-chart-nyt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frame-data-chart-nyt", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nexu-io/open-design frame-data-chart-nyt --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/open-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frame-data-chart-nyt .opencode/skills/frame-data-chart-nyt && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frame-data-chart-nyt" agent skill from https://github.com/nexu-io/open-design/tree/main/skills/frame-data-chart-nyt into .opencode/skills/frame-data-chart-nyt/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frame-data-chart-nyt", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frame-data-chart-nyt- GitHub stars
- 100k
- Token cost
- ~734 tokens
- SKILL.md length
- 201 words
- Files
- 3
- Skills in repo
- 245
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
- Tasks that involve Typography
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frame Data Chart Nyt is an agent skill from nexu-io/open-design. NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Its SKILL.md is about 730 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `example.md`).
It sits in Frontend & Design, covering Typography. The repository describes itself as: 🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes… The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Typography
Example prompts
- “/frame-data-chart-nyt”
What it can do on your machine
Read from SKILL.md and the folder at commit 17e2559. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frame Data Chart Nyt loads about 734 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 201 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from nexu-io/open-design at commit 17e2559, republished under its Apache-2.0 licence (© nexu-io). 201 words, ~734 tokens.
Download SKILL.mdSave it as
.claude/skills/frame-data-chart-nyt/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- frame-data-chart-nyt
- description
- NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
- zh_name
- NYT 风数据图表帧
- en_name
- NYT-Style Data Chart Frame
- emoji
- 📈
- 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
【模板: 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>。
© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in skills/frame-data-chart-nyt of nexu-io/open-design.
- SKILL.md
- example.html
- example.md
Open the folder on GitHubat commit 17e2559
Compare with similar skills
Frame Data Chart Nyt next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frame Data Chart Nyt this skillnexu-io/open-design | 100k | — | ~734 | Automated safety check: Pass | Apache-2.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 26 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 190 | 18 repos | ~11k | Automated safety check: Notes | Custom licence |
Similar skills
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
More from nexu-io/open-design
All 245 skills in this repoHumanize PPT
nexu-io/open-design
Turns raw notes into a talk-ready slide outline with per-page image, diagram or video decisions, then checks the rendered deck against that outline.
Last 30 Days Trend Research
nexu-io/open-design
Produces a cited Markdown briefing on recent community sentiment and social reaction to a topic, labeling every source it could not actually check.
OpenDesign Contribution Flow
nexu-io/open-design
Helps newcomers contribute to OpenDesign: ship a skill or design system, translate docs, fix docs or report a bug, ending in a pull request or issue.
Chat Motion Overlay Generator
nexu-io/open-design
Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency.
Flowai Live Dashboard Template
nexu-io/open-design
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity…
Hatch Pet
nexu-io/open-design
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references.
Related
Categories
Questions about Frame Data Chart Nyt
What does Frame Data Chart Nyt do?
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). Frame Data Chart Nyt is an agent skill from nexu-io/open-design. NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
When should I use Frame Data Chart Nyt?
Frame Data Chart Nyt fits situations like: tasks that involve Typography.
How do I install Frame Data Chart Nyt in Claude Code?
Run `npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a claude-code`. Or copy the skill folder (skills/frame-data-chart-nyt in nexu-io/open-design) into .claude/skills/frame-data-chart-nyt in your project. Claude Code loads it when a task matches its description.
How do I install Frame Data Chart Nyt in Codex?
Run `npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a codex`. Or copy the skill folder (skills/frame-data-chart-nyt in nexu-io/open-design) into .agents/skills/frame-data-chart-nyt in your project. Codex loads it when a task matches its description.
Can I use Frame Data Chart Nyt in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nexu-io/open-design --skill frame-data-chart-nyt -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frame-data-chart-nyt, .gemini/skills/frame-data-chart-nyt, .github/skills/frame-data-chart-nyt and .opencode/skills/frame-data-chart-nyt in your project.
What does Frame Data Chart Nyt need to run?
SKILL.md names no scripts, command-line tools or credentials: Frame Data Chart Nyt is instructions for the agent only.
Does Frame Data Chart Nyt access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frame Data Chart Nyt safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frame Data Chart Nyt use?
Frame Data Chart Nyt is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frame Data Chart Nyt use?
About 734 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frame Data Chart Nyt?
Skills that share tags, products or a category with Frame Data Chart Nyt: Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Design System (Ohh-889/skyroc, 795 stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frame Data Chart Nyt?
nexu-io (a GitHub organization) maintains it in nexu-io/open-design, which has 100,280 GitHub stars. The repository holds 245 skills in this directory. The repository was last updated on October 10, 2026.
Source: nexu-io/open-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.