Card kinds
A show card is markdown or HTML. Inside those two, the show skill has a guide for four kinds of card: explain code, diagram, chart and mockup. Any other HTML that makes the point is a good card too, such as a comparison table, a checklist or a small widget.
Every kind takes its colors and fonts from the board’s theme, so a card looks right in light and dark.
Markdown
Section titled “Markdown”A markdown card holds text, tables, task lists, code with syntax colors and file trees. Claude can also post an image file as a card. Markdown renders as the session log and file previews do, so call stacks and mermaid diagrams work here too.
Mermaid
Section titled “Mermaid”A mermaid code block draws a diagram in the theme’s colors. The card is narrow, so Claude keeps a diagram small: a top-down flowchart with short labels, or a sequence of messages. Claude splits a big map into several cards.
Explain code
Section titled “Explain code”An explain card makes one point about the code, in a sentence or two, then shows the smallest view that proves it:
| To show | View |
|---|---|
| Who calls whom at run time | A call stack |
| What a function decides | Pseudocode |
| UI structure, state and module edges | A component tree |
| Which file owns what | A file tree |
| Messages between parts over time | A mermaid sequence |
| What a change adds, removes or moves | A diff of one of the views above |
A follow-up, such as the call stack after the fix, replaces the first card. You do not need the old card to compare: the call stack marks the frames that the change adds and removes.
A chart card shows numbers: bars, lines, stat tiles or a meter. The title says what to see, and one accent color marks the thing to look at. Series and magnitude colors come from a palette that the board sets for each theme.
Diagram
Section titled “Diagram”A diagram card is an SVG drawing of a system, a flow, states or layers. Zones group the parts, and the accent color marks the part the point is about.
Mockup
Section titled “Mockup”A mockup card sketches a screen, a dialog or a form, with numbered notes for the open questions. Use it to agree on a UI before Claude builds it. Select a note’s text to comment on it.
What HTML cards can do
Section titled “What HTML cards can do”An HTML card runs in a sandbox. Its scripts work, so a card can have tabs, a slider or a sort, but they cannot reach the board, the network or your files. A link opens in a new browser tab.