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.
주요 기능
01Interactive element audits ensuring native button and anchor usage
020 GitHub stars
03Tailwind CSS and modern layout recommendations for accessibility
04Keyboard focus management with visible focus rings and motion safety
05Logical heading hierarchy enforcement without visual styling skips
06HTML landmark validation for main, nav, header, and aside elements
사용 사례
01Auditing keyboard navigation, focus states, and motion-reduction CSS rules
02Refactoring legacy JSX or HTML markup to meet baseline accessibility standards
03Planning component hierarchies and landmark structures for greenfield React views