Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/elvisun/newsjacknpx agentmods add skills/elvisun/newsjack/design-systemWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/elvisun/newsjack/design-system)<a href="https://agentmods.dev/skills/elvisun/newsjack/design-system"><img src="https://agentmods.dev/badge/skills/elvisun/newsjack/design-system.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00047 | $0.02260 |
| Opus 5 | $0.00023 | $0.01130 |
| Sonnet 5 | $0.00009 | $0.00452 |
| Haiku 4.5 | $0.00005 | $0.00226 |
Grade A, and why
eval-graphics scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 153 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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 intoskills/, 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:
- One chroma. Vermilion
#E05A47is the only colour. The highlighted / winning series is accent; every other series is quiet grey (--c-base,#E4E0D8) or an ink wash. If you reach for a second colour, you've gone wrong. No gradients. No emoji. Ever. - Paper, not white. Background is
--nj-page#F9F8F6. Borders are the hairlinergba(26,26,26,0.10). Cards are 0-radius with a faint editorial shadow. - Type roles. Figure titles: Newsreader italic. Axis ticks, value labels, legends, eyebrows: IBM Plex Mono, ALL CAPS, ≥0.12em tracking. Descriptive captions: DM Sans.
- Value labels float above the bar (mono, centered over the column).
- Headline figures are one consistent colour — the whole numeral and its
symbol in the accent (e.g.
+38%,4.2×fully vermilion), via<span class="accent">. - Section pattern: top hairline → mono number + lowercase-italic title (left)
- mono subtitle (right) → content.
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 153 lines · 47 tokens per session scan A bc24b4436c7d
eval-graphics is a skill published in the GitHub repository elvisun/newsjack (665 stars, last pushed 6d ago), licensed MIT. It adds 47 tokens to every session and 2,260 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
ui-craft-minimal
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like, Notion-like, Vercel-like, whitespace-heavy.
loom-accessibility
Web accessibility patterns, WCAG compliance, and inclusive design.
aksel-builder
Expert builder for Aksel, the Nav / @navikt design system — React components, design tokens, layout primitives, theming (light/dark), icons, CSS, the Tailwind preset, version migrations, Figma-to-code. Triggers — Aksel, "using/with aksel", Nav/Navikt, "designsystemet", "design system", @navikt/ds- (e.g.…
aksel-spacing
Lag responsive layouts med Aksel Design System (v8+) - spacing tokens, layout primitives (Box, HStack, VStack, HGrid, Page, Bleed) og ResponsiveProp.
web-design-reviewer
Visuell inspeksjon av nettsider for å identifisere og fikse designproblemer. Trigges av forespørsler som "sjekk designet", "gå gjennom UI-en", "fiks layouten", "finn designfeil". Finner problemer med responsivt design, tilgjengelighet, visuell konsistens og layout, og fikser dem i kildekoden.
design-shiny-ui
Design Shiny application UIs using bslib for theming, layoutcolumns for responsive grids, value boxes, cards, and custom CSS/SCSS. Covers page layouts, accessibility, and brand consistency. Use when building a new Shiny app UI from scratch, modernizing an existing app from fluidPage to bslib, applying brand theming…