Free

Oversize Workshop

Warm link preview cards with a huge headline that steps around your own workshop photo, or a drawn still life of tools. One PNG per row, by script.

Install

Install the "Oversize Workshop" skill into ~/.claude/skills/oversize-og.
Download each file and save it under that folder:
https://skilllift.pages.dev/packs/oversize-og/SKILL.md → SKILL.md
https://skilllift.pages.dev/packs/oversize-og/references/style.md → references/style.md
https://skilllift.pages.dev/packs/oversize-og/assets/engine.html → assets/engine.html
https://skilllift.pages.dev/packs/oversize-og/scripts/render.mjs → scripts/render.mjs
https://skilllift.pages.dev/packs/oversize-og/scripts/check.mjs → scripts/check.mjs
Then read SKILL.md, tell me what it does, and remind me to start a new session.

Unpack it into ~/.claude/skills

Same skill, different brief

The left is the preview. The right was made by a separate agent from a different brief, using only the installed skill and without seeing the preview.

The preview
The preview
A new brief, made by a separate agent
A new brief, made by a separate agent

One test run on a fictional brief. Letterforms can differ on systems without the same fonts.

Makes warm, documentary-craft link preview images by script with no image model. A huge headline steps around a focal subject, either the user's own workshop photo with a coded warm grade and a measured local scrim, or a code-drawn still life of tools on a workbench. Takes a name and a headline, or a CSV or JSON list, and writes one 1200x630 PNG per row plus a 1600x900 copy. Use when someone asks for Open Graph images, link previews or social share cards for a maker, school, studio or small product and wants oversized type with a handmade feel, or asks for this style by name.

What it must pass before delivery

  • node scripts/check.mjs exits 0 on the final folder, with --approved pointing at the approved text.
  • I viewed the 600 wide sheet and at least one card at full size.
  • The words step around the subject, and the subject is really where focus says it is.
  • All text is the user's approved text, in one language per card.
  • Fictional, sample or test material carries a notice.
  • No real brand's look or logo was used, and photos are the user's own.
  • Inferred lines and assumptions are listed in the hand-over.
Read the full SKILL.md
---
name: oversize-og
description: Makes warm, documentary-craft link preview images by script with no image model. A huge headline steps around a focal subject, either the user's own workshop photo with a coded warm grade and a measured local scrim, or a code-drawn still life of tools on a workbench. Takes a name and a headline, or a CSV or JSON list, and writes one 1200x630 PNG per row plus a 1600x900 copy. Use when someone asks for Open Graph images, link previews or social share cards for a maker, school, studio or small product and wants oversized type with a handmade feel, or asks for this style by name.
version: 1.0.0
---

# Oversize Workshop

The look lives in `assets/engine.html`. You supply text and, if there is one, a photo. You never edit the engine: `scripts/check.mjs` fails any card made by an edited engine. Read `references/style.md` only if you want the exact tokens.

## Inputs to ask for

Ask once, in one message, for whatever the brief does not give.

| Field | Meaning | Limit | If the brief is thin |
|---|---|---|---|
| `name` required | Company or product name, set small as a type wordmark in a corner | 32 Latin or 16 Chinese characters | Use the name exactly as the user wrote it. Never invent one for a real card |
| `title` required | The headline, set huge. Use `|` for an exact line break; each marked part becomes one line. For a literal bar write `\|` | 64 Latin or 26 Chinese characters. Best at 3 to 8 words or 6 to 14 Chinese characters | Reuse the user's own sentence, trimmed. If nothing usable exists, repeat the `name` as the title and list it as inferred. Never write a claim they did not make |
| `notice` optional | A small label on a plate: fictional, sample, draft, test | 44 Latin or 22 Chinese characters, one line, same language as the title | Leave empty for a real, approved card. Required if the company is invented: `Fictional sample`. If the headline is not approved yet: `Draft, not approved` |
| `photo` optional | The user's own work or workshop, full bleed. Local .jpg, .png or .webp, at least 1200 px wide, no web addresses, relative to the list file | One per row | Leave empty: a drawn still life is used. Never fetch a photo, and never use one the user cannot vouch for |
| `focus` optional | Where the subject sits. `right`, `left`, `centre`, `auto`, or for a photo `x,y,rx,ry`: one unit throughout, fractions of the photo itself. `x` and `rx` are fractions of its width, `y` and `ry` of its height. `x,y` is the centre of an ellipse, `rx,ry` its radii. The ellipse must hold the whole subject, feet and handles included | Start with `rx` and `ry` at 0.3 or less. If the ellipse is too large for the crop, the renderer reduces it and prints the limits for that photo, again as fractions of the photo | Open the photo, look, and give numbers around the subject. With no photo, leave it empty. `auto` only guesses from detail, so view the result |
| `seed` optional | Fixes the drawing, arrangement and grain. Same seed, same inputs, same pixels | 40 characters | Leave empty: the file name is the seed. Change it only to get a different arrangement |
| `colors` optional | Two to four `#RRGGBB`, in this order: ground, ink, accent, second accent. Ground and ink need strong contrast. On a bright photo they may swap roles, so the words go dark | 2 to 4 values, no more | Leave empty for the default warm set and list that as an assumption. Do not guess a brand's colours |
| `file` optional | Output file name. Unsafe characters are cleaned, duplicates get a number | 60 characters | Leave empty: built from name and title |

