Skill rating

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 p

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 CI configuration, bundle analysis workflows, or pull requests that add dependencies and assets. Distinguish bundle-size budgets from runtime budgets such as Lighthouse or Core Web V

Use when auditing PWA readiness, adding an install prompt, or preparing a web app for submission to Microsoft Store or Google Play via PWA Builder.

Use when reviewing code that calls fetch(), reads from localStorage, accesses process.env, or processes form submissions without explicitly validating the incoming data shape.

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 <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 post

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers. Check native semantics first, then inspect keyboard behavio

Use when auditing metadata, crawlability, structured data, or indexability related to Audit all noindex pages. Verify the rendered HTML and HTTP response rather than relying only on source files.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use only allowed ARIA attributes for each role. Check native semantics first, then inspect keyboard behav

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for ARIA command elements. Check native semantics first, then inspect keyboard b

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Remove focusable elements from aria-hidden containers. Check native semantics first, then inspect keyboar

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic content with ARIA live regions. Check native semantics first, then inspect keyboard beha

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for tooltips. Check native semantics first, then inspect keyboard behavior, focu

Use when reviewing stylesheets, component styles, and responsive behavior related to Use container queries for component-level responsiveness. Check the rendered layout across breakpoints and interact

Use when reviewing form components, API payloads, or client-side storage to identify fields that are collected but not consumed by a stated feature.

Use when reviewing scripts, client components, bundles, or runtime behavior related to Debounce and throttle event handlers. Inspect both source code and the browser execution path so fixes target the

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for ARIA references. Check native semantics first, then inspect keyboard behavior, focus f

Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image captions. Check encoded size, rendered size, loading strategy, and above-the-fol

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.

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,

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 W

Use when reviewing image assets, markup, and CDN or build transforms related to Compress images without quality loss. Check encoded size, rendered size, loading strategy, and above-the-fold impact tog

Use when reviewing scripts, client components, bundles, or runtime behavior related to Avoid inline JavaScript. Inspect both source code and the browser execution path so fixes target the real bottlen

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

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use exactly one main landmark. Check native semantics first, then inspect keyboard behavior, focus flow,

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 reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints. Check both the markup and the CSS layout because an incorrect `sizes` attribute can

Use when optimising multi-page navigation performance, reducing INP on page transitions, or implementing progressive enhancement for fast page loads.

Use when reviewing image assets, markup, and CDN or build transforms related to Use image sprites where appropriate. Check encoded size, rendered size, loading strategy, and above-the-fold impact toge

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 behav

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 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 auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an accessible name. Check native semantics first, then inspect keyboard behavior, foc

Use when auditing metadata, crawlability, structured data, or indexability related to Highlight author credentials and expertise. Verify the rendered HTML and HTTP response rather than relying only on

Use when auditing slow page loads, heavy assets, or rendering delays related to Perform browser-based performance audits. Verify the actual bottleneck in DevTools, Lighthouse, or field data before rec

Use when auditing metadata, crawlability, structured data, or indexability related to Sync HTML canonical tags and Link headers. Verify the rendered HTML and HTTP response rather than relying only on

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 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 propos

Use when reviewing a project's security posture, setting up CI pipelines, or responding to a reported vulnerability in a dependency.

Use when auditing a blog, news site, or YMYL content site for trust signals, drafting editorial policy page content, or evaluating whether a site meets Google's quality rater trustworthiness criteria.

Use when setting up a new project's production observability stack, reviewing incident response readiness, or investigating why errors are going undetected.

Use when reviewing scripts, client components, bundles, or runtime behavior related to Use event delegation for dynamic content. Inspect both source code and the browser execution path so fixes target

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

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

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

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, f

Use when auditing content pages for over-optimisation, reviewing AI-generated content that may repeat target phrases excessively, or checking meta tags and alt text for unnatural keyword accumulation.