Conference Poster Generator (HTML)

Generate a professional HTML poster. User notes: $ARGUMENTS

The poster is a React-based interactive editor — a single self-contained HTML file in the

poster/

directory. No build step needed (React/Babel loaded via CDN). The user can visually adjust the layout in their browser, then export the config back to Claude for further changes.

Project folder structure

<project>/
├── overleaf/              # Paper source from Overleaf
│   ├── paper.tex
│   ├── figures/
│   └── ...
├── references/            # Reference posters for style matching
│   └── (any format: pdf, png, jpg, html, pptx, ...)
├── poster/                # GENERATED: self-contained poster website
│   ├── index.html         # The poster (React app)
│   ├── poster-config.json # Layout config (columns, card order, heights, font scale)
│   ├── logos/             # Institution logos
│   ├── teaser.png         # Copied/converted figures
│   ├── qr.png             # Project page QR code
│   ├── qr-posterskill.png # Posterskill QR code
│   └── ...
└── .claude/skills/make-poster/

• overleaf/

  contains the paper source. Read the main

  .tex

  file and any files it

  \input{}

  s.

• references/

  contains example posters showing the user's preferred visual style. Read/view ALL files in this folder to match their design language.

• poster/

  is the generated output — a self-contained website. All figures and assets live alongside

  index.html

  so relative paths just work.

Inputs

1. Paper source - Located in

   overleaf/

   . Ask the user which

   .tex

   file is the main one to read (e.g.,

   paper.tex

   ,

   main.tex

   ). Then read it and any files it

   \input{}

   s.
2. Project website - Ask the user for the URL if not already known. Fetch with WebFetch to extract author info, hosted images, and links.
3. Reference posters - Auto-discovered from

   references/

   . View all files there and match their style.
4. Author website (optional) - Fetch with WebFetch and extract design signals (color palette, typography, logos). Download institutional logos from the author's site using Playwright (curl may fail due to redirects):

   page.request.get(url)

   to download the raw bytes.
5. Formatting requirements - Ask for poster dimensions, orientation, number of columns.
6. Git repo (optional) - Ask the user if they have a GitHub repo to push the poster to.

If the user doesn't specify formatting, ask them before proceeding. Don't assume defaults for dimensions, orientation, or column count.

Process

Step 0: Analyze style references

Look in

references/

for any PDF, PNG, or image files. Convert PDFs to PNGs (

sips -s format png

on macOS). View each one and note the visual style — layout, colors, typography, card styles, figure placement. Match the reference style — don't default to a dark theme if the reference is light, etc.

Step 1: Extract content from paper source

Ask the user which

.tex

file to read. Extract: title, authors, affiliations, abstract (2-3 sentences), key method, results (tables + figures), key equations (1-2 max), conclusion.

Step 2: Fetch the project website

Use WebFetch to get author names, affiliations, figure URLs, project URL for QR, links to code/arxiv/video.

Step 3: Gather assets into

poster/

Figures: Copy from

overleaf/figures/

, converting PDFs to PNGs at high resolution:

sips -s format png input.pdf --out poster/output.png -Z 3000

Website images: Download higher-quality images from the project website using Playwright (not curl — many sites redirect):

resp = page.request.get(url)
with open('poster/filename.png', 'wb') as f:
    f.write(resp.body())

Logos: Download institutional logos from the author's personal website using Playwright. Save to

poster/logos/

. The template auto-inverts them to white for the header.

QR codes: Generate and save:

curl -sL -o poster/qr.png "https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=PROJECT_URL"
curl -sL -o poster/qr-posterskill.png "https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=https://github.com/ethanweber/posterskill"

Step 4: Measure image aspect ratios

This is critical for eliminating whitespace. Measure every image:

