name	marp-html-to-png
description	Create HTML diagrams for Marp slides and capture them as PNG screenshots using Playwright MCP

Marp HTML to PNG Skill

Overview

This skill helps create interactive HTML diagrams for Marp presentations and converts them to PNG screenshots using Playwright MCP. HTML files are created in application/marp/src/html/ and screenshots are saved to application/marp/src/assets/.

When to Use

User needs to create visual diagrams for Marp slides
User wants to convert HTML/CSS diagrams to static images
User requests comparison charts, flowcharts, or interactive visualizations for presentations
User needs to update existing HTML diagrams and regenerate screenshots

Workflow

Step 1: Create HTML Diagram

HTML files should be saved to application/marp/src/html/ with the following template structure:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>図解タイトル</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['"Hiragino Sans"', '"ヒラギノ角ゴシック"', '"Yu Gothic"', '"游ゴシック"', '"Noto Sans JP"', 'sans-serif']
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 min-h-screen flex items-center justify-center font-sans overflow-hidden">
    <!-- Diagram content -->
</body>
</html>

Naming Convention: Use snake_case for HTML files (e.g., fullscreen_comparison.html, pdca_cycle.html)

Step 2: Open HTML File in Browser

Use Playwright MCP to navigate to the local HTML file:

file:///home/node/workspace/application/marp/src/html/[filename].html

Browser Resize (IMPORTANT - Follow Marp Image Size Guideline):

Default: Width: 1100px, Height: 550px (Safe area size - recommended)
Alternative: Width: 1216px, Height: 582px (Full content area)
Reference: docs/spec/marp/image-size-guideline.md

Step 3: Take Screenshot

Use the mcp__playwright__browser_take_screenshot tool with:

filename: application/marp/src/assets/[diagram-name].png
type: png

IMPORTANT: After taking screenshot, ALWAYS move from .playwright-mcp/application/marp/src/assets/ to application/marp/src/assets/ using:

mv /home/node/workspace/.playwright-mcp/application/marp/src/assets/[diagram-name].png /home/node/workspace/application/marp/src/assets/[diagram-name].png

Step 4: Use in Marp Slides

Reference the screenshot in Marp markdown:

![図解タイトル](src/assets/diagram-name.png)

Design Guidelines

Recommended Sizes (Follow Marp Image Size Guideline)

IMPORTANT: All HTML diagrams should be designed to fit within Marp's safe area size.

Recommended (Default): 1100px × 550px (Safe area size)
- Use this for most diagrams
- Set HTML body to: width: 1100px; height: 550px;
- Browser viewport: 1100px × 550px
Full Content Area: 1216px × 582px
- Use only when you need maximum space
- Set HTML body to: width: 1216px; height: 582px;
- Browser viewport: 1216px × 582px
Reference: docs/spec/marp/image-size-guideline.md

Background Styles

Light Background:

<body class="bg-white min-h-screen p-8">

Dark Gradient Background:

<body class="bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 min-h-screen flex items-center justify-center">

Font Sizes

Title: text-6xl (60px)
Subtitle: text-4xl (36px)
Body: text-2xl (24px)
Small: text-xl (20px)

Color Palette

Success/Positive: green-500, green-300
Warning/Negative: red-500, red-300
Info: blue-500, blue-300
Highlight: yellow-400, orange-500

Examples

Example 1: Comparison Diagram

Existing Reference: application/marp/src/html/fullscreen_comparison.html

Features:

2-column layout (Before vs After)
Dark gradient background
Icons with bullet points
Circular progress meters

Example 2: PDCA Cycle

Existing Reference: application/marp/src/html/pdca_cycle.html