skills.rest
naporin0624
naporin0624COMMUNITY
Explore all skills by this author →
Website𝕏@naporin24690GitHub

html-lint-runner

Run axe-core/playwright and markuplint checks on HTML, JSX, and TSX files.

3|1|Updated Dec 23, 2025
Search Tags:#html#accessibility#lint#semantics#axe-core#markuplint
One-click install
npx skills add https://github.com/naporin0624/claude-web-audit-plugins --skill html-lint-runner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-lint-runner
Source: https://github.com/naporin0624/claude-web-audit-plugins/tree/main/skills/html-lint-runner
Command: npx skills add https://github.com/naporin0624/claude-web-audit-plugins --skill html-lint-runner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, @axe-core/playwright, markuplint, @markuplint/jsx-parser, @markuplint/react-spec, and includes scripts (resource) components.

What problem does it solve?

This Skill lints HTML/JSX/TSX for accessibility and semantic correctness using axe-core/playwright and markuplint.

Core Features & Use Cases

  • WCAG accessibility checks with auto-generated reports.
  • HTML semantics and structural checks for modern web apps.
  • JSON or text output for automation.

Quick Start

Example: npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner/src/index.ts path/to/file.html --json

Frequently Asked Questions about html-lint-runner

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

FAQPage Schema
How do I check HTML files for accessibility issues automatically?▼

Automated HTML accessibility checking uses tools like axe-core to scan for WCAG violations. This Skill runs axe-core/playwright against HTML, HTM, JSX, and TSX files to generate accessibility reports in JSON or text format, catching compliance gaps without manual review.

Can I lint JSX and TSX files for semantic HTML errors?▼

Yes. This Skill lints JSX and TSX by rendering them to HTML, then runs both axe-core for accessibility and markuplint for semantic structure checks. Output includes violations and a summary you can parse or display.

What's the difference between axe-core and markuplint checks?▼

Axe-core identifies WCAG accessibility violations like missing alt text and contrast failures. Markuplint validates HTML semantics and structure—proper tag nesting, valid attributes, and element correctness. This Skill runs both to catch accessibility and markup quality issues.

How do I integrate HTML linting into a CI/CD pipeline?▼

This Skill outputs JSON with violations and a summary, making it suitable for CI/CD automation. Use the --json flag to parse results programmatically, and run it as part of build steps via CLI with npx tsx to gate on violations.

Does this work with React or JSX-heavy projects?▼

Yes. The Skill includes @markuplint/jsx-parser and @markuplint/react-spec to handle JSX syntax. It processes JSX and TSX files by rendering them to HTML before running accessibility and semantic checks.

Can I run only accessibility checks or only semantic linting?▼

Yes. Use the --axe-only flag to run only WCAG accessibility checks via axe-core, or --markuplint-only to run only HTML semantic validation. This lets you focus on the issues most relevant to your workflow.

Related Skills

Explore More Software Engineering Skills→
helderbertohelderberto
12

a11y-audit

Audit frontend source files for WCAG violations and report findings by severity.

Community
Intermediate
cowwoccowwoc
4

audit-protocol-compliance

Audit session conversations for task protocol compliance violations and generate a JSON report with remediation suggestions.

Community
Intermediate
eventua11yeventua11y
1

writing-accessibility-tests

Automate web accessibility tests with axe-core scans and Playwright assertions.

Official
Advanced
pvillegapvillega
23

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

Community
Advanced