Limits do not count spaces.

Line rules the check enforces. Any `|` break is allowed, and two lines of equal length are fine, in English or Chinese. Only three or more automatic lines of equal length fail, as a box; set a natural break to fix that. A last line of one word with five letters or fewer, or one word or Chinese phrase shorter than a third of the longest line, fails as stranded. The default breaks avoid this by taking a smaller size step.

Subject margin. The crop slides to keep the focus ellipse at least 16 px from every edge of a 1200 wide card. If the photo has no room around the subject, the check fails: move the focus or use another photo.

Lists are CSV with a header row, or JSON as a list of objects. Quotes, doubled quotes, line breaks inside quotes, a byte order mark and empty rows are handled.

## Refuse these

- Logos of others are not accepted, and neither is a logo in place of the wordmark. The engine rejects a `logo` field.
- If a request names a real company or brand and asks for its look, refuse that part and offer this pack's own look with the user's own name. No list of names can be complete, so the script cannot catch this: you must judge. The same applies to a thinly described copy of a recognisable brand, and to cards that pretend to come from someone else.
- Do not name or imitate a real company in sample text. Use an invented name and a `notice`.

## Steps

1. Install once, if `playwright` is missing: `npm install playwright` then `npx playwright install chromium`. If it lives elsewhere, set `NODE_PATH` to that `node_modules`.
2. Write the list file with the fields above. Use only text the user approved.
3. Try one row at small size first, and render one at a time:
   `node scripts/render.mjs --in list.csv --out cards --row 1 --draft`
4. View that draft. Adjust `title` breaks, `focus` or `seed`. Repeat until it is right.
5. Render everything: `node scripts/render.mjs --in list.csv --out cards`. A single card also works: `--name "..." --title "..." --notice "..." --photo a.jpg --focus right --out cards`. A failing row is reported and the others still render; the exit code is non-zero.
6. Check, with your approved text as the reference:
   `node scripts/check.mjs cards --approved list.csv --sheet cards-600.png`
   Fix everything reported and run it again. Add `--require-notice` when the cards are fictional or sample. The check runs from this folder on cards with any file name, because each PNG carries its own layout record. PNG optimisers strip that record, so check before optimising.
7. View `cards-600.png`, which shows every card at 600 wide, and open at least one card at full size. The check cannot judge taste. If a line reads badly, set `|` breaks.

Render time is about 1 second per row on a laptop, both formats included, and the check takes under a second per card. Use `nice -n 10` on a shared machine. Run one render at a time and wait for it in the foreground. Never start detached processes, never run machine-wide kill commands, and run no image model.

## When something is missing

- Thin brief: restate the user's facts, invent nothing, and list every line you inferred. No customers, numbers, awards, dates or prices unless the user gave them.
- Nobody can answer: proceed with the rules in the table, and list your assumptions in the hand-over.
- A different length: the headline falls through size steps by itself. If it stops fitting, the error says so. Shorten it, or reduce the focus area.
- No real link: these are images, so no link is needed.
- A word stranded or a bad break: use `|`. Do not edit the PNG, since the check fails edited pixels.

## Deliverables

- One `name.png` at 1200x630 and one `name-16x9.png` at 1600x900 for each row, plus `manifest.json` listing files, size steps and lines.

## Before delivering

- [ ] `node scripts/check.mjs` exits 0 on the final folder, with `--approved` pointing at the approved text.
- [ ] I viewed the 600 wide sheet and at least one card at full size.
- [ ] The words step around the subject, and the subject is really where `focus` says it is.
- [ ] All text is the user's approved text, in one language per card.
- [ ] Fictional, sample or test material carries a `notice`.
- [ ] No real brand's look or logo was used, and photos are the user's own.
- [ ] Inferred lines and assumptions are listed in the hand-over.

## When not to use it

- The user needs a calm or corporate card, or a long sentence that must stay small.
- The photo has no clear subject, or is busy edge to edge with nowhere for words.
- The user wants a logo on the card, or a real brand's look.

## Requirements

Node.js 22 or later and Playwright with Chromium. The check needs only Node. No network is used, and the renderer blocks all web requests. Fonts are system stacks; see `references/style.md` for fallbacks. On a machine with no Chinese serif the renderer stops and says what to install.

Used in these workflows

Similar skills