web-standardslisted

# UI Web Standards ## Overview Comprehensive guidance for building accessible, performant, and user-friendly web interfaces aligned with Vercel's Web Interface Guidelines. Covers accessibility compliance (WCAG 2.1 AA), component patterns, form handling, animations, typography, navigation, and anti-patterns to avoid. ## When to Use - **Reviewing** HTML, React, Vue, Svelte components for accessibility and standards compliance - **Building** forms, buttons, links, modals, navigation, lists, and interactive elements - **Optimizing** performance via virtualization, lazy loading, and animation handling - **Implementing** animations, transitions, or motion-sensitive designs - **Handling** dark mode, i18n, localization, or theme-aware components - **Debugging** focus states, keyboard navigation, or screen reader announcements - **Designing** UX copy, error messages, loading states, or empty states ## When NOT to Use - Styling decisions unrelated to accessibility, performance, or UX patterns - Branding or visual design guidelines (use design system skill instead) - Backend logic or server-side rendering patterns (use architecture reviews) - Non-web platforms (native mobile, desktop apps, terminal UIs) --- ## Accessibility ### Semantic HTML First **Use semantic elements; never `<div onClick>` for interactive content:** - `<button>` for actions (submit, cancel, toggle, delete) - `<a>` or `<Link>` for navigation (internal/external) - `<label>` for form controls (inputs, checkb