Create Lmd Page

Create LMD Page

Generate the HTML for a Logic Masters Deutschland puzzle post from three inputs.

Inputs

Collect from the user one at a time — ask for each missing input in its own message and wait for the reply before asking the next. Do not batch them into a single prompt. Skip any input the user already supplied. Order:

1. SudokuPad link — e.g. https://sudokupad.app/abc123. This also supplies the ruleset: run the extractor (below) to pull the rules straight from the puzzle. Only ask for rules text if extraction fails.
2. Image id — e.g. 001344, used in the <img:ID> placeholder
3. Notes (optional) — intro/flavor text shown at the top of the page, above the image, with no header. If not given, omit the intro block entirely.

Linking a setter's name in the notes. When the user says "link to 's LMD page" (or asks to link a name mentioned in the notes), wrap that name in an anchor to their LMD user page: https://logic-masters.de/Raetselportal/Benutzer/eingestellt.php?name=<NAME> (substitute the name, URL-encoding it if needed). Don't ask for the URL — build it from this template.

Auto-extract rules from the link

After the link, run:

~/.agents/skills/create-lmd-page/extract_puzzle.py "<sudokupad-url-or-id>"

(needs uv, shebang pulls lzstring). It prints JSON {title, author, rules, layout} pulled from the puzzle's metadata. The rules field is the ruleset — one named rule per paragraph, \n\n-separated — use it as if the user pasted it. Show the extracted rules and let the user correct them before building. layout ("two"/"one") picks the template column count — see the Template section.

If the script errors (non-zero exit: fetch failed, unknown blob format, or no rules field), fall back to asking the user for the ruleset as plain text (and judge layout by eye: one column if the rules would run taller than the ~450px image). Do not block on the extractor.

Output

Fill the template below, then:

1. Write it to ~/lmd-pages/<puzzle-slug>.html (create the dir if needed; slug from the puzzle/rule name, e.g. scell-squish.html).
2. Load it onto the clipboard: clip.exe < FILE (WSL) / pbcopy < FILE (macOS) / xclip -selection clipboard < FILE (Linux).
3. Tell the user it's on the clipboard AND state the file path, so they can re-copy it later without regenerating.

Never have the user copy the HTML out of the terminal. Drag-selecting long soft-wrapped lines in the TUI silently drops chunks mid-line (screen-cell copy during redraws) — this corrupted rule text and tags repeatedly before the clipboard workflow was adopted. Never print the HTML to the terminal at all — not even in a code block for review. The clipboard and the saved file are the whole deliverable; point the user at the file path if they want to read it.

Formatting rules:

• Each named rule becomes one block inside the Rules card: <strong style="display: block;"> name on its own line, then the rule text as a <ul style="color: #444; margin: 4px 0 0; padding-left: 18px; max-width: none;"> with one <li style="max-width: none;"> per point (the max-width: none is the gutter fix below). Always use the bullet list — even a single-statement rule is one <li> bullet, so every rule reads consistently. Last block gets margin-bottom: 0;, all others margin-bottom: 14px;.
• Rules card right-gutter (the important gotcha). If the rules are rendered as a bullet list (<ul><li>), LMD's own CSS caps list-item text to a fixed measure (~560px). The lines then wrap short no matter how wide you make the card, leaving a big empty band on the right — and it comes back every time you widen the card, because the site is overriding you. Fix: add max-width: none; to every <ul> and <li> in the Rules card. That releases the cap so the text fills the card width. Once released, the card can be as wide as you like with no gutter. (Symmetric 16px 18px card padding keeps the small left/right gutters even.) <span>-based (non-bullet) rule text isn't capped, so it only matters when you use bullets — but adding it is harmless, so the templates below include it.
• Escape special characters as HTML entities (ö, °, &, etc.).
• Fix obvious typos in rule text (e.g. "sum the the" → "sum to the"), but never change rule meaning. Mention any fix you made.
• Rule text is deliverable prose — write it normally, never compress it.
• The SudokuPad link goes in both the image anchor and the caption anchor, verbatim as the user gave it — keep any ?setting-... query (e.g. ?setting-nogrid=true), it changes how the puzzle loads. Only the extractor strips the query, and that's just for its API fetch, not the page links.

The template is styled to blend into the Logic Masters Deutschland site (logic-masters.de), whose CSS the page inherits:

• No font-family — the site sets sans-serif at 90% on the page; inheriting matches the surrounding text.
• Background #eef and border #ddf match LMD's sidebar boxes and image borders; border-radius: 5px matches LMD's .box.
• Headings at font-size: 120% match LMD's in-box H2 sizing; the caption's #888 matches LMD metadata lines (e.g. "eingestellt von...").
• Use %/px units like the site does, not rem (site font-size is 90%, so rem values don't line up).
• .rp_html IMG already gets max-width: 100% from site CSS.
• The whole post sits in a thin frame: background: #fafaff; border: 1px solid #ddf; border-radius: 8px; padding: 26px 30px on the <section> (both layouts). Same #ddf/5px-family hairline as the Rules card; the #fafaff fill is a barely-there lavender tint, deliberately lighter than the #eef card so the card still reads as the darker inner panel. Frame widths: 820px two-column, 840px one-column (a wide single column filled by a large centered image up top and a wide rules card below — see the gutter gotcha above for why the card can be wide).

LMD embeds pasted HTML verbatim — there is no sanitizer. Verified by extracting a live puzzle's source (search the page source for HTML-Code des Raetsels: Anfang; the raw HTML follows). Divs, inline styles, <hr>, headings all pass through untouched. If the rendered page loses tags or text, the paste was corrupted (see Output section) — do not redesign the HTML around it. LMD's own docs recommend <div style="clear:both;text-align:center"> as the image wrapper.

The image is referenced with LMD's custom syntax <img:XXXXXX> where XXXXXX is the uploaded file's id — beware stray spaces inside it. Extra attributes are passed through to the rendered <img> tag: width="420" (two-column) / width="600" (one-column) sets the display size; max-width: 100% keeps it from overflowing (it shrinks to full width when the columns stack on mobile).

Layout — pick by the layout field (see the two variants under Template):

• Two-column ("two", shorter rulesets): a centered italic epigraph on top, then a flex row — image left (flex: 3), Rules card right (flex: 2 1 280px, #eef/#ddf with a #ddf header bar). The ~3:2 split keeps short rules beside the image.
• One-column ("one", long rulesets): epigraph, then a large centered image, then a wide full-width Rules card below — so a verbose ruleset runs across the page instead of towering as a tall side column.

flex-wrap stacks the columns vertically on narrow screens. Flexbox on LMD is unverified — check a real preview; if it doesn't hold, the wrap makes it degrade to stacked blocks anyway.

Template

One shared skeleton with four values that differ by layout — see ~/.agents/skills/create-lmd-page/reference/template.md for the HTML and the two-column/one-column delta table.