메뉴
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.