Front-End-Checklist

Use when reviewing rendered HTML, layout components, or design-system patterns that may depend on presentation for meaning. Check the DOM order, semantic structure, form relationships, and whether CSS generated content carries essential information.

Use when setting up integration testing for a frontend-backend API boundary, evaluating whether two services are safe to deploy independently, or replacing slow end-to-end tests with contract tests.

Use when reviewing a website for GDPR/CCPA compliance, specifically whether cookie consent is obtained before non-essential cookies are set.

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

Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize critical request chains. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when reviewing CI coverage, automated checks, or test strategy related to Test across all major browsers. Focus on whether the rule is continuously verified, not just documented.

Use when reviewing security-sensitive web apps, SharedArrayBuffer usage, worker-heavy apps, editors, or measurement features that require cross-origin isolation. Check both headers and real browser behavior.

Use when reviewing scripts, client components, bundles, or runtime behavior related to Handle cross-origin requests securely. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.

Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a typed design token system where custom property misuse should produce visible errors.

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS containment to limit repaint scope. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster rendering. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS custom properties for design tokens. Check the rendered layout across breakpoints and interaction states before proposing a fix.

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

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS Grid for two-dimensional layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.

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

Use when reviewing stylesheets, component styles, and responsive behavior related to Load CSS without blocking render. Check the rendered layout across breakpoints and interaction states before proposing a fix.

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

Use when reviewing stylesheets, component styles, and responsive behavior related to Include a print stylesheet. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize cumulative layout shift. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when reviewing utility functions, component props, or template strings that format numbers, prices, or dates to check whether Intl APIs are used correctly.