pptx: Add direct PptxGenJS reference and design constraints

[spm1001]

Summary

Adds guidance for when html2pptx doesn't provide enough control over positioning.

Problem: The pptx skill covers html2pptx (great for standard layouts) but doesn't address what to do when you need fine-grained coordinate control - calculated positions, collision detection, algorithmic placement.

Solution: Document the "escape hatch" to direct PptxGenJS with the gotchas learned the hard way.

Changes

SKILL.md

• "Choosing Your Approach" decision table - Routes users to the right workflow
• "Design Constraints" section - Cross-cutting principles (stay on-palette, minimize objects, validate visually)
• Visual Details Options moved to reference file (frees ~45 lines)

New: references/direct-pptxgenjs.md (~140 lines)

• When to use direct control vs html2pptx
• Object minimization principle - One rich object beats layered simple objects (text box with border, not shape + text overlay)
• API gotchas:
  • inset not margin for internal padding (fails silently!)
  • autoFit vs shrinkText for text overflow
  • Borders on text boxes via line property
• Text dimension estimation for sizing boxes
• Visual validation workflow (render → inspect → adjust)
• SVG prototyping pattern for faster iteration on coordinate work

New: references/visual-details-options.md

• Content moved from SKILL.md (geometric patterns, borders, typography options)

Context

Based on building a 59-slide presentation with Fibonacci spiral-arranged quote boxes. html2pptx couldn't handle the algorithmic placement, so I dropped to direct PptxGenJS and discovered these gotchas through trial and error (including unzipping .pptx files to inspect the XML).

Result

SKILL.md reduced from 500 to 458 lines while adding new functionality via progressive disclosure.

Test plan

• Verify links to reference files work
• Verify line count is under 500
• Test with Claude creating a presentation requiring coordinate control