# Eval Graphics

Turn an eval study's numbers into on-brand, publish-ready figures using the Newsjack...

- Repository: https://github.com/elvisun/newsjack (1668 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add elvisun/newsjack --skill eval-graphics -g -a claude-code -y`
Codex: `npx skills add elvisun/newsjack --skill eval-graphics -g -a codex -y`
Cursor: `npx skills add elvisun/newsjack --skill eval-graphics -g -a cursor -y`
Gemini CLI: `npx skills add elvisun/newsjack --skill eval-graphics -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add elvisun/newsjack`

## Description

Turn an eval study's numbers into on-brand, publish-ready figures using the Newsjack chart room (the eval design system), then validate them with Playwright. For producing the charts in a published eval/data study.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Eval Graphics, the chart room

> **Internal tooling, not a product skill.** This lives in `eval/design-system/`
> and is used by maintainers to publish eval studies. It is **not** a Newsjack
> user skill, must **never** be installed into `skills/`, and is never loaded at
> product runtime. Do not confuse it with the main skills folder.

You produce **figures** for an eval study: standalone HTML that renders the
Newsjack house chart style, validated by Playwright and screenshotted to PNGs you
drop into a writeup. One grammar, newsprint paper, ink, a single vermilion mark, across every figure, so a study reads like one publication.

## Files you work with

- `assets/colors_and_type.css`, design tokens (palette, type, spacing). Never
  edit; always link.
- `charts.css`, the chart primitives (`.bar-primary`, `.line-base`, `.fig`,
  `.stat`, heatmap classes, masthead/section/colophon scaffold). Never edit;
  always link.
- `chart-room.html`, the **specimen gallery** of all 9 figure types with
  placeholder data. This is your copy-paste source: find the figure that fits
  your data, lift its block, swap the geometry and labels.
- `scripts/validate.mjs`, Playwright validator + screenshotter.

## The grammar (non-negotiable brand rules)

These come straight from the design system. Breaking one means the figure is
off-brand:

The rest: https://github.com/elvisun/newsjack/blob/HEAD/eval/design-system/SKILL.md