メニュー
Proactively validates Claude Code's own generated HTML/JSX/TSX output for accessibility before presenting to users. Use this skill automatically when generating UI code to ensure WCAG 2.1 AA compliance.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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".
Runs Google Lighthouse audits using Playwright for SEO, Performance, Accessibility, and Best Practices scoring. Supports both URLs and local HTML files. Use when user mentions "Lighthouse", "page speed", "performance audit", "Core Web Vitals", "CWV", or needs comprehensive web performance analysis.
Analyzes HTML files for SEO issues using static analysis with cheerio. Checks meta tags, Open Graph, Twitter Cards, heading structure, and JSON-LD structured data. Use when user mentions "SEO check", "meta tags", "og tags", "structured data validation", "SEO audit", or wants to analyze HTML/JSX for SEO compliance.
Validates essential web resource files (sitemap.xml, robots.txt, llms.txt, security.txt) for compliance with their specifications. Use when user asks about "sitemap validation", "robots.txt check", "llms.txt", "security.txt", "RFC 9116", "RFC 9309", "web resource audit", "サイトマップ", "セキュリティ", or wants to verify crawler/LLM accessibility files.
Scans containers and Dockerfiles for security issues. Wraps Hadolint for Dockerfile linting and Trivy for container image scanning. Use when user asks to "scan Dockerfile", "lint Dockerfile", "container security", "image scan", "Dockerセキュリティ", "コンテナスキャン".
Scans Infrastructure as Code for security misconfigurations. Wraps tfsec for Terraform and Checkov for multi-cloud IaC. Use when user asks to "scan Terraform", "IaC security", "infrastructure scan", "tfsec", "checkov", "Terraformセキュリティ", "インフラスキャン".
| name | a11y-self-check |
| description | Proactively validates Claude Code's own generated HTML/JSX/TSX output for accessibility before presenting to users. Use this skill automatically when generating UI code to ensure WCAG 2.1 AA compliance. |
This skill enables Claude Code to validate its own generated HTML/JSX/TSX output for accessibility issues before presenting code to users.
Proactively run self-check when you (Claude Code):
When generating HTML/JSX/TSX code, write it to a temporary file:
# For generated HTML
cat > /tmp/claude-generated.html << 'EOF'
[your generated HTML here]
EOF
# For JSX/TSX
cat > /tmp/claude-generated.tsx << 'EOF'
[your generated JSX/TSX here]
EOF
Execute the lint script on the temporary file:
bash ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner/scripts/lint-html.sh /tmp/claude-generated.html
Check the JSON output for issues:
{
"summary": {
"axe_violations": 0,
"markuplint_problems": 0,
"total_issues": 0
}
}
total_issues is 0: Code is ready to presenttotal_issues > 0: Fix issues before presentingIf issues found:
${CLAUDE_PLUGIN_ROOT}/skills/wcag-aria-lookup/Before running lint tools, perform mental checks:
<img> have alt attributealt=""aria-describedby<label>aria-required="true"aria-invalid and aria-describedby<main>, <nav>, <aside>)<html lang="...">For comprehensive validation, use the /a11y-audit command:
/a11y-audit /tmp/claude-generated.html
This spawns the a11y-fixer agent for detailed analysis with WCAG references.
User: "Create a login form component"
Claude Code (internal process):
1. Generate LoginForm.tsx
2. Write to /tmp/claude-generated.tsx
3. Run: bash ${CLAUDE_PLUGIN_ROOT}/skills/html-lint-runner/scripts/lint-html.sh /tmp/claude-generated.tsx
4. Results show: missing label association
5. Fix: Add htmlFor and id attributes
6. Re-run lint: 0 issues
7. Present validated code to user
This skill transforms Claude Code from generating "potentially accessible" code to generating "validated accessible" code by:
Users receive code that has already passed accessibility checks.