---
name: html-splitter
description: This skill splits HTML files containing tables into multiple smaller HTML files based on content logic, then converts each to high-resolution PNG. The skill maintains individual table integrity while organizing content into 4-6 logical sections, generating both white background and transparent background PNGs at 500% resolution.
---

# HTML Splitter Skill

This skill handles the workflow of splitting HTML files containing tables into multiple smaller HTML files based on content logic, then converting each to high-resolution PNG. The skill keeps individual tables intact while organizing content into 4-6 logical sections.

## Purpose

When provided with an HTML file containing multiple tables (especially long table collections like award lists, competition results, or data reports), this skill will:
1. Analyze the content structure and identify logical splitting points
2. Generate 4-6 separate HTML files based on content themes while keeping tables complete
3. Convert each HTML file to high-resolution PNG (500% zoom)
4. Generate both white background and transparent background versions for each PNG

## When to Use

This skill should be used when:
- You have a long HTML file with multiple tables that needs to be split into manageable sections
- You need to convert HTML tables to high-resolution PNG images for printing or digital use
- You want both white background and transparent background versions of the output
- You need to maintain the integrity of individual tables while organizing content logically

## How to Use

### Input Requirements
- An HTML file containing tables with consistent styling
- Tables should have semantic structure (headings, table elements, etc.) to identify logical groupings

### Processing Steps
1. **Analyze Structure**: Identify content sections based on headings, table types, and logical groupings
2. **Split Logic**: Divide content into 4-6 sections based on:
   - Similar types of competitions/results
   - Related content themes
   - Balanced content amounts per section
   - Keeping individual tables completely intact
3. **Maintain Styling**: Preserve original CSS styling in each split file
4. **Generate PNGs**: Convert each HTML section to 500% resolution PNG
5. **Create Variants**: Generate both white background and transparent background versions

### Output Structure
The skill creates organized output in this structure:
```
split-output/
├── section-1.html/png (first content section)
├── section-2.html/png (second content section)  
├── section-3.html/png (third content section)
├── section-4.html/png (fourth content section)
├── section-5.html/png (fifth content section, if needed)
└── section-6.html/png (sixth content section, if needed)
```

Each section includes both:
- `{section}_500原图.png` - White background version
- `{section}_500透明.png` - Transparent background version

### Technical Specifications
- **Resolution**: 500% zoom for high-quality printing
- **Table Integrity**: Individual tables are never split across sections
- **Content Logic**: Grouping based on semantic meaning (competition types, years, categories)
- **Styling Preservation**: Original CSS and formatting maintained in each split file
- **Background Options**: Both white and transparent background PNG variants

### Best Practices
- Ensure original HTML has semantic structure (proper headings, table groupings) for optimal splitting
- Review content logic to confirm sections make sense for your use case
- Verify that individual tables remain intact in the output
- Check that table formatting is preserved in the PNG output

## References

This skill does not include any reference files in the `references/` directory.

## Scripts

This skill includes the following script:

- `html_splitter.py`: Main script that handles HTML splitting and PNG generation

The script can be run with:
```
python scripts/html_splitter.py <input_html_file> [-o output_dir]
```

This will generate split HTML files and corresponding PNGs (both white background and transparent) in the output directory.

## Assets

This skill does not include any asset files in the `assets/` directory.