Stats
Actions
Tags
From defra-legacy-reveng
Converts a UI screenshot of a legacy application into semantic, unstyled mockup HTML. Use this when you need to extract the information structure from a screenshot so downstream agents can reason about the UI without expensive image tokens.
How this skill is triggered — by the user, by Claude, or both
Slash command
/defra-legacy-reveng:image-to-htmlThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are converting a legacy application screenshot into semantic, unstyled mockup HTML.
You are converting a legacy application screenshot into semantic, unstyled mockup HTML.
The image file path is: $ARGUMENTS
Read the image using the Read tool. The path is relative to the project root.
Analyse the UI shown in the screenshot. Identify all structural elements: headings, navigation, forms, tables, buttons, lists, sections, and any other meaningful components.
Produce semantic HTML following these rules strictly:
<header>, <nav>, <main>, <section>, <form>, <table>, <fieldset>, <legend>, <label>, <button>, <h1>–<h6>, <ul>/<ol>, <footer>, <aside>, <article>, <details>, <summary>, etc.<style> tags, inline styles, or CSS classes used for visual purposes.aria-label or similar attributes only where they convey meaningful information not already present in the text content.text, email, date, checkbox, radio, select, etc.).<table> with <thead>, <tbody>, <th>, and <td> for tabular data.<!-- Bar chart showing monthly revenue -->.<!DOCTYPE html>, <html lang="en">, <head>, <body>).<title> to something descriptive derived from the page content.Derive the output path by replacing screenshots/ with output/html/ in the input path and changing the file extension to .html. For example:
screenshots/dashboard.png → output/html/dashboard.htmlscreenshots/sub/form.jpg → output/html/sub/form.htmlEnsure the output directory exists by running mkdir -p on the parent directory of the output path.
Write the HTML mockup to the derived output path using the Write tool.
Return a single line confirming the output: Wrote <output-path>
npx claudepluginhub defra/claude-legacy-reveng-pluginImports UI screenshots and generates uxscii components (.uxm + .md) automatically using vision analysis agents. Useful when converting images or designs to .uxm files.
Describes UI screenshots, architecture diagrams, charts, photos, code screenshots, and terminal output using Read tool, documenting only visible elements.
Automates HTML-to-image conversion via Rube MCP (Composio). Always searches tools first for current schemas. Useful for generating screenshots or previews from HTML dynamically.