sips -g pixelWidth -g pixelHeight poster/*.png poster/*.jpg

Then assign images to columns based on aspect ratio:

• Wide images (>2:1 ratio, e.g. teaser, architecture): put in the widest column
• Square images (~1:1 ratio): put in narrow columns
• Portrait images (<1:1 ratio): put in the narrowest column

This prevents the #1 whitespace problem: wide images in narrow cells (or vice versa) leaving huge gaps.

Step 5: Generate the poster HTML

Use the template at

${{CLAUDE_SKILL_DIR}}/template.html

as a starting point. The template is a React app with:

Architecture:

• CARD_REGISTRY

  — defines each card's content (title, color, JSX body)

• DEFAULT_LAYOUT

  — defines column structure and card ordering

• DEFAULT_LOGOS

  — institutional logos for the header
• React state manages layout, with localStorage persistence

• window.posterAPI

  exposes functions for programmatic control

Key things to customize:

1. Update

   CARD_REGISTRY

   with the paper's content (each section is a card)
2. Update

   DEFAULT_LAYOUT

   with the aspect-ratio-optimized column assignments
3. Update

   DEFAULT_LOGOS

   with the user's institutional logos
4. Update

   DEFAULT_FONT_SCALE

   (start at 1.3, user can adjust with A-/A+ buttons)
5. Update the header (title, authors, affiliations, conference badge, QR codes)
6. Update

   @page { size: WIDTHmm HEIGHTmm; }

   and

   body { width: WIDTHmm; height: HEIGHTmm; }

   for the poster dimensions
7. Update

   posterAPI

   fit() function with the same dimensions

Card content patterns:

• Figure card:

  <div className="fig"><div className="fig-wrap"><img src="file.png" alt="..." /></div><div className="cap"><b>Caption title.</b> Description.</div></div>

• Text card:

  <div className="hl"><p>Highlight text</p></div><ul><li>Point 1</li></ul>

• Table card:

  <table><thead>...</thead><tbody>...</tbody></table>

  with

  className="best"

  on winning cells
• Equation card:

  <div className="eq">{'$LaTeX equation$'}</div>

  (escape backslashes in JSX)

Critical CSS rules for zero whitespace:

• Images MUST use

  width:100%; height:100%; object-fit:contain

  (NOT max-width/max-height — those prevent upscaling)
• Each column must always have one card with

  grow: true

  (flex:1) that fills remaining space
• The

  isCardGrow()

  function ensures this automatically — if no card has grow, the last card gets it

Viewport scaling:

• Use

  translate() + scale()

  on body to center and fit the poster to any browser viewport

• transform-origin: top left

  is critical

• @media print

  must set

  transform: none !important

  for correct print resolution

• getBoundingClientRect()

  returns SCALED values — always divide by

  currentScaleRef.current

  in resize handlers

Step 6: Auto-optimize layout with Playwright

After generating, use Playwright to measure whitespace and find optimal column widths:

from playwright.sync_api import sync_playwright
import os

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={'width': 3200, 'height': 2260})
    page.goto('file://' + os.path.abspath('poster/index.html'))
    page.wait_for_load_state('networkidle')
    page.wait_for_timeout(3000)

    # Measure whitespace
    waste = page.evaluate('window.posterAPI.getWaste()')
    print(f"Total waste: {waste['total']}px")
    for d in waste['details']:
        print(f"  {d['card']}: H={d['wasteH']} W={d['wasteW']} ({d['pct']}%)")

    # Try different column widths to minimize waste
    best_waste = waste['total']
    best_c1, best_c3 = 300, 230
    for c1 in range(200, 350, 10):
        for c3 in range(160, 280, 10):
            page.evaluate(f'window.posterAPI.setColumnWidth("col1", {c1})')
            page.evaluate(f'window.posterAPI.setColumnWidth("col3", {c3})')
            page.wait_for_timeout(30)
            w = page.evaluate('window.posterAPI.getWaste().total')
            if w < best_waste:
                best_waste = w
                best_c1, best_c3 = c1, c3

    # Apply best and screenshot
    page.evaluate(f'window.posterAPI.setColumnWidth("col1", {best_c1})')
    page.evaluate(f'window.posterAPI.setColumnWidth("col3", {best_c3})')
    page.wait_for_timeout(500)
    page.screenshot(path='/tmp/poster_screenshot.png')

    # Also try swapping cards between columns
    page.evaluate('window.posterAPI.swapCards("cardA", "cardB")')
    # ... measure waste again ...

    browser.close()

Then read

/tmp/poster_screenshot.png

to visually inspect. Iterate multiple times — take screenshots, fix issues, re-screenshot until the poster has minimal blank space.

After finding optimal values, bake them into

DEFAULT_LAYOUT

,

DEFAULT_CARD_HEIGHTS

, etc. in the HTML.

Step 7: Generate PDF and verify

page.pdf(
    path='poster/poster.pdf',
    width='841mm', height='594mm',  # match poster dimensions
    margin={'top':'0','right':'0','bottom':'0','left':'0'},
    print_background=True
)

Convert the PDF to PNG and read it to verify it renders at full resolution:

sips -s format png poster/poster.pdf --out /tmp/poster_pdf_check.png -Z 3000

Step 8: Open and iterate with user

Open the poster in the browser:

open poster/index.html

Explain the editing controls to the user:

• Preview — toggle edit UI off to see exactly how it will print
• A-/A+ — adjust font size globally
• Drag column dividers (vertical blue bars) — resize columns left/right
• Drag row dividers (horizontal blue bars) — resize cards up/down within columns
• Click-to-swap — click one card's diamond handle (turns orange), then click another's to swap them
• Move/insert — click a card's handle, then click a dashed orange drop zone to move it there
• Save — downloads

  poster-config.json

• Copy Config — copies layout JSON to clipboard
• Reset — restore defaults

Proactively suggest improvements: After showing the first draft, suggest specific changes:

• "The model architecture card has some whitespace — try dragging the row divider above it down to give it less space"
• "The completion figure might look better in column 2 since it's wider — try clicking its diamond, then clicking a drop zone in column 2"
• "You might want to bump the font size with A+ a few times"

Encourage the feedback loop: Tell the user:

Try rearranging the poster in your browser! When you're happy with the layout, click Copy Config in the top-right toolbar and paste it here — I'll bake those changes into the defaults so they persist.

• Save — download

  poster-config.json

• Copy Config — copy layout JSON to clipboard to paste to Claude
• Reset — restore defaults

When the user pastes a config JSON, update

DEFAULT_LAYOUT

,

DEFAULT_CARD_HEIGHTS

,

DEFAULT_FONT_SCALE

, and

DEFAULT_LOGOS

in the HTML to match. Also write it to

poster-config.json

.

Step 9: Push to GitHub (optional)

If the user provides a GitHub repo URL:

cd poster
git init
git remote add origin <REPO_URL>
git add .
git commit -m "Poster: <paper title>"
git push -u origin main

Important guidelines

• No blank space. This is the #1 priority. Use aspect-ratio-aware column assignment,

  width:100%; height:100%; object-fit:contain

  on images, auto-grow cards, and the Playwright optimizer. Iterate until waste is minimal.
• Keep text minimal. Posters are visual — bullet points, not paragraphs. 2-minute understanding.
• Match the reference style. If the reference poster is light/clean, don't use a dark theme. Match the overall aesthetic.
• Font scaling. All text sizes use

  calc(Xpt * var(--font-scale))

  so the A-/A+ buttons work. Start with

  --font-scale: 1.3

  and let the user adjust.
• Print-optimized CSS.

  @media print

  hides all edit UI and sets

  transform: none !important

  .

  @page

  sets exact dimensions.
• Posterskill QR. Always include a QR code linking to

  https://github.com/ethanweber/posterskill

  in the header with the label "Poster made with my Claude skill".
• No acknowledgements footer. Keep the poster clean — no footer by default.
• Logos in header. Download institutional logos from the author's website, save to

  poster/logos/

  , and list them in

  DEFAULT_LOGOS

  . They're auto-inverted to white via CSS filter.
• Self-contained. No build step, no npm, no server. Single HTML file with CDN dependencies. Works when opened directly as

  file://

  .
• Equations. Use KaTeX (loaded via CDN). Escape backslashes in JSX strings:

  {'$\\mathcal{E}$'}

  .

Figure handling

• Always copy needed figures into

  poster/

  — don't reference

  overleaf/

  paths in the HTML.
• Convert PDFs to PNGs at high resolution:

  sips -s format png input.pdf --out poster/output.png -Z 3000

• Download website images via Playwright's

  page.request.get()

  (not curl — websites often redirect).
• Measure aspect ratios with

  sips -g pixelWidth -g pixelHeight

  and assign to columns accordingly.

User workflow for config updates

The user can adjust the poster in their browser and share changes back:

1. User clicks "Copy Config" in the toolbar
2. User pastes the JSON in chat
3. Claude updates

   DEFAULT_LAYOUT

   ,

   DEFAULT_CARD_HEIGHTS

   ,

   DEFAULT_FONT_SCALE

   ,

   DEFAULT_LOGOS

   in

   index.html

   to match
4. Claude also writes the config to

   poster-config.json

5. User refreshes and clicks "Reset" to load new defaults

Programmatic API (window.posterAPI)

Available in the browser console or via Playwright:

• swapCards(id1, id2)

  — swap two cards (works across columns)

• moveCard(cardId, targetColId, position)

  — move a card to a specific position

• setColumnWidth(colId, widthMm)

  — set column width (null for flex)

• setCardHeight(cardId, heightMm)

  — set explicit card height (null to reset)

• setFontScale(scale)

  — set global font scale

• getWaste()

  — measure total whitespace in figure containers

• getLayout()

  — get current layout with rendered dimensions

• getConfig()

  — get full serializable config

• resetLayout()

  — restore defaults

• saveConfig()

  — trigger download of poster-config.json

• copyConfig()

  — copy config JSON to clipboard