Front-End-Checklist

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

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 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 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 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 auditing import statements in TypeScript files, setting up a new TypeScript project, or investigating unexpected bundle inclusions from type-only dependencies.

Use when setting up a new TypeScript project, auditing an existing tsconfig.json, or reviewing code where null-reference errors or implicit any types are present.

Use when reviewing templates, rendered HTML, or shared components related to Ensure all IDs are unique. Validate the final browser-facing markup, not just the source framework abstraction.

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

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

Use when applies to any page embedding or hosting video content (YouTube, Vimeo, self-hosted). Use when adding video content to a site or auditing structured data coverage.

Use when reviewing templates, rendered HTML, or shared components related to Make videos accessible with captions. Validate the final browser-facing markup, not just the source framework abstraction.

Use when applies to all `<video>` elements and third-party video embeds (YouTube, Vimeo) where the page owner controls the content. Prerecorded videos require `.vtt` caption files via `<track>`. For videos embedded via `<iframe>`, check that the video platform captions are enabled. Audio-only content requires transcripts instead (SC 1.2.1). Video-only content (no audio) requires a text alternative or audio description instead (SC 1.2.3).

Use when reviewing <video> elements, background/hero video, or embedded media assets. Check encoded bitrate, resolution relative to the rendered player size, codec/container choice, and whether a poster/thumbnail avoids blocking on the first frame.

Use when applies to all `<video>` elements in HTML. The `poster` attribute specifies the URL of an image to show as a placeholder before the video is loaded or played. This is distinct from captions or audio descriptions, which are accessibility requirements. The poster is primarily a UX and performance enhancement, though the lack of a poster can indirectly create a CLS (Cumulative Layout Shift) issue if video dimensions are not declared.

Use when reviewing templates, rendered HTML, or shared components related to Set the responsive viewport meta tag. Validate the final browser-facing markup, not just the source framework abstraction.

Use when applies to any `<meta name='viewport'>` element in HTML documents. Check the `content` attribute for `user-scalable=no`, `user-scalable=0`, `maximum-scale=1`, or `maximum-scale` values less than 2. This is a common mistake in mobile-first templates and CSS frameworks.

Use when adding page transition animations, image expand/contract effects, shared-element transitions, or improving navigation UX in a single-page or multi-page application.

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

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