validate-html

Validate HTML files for structural correctness and browser rendering accuracy.

Updated May 7, 2026
One-click install
npx skills add https://github.com/tmalcolm-0607/mad-council-claw --skill validate-html-tmalcolm-0607
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: validate-html
Source: https://github.com/tmalcolm-0607/mad-council-claw/tree/main/.claude/skills/validate-html
Command: npx skills add https://github.com/tmalcolm-0607/mad-council-claw --skill validate-html-tmalcolm-0607

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the time-consuming manual work of checking HTML files for structural errors, rendering issues, JavaScript console errors, and accessibility gaps, ensuring your dashboards, reports, and single-page applications work as expected before deployment or commit.

Core Features & Use Cases

  • Structural Validation: Checks for valid HTML5 structure, unclosed tags, malformed attributes, and basic syntax errors in inline JavaScript and CSS.
  • Visual Verification: Uses Playwright to open HTML files in a browser, capture screenshots, and confirm content renders correctly without layout issues.
  • Error Detection: Captures browser console errors and checks for missing content sections, broken in-page elements, and invalid data rendering.
  • Use Case: After updating a sales dashboard HTML file, run this Skill to catch any broken layout, missing data, or script errors before sharing the report with stakeholders.

Quick Start

Use the validate-html skill to check your modified HTML dashboard file for structural and visual rendering issues before committing your changes.

Frequently Asked Questions about validate-html

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

FAQPage Schema
How do I validate HTML structure and visual rendering in one step before deployment?

HTML validation combines static syntax checks with Playwright browser verification to catch unclosed tags, layout issues, and console errors before deployment. It captures screenshots and confirms content renders correctly without manual checks.

What is the best way to check HTML dashboards for rendering issues and JavaScript console errors?

Checking HTML dashboards for rendering issues involves using Playwright to open files in a browser, capture screenshots, and detect console errors. This visual verification catches broken layouts, missing data sections, and script errors before sharing reports with stakeholders.

Can I use Playwright to automate visual testing for single-page applications during pre-commit checks?

Playwright automates visual testing for single-page applications by opening HTML files in a browser environment, capturing screenshots, and logging console errors. This verifies rendering accuracy and structural correctness during pre-commit validation phases.

Does HTML accessibility validation detect malformed attributes and unclosed tags in inline CSS and JavaScript?

HTML accessibility validation detects malformed attributes and unclosed tags by performing static HTML5 structural checks. It scans inline CSS and JavaScript for basic syntax errors, ensuring dashboards maintain structural correctness.

Why does my HTML report render correctly but show broken in-page elements and missing content sections?

HTML reports showing broken in-page elements or missing content sections often have underlying JavaScript console errors or invalid data rendering. Browser visual verification captures these specific console errors and checks for missing content sections automatically.