What problem does it solve? Web interfaces often fail users on keyboards, screen readers, small screens, or older browsers because accessibility, responsive behavior, and compatibility checks are skipped during development. This Skill provides concrete checklists and rules to build and verify interfaces against WCAG AA, mobile-first breakpoints, and progressive enhancement. ## Core Features & Use Cases - Accessibility implementation: Semantic HTML landmarks, keyboard and focus management (focus traps, Esc handling, focus return), minimal ARIA usage, form labeling and error association, and 4.5:1 contrast verification. - Responsive layout guidance: Mobile-first CSS, content-driven breakpoints (640/768/1024/1280), fluid layouts with flex/grid, clamp() typography, srcset images, and 44px touch targets. - Cross-browser compatibility: Feature detection with @supports over UA sniffing, progressive enhancement, fallbacks for newer CSS features, and real-browser verification. - Use Case: When reviewing a modal dialog component, use this Skill to verify focus moves into the dialog on open, Tab cycles inside it, Esc closes it, and focus returns to the trigger button. ## Quick Start Audit this page's accessibility, responsive breakpoints, and keyboard navigation, then list issues with locations and suggested fixes.
