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

beauty-json

Convert HTML slide templates into structured JSON data models and rendering-ready HTML frameworks.

Updated Aug 27, 2026
Search Tags:#template#HTML#JSON#slides#data-driven#convert#renderer
One-click install
npx skills add https://github.com/Within-7/minto-plugin-tools --skill beauty-json
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: beauty-json
Source: https://github.com/Within-7/minto-plugin-tools/tree/main/html-presentation-beautifier/skills/beauty-json
Command: npx skills add https://github.com/Within-7/minto-plugin-tools --skill beauty-json

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts HTML slide templates into a structured JSON data model and a rendering-ready HTML framework, enabling a data-driven approach to building presentations.

Core Features & Use Cases

  • JSON data extraction: Map content from HTML templates into a standardized JSON schema for slides and metadata.
  • Template generation: Produce JSON-driven templates that render slides consistently with McKinsey-style design across desktop and mobile contexts.
  • Use Case: Convert existing beauty HTML slides to JSON-driven templates for a standardized presentation pipeline or generate new templates from JSON data.

Quick Start

Use the beauty-json workflow to convert an HTML slide template located in beauty-html/assets into a JSON data file and a JSON-driven HTML template. Validate that the generated JSON matches the expected schema and that the HTML template renders correctly in a browser.

Frequently Asked Questions about beauty-json

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

FAQPage Schema
How do I convert HTML slide templates into a JSON data model?▼

To convert HTML slide templates into a JSON data model, this Skill maps content from existing HTML slides into a standardized JSON schema, extracting data while preserving the HTML structure for rendering-ready decks.

What is JSON-driven presentation rendering and when do I need it?▼

JSON-driven presentation rendering separates slide content from HTML templates by enforcing a JSON schema, needed when building standardized, data-driven presentation pipelines for desktop and mobile contexts.

Can I render charts in JSON-driven HTML slide templates?▼

Yes, JSON-driven HTML slide templates can render charts by embedding rendering logic within a Chart.js-enabled, responsive HTML framework that adapts to both desktop and mobile presentation contexts.

How do I validate a generated JSON schema for HTML slide templates?▼

To validate a generated JSON schema for HTML slide templates, check that the extracted JSON matches the expected standardized slide schema and verify the rendering-ready HTML template displays correctly in a browser.

Does this approach support mobile responsive HTML slide presentations?▼

Yes, this approach supports mobile responsive HTML slide presentations by generating JSON-driven templates that render consistently across desktop and mobile contexts using a responsive, Chart.js-enabled HTML framework.

Related Skills

Explore More Design & Creative Skills→
elenaviterelenaviter
14

pptx-press

Convert slide-structured HTML into PPTX presentations with styled layouts and citations.

Community
Intermediate
dmccrearydmccreary
90

chartjs-generator

Generate interactive Chart.js visualizations with HTML, CSS, and documentation packages.

Community
Intermediate
sagarrai21802sagarrai21802
1

responsive-design

Audit and implement responsive design across HTML/CSS and modern frameworks.

Community
Intermediate
Veloxia-agencyVeloxia-agency

ckm:slides

Generate HTML presentation decks from a topic and slide count with Chart.js visualizations.

Community
Advanced