Front-End-Checklist

Use when auditing import statements in TypeScript files, setting up a new TypeScript project, or investigating unexpected bundle inclusions from type-only dependencies.

Use when reviewing scripts, client components, bundles, or runtime behavior related to Avoid implicit type coercion. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.

Use when applies to any page intended to be shared on X (Twitter). Use when auditing social sharing previews or adding social meta tags to a new site.

Use when auditing slow first responses on SSR pages, APIs, or cacheable HTML. Distinguish origin compute time from network latency and CDN cache misses before proposing a fix.

Use when applies especially to e-commerce checkouts, contact/lead forms, pricing pages, and YMYL (Your Money or Your Life) content. Use when auditing E-E-A-T or conversion optimization.

Use when reviewing a codebase for internationalisation readiness, setting up an i18n library, or preparing strings for a new locale.

Use when applies to all static and dynamic websites. Use when auditing a site for duplicate content, setting up a new site, or after migrating platforms that changed URL conventions.

Use when applies to all interactive elements on touchscreen interfaces: buttons, links, checkboxes, radio buttons, form inputs, icon buttons, and menu items. Check CSS for min-width, min-height, width, height, and padding on interactive elements. Particularly important for icon-only buttons (close, delete, share) which are often made too small.

Use when reviewing authentication implementation, setting up a new auth system, or evaluating whether the current token storage approach exposes the application to XSS-based token theft.

Use when applies to all HTML pages. Use when auditing a site crawl report or investigating why multiple pages compete for the same keyword in search results.

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

Use when reviewing a website for privacy compliance, third-party resource loading, or cookie consent implementation.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure table headers associate with data cells. 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 Support text resizing to 200%. 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 Avoid images of text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing CSS for fixed dimensions, truncation, or overflow rules on elements that render translatable strings.

Use when reviewing CI coverage, automated checks, or test strategy related to Maintain test coverage thresholds. Focus on whether the rule is continuously verified, not just documented.

Use when reviewing whether a website or web application has a visible Terms of Service link accessible from every page.

Use when applies to contact pages, business listing pages, headers/footers, and any page displaying a phone number or email address. Use when auditing contact UX or schema-marked LocalBusiness pages.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Link table cells to headers using IDs. 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 Make tabs keyboard navigable. Validate the final browser-facing markup, not just the source framework abstraction.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Define proper table headers. 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 Ensure tables have unique accessible names. 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 appropriate tabindex values. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing image assets, markup, and CDN or build transforms related to Optimize SVG files. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.