html-line-svg - Create accessible semantic wireframe SVGs
Transforms source content into semantic wireframe diagrams as responsive SVGs, with reusable generation prompts, optional Mermaid specifications, and PNG previews.
Tags
Updated: 2026-10-12Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Extract semantic objects and relations
- Specify relationships with Mermaid
- Generate accessible responsive SVGs
- Generate reusable wireframe prompts
- Render browser-based PNG previews
- Validate SVG structure and geometry
- Embed SVG in HTML layouts
- Check connection traceability
Inputs
- Source content
- Adjacent content
- Images or sketches
- Existing HTML and CSS
- Available layout space
- Project design rules
- Design tokens
- Target canvas or viewport
- Upper workflow requirements
Outputs
- Editable inline or standalone SVG
- Browser-rendered PNG preview
- Reusable wireframe generation prompt
- Mermaid relationship specification
- Delivery summary
- Validation results
- Updated HTML
Requirements
- HTML and CSS environment
- SVG-capable browser
- Node.js validation runtime
- Chromium or Chrome renderer
- Read and write permissions
- Mermaid renderer when used
- Project build and validation commands