eval-graphics
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.
Profile →npx skills add elvisun/newsjack --skill design-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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. #
- Files you work with
- The grammar (non-negotiable brand rules)
- Accent strategy — set on <body>
- Pick the figure to fit the data
- How to compute geometry (filling an SVG template)
- Build process
- Worked example
- Guardrails
cd eval/design-system/scripts node validate.mjs ../../<study>/runs/<run>/figures/<name>.html --out ../../<study>/runs/<run>/figures/png
What does the eval-graphics skill do?
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.
How do I install it?
Run `npx skills add elvisun/newsjack --skill design-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From elvisun/newsjack, a repository with 620 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.