Skip to content

view on a desktop screen for a better experience.

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.

[ loop ]

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.

[ host ]
JSXASCIIComarkKnap
  • MDX / React
  • App .md file
  • README / GitHub
  • Edit the labels
[ loop ]
write-up
chooser
JSX / YAML / filter
open the file
read the frame
edit 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.
[ kit ]
  • skills/mdxcn
  • SKILL.mdchooser
  • recipes.mdjsx
  • fetch
  • /llms.txtascii + yaml
  • /docs/exampleswrite-ups
Tree with 6 nodes
[ rules ]
  • at most two graphs
  • prose between them
  • official fence, not homemade
  • no svg
4 of 4 done

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 }}