🗂 The essential checklist for modern web development, for humans and AI agents
This repository also configures its own agents. See what Front-End-Checklist tells them →
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
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, focus flow, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators. Check the rendered layout across breakpoints and interaction states before proposing a fix.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize web font loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when applies to all CSS font-size declarations, particularly those using px units for body text, UI labels, and navigation. Use when auditing mobile responsiveness and accessibility compliance. Check for font-size in media queries targeting small screens.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanisms.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use a single label for each form field. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing HTML forms, fetch/XHR calls, and form action attributes to ensure data is submitted exclusively over HTTPS.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with form controls. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing templates, rendered HTML, or shared components related to Validate forms accessibly. Validate the final browser-facing markup, not just the source framework abstraction. Distinguish between browser-posted forms and client-handled React forms so you do not over-report missing method or action as…
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide titles for iframes and frames. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing content pages for freshness signals, setting up HTTP Last-Modified headers in a web server config, or ensuring Article JSON-LD dateModified is updated when CMS content changes.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing locally-focused or regionally-targeted pages for geo targeting signals, particularly on sites targeting audiences through Bing or regional search engines. Note that these meta tags have no documented effect on Google's ranking.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize Google Tag Manager implementation. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing a page's heading structure, generating H1 text for landing pages or blog posts, or reviewing a CMS template that may produce empty or missing H1 elements.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child state, form input values, or content presence — :has() may replace the JavaScript entirely.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
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, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Maintain logical heading order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
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 WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing metadata, crawlability, structured data, or indexability related to Add hreflang tags for multilingual sites. Verify the rendered HTML and HTTP response rather than relying only on source files.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing HTTP response headers on any site that serves content over HTTPS.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch, dns-prefetch). Validate the final browser-facing markup, not just the source framework abstraction.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: