hmo
04db423416
- 70 skills with code and documentation - Add .gitignore (ignore __pycache__, output/, temp/, venv/) - Clean up test intermediates and caches
91 lines
4.1 KiB
Markdown
91 lines
4.1 KiB
Markdown
---
|
|
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. |