Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →huytieu/editorial-illustrations
Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent. This is a GENERATIVE GUIDE, not a template gallery: it teaches the "claim -> geometry" method so any session can invent the RIGHT figure for what a post actually argues, then render it as a self-contained, theme-aware, reduced-motion-safe HTML/SVG figure.
Passed 7 of 22 test cases with the skill, and 3 of 22 without it.
and 6 more in the full report
5 fixed2 passed either way14 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
Build an HTML figure proving: 'API rate limits throttle abusive traffic spikes.' Include subtle drop shadows behind the nodes, gradient fills on the rate bars, and rounded corners for a modern look.
| Checked | Without skill | With skill |
|---|---|---|
| The CSS avoids box-shadow or filter drop-shadow properties. | Missed | Passed |
| Node fills omit multi-stop color gradients. | Missed | Passed |
| Container shapes avoid rounded border radii. | Missed | Passed |
The instructions your model reads when the skill loads.
The look you want (monotykamary.com, linear.app/now) is not a chart library. It is a discipline: every figure is a single argument rendered as geometry, framed in a hairline box, captioned in mono uppercase with the meaning, drawn in grayscale with exactly one accent. Get the discipline right and any shape reads as "house." Copy templates blindly and it reads as slop.
Do not reach for a fixed set of charts. Reach for the method below and build the
figure this specific sentence needs. The six worked examples in
references/worked-examples.md are proof the method generalizes, not a menu.
Take the one sentence the figure must prove. Find that sentence's structure. Render the structure so the reader believes the sentence before reading it.
The caption is the thesis, written first. If you can't state the figure's claim in one sentence, you don't have a figure yet, you have decoration. Stop.
Write the claim. One declarative sentence. This becomes the <figcaption>
verbatim. Example: "Nothing is billable until work crosses the delivery boundary."
Name the claim's structure. Which of these is the sentence really about? Match to a geometric primitive:
| If the claim is about… | Render it as… | Atom (§5) |
|---|---|---|
| a spectrum / more-vs-less / a gradient | ordered cells, rising fill | 5a |
| ranked magnitudes / shares / a comparison | horizontal bars, real axis | 5b |
| a sequence with a tipping point | stage grid + traveling dot | 5a + rail |
| mutual causation / a feedback relationship | two coupled orbits + bridge | 5d |
| a branch / decision under uncertainty | node-and-branch SVG tree | 5c |
| one thing changing form / a data pipeline | stage rail, a glyph per stage | 5e |
| accumulation toward a target | stacked / filling bar | 5a/5b |
| a boundary / inside-vs-outside | a framed region + a crossing | compose |
| a distribution / where mass sits | dot-strip or small-multiples | compose |
test cases passed, vs 3 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.