Skip to content
Get packs

NYT-Style Data Chart Frame

Turns your data into a single editorial-style chart frame with newsroom typography and reveal animation

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent builds a 1920×1080 single-file HTML frame that presents a dataset or a one-sentence finding as a newspaper-style chart, in the look of a New York Times feature graphic. It uses serif headlines, a red or mint accent, hairline axes, and a staggered animation where the title, label and line appear in sequence. The skill's instructions say the headline should be a conclusion drawn from your data rather than a description of the chart, and that estimated numbers must be labelled 'schematic'.

Great for

  • Designers who want a polished data graphic for a video clip or social card
  • Marketers producing an editorial-style chart from a CSV or a stated trend
  • Creators who need a quick animated data frame without a charting library

Skip it if

  • Precise, publication-grade statistics: when only a text conclusion is given, the agent estimates coordinates, so the numbers may not be accurate
  • Brand work that must match an existing NYT or corporate style guide: the skill only imitates a look and is not an official template

Try asking

  • “Turn this CSV of monthly signups into an NYT-style line chart frame with a headline stating the main trend”
  • “Make a bar chart frame of our 2025 revenue by region with one highlighted accent bar”
  • “Create a range-band chart frame showing the min and max temperature for each week, with a short editorial headline”
Step-by-step guide: how to use NYT-Style Data Chart FrameInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    frame-data-chart-nyt.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frame-data-chart-nyt.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frame-data-chart-nyt.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Supply real CSV or JSON data rather than a vague summary, so the chart is drawn from actual values and not estimates
  • Say which accent colour you want (NYT red, mint or warm orange) and whether you prefer a light or dark background
  • Check the output in a browser and confirm the animation respects reduced-motion settings if you plan to publish it

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.