---
name: html-to-png
description: Save an HTML file as a PNG image using playwright-cli.
argument-hint: "Path to the input HTML file"
---

# HTML to PNG Screenshot Skill

Use this skill to convert an HTML file into a PNG image by capturing a full-page screenshot using `playwright-cli`.

## Implementation Flow (For Windows)

1.  **Verify Argument**:
    -   Ensure an input HTML file path is provided as the argument.
    -   If no argument is provided, prompt the user for the input HTML file path.

2.  **Resolve Paths**:
    -   Determine the absolute path of the input HTML file.
    -   Construct the file URL (e.g., `file:///C:/path/to/file.html` on Windows, or `file:///path/to/file.html` on Unix). Make sure to replace any backslashes `\` with forward slashes `/`.
    -   Determine the output PNG file path. The output file must be saved in the same directory as the input HTML file, with the file extension changed from `.html` to `.png`.

3.  **PowerShell Oneliner Template**

    ```powershell
    $env:PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS="1"; npx.cmd --no playwright-cli -s=workflow open "<input_path>"; npx.cmd --no playwright-cli -s=workflow screenshot --full-page --filename="<output_path>"; npx.cmd --no playwright-cli -s=workflow close
    ```

4.  **Verify Output**:
    -   Verify that the output PNG file has been successfully created at the target path.

## Alternative Implementation Flow

1.  **Verify Argument**:
    -   Ensure an input HTML file path is provided as the argument.
    -   If no argument is provided, prompt the user for the input HTML file path.

2.  **Resolve Paths**:
    -   Determine the absolute path of the input HTML file.
    -   Construct the file URL (e.g., `file:///C:/path/to/file.html` on Windows, or `file:///path/to/file.html` on Unix). Make sure to replace any backslashes `\` with forward slashes `/`.
    -   Determine the output PNG file path. The output file must be saved in the same directory as the input HTML file, with the file extension changed from `.html` to `.png`.

3.  **Set Environment Variable**:
    -   To open local files in Playwright, set the environment variable `PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS` to `1` in the shell session.
        -   On Windows (PowerShell):

            ```powershell
            $env:PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS="1"
            ```

        -   On Linux/macOS (Bash/zsh):

            ```bash
            export PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS="1"
            ```

4.  **Execute playwright-cli Commands**:
    -   Run the following commands in sequence under the same session/environment:
        -   **Open the file**:

            ```bash
            npx --no playwright-cli open "file:///<full_path>"
            ```

        -   **Take full-page screenshot**:

            ```bash
            npx --no playwright-cli screenshot --full-page --filename="<output_path>"
            ```

        -   **Close the browser**:

            ```bash
            npx --no playwright-cli close
            ```

5.  **Verify Output**:
    -   Verify that the output PNG file has been successfully created at the target path.
