# Generate Semantic HTML From PDF Pages

PDF page recreation often loses structure, hierarchy, and exact text boundaries. This skill guides Claude, Codex, or Claude Code to produce semantic HTML from image, text, and layout inputs.

## Install

```bash
npx skillstore add abejitsu/ai-html-generate
```

## Metadata

- Status: approved
- Slug: abejitsu-ai-html-generate
- Skillstore revision: r1
- Version status: missing
- Tree hash: a36cca2b99bb5182c9d87bd86ca9bf203ae3ec055914f29a058ca790d1aeb6d9
- Author: AbeJitsu
- GitHub username: AbeJitsu
- License: MIT
- Repository: https://github.com/AbeJitsu/Game-Settings-Panel/tree/main/.claude/skills/calypso/ai-html-generate
- Ref: 7db9b9f06e0ab79c575b58bc48c4d8dc9849f424
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, filesystem
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/abejitsu-ai-html-generate
- Manifest: https://skillstore.pages.dev/api/skills/abejitsu-ai-html-generate/manifest

## Capabilities

- Uses a PNG page image as a visual layout reference.
- Uses extracted JSON text data to preserve page content accurately.
- Uses an ASCII preview to infer structure and element relationships.
- Specifies semantic HTML5 elements, heading hierarchy, lists, tables, and figures.
- Requires exact page boundary preservation to reduce invented text.
- Defines validation checks for text coverage and HTML structure.

## Use Cases

- Convert textbook pages: Create semantic HTML pages from textbook page images and extracted text while preserving page boundaries.
- Prepare accessible document markup: Generate HTML with headings, lists, figures, and tables that is easier to validate for accessibility.
- Build a validation pipeline: Use AI for first-pass HTML generation, then pass results to deterministic structure and text checks.

## Prompt Templates

### Generate one page

```
Use the ai-html-generate skill for page 6. Use the PNG image, rich extraction JSON, and ASCII preview. Return semantic HTML5 only.
```

### Preserve exact text

```
Generate HTML for this page and preserve every word from the extraction JSON. Do not add bridging text, captions, or missing sentence endings.
```

### Handle a chapter opening page

```
Generate semantic HTML for this chapter opening page. Include the chapter header, navigation list, section divider, and correct heading hierarchy.
```

### Regenerate after validation failure

```
Regenerate the page HTML because text coverage failed. Compare the HTML against the extraction JSON and remove any words not present in the source.
```

## Limitations

- It is a prompting workflow, not a complete converter by itself.
- Generated HTML still needs deterministic validation before publishing.
- Visual accuracy depends on the quality of the source PNG and extracted text.
- Complex tables or figures may require manual review after generation.

## Best Practices

- Provide all three inputs for each page: image, extracted JSON, and ASCII preview.
- Run text coverage validation immediately after each page is generated.
- Regenerate pages that contain invented text or miss large sections.

## Anti Patterns

- Do not consolidate pages before each page passes text verification.
- Do not ask the model to complete broken sentences across page boundaries.
- Do not rely on visual appearance alone when extracted text data is available.

## Security Audit

- Audited at: 2026-07-09T01:13:24.052\+00:00
- Summary: All static findings were reviewed against SKILL.md and appear to be false positives from Markdown examples, static HTML snippets, or documented file paths. No prompt injection, data exfiltration intent, command execution instruction, or malicious semantic behavior was found.

## Stats

- Views: 245
- Downloads: 14
- Favorites: 1
- Popularity score: 0