skills.rest
AndersHalo
AndersHaloCOMMUNITY
Explore all skills by this author →
GitHub

wireframe-audit

Audit HTML wireframes against PRD and UX design system documents.

Updated Feb 11, 2026
Search Tags:#html#audit#prd#ux#wireframe
One-click install
npx skills add https://github.com/AndersHalo/halo-ai-dev-tools --skill wireframe-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe-audit
Source: https://github.com/AndersHalo/halo-ai-dev-tools/tree/main/plugins/wireframe-audit/skills/wireframe-audit
Command: npx skills add https://github.com/AndersHalo/halo-ai-dev-tools --skill wireframe-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, pdf2image, pdfplumber, pypdf, jq, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill audits HTML wireframes against product requirements (PRD) and/or UX design system documents, ensuring alignment and identifying discrepancies.

Core Features & Use Cases

  • Audit HTML Wireframes: Compare wireframes against PRD and UX specifications.
  • Mode Selection: Choose between PRD-only, UX-only, or Full (PRD+UX) modes.
  • Output Generation: Produce structured JSON, markdown report, interactive dashboard, and screenshot gallery.
  • Use Case: Use this skill when you have HTML wireframes and need to verify they match the intended design and requirements.

Quick Start

Run the wireframe-audit skill with the required wireframe HTML file: wireframe-audit my-wireframe.html

Frequently Asked Questions about wireframe-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit HTML wireframes against a PRD or UX design system?▼

Auditing HTML wireframes requires comparing them against product requirements and UX design system documents to check consistency, completeness, and accuracy. This process supports PRD-only, UX-only, or Full audit modes to identify design discrepancies.

Can I check HTML wireframes for compliance with only UX specifications?▼

Yes, you can check HTML wireframes for compliance using the UX-only mode. This compares wireframes against UX design system documents to verify visual and structural alignment without requiring a product requirements document.

Do I need Puppeteer to generate screenshots during a wireframe audit?▼

Yes, Puppeteer is required for screenshot generation and analyzing visual elements during the wireframe audit. It captures the visual state of HTML wireframes to support the detailed compliance review and dashboard generation.

What output formats are generated when verifying wireframes against product requirements?▼

Verifying wireframes against product requirements generates structured JSON, a markdown report, an interactive dashboard, and a screenshot gallery. These outputs provide comprehensive data visualization of the audit results.

What's the best way to compare HTML wireframes with both PRD and UX documents?▼

The best way to compare HTML wireframes with both documents is using the Full audit mode. This evaluates wireframes against both the PRD and UX design system simultaneously to ensure complete alignment and comprehensive reporting.

Related Skills

Explore More Software Engineering Skills→
davidbeglenboyledavidbeglenboyle
2

pdf

Extract text and tables from PDFs into CSV or JSON using Python libraries.

Community
Intermediate
thatrebeccaraethatrebeccarae
97

data-viz-deck

Transform audit and performance data into PPTX decks, HTML dashboards, or Markdown reports.

Community
Advanced
decoutkhanqindevdecoutkhanqindev
8

kta-design-spec

Generate per-screen design specifications from PRD documents.

Community
Advanced
rlagycksrlagycks
3

browser-qa

Automates visual, functional and accessibility testing of web pages via Playwright or Puppeteer scripts.

Community
Intermediate