thedaviddias/front-end-checklist

1

frontend-checklist-global Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one ent…

thedaviddias/front-end-checklist

96

2

animation-performance Use when reviewing stylesheets, component styles, and responsive behavior related to Use transform and opacity for an…

thedaviddias/front-end-checklist

22

3

color-contrast Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators,…

thedaviddias/front-end-checklist

22

4

https Use when auditing whether a website or web application serves content exclusively over HTTPS with a valid certificate.

thedaviddias/front-end-checklist

19

5

cumulative-layout-shift Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize cumulative layout shift. Ver…

thedaviddias/front-end-checklist

18

6

image-optimization Use when reviewing image assets, markup, and CDN or build transforms related to Optimize all images for web. Check en…

thedaviddias/front-end-checklist

18

7

mobile-testing Use when reviewing CI coverage, automated checks, or test strategy related to Test on real mobile devices and viewpor…

thedaviddias/front-end-checklist

18

8

pdf-size Use when auditing a site that publishes downloadable PDFs (reports, white papers, legal documents, manuals). Applies …

thedaviddias/front-end-checklist

18

9

word-count Use when applies to key landing pages, blog posts, product pages, and any page targeting competitive queries. Use whe…

thedaviddias/front-end-checklist

18

10

js-libraries Use when auditing slow page loads, heavy assets, or rendering delays related to Use secure and up-to-date JS librarie…

thedaviddias/front-end-checklist

17

11

quality Use when evaluating content pages for SEO quality. Applies to blog posts, product descriptions, landing pages, or any…

thedaviddias/front-end-checklist

17

12

es-modules Use when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export)…

thedaviddias/front-end-checklist

16

13

javascript-linter Use when reviewing scripts, client components, bundles, or runtime behavior related to Lint JavaScript code. Inspect …

thedaviddias/front-end-checklist

16

14

lazy-loading Use when auditing slow page loads, heavy assets, or rendering delays related to Implement lazy loading for offscreen …

thedaviddias/front-end-checklist

15

15

meta-title Use when auditing page metadata or generating SEO-optimized titles. Applies to every HTML page that should appear in …

thedaviddias/front-end-checklist

15

16

styles-lint Use when reviewing stylesheets, component styles, and responsive behavior related to Lint CSS and SCSS files. Check t…

thedaviddias/front-end-checklist

15

17

robots-txt Use when applies to any public website. Use when auditing technical SEO foundations or diagnosing crawl coverage gaps.

thedaviddias/front-end-checklist

14

18

accessibility-testing Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automa…

thedaviddias/front-end-checklist

13

19

accessible-authentication Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path…

thedaviddias/front-end-checklist

13

20

alt-text Use when reviewing image assets, markup, and CDN or build transforms related to Provide meaningful alt text for image…

thedaviddias/front-end-checklist

13

21

animated-content Use when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verif…

thedaviddias/front-end-checklist

13

22

aria-hidden-body Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden…

thedaviddias/front-end-checklist

13

23

aria-input-field-name Use when applies to all `<input>` (except type=hidden), `<textarea>`, `<select>`, and custom form widgets using role=…

thedaviddias/front-end-checklist

13

24

aria-live-regions Use when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic conte…

thedaviddias/front-end-checklist

13

25

code-splitting Use when reviewing large SPA bundles, new dependency additions, or routes that feel slow to hydrate. Focus on code th…

thedaviddias/front-end-checklist

13

26

css-at-property Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a …

thedaviddias/front-end-checklist

13

27

css-containment Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS containment to limit rep…

thedaviddias/front-end-checklist

13

28

focus-styles Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus ind…

thedaviddias/front-end-checklist

13

29

keyboard-navigation Use when reviewing rendered HTML, interactive components, or design-system patterns related to Enable keyboard naviga…

thedaviddias/front-end-checklist

13

30

sitemap Use when auditing metadata, crawlability, structured data, or indexability related to Create and submit an XML sitema…

thedaviddias/front-end-checklist

13

31

404-page Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate…

thedaviddias/front-end-checklist

12

32

about-page Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. …

thedaviddias/front-end-checklist

12

33

accessible-tables Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table mar…

thedaviddias/front-end-checklist

12

34

aria-labels Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible nam…

thedaviddias/front-end-checklist

12

35

button-name Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible nam…

thedaviddias/front-end-checklist

12

36

content-security-policy Use when reviewing headers, forms, cookies, or third-party integrations related to Implement a content security polic…

thedaviddias/front-end-checklist

12

37

page-weight Use when auditing slow page loads, heavy assets, or rendering delays related to Keep page weight under 1500KB. Verify…

thedaviddias/front-end-checklist

12

38

typescript-strict-mode Use when setting up a new TypeScript project, auditing an existing tsconfig.json, or reviewing code where null-refere…

thedaviddias/front-end-checklist

12

39

ai-content Use when auditing metadata, crawlability, structured data, or indexability related to Audit and refine AI-generated c…

thedaviddias/front-end-checklist

11

40

aria-dialog-name Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an…

thedaviddias/front-end-checklist

11

41

aria-hidden-focus Use when reviewing rendered HTML, interactive components, or design-system patterns related to Remove focusable eleme…

thedaviddias/front-end-checklist

11

42

canonical-url Use when auditing metadata, crawlability, structured data, or indexability related to Set canonical URLs for all page…

thedaviddias/front-end-checklist

11

43

form-labels Use when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with …

thedaviddias/front-end-checklist

11

44

largest-contentful-paint Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize largest contentful paint. Ve…

thedaviddias/front-end-checklist

11

45

meta-description Use when auditing page metadata or generating descriptions for new pages. Applies to every page that should receive o…

thedaviddias/front-end-checklist

11

46

optimized Use when reviewing image assets, markup, and CDN or build transforms related to Optimise images for faster loading. C…

thedaviddias/front-end-checklist

11

47

pwa-installability Use when auditing PWA readiness, adding an install prompt, or preparing a web app for submission to Microsoft Store o…

thedaviddias/front-end-checklist

11

48

responsive-images Use when reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints. …

thedaviddias/front-end-checklist

11

49

touch-targets Use when applies to all interactive elements on touchscreen interfaces: buttons, links, checkboxes, radio buttons, fo…

thedaviddias/front-end-checklist

11

50

accessible-tooltips Use when reviewing templates, rendered HTML, or shared components related to Create accessible tooltips. Validate the…

thedaviddias/front-end-checklist

10