html-strategic-ppt

Generate a single-file HTML presentation with React, Recharts, and Tailwind CSS.

1|Updated Jan 17, 2026
One-click install
npx skills add https://github.com/juandaniel190/personal-projects --skill html-strategic-ppt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-strategic-ppt
Source: https://github.com/juandaniel190/personal-projects/tree/main/.claude/.claude_backup/skills/documents/html-strategic-ppt
Command: npx skills add https://github.com/juandaniel190/personal-projects --skill html-strategic-ppt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of self-contained, interactive, McKinsey-style presentations as single HTML files, eliminating the need for servers or build steps.

Core Features & Use Cases

  • Single-File HTML Output: Generates a standalone HTML file that can be opened directly in any browser.
  • React & Recharts Integration: Leverages React for dynamic components and Recharts for interactive data visualizations.
  • McKinsey-Style Structure: Adheres to a proven presentation structure with insight-led titles, card-based layouts, and contextual annotations.
  • Use Case: Quickly generate a strategic business review presentation with embedded charts and data, ready to be shared instantly via email or a simple link.

Quick Start

Use the html-strategic-ppt skill to create a presentation about Q3 performance using the provided data.

Frequently Asked Questions about html-strategic-ppt

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

FAQPage Schema
How do I create an interactive HTML presentation with embedded charts without a server?

You can generate a self-contained HTML presentation using React, Recharts, and Tailwind CSS. This approach embeds interactive data visualizations and structural layouts directly into a single file, which opens instantly in any browser without server dependencies.

What is a McKinsey-style presentation structure for data visualization?

A McKinsey-style presentation uses insight-led titles, card-based layouts, and contextual annotations to frame data visualizations. This structure ensures strategic context is immediately visible around interactive charts, guiding the audience through business logic and findings.

Can I use Recharts and React to build a single-file presentation?

Yes, you can leverage React for dynamic components and Recharts for interactive data visualizations within a single-file HTML presentation. The output is a standalone document that can be shared via email or a link, requiring no build steps to view.

How do I embed strategic data into a shareable HTML presentation?

You embed strategic data by generating a standalone HTML file where data points are directly integrated into Recharts components. This creates an interactive presentation file that encapsulates all visual and structural elements without needing external database connections.

Does this HTML presentation approach support a phased action plan layout?

Yes, the HTML presentation generation supports a phased action plan layout alongside interactive charts. It structures strategic business reviews by embedding data visualizations and sequential action steps into a single, self-contained document.

What are the limitations of generating McKinsey-style presentations as standalone HTML files?

While the single-file HTML output eliminates server dependencies and build steps, it relies entirely on client-side rendering for React and Recharts components. Extremely large datasets may impact browser performance when embedded directly into the standalone presentation file.