Markdown to Image by langbot-team

# Markdown to Image

Render Markdown into a clean PNG card for sharing in chat.

## What it does

- Converts Markdown to a styled HTML card and screenshots it (Playwright).
- Falls back to a text-only Pillow renderer when no browser is available.
- Light/dark themes, configurable width, optional title eyebrow.

## Files

| File | Purpose |
|------|---------|
| `SKILL.md` | Instructions the agent receives on activation |
| `scripts/md2img.py` | Render Markdown to a PNG card |
| `references/styling.md` | Theming, width, and layout guidance |

## Requirements

- browser engine: `markdown`, `playwright` (+ `playwright install chromium`)
- pillow fallback: `Pillow`

## License

Apache-2.0.


---
name: markdown-to-image
display_name: Markdown to Image
description: "Render Markdown into a clean PNG image card, ideal for sharing formatted text, summaries, code, or quotes in chat. Use when the user wants to turn Markdown or formatted text into a picture, make a shareable text card, or export a note as an image. Do NOT use for rendering diagrams (use a diagram skill) or charts from data (use a plotting skill)."
license: Apache-2.0
---

# Markdown to Image

Turn Markdown into a polished PNG card that's easy to share in instant messaging.

## When to use

The user wants formatted text — a summary, tip, quote, code snippet, or note —
rendered as an image to send in chat, rather than as plain text.

## Execution steps

1. **Get the Markdown** (from the user, a file, or a previous step). Keep it
   reasonably short — image cards are for digestible content, not long articles.
2. **Render**: `python scripts/md2img.py input.md -o card.png` — converts Markdown
   to HTML, wraps it in a clean card style, and screenshots it via Playwright
   (installs `markdown` + `playwright`; runs `playwright install chromium` on first
   use). Options: `--width 720`, `--theme light|dark`, `--title "..."`.
3. **Report** the saved PNG path.

## Fallback

If a headless browser isn't available in the sandbox, fall back to
`--engine pillow`, which renders text-only cards with Pillow (no browser). It
handles headings, paragraphs, lists, and code blocks but not full HTML/CSS.

## Rules

- Choose a width that fits chat (640–760px works well).
- Don't cram long documents into one image; split or summarize first.
- Preserve code blocks in monospace; never reflow code.

## Available resources

- `scripts/md2img.py` — render Markdown to a PNG card (Playwright, Pillow fallback).
- `references/styling.md` — theming, width, and layout guidance.