— name: pptx-posters description: "Create research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration." allowed-tools: [Read, Write, Edit, Bash] — # PPTX Research Posters (HTML-Based) ## Overview **⚠️ USE THIS SKILL ONLY WHEN USER EXPLICITLY REQUESTS PPTX/POWERPOINT POSTER FORMAT.** For standard research posters, use the **latex-posters** skill instead, which provides better typographic control and is the default for academic conferences. This skill creates research posters using HTML/CSS, which can then be exported to PDF or converted to PowerPoint format. The web-based approach offers: – Modern, responsive layouts – Easy integration of AI-generated visuals – Quick iteration and preview in browser – Export to PDF via browser print function – Conversion to PPTX if specifically needed ## When to Use This Skill **ONLY use this skill when:** – User explicitly requests "PPTX poster", "PowerPoint poster", or "PPT poster" – User specifically asks for HTML-based poster – User needs to edit poster in PowerPoint after creation – LaTeX is not available or user requests non-LaTeX solution **DO NOT use this skill when:** – User asks for a "poster" without specifying format → Use latex-posters – User asks for "research poster" or "conference poster" → Use latex-posters – User mentions LaTeX, tikzposter, beamerposter, or baposter → Use latex-posters ## AI-Powered Visual Element Generation **STANDARD WORKFLOW: Generate ALL major visual elements using AI before creating the HTML poster.** This is the recommended approach for creating visually compelling posters: 1. Plan all visual elements needed (hero image, intro, methods, results, conclusions) 2. Generate each element using scientific-schematics or Nano Banana Pro 3. Assemble generated images in the HTML template 4. Add text content around the visuals **Target: 60-70% of poster area should be AI-generated visuals, 30-40% text.** — ### CRITICAL: Poster-Size Font Requirements **⚠️ ALL text within AI-generated visualizations MUST be poster-readable.** When generating graphics for posters, you MUST include font size specifications in EVERY prompt. Poster graphics are viewed from 4-6 feet away, so text must be LARGE. **MANDATORY prompt requirements for EVERY poster graphic:** “` POSTER FORMAT REQUIREMENTS (STRICTLY ENFORCE): – ABSOLUTE MAXIMUM 3-4 elements per graphic (3 is ideal) – ABSOLUTE MAXIMUM 10 words total in the entire graphic – NO complex workflows with 5+ steps (split into 2-3 simple graphics instead) – NO multi-level nested diagrams (flatten to single level) – NO case studies with multiple sub-sections (one key point per case) – ALL text GIANT BOLD (80pt+ for labels, 120pt+ for key numbers) – High contrast ONLY (dark on white OR white on dark, NO gradients with text) – MANDATORY 50% white space minimum (half the graphic should be empty) – Thick lines only (5px+ minimum), large icons (200px+ minimum) – ONE SINGLE MESSAGE per graphic (not 3 related messages) “` **⚠️ BEFORE GENERATING: Review your prompt and count elements** – If your description has 5+ items → STOP. Split into multiple graphics – If your workflow has 5+ stages → STOP. Show only 3-4 high-level steps – If your comparison has 4+ methods → STOP. Show only top 3 or Our vs Best Baseline **Example – WRONG (7-stage workflow):** “`bash # ❌ Creates tiny unreadable text python scripts/generate_schematic.py "Drug discovery workflow: Stage 1 Target ID, Stage 2 Synthesis, Stage 3 Screening, Stage 4 Lead Opt, Stage 5 Validation, Stage 6 Clinical Trial, Stage 7 FDA Approval with metrics." -o figures/workflow.png “` **Example – CORRECT (3 mega-stages):** “`bash # ✅ Same content, simplified to readable poster format python scripts/generate_schematic.py "POSTER FORMAT for A0. ULTRA-SIMPLE 3-box workflow: 'DISCOVER' → 'VALIDATE' → 'APPROVE'. Each word in GIANT bold (120pt+). Thick arrows (10px). 60% white space. ONLY these 3 words. NO substeps. Readable from 12 feet." -o figures/workflow_simple.png “` — ### CRITICAL: Preventing Content Overflow **⚠️ POSTERS MUST NOT HAVE TEXT OR CONTENT CUT OFF AT EDGES.** **Prevention Rules:** **1. Limit Content Sections (MAXIMUM 5-6 sections):** “` ✅ GOOD – 5 sections with room to breathe: – Title/Header – Introduction/Problem – Methods – Results (1-2 key findings) – Conclusions ❌ BAD – 8+ sections crammed together “` **2. Word Count Limits:** – **Per section**: 50-100 words maximum – **Total poster**: 300-800 words MAXIMUM – **If you have more content**: Cut it or make a handout — ## Core Capabilities ### 1. HTML/CSS Poster Design The HTML template (`assets/poster_html_template.html`) provides: – Fixed poster dimensions (36×48 inches = 2592×3456 pt) – Professional header with gradient styling – Three-column content layout – Block-based sections with modern styling – Footer with references and contact info ### 2. Poster Structure **Standard Layout:** “` ┌─────────────────────────────────────────┐ │ HEADER: Title, Authors, Hero Image │ ├─────────────┬─────────────┬─────────────┤ │ Introduction│ Results │ Discussion │ │ │ │ │ │ Methods │ (charts) │ Conclusions │ │ │ │ │ │ (diagram) │ (data) │ (summary) │ ├─────────────┴─────────────┴─────────────┤ │ FOOTER: References & Contact Info │ └─────────────────────────────────────────┘ “` ### 3. Visual Integration Each section should prominently feature AI-generated visuals: **Hero Image (Header):** “`html <img src="figures/hero.png" class="hero-image"> “` **Section Graphics:** “`html <div class="block"> <h2 class="block-title">Methods</h2> <div class="block-content"> <img src="figures/workflow.png" class="block-image"> <ul> <li>Brief methodology point</li> </ul> </div> </div> “` ### 4. Generating Visual Elements **Before creating the HTML, generate all visual elements:** “`bash # Create figures directory mkdir -p figures # Hero image – SIMPLE, impactful python scripts/generate_schematic.py "POSTER FORMAT for A0. Hero banner: '[TOPIC]' in HUGE text (120pt+). Dark blue gradient background. ONE iconic visual. Minimal text. Readable from 15 feet." -o figures/hero.png # Introduction visual – ONLY 3 elements python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE visual with ONLY 3 icons: [icon1] → [icon2] → [icon3]. ONE word labels (80pt+). 50% white space. Readable from 8 feet." -o figures/intro.png # Methods flowchart – ONLY 4 steps python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE flowchart with ONLY 4 boxes: STEP1 → STEP2 → STEP3 → STEP4. GIANT labels (100pt+). Thick arrows. 50% white space. NO sub-steps." -o figures/workflow.png # Results visualization – ONLY 3 bars python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE bar chart with ONLY 3 bars: BASELINE (70%), EXISTING (85%), OURS (95%). GIANT percentages ON bars (120pt+). NO axis, NO legend. 50% white space." -o figures/results.png # Conclusions – EXACTLY 3 key findings python scripts/generate_schematic.py "POSTER FORMAT for A0. EXACTLY 3 cards: '95%' (150pt) 'ACCURACY' (60pt), '2X' (150pt) 'FASTER' (60pt), checkmark 'READY' (60pt). 50% white space. NO other text." -o figures/conclusions.png “` — ## Workflow for PPTX Poster Creation ### Stage 1: Planning 1. **Confirm PPTX is explicitly requested** 2. **Determine poster requirements:** – Size: 36×48 inches (most common) or A0 – Orientation: Portrait (most common) 3. **Develop content outline:** – Identify 1-3 core messages – Plan 3-5 visual elements – Draft minimal text (300-800 words total) ### Stage 2: Generate Visual Elements (AI-Powered) **CRITICAL: Generate SIMPLE figures with MINIMAL content.** “`bash mkdir -p figures # Generate each element with POSTER FORMAT specifications # (See examples in Section 4 above) “` ### Stage 3: Create HTML Poster 1. **Copy the template:** “`bash cp skills/pptx-posters/assets/poster_html_template.html poster.html “` 2. **Update content:** – Replace placeholder title and authors – Insert AI-generated images – Add minimal supporting text – Update references and contact info 3. **Preview in browser:** “`bash open poster.html # macOS # or xdg-open poster.html # Linux “` ### Stage 4: Export to PDF **Browser Print Method:** 1. Open poster.html in Chrome or Firefox 2. Print (Cmd/Ctrl + P) 3. Select "Save as PDF" 4. Set paper size to match poster dimensions 5. Remove margins 6. Enable "Background graphics" **Command Line (if Chrome available):** “`bash # Chrome headless PDF export google-chrome –headless –print-to-pdf=poster.pdf \ –print-to-pdf-no-header \ –no-margins \ poster.html “` ### Stage 5: Convert to PPTX (If Required) **Option 1: PDF to PPTX conversion** “`bash # Using LibreOffice libreoffice –headless –convert-to pptx poster.pdf # Or use online converters for simple cases “` **Option 2: Direct PPTX creation with python-pptx** “`python from pptx import Presentation from pptx.util import Inches, Pt prs = Presentation() prs.slide_width = Inches(48) prs.slide_height = Inches(36) slide = prs.slides.add_slide(prs.slide_layouts[6]) # Blank # Add images from figures/ slide.shapes.add_picture("figures/hero.png", Inches(0), Inches(0), width=Inches(48)) # … add other elements prs.save("poster.pptx") “` — ## HTML Template Structure The provided template (`assets/poster_html_template.html`) includes: ### CSS Variables for Customization “`css /* Poster dimensions */ body { width: 2592pt; /* 36 inches */ height: 3456pt; /* 48 inches */ } /* Color scheme – customize these */ .header { background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 50%, #3182ce 100%); } /* Typography */ .poster-title { font-size: 108pt; } .authors { font-size: 48pt; } .block-title { font-size: 52pt; } .block-content { font-size: 34pt; } “` ### Key Classes | Class | Purpose | Font Size | |——-|———|———–| | `.poster-title` | Main title | 108pt | | `.authors` | Author names | 48pt | | `.affiliations` | Institutions | 38pt | | `.block-title` | Section headers | 52pt | | `.block-content` | Body text | 34pt | | `.key-finding` | Highlight box | 36pt | — ## Quality Checklist ### Step 0: Pre-Generation Review (MANDATORY) **For EACH planned graphic, verify:** – [ ] Can describe in 3-4 items or less? (NOT 5+) – [ ] Is it a simple workflow (3-4 steps, NOT 7+)? – [ ] Can describe all text in 10 words or less? – [ ] Does it convey ONE message (not multiple)? **Reject these patterns:** – ❌ "7-stage workflow" → Simplify to "3 mega-stages" – ❌ "Multiple case studies" → One case per graphic – ❌ "Timeline 2015-2024 annual" → "ONLY 3 key years" – ❌ "Compare 6 methods" → "ONLY 2: ours vs best" ### Step 2b: Post-Generation Review (MANDATORY) **For EACH generated figure at 25% zoom:** **✅ PASS criteria (ALL must be true):** – [ ] Can read ALL text clearly – [ ] Count: 3-4 elements or fewer – [ ] White space: 50%+ empty – [ ] Understand in 2 seconds – [ ] NOT a complex 5+ stage workflow – [ ] NOT multiple nested sections **❌ FAIL criteria (regenerate if ANY true):** – [ ] Text small/hard to read → Regenerate with "150pt+" – [ ] More than 4 elements → Regenerate "ONLY 3 elements" – [ ] Less than 50% white space → Regenerate "60% white space" – [ ] Complex multi-stage → SPLIT into 2-3 graphics – [ ] Multiple cases cramped → SPLIT into separate graphics ### After Export – [ ] NO content cut off at ANY of the 4 edges (check carefully) – [ ] All images display correctly – [ ] Colors render as expected – [ ] Text readable at 25% scale – [ ] Graphics look SIMPLE (not like complex 7-stage workflows) — ## Common Pitfalls to Avoid **AI-Generated Graphics Mistakes:** – ❌ Too many elements (10+ items) → Keep to 3-5 max – ❌ Text too small → Specify "GIANT (100pt+)" in prompts – ❌ No white space → Add "50% white space" to every prompt – ❌ Complex flowcharts (8+ steps) → Limit to 4-5 steps **HTML/Export Mistakes:** – ❌ Content exceeding poster dimensions → Check overflow in browser – ❌ Missing background graphics in PDF → Enable in print settings – ❌ Wrong paper size in PDF → Match poster dimensions exactly – ❌ Low-resolution images → Use 300 DPI minimum **Content Mistakes:** – ❌ Too much text (over 1000 words) → Cut to 300-800 words – ❌ Too many sections (7+) → Consolidate to 5-6 – ❌ No clear visual hierarchy → Make key findings prominent — ## Integration with Other Skills This skill works with: – **Scientific Schematics**: Generate all poster diagrams and flowcharts – **Generate Image / Nano Banana Pro**: Create stylized graphics and hero images – **LaTeX Posters**: DEFAULT skill for poster creation (use this instead unless PPTX explicitly requested) — ## Template Assets Available in `assets/` directory: – `poster_html_template.html`: Main HTML poster template (36×48 inches) – `poster_quality_checklist.md`: Pre-submission validation checklist ## References Available in `references/` directory: – `poster_content_guide.md`: Content organization and writing guidelines – `poster_design_principles.md`: Typography, color theory, and visual hierarchy – `poster_layout_design.md`: Layout principles and grid systems