Long Text to Expandable HTML Page
Turn text, documents, or URLs into a standalone HTML page with clear sections, expandable details, and a floating TOC.
Before & after
Same prompt, same agent — the only difference is the skill.
You could format this in a few different ways. Breaking it into sections with headers is a good start. People generally don't read long walls of text on screen, so shorter paragraphs help. You might want to highlight key numbers or takeaways. Some kind of navigation would be good so readers can jump to the parts they care about. Maybe add some visual elements like charts if you have data. Tables are useful for comparisons. You could also think about styling to make it more appealing — colors, fonts, spacing. Different companies have different brand guidelines so you'd want to match your own look. Some people like to have the whole thing in one page, others prefer to expand sections so you can collapse information. It's worth thinking about whether you want a PDF or a web format. Overall readability is the main goal.
HTML DOCUMENT BUILT WITH FULL STYLING FLOATING TABLE OF CONTENTS • Navigation panel anchors to each section; sticky on scroll; collapse on mobile VISUAL HIERARCHY • Headline with key statistic above the fold (Market size: $47B by 2028) • Section cards with expandable subsections (click to reveal details) • Callout boxes pull out critical insights (Background: red, Warning: yellow) DATA ELEMENTS • Embedded comparison table: 6 vendors ranked by adoption, price, and feature set (sortable columns) • Line chart: 10-year market growth trajectory with trend line • Bar chart: Regional breakdown by revenue READABILITY • Paragraph max 3 sentences; bold pull-quotes from source material • Bullet lists with contextual footnotes • Sidebar: Key takeaways repeated per section (reader memory aid) STYLE: Corporate minimalist (light background, blue accent color, serif headings) OUTPUT FORMATS • HTML file auto-opens in browser • One-click PDF export (preserves layout, embeds charts) • Copy link to share read-only version TIME TO DELIVER: 6 minutes (text upload → interactive doc)
About this skill
Your report has useful information, but readers face a wall of text. Turn pasted notes, Markdown, an attached document, or accessible web content into a polished HTML page with a floating contents menu and supporting details readers can expand.
What it does
- Finds the source's natural sections and turns them into a clear reading sequence without silently dropping content.
- Uses cards for repeated entities, tables for real comparisons, and disclosures for supporting evidence.
- Builds a floating table of contents from actual headings, with active-section tracking and working deep links.
- Produces a responsive, self-contained file that remains readable offline and without JavaScript.
- Keeps essential conclusions and caveats visible while making long appendices expandable.
- Adds print styling that exposes supporting details and removes floating navigation.
What you get
A complete HTML file with embedded styling and lightweight behavior, plus a brief note about content changes and verification. When local file access is available, the page can be saved and opened; otherwise, you receive the complete HTML to save yourself.
Best for
Consultants, analysts, coaches, and independent operators turning long reports, research notes, or AI-generated drafts into readable client deliverables.
SKILL.md preview
---
name: long-text-to-expandable-html-page
… (sign up to view the full skill)More productivity skills
View all Productivity skills →Apple-Style UI Engineer
Use when building any new UI component, screen, or page in React + Tailwind from a plain-text description, and the result must look like App
Zapier, Make and n8n Automation Recipe Builder
Designs no-code automations that run unattended: exact trigger, mapped fields, dedupe, error alerts, approvals, and monthly task cost.
AI Productivity System
A complete AI-driven system for planning your day, triaging tasks, and shipping more without burning out.
Daily Standup Writer from Git and Tickets
Turns your commits, PRs, reviews, and ticket moves into a 15-second standup post that never says shipped when it only merged.