posterskill — Academic Poster Generator Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. posterskill is a Claude Code skill that generates print ready, interactive conference posters from your Overleaf paper source. It produces a single self contained HTML file with a built in drag and drop visual editor — no build step, no server required. Installation & Setup Start Claude Code and trigger the skill: Claude will ask for your project website URL and any formatting specs, then generate a poster/ directory with index.html . Directory Structure What Gets Generated The output poster/index.html is a React app (loaded via CDN) containing: CARD REGISTRY — each card's title, color, and JSX body content DEFAULT LAYOUT — column structure and card ordering DEFAULT LOGOS — institutional logos for the header window.posterAPI — programmatic API for layout automation Visual Editor Features Open poster/index.html in Chrome to access the built in editor: Feature How to Use Resize columns Drag column dividers left/right Resize cards Drag row dividers up/down within a column Swap cards Click one diamond handle, then another Move/insert cards Click a handle, then click a drop zone Adjust font size Click A / A+ buttons in toolbar Preview print layout Click Preview button Export layout Click Copy Config to get JSON Programmatic API ( window.posterAPI ) Available in the browser console or via Playwright automation: Iteration Workflow The core loop for refining your poster: 1. Claude generates first draft, opens poster/index.html in your browser 2. You edit in the browser — drag dividers, swap cards, resize columns 3. Click "Copy Config" in the toolbar to export your layout as JSON 4. Paste the JSON back to Claude — it updates DEFAULT LAYOUT in the HTML 5. Repeat until the layout is perfect 6. Print to PDF : File → Print → Margins: None, Background Graphics: On Playwright Automation (used internally by Claude) Claude uses Playwright to automate layout verification. You can use it too: Card Registry Structure Each card in the poster is defined in CARD REGISTRY : Default Layout Structure Inputs Claude Uses Input Where It Comes From Required : Paper content overleaf/ directory Yes Project website URL (asked at runtime) Yes Reference posters references/ .pdf No Author website URL for brand matching No Formatting specs Conference URL or text Asked if missing Logos Auto downloaded to poster/logos/ Auto Common Patterns Adding a custom figure card Then add it to DEFAULT LAYOUT : Logos configuration Printing to PDF In Chrome: 1. Open poster/index.html 2. Click Preview to verify layout 3. Ctrl+P / Cmd+P 4. Set Margins: None 5. Enable Background graphics 6. Set paper size to your conference spec (A0, 36×48in, etc.) 7. Save as PDF Troubleshooting Poster looks different in print vs browser → Use Chrome (not Firefox/Safari). Enable "Background graphics" in print dialog. Figures not loading → Ensure figure paths in the HTML are relative to poster/index.html . Claude copies figures to poster/figures/ — verify the directory exists. Logos not fetched → Claude uses Playwright to download logos from your project website. If it fails, manually copy logo files to poster/logos/ and update DEFAULT LOGOS paths. Layout config not updating after paste → Make sure you paste the full JSON from Copy Config — Claude looks for the complete DEFAULT LAYOUT and DEFAULT LOGOS objects to replace. Font too small/large for poster size → Use posterAPI.setFontScale(1.2) in the browser console, or click A+ / A buttons, then Copy Config and paste to Claude. Whitespace gaps between cards → Run posterAPI.getWaste() in console to quantify. Use posterAPI.setCardHeight('cardId', heightMm) to tune card heights, or drag row dividers manually. Example Output See the [Fillerbuster poster](http://ethanweber.me/fillerbuster poster) ([repo](https://github.com/ethanweber/fillerbuster poster)) as a live example of posterskill output.

posterskill-academic-posters