🗂 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 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.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
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.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
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.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing utility functions, component props, or template strings that format numbers, prices, or dates to check whether Intl APIs are used correctly.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing stylesheets, component styles, and responsive behavior related to Support dark mode with prefers-color-scheme. Check the rendered layout across breakpoints and interaction states before proposing a fix.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing form components, API payloads, or client-side storage to identify fields that are collected but not consumed by a stated feature.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing a site's internal link graph for dead-end pages, suggesting related-content links to add to thin or standalone pages, or reviewing CMS templates that produce link-free content pages.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
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 real bottleneck or bug.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements from assistive technology. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant. If an image is clearly decorative…
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing templates, rendered HTML, or shared components related to Load scripts with defer, async, or type=module. Validate the final browser-facing markup, not just the source framework abstraction.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct definition list structure. 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 a project's security posture, setting up CI pipelines, or responding to a reported vulnerability in a dependency.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing image assets, markup, and CDN or build transforms related to Set explicit width and height on images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Separate real CLS risks from tiny decorative SVGs or ornament-only assets that are unlikely to move…
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages. Validate the final browser-facing markup, not just the source framework abstraction.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing YMYL content pages for trust signals, generating disclaimer copy for medical or financial content, or reviewing affiliate disclosure requirements under FTC or ASA guidelines.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Wrap definition items in a definition list. 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 HTML documents. Always check the very first line of the raw HTML source (view-source: or DevTools > Network > Response). In SSR frameworks, check the root HTML template (e.g., document.tsx in Next.js, index.html in Vite/Vue, application.html.erb in Rails). The doctype is not a tag — it is a…
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing scripts, client components, bundles, or runtime behavior related to Minimize costly DOM read/write operations. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug. In React, repeated requestAnimationFrame-driven state updates across multiple mounted…
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing slow page loads, heavy assets, or rendering delays related to Reduce DOM size and complexity. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing templates, rendered HTML, or shared components related to Make drag and drop accessible. Validate the final browser-facing markup, not just the source framework abstraction.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when auditing a site's meta tag uniqueness, generating page-specific meta descriptions, or reviewing CMS templates that inject the same description globally.
thedaviddias/Front-End-Checklist
Skill Claude CodeCodex
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for active elements. 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 Use unique IDs for ARIA references. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
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: