skills.rest
Within-7
Within-7OFFICIAL
Explore all skills by this author →
GitHub

html-presentation-beautifier

Convert markdown documents into styled HTML presentations with Chart.js charts.

Updated Aug 27, 2026
Search Tags:#automation#HTML#presentation#design-system#Chart.js#McKinsey#data-visualization
One-click install
npx skills add https://github.com/Within-7/minto-plugin-tools --skill html-presentation-beautifier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-presentation-beautifier
Source: https://github.com/Within-7/minto-plugin-tools/tree/main/html-presentation-beautifier/skills/beauty-html
Command: npx skills add https://github.com/Within-7/minto-plugin-tools --skill html-presentation-beautifier

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill transforms documents, reports, and data into polished McKinsey-style HTML presentations, enabling faithful content preservation while ensuring professional design.

Core Features & Use Cases

  • Automated layout & design: Applies McKinsey color palette, typography, spacing, and slide structure to any document.

  • Chart integration: Embeds Chart.js visualizations with data bindings, captions, and interactive features.

  • Phase-based workflow: Supports Phase 1 Parsing, Phase 2 Planning, Phase 3 Design, Phase 4 HTML generation, Phase 5 Review.

  • Self-contained output: Produces a single HTML file with inline CSS/JS and navigation.

  • Example use: Convert a markdown report into a complete HTML presentation with charts and interactive navigation.

Quick Start

Use the html-presentation-beautifier to beautify a source document, producing a standalone HTML presentation file suffix with _beautified.html.

Frequently Asked Questions about html-presentation-beautifier

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a markdown report into an HTML presentation?▼

Yes, you can generate McKinsey-style HTML slides from data-rich analyses. The workflow parses documents and reports, applying a fixed McKinsey color palette, typography, and slide structure to produce professional design presentations.

How does Chart.js integration work in HTML presentations?▼

Chart.js integration embeds interactive visualizations directly into the HTML presentation. The generation process binds data from your source documents to Chart.js charts, including captions and interactive features within the final self-contained HTML file.

Do I need any external dependencies to view the beautified HTML slides?▼

No external dependencies are required to view the beautified HTML slides. The skill produces a single self-contained HTML file with inline CSS and JS, ensuring the McKinsey-style presentation works independently with full navigation.

What is the best way to ensure content integrity when converting documents to slides?▼

The best way to ensure content integrity is using a phase-based workflow that parses, plans, designs, generates, and reviews the source document. This process guarantees faithful content preservation while applying professional design layouts.

Can I use this for data-rich analyses requiring slide decks with charts?▼

Yes, this is designed for data-rich analyses requiring slide decks with charts. It transforms analytical documents into polished presentations by embedding Chart.js visualizations and applying fixed McKinsey styling across all slides.

Related Skills

Explore More Design & Creative Skills→
zhizhunbaozhizhunbao

dev-pptx_to_md

Convert PowerPoint PPTX presentations into Markdown documents.

Community
Basic
kiryteokiryteo
1

interactive-dashboard-builder

Generate self-contained HTML dashboards with Chart.js charts and interactive filters.

Community
Advanced
CopilotKitCopilotKit
1.5k

Advanced Visualization Techniques

Generate interactive HTML/SVG widgets for dashboards and data visualizations.

Official
Advanced
OpenAgentsIncOpenAgentsInc
445

pptx

Create PowerPoint presentations from HTML with pptxgenjs.

Official
Advanced