write a figure your agent can edit
when a write-up needs a figure, the skill picks which graph to use. emit jsx in mdx, a ::graph-* block in a comark app, a graph_* filter in knap, or the official fence in a readme, pr, or linear note.
writing and reading the same figure
on write, the agent emits at most two graphs next to the claim. on read, the figure is still characters in the file, so opening the mdx shows labels and values instead of a screenshot.
github, linear, and a readme still get the official fence. they do not run comark.
- MDX / React✓–✓–
- App .md file––✓✓
- README / GitHub–✓–✓
- Edit the labels✓✓✓✓
what goes in the agent's folder
there are 38 graphs; most ship an official fenced ascii for hosts that cannot run react. the skill should pick at most two per write-up.
- skill
- when to use a figure, which one, and whether to write jsx, a ::graph-* block, a graph_* filter, or the official fence. the same two files work in cursor, claude code, codex, or opencode.
- recipes
- worked write-ups with real props: copy the jsx, swap the labels, keep at most two graphs with prose between them.
- comark
- ::graph-* blocks with yaml props for the same graphs without mdx; github still gets the fence.
- knap
- graph_* filters that turn a props object into the official fence, or a ::graph-* block when you pass comark.
- fenced ascii
- official fences that survive github, linear, and pr comments — swap labels, keep the frame, and do not invent a new drawing.
- llms.txt
- chooser plus ascii, comark, and knap blocks in one file when the skill is not installed.
- skills/mdxcn
- SKILL.mdchooser
- recipes.mdjsx
- fetch
- /llms.txtascii + yaml
- /docs/exampleswrite-ups
- at most two graphs
- prose between them
- official fence, not homemade
- no svg
install the skill
a project copy travels with the repo; a personal copy stays on this machine. if the host is react, install the components first — the graphs still need to live in the project.
the chooser table and full skill file are on skill.
project
personal
from the repo
prompt
try a prompt
paste one of these after install. each should pick two graphs and put prose between them.
Refactor · GraphFlow, then GraphTimeline
README · Fenced ASCII, not JSX
Comark · ::graph-timeline, then ::graph-uptime
Knap · {{ events | graph_timeline }}, then {{ uptime | graph_uptime }}