typora-html-enhancer

name	typora-html-enhancer
description	Upgrades Typora-exported HTML files with a responsive sidebar TOC, multi-theme switching (Light/Dark/Sepia), a reading progress bar, and mobile layout optimizations. Use when the user wants to beautify, format, or enhance a Typora or Markdown HTML export.

Typora HTML Enhancer Skill

This skill automatically upgrades static HTML files, especially those exported from Typora, by injecting a set of modern UI enhancements:

1. Dynamic Sidebar TOC: Parses existing headings (h1-h6) and builds a collapsible sidebar navigation tree.
2. Theme Switcher: Adds floating buttons to toggle between Light, Dark, and Sepia themes.
3. Reading Progress Bar: Adds a top progress bar that updates on scroll.
4. Mobile Responsiveness: Optimizes padding and layout for screens under 768px.

Architecture: Progressive Disclosure and Context Protection

CRITICAL NOTE FOR AGENT: This skill is strictly designed following the Progressive Disclosure principle to protect the context window.

• UI code (CSS, JavaScript, and HTML snippets) is separated under the assets/ directory: styles.css, script.js, and ui.html.
• DO NOT read the target HTML file or files under assets/ into the AI context.
• The enhancement is performed by the deterministic Node.js script scripts/enhance_html.js, which avoids context bloat when modifying large HTML files.

How to Use

When the user asks to enhance, format, or add styles to an HTML file, run the enhance_html.js script on the target file.

Step 1: Run the Script

Execute the bundled Node.js script with the shell command tool. Pass the absolute path of the target HTML file as the argument.

node <path-to-skill-directory>/scripts/enhance_html.js <absolute-path-to-target.html>

Step 2: Verify

Confirm that the script output says Successfully enhanced. The target HTML file is modified in-place and is ready to view.