Runs automated HTML linting using @axe-core/playwright (WCAG accessibility) and markuplint (HTML standards). Use when user asks to "lint HTML", "run automated checks", "validate HTML", "check accessibility", or mentions "axe-core", "markuplint", "automated audit".
/plugin marketplace add naporin0624/seo-claude-plugins/plugin install web-audit-tools@web-audit-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
dist/index.d.tsdist/index.jsdist/index.js.mappackage.jsonsrc/axe-checker.tssrc/cli.tssrc/index.tssrc/markuplint-runner.tssrc/reporter.tssrc/types.tstsconfig.jsonAutomated HTML linting using @axe-core/playwright and markuplint with JSON output.
| Tool | Focus | Output |
|---|---|---|
| @axe-core/playwright | WCAG 2.1 AA accessibility | JSON with violations |
| markuplint | HTML standards, semantics | JSON with problems |
# Install dependencies
cd ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner && npm install
# Run combined lint (development)
npm --prefix ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner run dev -- path/to/file.html
# Run with build
npm --prefix ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner run build
node ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner/dist/index.js path/to/file.html
| Option | Description |
|---|---|
--json | Output as JSON (default) |
--text | Output as human-readable text |
--axe-only | Run only axe-core (accessibility) |
--markuplint-only | Run only markuplint (HTML standards) |
| Extension | axe-core | markuplint | Notes |
|---|---|---|---|
.html | Yes | Yes | Full support |
.htm | Yes | Yes | Full support |
.jsx | No* | Yes | markuplint only |
.tsx | No* | Yes | markuplint only |
*JSX/TSX require rendering to HTML for axe-core analysis
{
"file": "target.html",
"timestamp": "2025-01-01T00:00:00Z",
"axe": {
"violations": [...],
"passes": [...],
"incomplete": [...]
},
"markuplint": {
"problems": [...]
},
"summary": {
"axe_violations": 3,
"markuplint_problems": 5,
"total_issues": 8
}
}
{
"id": "color-contrast",
"impact": "serious",
"description": "Elements must have sufficient color contrast",
"nodes": [
{
"html": "<p class=\"light\">...</p>",
"failureSummary": "Fix: Increase contrast ratio to 4.5:1"
}
]
}
Impact levels: critical > serious > moderate > minor
{
"severity": "error",
"ruleId": "required-attr",
"message": "The \"alt\" attribute is required",
"line": 15,
"col": 5,
"raw": "<img src=\"photo.jpg\">"
}
<!-- Before -->
<img src="photo.jpg">
<!-- After -->
<img src="photo.jpg" alt="Description of image">
/* Before: #999 on #fff = 2.85:1 */
.text { color: #999; }
/* After: #595959 on #fff = 7:1 */
.text { color: #595959; }
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.