Front-End-Checklist

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

Use when reviewing scripts, client components, bundles, or runtime behavior related to Use modern array and object methods. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.

Use when reviewing image assets, markup, and CDN or build transforms related to Use modern image formats (WebP, AVIF). Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

Use when evaluating test quality on modules containing business logic, calculation utilities, or state machines to determine whether the tests provide genuine defect detection.

Use when reviewing stylesheets, component styles, and responsive behavior related to Use consistent CSS naming conventions. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Use when auditing a local business website for local SEO. Applies to any business that has a physical address and wants to appear in local search results or Google Maps.

Use when reviewing templates, rendered HTML, or shared components related to Use navigation landmark regions. Validate the final browser-facing markup, not just the source framework abstraction.

Use when reviewing HTML or JSX for anchor elements with target='_blank' to verify rel='noopener noreferrer' is present.

Use when reviewing TypeScript files for type safety regressions, during code review of functions that handle external data, or when the codebase has ESLint warnings for @typescript-eslint/no-explicit-any.

Use when auditing internal link structure or reviewing link attributes. Applies to any site using rel=nofollow on links pointing to pages within the same domain.

Use when auditing an XML sitemap or diagnosing indexing issues. Applies to any site where noindex meta tags or X-Robots-Tag headers may be applied to URLs also listed in the sitemap.

Use when reviewing templates, rendered HTML, or shared components related to Provide noscript fallback content. Validate the final browser-facing markup, not just the source framework abstraction.

Use when auditing robots meta tags. Applies to any important landing page, article, or product page that should appear with a description in search results.

Use when auditing tsconfig.json for missing safety flags, reviewing code that uses array index access in data processing pipelines, or investigating runtime undefined errors that TypeScript did not catch.

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

Use when adding PWA capabilities, implementing a service worker, or improving the experience for users on unreliable network connections.

Use when reviewing image assets, markup, and CDN or build transforms related to Lazy load offscreen images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Missing `loading='lazy'` is only a valid finding when you can reasonably tell the image is offscreen or non-critical.

Use when auditing Open Graph tags or generating og:image assets. Applies to any page that may be shared on social networks or messaging platforms.

Use when auditing a web page's social sharing metadata. Applies to any page users might share on social networks or messaging apps.

Use when auditing Open Graph tags or investigating why social share counts appear low. Applies to any page with both canonical-url and og:url tags.