Front-End-Checklist

Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties. Use when auditing responsive design or WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Maintain logical heading order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use logical heading hierarchy. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child state, form input values, or content presence — :has() may replace the JavaScript entirely.

Use when auditing a page's heading structure, generating H1 text for landing pages or blog posts, or reviewing a CMS template that may produce empty or missing H1 elements.

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize Google Tag Manager implementation. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when auditing locally-focused or regionally-targeted pages for geo targeting signals, particularly on sites targeting audiences through Bing or regional search engines. Note that these meta tags have no documented effect on Google's ranking.

Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.

Use when auditing content pages for freshness signals, setting up HTTP Last-Modified headers in a web server config, or ensuring Article JSON-LD dateModified is updated when CMS content changes.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide titles for iframes and frames. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing templates, rendered HTML, or shared components related to Validate forms accessibly. Validate the final browser-facing markup, not just the source framework abstraction. Distinguish between browser-posted forms and client-handled React forms so you do not over-report missing `method` or `action` as accessibility defects.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with form controls. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing HTML forms, fetch/XHR calls, and form action attributes to ensure data is submitted exclusively over HTTPS.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use a single label for each form field. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanisms.

Use when applies to all CSS `font-size` declarations, particularly those using `px` units for body text, UI labels, and navigation. Use when auditing mobile responsiveness and accessibility compliance. Check for `font-size` in media queries targeting small screens.

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize web font loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Manage focus during dynamic interactions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Prevent seizure-triggering flashing content. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize first contentful paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule, validate they meet quality thresholds, and add them to the rule's frontmatter.