awesome-content-graphics

Content Graphics

The image a post ships with, made on the machine that is already running. A self-contained HTML file styled with CSS, screenshotted through browser automation, and nothing else: no image-generation service, no API key, no upload of the user's content anywhere.

This is one stage lifted out of the content pipeline so every skill that needs a picture calls it instead of carrying its own copy of the rules. awesome-content-campaign calls it when the media library cannot cover a media-required post; awesome-content-repurpose calls it when the run has no image; a user calls it directly when they want a graphic and no campaign around it.

Core principle: the run produces a set, and every choice inside it belongs to the user. The headline is chosen as text before anything is drawn. What happens to the renders afterwards depends on who called: a post needs one of them picked, a person asked for graphics needs all of them delivered. A skill that renders one graphic and decides it is the answer has taken two decisions it was not given, and correcting either costs a whole round trip.

Second principle: the facts are the boundary. The composition may not assert a relationship the caller's sources do not carry. An image is a claim surface like any other sentence, and a wordless claim is still read as evidence.

Third principle: a set is a spread of combinations inside one family. Twenty variations on one composition are one variant rendered twenty times, and a gallery of them gives the user nothing to decide. The family is four type-led kinds — a bare statement, a canvas with one tinted glyph, a number lockup at display scale, a data figure carrying its real values — and the spread comes from moving the palette, the background recipe, the figure, the face, the type effect and the anchor underneath them, counted by the signature rule in references/style-catalog.md. The kinds have shares: bare statements are capped at 15 percent of a set and data figures never fall under a third. The dense end of the old catalog (drawn code windows, spec tables, section posters, cut-paper headlines) is out, and it is not re-derived per run.

Bundled files (load on demand):

• references/style-catalog.md — read first. The four kinds a set is built from and the share each takes, the five axes underneath them (density, palette and background, typography, subject, atmosphere), the palette rule that gives each variant its own harmonised scheme, the glyph-tinting rule, the typesetting rules, the scale gate and the fill gate that keep a canvas from reading as decoration or as a placeholder, the archetypes that were removed and the shelf that is only built on request, the combination rule that spreads a set, the device library, and what is not renderable offline.
• references/palettes.json — a pool of 43 schemes (27 dark, 16 light) already proved against the colour rule: accent and muted neutral at 3:1 or better on their ground, foreground at 4.5:1, accent and muted separable under protan and tritan simulation. A no-reference set draws its schemes from here and validates nothing per run; scripts/palettes.mjs --check proves a brand colour or a reference palette the same way, and --generate rebuilds the pool.
• scripts/build-set.mjs (Node 18+, no dependencies) — turns set.json, one row per variant, into the self-contained src/<id>.html pages through the templates in scripts/templates/: the four kinds, three data-figure patterns, the ground recipes, the type effects, the anchors, fonts and icons inlined from the asset cache. A variant is a row, not a page written by hand.
• scripts/render-set.mjs (Node 22+, no npm dependencies; needs any Chromium-family browser on the machine, found through scripts/cdp.mjs) — one browser for the whole set: the geometry gate on every page, a screenshot for every page that passes, the set-level duplicate sweep (layout skeleton and perceptual distance), the kind and icon quotas, the contact sheets and the gallery, and report.json with every number. Exit 0 or one line per finding.
• scripts/fetch-assets.mjs — the free-licence faces (Google Fonts, per weight, latin subset) and the drawn icons (Lucide) into a cache shared across runs, with their licences recorded beside them. A second run costs nothing.
• references/visual-language.md — the nine data-figure patterns every composition is built from, the geometry check that measures the hard rules on every page before its screenshot, the craft that keeps a set from looking like one image recoloured, and the rendering mechanics every canvas shares. Read it before writing the first line of markup, not after the first contact sheet comes back grey.