tokenized2027/accessibility-checker
claude-code-framework/essential/skills/quality/accessibility-checker/SKILL.md
Validates components for WCAG compliance including semantic HTML, ARIA labels, contrast ratios, and keyboard navigation. Use when user says "check accessibility", "a11y", "WCAG compliance", or mentions accessibility concerns.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add tokenized2027/claude-initilization-v7 accessibility-checkerInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 3:28 PM5.8s1 file scanned
SKILL.md
- name:
- accessibility-checker
- description:
- Validates components for WCAG compliance including semantic HTML, ARIA labels, contrast ratios, and keyboard navigation. Use when user says "check accessibility", "a11y", "WCAG compliance", or mentions accessibility concerns.
- author:
- Mastering Claude Code
- version:
- 1.0.0
- category:
- quality
Accessibility Checker
Quick Checks
Semantic HTML
// ❌ Bad - non-semantic
<div onClick={handleClick}>Click me</div>
// ✅ Good - semantic
<button onClick={handleClick}>Click me</button>
Alt Text
// ❌ Bad - missing alt
<img src="logo.png" />
// ✅ Good - descriptive alt
<img src="logo.png" alt="Company logo" />
ARIA Labels
// ❌ Bad - no label
<button><SearchIcon /></button>
// ✅ Good - aria-label
<button aria-label="Search"><SearchIcon /></button>
Keyboard Navigation
// ✅ Good - keyboard accessible
<button onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleClick()
}
}}>
Submit
</button>
Automated Checks
# Install axe-core
npm install --save-dev @axe-core/react
# Add to tests
import { axe, toHaveNoViolations } from 'jest-axe'
expect.extend(toHaveNoViolations)
test('should have no a11y violations', async () => {
const { container } = render(<App />)
const results = await axe(container)
expect(results).toHaveNoViolations()
})
Related Skills
tokenized2027/systematic-debugging
development
VerifiedTrustedCommunity
Methodical debugging using reproducible steps, instrumentation, and root-cause analysis. Use when something is broken and you don't know why. Triggers on "bug", "broken", "not working", "error", "fails intermittently", "regression", "unexpected behavior".
SKILL.mdUpdated Apr 16, 2026
tokenized2027/prompt-engineering
development
VerifiedTrustedCommunity
Optimize prompts for Claude Code agents, API calls, and multi-agent orchestration. Use when writing system prompts, agent instructions, or refining LLM interactions. Triggers on "improve prompt", "write a prompt", "agent instructions", "system prompt", "prompt not working", "LLM output quality".
SKILL.mdUpdated Apr 16, 2026
tokenized2027/brainstorming
tools
VerifiedTrustedCommunity
Structured ideation and design review before any creative or constructive work. Use before building features, components, architecture, dashboards, or automation workflows. Triggers on "plan this", "design this", "brainstorm", "think through", "what should we build", "how should I approach".
SKILL.mdUpdated Apr 16, 2026
tokenized2027/test-scaffold
testing
VerifiedTrustedCommunity
Generates test files for components and functions with setup, basic tests, and mocks. Use when user says "add tests", "create test", "test this component", or mentions testing.
SKILL.mdUpdated Apr 16, 2026