Skip to content
Get packs

Guide · Agent skill

How to use the NYT-Style Data Chart Frame agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The NYT-Style Data Chart Frame is an agent skill that makes an AI agent build a single 1920×1080 HTML frame showing your data as a newspaper-style chart, with serif headlines, a red or mint accent, hairline axes and a staggered reveal animation. This guide explains what the skill does, how to install it, how to trigger it with plain requests, and what to check before you publish. Designers, marketers and creators who need a polished data graphic for a video clip or social card are the intended readers.

NYT-Style Data Chart Framenexu-io/open-design · Apache-2.0

Quick start

  1. 1Download and unzip. Download the skill ZIP from this page and unzip it to get SKILL.md, open-design.json and example.html.
  2. 2Place the folder. Move the unzipped folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill instead.
  4. 4Prepare your data. Collect a CSV or JSON dataset, or write one clear sentence stating the finding you want to show.
  5. 5Ask in plain language. Request a 16:9 NYT-style chart frame, naming the chart type (line, bar or range band) and your data.
  6. 6Check the output. Open the resulting HTML file in a browser, confirm the headline states a conclusion, and verify every number.

What the skill makes the agent do

An agent skill is a folder of instructions (a SKILL.md file plus any supporting files) that an agent reads when a task matches the skill's description. This one tells the agent to turn a dataset or a one-sentence finding into a single-file HTML frame in the style of a New York Times feature graphic.

The skill's instructions ask for a headline that states a conclusion drawn from your data rather than describing the chart. The chart area takes roughly 55–65% of the canvas and can be a line, bar or range band chart. Estimated numbers must be labelled 'schematic'.

  • Canvas: 1920×1080 (16:9), warm white or ink black background
  • Kicker line in uppercase above the headline, giving source and category
  • Y-axis hairlines with 3–4 ticks, labels outside the axis in mono type
  • Footer with source and footnote in small mono text
  • Staggered animation: title fades in first, then kicker, line drawing and data labels

Install the skill from the ZIP

Download the ZIP for this skill from this page and unzip it. The package contains example.html, open-design.json and SKILL.md. Place the unzipped folder in one of two locations: your user skills folder ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill available only inside that project.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills. Use whichever method matches how you work; the skill itself is the same either way.

  • Personal use: ~/.claude/skills/ (available across projects)
  • Single project: .claude/skills/ inside the project folder
  • Claude apps: Settings → Capabilities → Skills

Trigger the skill with a natural request

You do not need a special command. Describe what you want in plain language and mention the kind of chart, the data and the destination. The skill's example prompt asks the agent to preserve the template's visual signature and use real content and data, not placeholder text or images.

Give the agent a real dataset when you can. If you only have a finding, state it clearly and say the numbers are approximate, so the agent knows to label them schematic.

  • "Make a 16:9 NYT-style line chart frame from this CSV showing weekly active users by year."
  • "Turn this sentence into an editorial bar chart frame for a social card: 'Remote work rose sharply after 2020.'"
  • "Create a range band chart frame with the NYT look for my monthly temperature data, black background."

Examples of what you get

Because the output is one HTML file, you can open it in any web browser to preview it, then record the animation for a video clip or screenshot it for a card. The source includes an example titled 'NYT-style line chart · global users' that uses an 8-year weekly active users line with a red accent and mono annotations such as '2024 · 412M'.

The annotation format used by the skill is a short mono label placed next to a key data point, for example 2024 · 412M.

  • Open example.html in a browser to see the reference look
  • Adjust the title to a conclusion from your own data before publishing
  • Check that the source line names where the numbers came from

What you need before you start

You need an agent runtime that supports SKILL.md-style skills and a web browser to view the resulting HTML file. Fonts are optional: the skill names Source Serif Pro, IBM Plex Sans and IBM Plex Mono, and gives fallbacks such as Playfair Display, Inter and a generic mono face when those are not available.

The skill does not run scripts and does not use the network, according to its listing. Its instructions say to avoid chart libraries such as chart.js or d3 unless loaded from a CDN, and to hand-write the SVG.

  • A SKILL.md-compatible agent runtime
  • A web browser
  • Optional: Source Serif Pro, IBM Plex Sans, IBM Plex Mono (fallbacks named in the skill)

Safety notes and limits

The skill runs no scripts and makes no network calls, so the main risks are about the content, not the code. The bigger concern is accuracy: when you give only a text conclusion, the agent estimates coordinates, and those numbers may not be accurate.

The skill imitates a look and is not an official New York Times or corporate template. Do not present its output as a real publication's graphic or use it to match an existing brand style guide.

  • Verify every number against your source before publishing
  • Keep the 'schematic' label on any estimated values
  • Do not imply the graphic is from a newspaper or an official template

Tips for better results

Give the agent clean data. A CSV or JSON input is drawn directly, while a text conclusion makes the agent estimate points. Ask for a headline that states the finding, since the skill is written to prefer conclusions over descriptions.

Choose one accent colour and one main colour, as the skill recommends. If the chart has two lines, the secondary line is drawn dashed.

  • Prefer CSV or JSON over a sentence when accuracy matters
  • Ask for a dark or light background explicitly if you have a preference
  • Keep the chart to one or two lines or a small set of bars so labels stay readable

What people use it for

  • A short animated data frame for a video clip explaining a trend in user numbers
  • A static editorial-style chart for a social card built from a CSV export
  • A range band chart showing a spread of values over time for a presentation slide
  • A quick chart from a stated finding for a newsletter illustration, labelled as schematic

Frequently asked questions

How do I install the frame-data-chart-nyt skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.

Does this skill need any requirements or fonts?

You need a SKILL.md-compatible agent runtime and a web browser to view the HTML file. Fonts such as Source Serif Pro, IBM Plex Sans and IBM Plex Mono are optional, and the skill names fallbacks if they are missing.

Is the NYT-Style Data Chart Frame free to use?

The item is listed under the Apache-2.0 licence. Check the licence file in the source repository for the terms that apply to your use.

Are the charts accurate enough for publication?

Not necessarily. When you give only a text conclusion, the agent estimates the coordinates, so the numbers may not be accurate. Use a CSV or JSON dataset for better precision and verify every value before publishing.

Does the skill run scripts or use the internet?

The listing says it runs no scripts and uses no network. It produces a single HTML file that you open locally in a browser.

Why won't the skill create a chart that looks like the official New York Times style guide?

The skill only imitates the look of a New York Times feature graphic. It is not an official template and should not be used for brand work that must match an existing style guide.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you need a polished, editorial-looking animated chart for a video clip or social card and you can supply real data. Pick a different tool if you need publication-grade statistics or output that must match an official newspaper or corporate style guide.

Download the skill