skills/html-splitter/SKILL.md

name, description

name	description
html-splitter	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.