메뉴
Turn any document, proposal, report, or outline into a stunning single-file HTML presentation using 34 pre-built professional templates. Use when the user wants to convert a markdown file, proposal, or written content into a beautiful visual HTML document ready to share or convert to PDF.
| name | beautiful-html |
| description | Turn any document, proposal, report, or outline into a stunning single-file HTML presentation using 34 pre-built professional templates. Use when the user wants to convert a markdown file, proposal, or written content into a beautiful visual HTML document ready to share or convert to PDF. |
Convert any written content into a polished, single-file HTML presentation using templates from the beautiful-html-templates library.
34 templates available. Key ones by use case:
Full list of all 34 templates at: https://github.com/zarazhangrui/beautiful-html-templates
Ask the user:
If a file path is provided, read it. If it's a markdown proposal, parse it into sections.
Based on the purpose and audience, recommend 3 templates from the library above with a one-line reason for each. Show them as options (A, B, C).
For professional B2B proposals → default recommend blue-professional, signal, cartesian.
For research/reports → default recommend monochrome, vellum, cartesian.
For creative/agency → default recommend studio, editorial-forest, cobalt-grid.
Wait for the user to pick one — or auto-select if they say "you choose."
Use WebFetch to retrieve the raw HTML template from GitHub:
WebFetch: https://raw.githubusercontent.com/zarazhangrui/beautiful-html-templates/main/templates/<template-name>/template.html
Read the template structure carefully:
Map the user's content onto the template's slide layouts:
Mapping rules:
Content rules:
Replace all placeholder text in the template HTML with the user's actual content. Preserve all CSS, JS, navigation, and structure — only change the text content and optionally adjust CSS color variables if needed to better match the client's brand.
Save the populated HTML file with a descriptive filename (e.g. sb-ai-proposal.html).
Offer to:
npx playwright install chromium --with-deps
node -e "
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1280, height: 720 });
await page.goto('file://' + require('path').resolve('<filename>.html'));
const slideCount = await page.evaluate(() => document.querySelectorAll('.slide').length);
await page.pdf({
path: '<filename>.pdf',
width: '1280px',
height: '720px',
printBackground: true,
pageRanges: '1-' + slideCount
});
await browser.close();
console.log('Saved: <filename>.pdf');
})();
"
Templates from beautiful-html-templates by Zara Zhang Rui. MIT licensed.
UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Generate a complete, ready-to-share HTML presentation explaining Claude Code, Skills, Sub Agents, Hooks, and Multi-Agent Systems — designed for product managers. Outputs a single zero-dependency HTML file in Bold Signal style (dark, orange accents). Use when someone wants a polished explainer deck for Claude Code concepts.
Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file. Use when the user wants to build a presentation, convert a PPT to web format, or create slides for a talk, pitch, or demo. Shows 3 visual style previews before building the full deck — no design experience needed.
Run a pre-deploy checklist before pushing to Vercel or Fly.io. Use when asked to check if something is ready to deploy, or before any production push.
Evaluate any Skill by scoring its output against ground truth. Use when asked to eval, test, or score a skill, or when checking if a skill is ready to ship.
Takes one or more YouTube video URLs, visits each page using Brave MCP, extracts chapters/timestamps, key moments, and top comments, and produces a structured highlight report. Use when the user wants to find the best parts of a video without watching the whole thing.