Can I use this for bulk slide generation?

Absolutely; by separating content into JSON, you can automate the creation of hundreds of slides from a single structural template.

What design style does this skill follow?

The skill is specifically optimized for professional, McKinsey-style business presentation layouts, ensuring high-quality aesthetic output.

What is the main purpose of the Beauty-JSON skill?

It converts static HTML slide templates into a separated JSON data and HTML framework structure to enable dynamic, programmatic rendering.

Which HTML slide types are supported?

It supports cover pages, tables of contents, multi-column comparisons, card grids, chapter overviews, and various data analysis layouts.

Does it support charts and data visualizations?

Yes, it includes specific structural support for Chart.js configurations and specialized data-emphasis layouts for business metrics.

Beauty-JSON HTML Slide Converter

Name: Beauty-JSON HTML Slide Converter
Author: Within-7

byWithin-7

•

コンテンツ管理

Converts static HTML slide templates into dynamic, data-driven JSON+HTML formats for professional presentations.

Beauty-JSON is a specialized Claude Code Skill designed to decouple presentation content from layout structure in HTML slide templates. It automates the extraction of professional McKinsey-style frameworks from static files, generating standardized JSON data structures and corresponding rendering logic. This skill is essential for developers and analysts who need to programmatically generate or update sophisticated HTML presentations while maintaining consistent styling, complex multi-column layouts, and interactive Chart.js visualizations.

主な機能

01Supports diverse slide layouts including covers, TOCs, comparisons, and data-heavy charts

02Provides a unified JSON schema for presentation metadata, slide types, and content metrics

03Extracts structural HTML frameworks while isolating content into standardized JSON objects

04Generates McKinsey-style CSS and JavaScript rendering functions for dynamic content injection

051 GitHub stars

06Automates Chart.js integration for data-driven visualization slides

ユースケース

01Converting static HTML slide collections into reusable, data-driven templates

02Automating the generation of professional business reports from JSON data sources

03Building dynamic, interactive web presentations with complex data-emphasis components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add within-7/minto-plugin-tools beauty-json

For use in Claude.ai and ChatGPT

Download Skill