ai-html-generatelisted

# AI HTML Generate Skill ## Purpose This skill leverages **AI's probabilistic generation capabilities** to recreate PDF pages as semantic HTML. The AI receives three complementary inputs that together provide complete context: 1. **Visual reference** (PNG image) - Page layout and visual hierarchy 2. **Text data** (rich_extraction.json) - Accurate text content and formatting metadata 3. **Structural preview** (ASCII text) - Logical layout and element relationships This **three-input approach** ensures the AI understands not just what text to include, but how it should be structured semantically in HTML. The output is **probabilistic** (AI-generated), but will be made **deterministic** by validation gates in subsequent skills. ## What to Do 1. **Prepare three input files** - Load `02_page_XX.png` (image file) - Load `01_rich_extraction.json` (text spans with metadata) - Load `03_page_XX_ascii.txt` (structure preview) 2. **Construct AI prompt** - Attach PNG image as visual reference - Include extracted text data (JSON) - Include ASCII preview (text representation) - Provide specific generation requirements 3. **Invoke Claude API** with complete context - Send multi-modal prompt (text + image) - Request semantic HTML5 output - Specify CSS classes and structure requirements 4. **Parse and save generated HTML** - Extract HTML from AI response - Validate basic well-formedness - Save to persistent file with metadata 5. **Log generatio