thedaviddias/front-end-checklist

1

doctype Use when applies to all HTML documents. Always check the very first line of the raw HTML source (view-source: or DevT…

thedaviddias/front-end-checklist

5

2

dom-size Use when auditing slow page loads, heavy assets, or rendering delays related to Reduce DOM size and complexity. Verif…

thedaviddias/front-end-checklist

5

3

draggable-accessibility Use when reviewing templates, rendered HTML, or shared components related to Make drag and drop accessible. Validate …

thedaviddias/front-end-checklist

5

4

error-monitoring Use when setting up a new project's production observability stack, reviewing incident response readiness, or investi…

thedaviddias/front-end-checklist

5

5

figure-figcaption Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for ima…

thedaviddias/front-end-checklist

5

6

file-upload-accessibility Use when reviewing templates, rendered HTML, or shared components related to Make file uploads accessible. Validate t…

thedaviddias/front-end-checklist

5

7

filename-quality Use when reviewing image assets, markup, and CDN or build transforms related to Use descriptive image filenames. Chec…

thedaviddias/front-end-checklist

5

8

find-npm-packages Use when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule…

thedaviddias/front-end-checklist

5

9

form-captcha Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanis…

thedaviddias/front-end-checklist

5

10

freshness Use when auditing content pages for freshness signals, setting up HTTP Last-Modified headers in a web server config, …

thedaviddias/front-end-checklist

5

11

has-selector Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child …

thedaviddias/front-end-checklist

5

12

http-to-https Use when checking whether a web server is configured to redirect all HTTP traffic to HTTPS.

thedaviddias/front-end-checklist

5

13

hyphens Use when auditing URL structures for word separator format, generating slugs from titles, or planning a URL migration…

thedaviddias/front-end-checklist

5

14

image-cdn Use when reviewing image assets, markup, and CDN or build transforms related to Serve images from a CDN. Check encode…

thedaviddias/front-end-checklist

5

15

image-compression Use when reviewing image assets, markup, and CDN or build transforms related to Compress images without quality loss.…

thedaviddias/front-end-checklist

5

16

image-file-size Use when auditing the image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms. Separat…

thedaviddias/front-end-checklist

5

17

image-redundant-alt Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid redundant image …

thedaviddias/front-end-checklist

5

18

inclusive-language Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use inclusive language…

thedaviddias/front-end-checklist

5

19

input-image-alt Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alt text for i…

thedaviddias/front-end-checklist

5

20

input-types Use when reviewing templates, rendered HTML, or shared components related to Use semantic input type attributes. Vali…

thedaviddias/front-end-checklist

5

21

interstitials Use when applies to CSS and JavaScript implementations of modals, overlays, pop-ups, cookie banners, newsletter sign-…

thedaviddias/front-end-checklist

5

22

invalid-links Use when auditing a page's link elements for crawlability, reviewing JavaScript-heavy SPAs where navigation may not u…

thedaviddias/front-end-checklist

5

23

keyword-stuffing Use when auditing content pages for over-optimisation, reviewing AI-generated content that may repeat target phrases …

thedaviddias/front-end-checklist

5

24

label-content-name-mismatch Use when reviewing rendered HTML, interactive components, or design-system patterns related to Align visible labels w…

thedaviddias/front-end-checklist

5

25

landmark-one-main Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use exactly one main l…

thedaviddias/front-end-checklist

5

26

link-in-text-block Use when applies to hyperlinks (`<a>` elements) that appear inline within paragraphs or text blocks.

thedaviddias/front-end-checklist

5

27

list-structure Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct list struc…

thedaviddias/front-end-checklist

5

28

listitem Use when applies to HTML documents with `<li>` elements.

thedaviddias/front-end-checklist

5

29

locale-images Use when reviewing image assets, icon libraries, or components that render illustrations to identify culture-specific…

thedaviddias/front-end-checklist

5

30

lowercase Use when auditing URL structure or configuring a new site's routing. Applies to any server or framework that allows c…

thedaviddias/front-end-checklist

5

31

mutation-testing Use when evaluating test quality on modules containing business logic, calculation utilities, or state machines to de…

thedaviddias/front-end-checklist

5

32

naming-conventions Use when reviewing stylesheets, component styles, and responsive behavior related to Use consistent CSS naming conven…

thedaviddias/front-end-checklist

5

33

no-explicit-any Use when reviewing TypeScript files for type safety regressions, during code review of functions that handle external…

thedaviddias/front-end-checklist

5

34

nofollow-internal Use when auditing internal link structure or reviewing link attributes. Applies to any site using rel=nofollow on lin…

thedaviddias/front-end-checklist

5

35

noindex-in-sitemap Use when auditing an XML sitemap or diagnosing indexing issues. Applies to any site where noindex meta tags or X-Robo…

thedaviddias/front-end-checklist

5

36

noscript-tag Use when reviewing templates, rendered HTML, or shared components related to Provide noscript fallback content. Valid…

thedaviddias/front-end-checklist

5

37

object-alt Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alternative te…

thedaviddias/front-end-checklist

5

38

parallax-effects Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alternatives t…

thedaviddias/front-end-checklist

5

39

parameters Use when auditing URL structure or configuring search engine handling of filtered, sorted, or tracked URLs. Applies t…

thedaviddias/front-end-checklist

5

40

paste-inputs Use when reviewing rendered HTML, interactive components, or design-system patterns related to Allow pasting into for…

thedaviddias/front-end-checklist

5

41

plain-language Use when reviewing rendered HTML, interactive components, or design-system patterns related to Write in plain languag…

thedaviddias/front-end-checklist

5

42

progressive-jpeg Use when reviewing image assets, markup, and CDN or build transforms related to Use progressive JPEG encoding. Check …

thedaviddias/front-end-checklist

5

43

redirect-chain Use when auditing site redirects after URL migrations, domain changes, or CMS upgrades. Applies to any site that has …

thedaviddias/front-end-checklist

5

44

redirect-chains Use when auditing internal link structure after a URL migration, domain change, or site rebuild. Applies to any site …

thedaviddias/front-end-checklist

5

45

redundant-entry Use when reviewing any process that spans multiple screens, steps, or modal stages. Follow the real user journey and …

thedaviddias/front-end-checklist

5

46

retina-display Use when reviewing image assets, markup, and CDN or build transforms related to Support high-DPI retina displays. Che…

thedaviddias/front-end-checklist

5

47

right-to-erasure Use when auditing account settings pages, privacy dashboards, or API routes to verify that a complete data deletion p…

thedaviddias/front-end-checklist

5

48

scheduler-yield Use when reviewing JavaScript that performs synchronous loops over large datasets, recursive tree traversals, or bulk…

thedaviddias/front-end-checklist

5

49

schema-noindex-conflict Use when applies to any site that uses structured data for rich results. Use when investigating why valid schema mark…

thedaviddias/front-end-checklist

5

50

search-input Use when reviewing templates, rendered HTML, or shared components related to Make search inputs accessible. Validate …

thedaviddias/front-end-checklist

5