Semantic HTML & CSS
Optimizes markup structure, landmark elements, focus visibility, and modern CSS patterns to ensure accessible, high-performance web interfaces.
The Semantic HTML & CSS skill equips Claude Code with structured heuristics to evaluate and elevate baseline UI markup and styling before or during accessibility audits. It ensures valid landmark structures, logical heading hierarchies, proper native interactive controls, minimum touch targets, and robust keyboard focus management with :focus-visible. By enforcing modern CSS standards like flex/grid layouts and prefers-reduced-motion adaptations, this skill prevents common accessibility anti-patterns in React, Next.js, and Tailwind CSS codebases while providing actionable, line-specific remediation guidance.