| 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:
- Dynamic Sidebar TOC: Parses existing headings (h1-h6) and builds a collapsible sidebar navigation tree.
- Theme Switcher: Adds floating buttons to toggle between Light, Dark, and Sepia themes.
- Reading Progress Bar: Adds a top progress bar that updates on scroll.
- 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.
