frontend

Match the element to its purpose: use button for clickable actions, a href for navigation, nav/main/aside for page regions, and table with th scope for tabular data. Never use div with onClick as a button substitute, and keep exactly one h1 per page with sequential heading levels.

Associate every input with a label using for/id, mark required fields with required and aria-required, and set aria-invalid plus aria-describedby pointing to error messages with role="alert". Move focus to the first errored field on submit and announce form-level status in an aria-live region.

Good thresholds are LCP at or under 2.5 seconds, INP at or under 200 milliseconds, and CLS at or under 0.1. Optimize LCP with fetchpriority="high" on hero images, reduce INP by breaking up long tasks and using transitions, and prevent CLS by setting explicit image dimensions and font-display swap.

Tailwind suits rapid development and design-system enforcement at the cost of class verbosity and a build step. CSS Modules give component scoping with standard CSS, while vanilla CSS fits simple projects without a build step but requires manual scoping and token management.

Use Vitest for pure functions and utilities, Testing Library with userEvent for component interactions, MSW for API-dependent integration tests, and Playwright for critical end-to-end journeys. Prioritize integration tests over unit and E2E, and add axe-core checks for WCAG violations.

Prefer the native dialog element with showModal() because it provides focus trapping and Escape-to-close automatically. Use a custom div with role="dialog" only when you need behavior the native element cannot provide, and then implement focus trapping and focus restoration manually.