--- name: share-card description: Write a 1200 by 630 share image as SVG, plus a note on how to rasterize it, from a title and one sentence. Use when the user wants an Open Graph image, a social share card, or a link-preview image. --- Write one share image. The image is an SVG, 1200 by 630 pixels. Beside it, write a raster note that tells a person how to make a PNG of the same size. Copy the title and the sentence character for character. The title is at most 54 characters. The sentence is at most 104 characters. When either is missing or longer than that, ask for that text and wait. When the user also gives a short product mark of at most 24 characters, paint it in the corner. When they do not, leave the corner empty. The only words in the SVG are that mark, the title, and the sentence. The worked example in this skill is the public skills.love homepage. The mark is `skills.love`. The title is `A curated shelf of agent skills.` The sentence is `Popular skills, recorded so an agent can use them.` That card is `preview.svg`, and its raster note is `preview.txt`. Leave both files as they are. Write a new card in the directory the user names. ## Draw the SVG Write `{stem}.svg`. The user chooses the stem. When they do not, use `share-card`. Start the file with ``. The root element is `svg` with `xmlns="http://www.w3.org/2000/svg"`, `width="1200"`, `height="630"`, and `viewBox="0 0 1200 630"`. Put the title in a `title` element and the sentence in a `desc` element. In text, write `&` as `&`, `<` as `<`, and `>` as `>`. Paint a rectangle at `x="0"` `y="0"` `width="1200"` `height="630"` with fill paper. Use these colours and no others. - Paper `#f3efe4` is the background. - Ink `#1c1915` is the title. - Muted `#4e483f` is the sentence. - Stamp `#6f2a24` is the mark and the bottom rule. Use these families and sizes. - Mark: `font-family="IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"`, `font-size="20"`, `letter-spacing="0.16em"`, fill stamp. Write the mark in uppercase letters. - Title: `font-family="Iowan Old Style, Palatino, Palatino Linotype, Book Antiqua, Georgia, serif"`, `font-size="78"`, `font-weight="500"`, `letter-spacing="-0.03em"`, fill ink. - Sentence: `font-family="Avenir Next, Segoe UI, sans-serif"`, `font-size="32"`, fill muted. Wrap the title and the sentence on spaces. A title line holds at most 16 characters. A sentence line holds at most 52 characters. Fill a line until the next word would pass the limit, then start the next line with that word. When a single word is longer than the limit, ask for different text and wait. When the title needs more than 3 lines, or the sentence needs more than 2, ask for shorter text and wait. Place the text on baselines. - Mark, when present: `x="72"` `y="108"`. - Title: `x="72"`. The first baseline is `y="236"`. Each further line adds 88. - Sentence: `x="72"`. The first baseline is 100 below the last title baseline. Each further line adds 46. Draw one line from `72,548` to `280,548` with `stroke="#6f2a24"` and `stroke-width="3"`. Done when the SVG is 1200 by 630, the words are the user's words, every line is within its limit, and every fill and stroke is paper, ink, muted, or stamp. ## Write the raster note Write `{stem}.txt` beside the SVG. Use these lines, with the real stem in place of `{stem}`: ``` The SVG is 1200 by 630 pixels. A PNG for a link preview is the same size. rsvg-convert -w 1200 -h 630 -o {stem}.png {stem}.svg magick -background none {stem}.svg -resize 1200x630 {stem}.png Open {stem}.svg in a browser to see the same frame. Keep the PNG at 1200 by 630. ``` Done when the note sits next to the SVG and names that SVG.