thedaviddias/front-end-checklist

thedaviddias/front-end-checklist · AGENTS.md

thedaviddias/front-end-checklist · CLAUDE.md

thedaviddias/front-end-checklist · packages/cli/SKILL.md · Review frontend code and live pages against the Front-End Checklist (380+ rules for accessibility, performance, SEO…

thedaviddias/front-end-checklist · plugins/front-end-checklist/skills/frontend-checklist-global/SKILL.md · Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry…

thedaviddias/front-end-checklist · skills/404-page/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate…

thedaviddias/front-end-checklist · skills/about-page/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page…

thedaviddias/front-end-checklist · skills/accessibility-testing/SKILL.md · Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks…

thedaviddias/front-end-checklist · skills/accessible-authentication/SKILL.md · Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path…

thedaviddias/front-end-checklist · skills/accessible-notifications/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate…

thedaviddias/front-end-checklist · skills/accessible-tables/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table…

thedaviddias/front-end-checklist · skills/accessible-tooltips/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Create accessible tooltips. Validate the…

thedaviddias/front-end-checklist · skills/accesskeys/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure accesskey values…

thedaviddias/front-end-checklist · skills/accordion-accessibility/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Make accordions keyboard navigable…

thedaviddias/front-end-checklist · skills/affiliate-disclosure/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Provide clear affiliate…

thedaviddias/front-end-checklist · skills/ai-content/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Audit and refine AI-generated…

thedaviddias/front-end-checklist · skills/all-noindex-pages/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Audit all noindex pages. Verify…

thedaviddias/front-end-checklist · skills/alt-text/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Provide meaningful alt text for images…

thedaviddias/front-end-checklist · skills/anchor-smooth-scroll/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide instant anchor…

thedaviddias/front-end-checklist · skills/anchor-text/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Use descriptive anchor text…

thedaviddias/front-end-checklist · skills/animated-content/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verify…

thedaviddias/front-end-checklist · skills/animation-performance/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Use transform and opacity for…

thedaviddias/front-end-checklist · skills/aria-allowed-attr/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use only allowed ARIA…

thedaviddias/front-end-checklist · skills/aria-command-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/aria-deprecated-role/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid using deprecated…

thedaviddias/front-end-checklist · skills/aria-dialog-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an…

thedaviddias/front-end-checklist · skills/aria-hidden-body/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden…

thedaviddias/front-end-checklist · skills/aria-hidden-focus/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Remove focusable…

thedaviddias/front-end-checklist · skills/aria-input-field-name/SKILL.md · Use when applies to all `<input>` (except type=hidden), `<textarea>`, `<select>`, and custom form widgets using…

thedaviddias/front-end-checklist · skills/aria-labels/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/aria-live-regions/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic content…

thedaviddias/front-end-checklist · skills/aria-meter-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/aria-progressbar-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/aria-required-attr/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Include required ARIA…

thedaviddias/front-end-checklist · skills/aria-required-children/SKILL.md · Use when applies to custom ARIA widgets using composite roles: tablist, list, listbox, menu, menubar, tree, treegrid…

thedaviddias/front-end-checklist · skills/aria-required-parent/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA roles are…

thedaviddias/front-end-checklist · skills/aria-roles/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid ARIA role…

thedaviddias/front-end-checklist · skills/aria-text/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid focusable…

thedaviddias/front-end-checklist · skills/aria-toggle-field-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/aria-tooltip-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/aria-treeitem-name/SKILL.md · Use when applies to custom tree widgets built with role='tree', role='treeitem', and role='group'. Common in file…

thedaviddias/front-end-checklist · skills/aria-valid-attr-value/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid values for…

thedaviddias/front-end-checklist · skills/aria-valid-attr/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA attributes…

thedaviddias/front-end-checklist · skills/article-links/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Optimize article link density…

thedaviddias/front-end-checklist · skills/article/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid Article…

thedaviddias/front-end-checklist · skills/audio-descriptions/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide audio…

thedaviddias/front-end-checklist · skills/author-byline/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Display clear author bylines…

thedaviddias/front-end-checklist · skills/author-expertise/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Highlight author credentials and…

thedaviddias/front-end-checklist · skills/author-info/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Implement comprehensive author…

thedaviddias/front-end-checklist · skills/autofocus-avoidance/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autofocus on form…

thedaviddias/front-end-checklist · skills/autoplay-media/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media…

thedaviddias/front-end-checklist · skills/avif-format/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Use AVIF format for modern browsers…

thedaviddias/front-end-checklist · skills/avoid-eval/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Never use eval() or unsafe…

thedaviddias/front-end-checklist · skills/back-forward-cache/SKILL.md · Use when reviewing navigation performance, browser lifecycle events, or resume-from-memory behavior. Check the actual…

thedaviddias/front-end-checklist · skills/blocked-links/SKILL.md · Use when reviewing HTML source and JavaScript for links or resource URLs pointing to domains listed in common adblocker…

thedaviddias/front-end-checklist · skills/breadcrumb-navigation/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb…

thedaviddias/front-end-checklist · skills/breadcrumb/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid BreadcrumbList…

thedaviddias/front-end-checklist · skills/broken-external-links/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Fix or remove broken external…

thedaviddias/front-end-checklist · skills/broken-html/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Fix malformed HTML structure…

thedaviddias/front-end-checklist · skills/broken-images/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Fix broken images. Check encoded size…

thedaviddias/front-end-checklist · skills/broken-links/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Resolve internal broken links…

thedaviddias/front-end-checklist · skills/browser-caching/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Enable browser caching. Verify the…

thedaviddias/front-end-checklist · skills/browser-required/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Perform browser-based performance…

thedaviddias/front-end-checklist · skills/button-name/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names…

thedaviddias/front-end-checklist · skills/canonical-chain/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Avoid redirect chains on…

thedaviddias/front-end-checklist · skills/canonical-header/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Sync HTML canonical tags and Link…

thedaviddias/front-end-checklist · skills/canonical-url/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Set canonical URLs for all pages…

thedaviddias/front-end-checklist · skills/carousel-accessibility/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Make carousels accessible. Validate the…

thedaviddias/front-end-checklist · skills/cascade-layers/SKILL.md · Use when reviewing a CSS architecture for specificity issues, setting up a design system, or migrating a large codebase…

thedaviddias/front-end-checklist · skills/cdn/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Use a content delivery network. Verify…

thedaviddias/front-end-checklist · skills/charset/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Declare UTF-8 character encoding. Validate…

thedaviddias/front-end-checklist · skills/citations/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Cite authoritative external…

thedaviddias/front-end-checklist · skills/clean-up-comments/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Remove comments and debug code in…

thedaviddias/front-end-checklist · skills/code-splitting/SKILL.md · Use when reviewing large SPA bundles, new dependency additions, or routes that feel slow to hydrate. Focus on code that…

thedaviddias/front-end-checklist · skills/color-contrast/SKILL.md · Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators…

thedaviddias/front-end-checklist · skills/color-oklch/SKILL.md · Use when building a design token system, creating accessible colour palettes, generating colour ramps programmatically…

thedaviddias/front-end-checklist · skills/compression/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Enable text-based compression. Verify…

thedaviddias/front-end-checklist · skills/consent-mode/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Implement Google Consent Mode v2…

thedaviddias/front-end-checklist · skills/consistent-help/SKILL.md · Use when reviewing support UI across multi-page flows such as checkout, onboarding, account recovery, or support…

thedaviddias/front-end-checklist · skills/console-cleanup/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Remove console statements in…

thedaviddias/front-end-checklist · skills/const-let/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Prefer const and let over var…

thedaviddias/front-end-checklist · skills/contact-page/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Create a comprehensive Contact…

thedaviddias/front-end-checklist · skills/container-queries/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Use container queries for…

thedaviddias/front-end-checklist · skills/content-dates/SKILL.md · Use when auditing article or blog pages for date markup, generating Article JSON-LD with datePublished/dateModified, or…

thedaviddias/front-end-checklist · skills/content-security-policy/SKILL.md · Use when reviewing headers, forms, cookies, or third-party integrations related to Implement a content security policy…

thedaviddias/front-end-checklist · skills/content-without-css/SKILL.md · Use when reviewing rendered HTML, layout components, or design-system patterns that may depend on presentation for…

thedaviddias/front-end-checklist · skills/contract-testing/SKILL.md · Use when setting up integration testing for a frontend-backend API boundary, evaluating whether two services are safe…

thedaviddias/front-end-checklist · skills/cookie-consent/SKILL.md · Use when reviewing a website for GDPR/CCPA compliance, specifically whether cookie consent is obtained before…

thedaviddias/front-end-checklist · skills/critical-images/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Prioritize loading critical images…

thedaviddias/front-end-checklist · skills/critical-request-chains/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize critical request chains…

thedaviddias/front-end-checklist · skills/cross-browser-testing/SKILL.md · Use when reviewing CI coverage, automated checks, or test strategy related to Test across all major browsers. Focus on…

thedaviddias/front-end-checklist · skills/cross-origin-isolation/SKILL.md · Use when reviewing security-sensitive web apps, SharedArrayBuffer usage, worker-heavy apps, editors, or measurement…

thedaviddias/front-end-checklist · skills/cross-origin-security/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Handle cross-origin requests…

thedaviddias/front-end-checklist · skills/css-at-property/SKILL.md · Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a…

thedaviddias/front-end-checklist · skills/css-containment/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS containment to limit…

thedaviddias/front-end-checklist · skills/css-critical/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster…

thedaviddias/front-end-checklist · skills/css-custom-properties/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS custom properties for…

thedaviddias/front-end-checklist · skills/css-file-size/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize CSS file size. Verify the…

thedaviddias/front-end-checklist · skills/css-grid/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS Grid for two-dimensional…

thedaviddias/front-end-checklist · skills/css-minification/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Minify all CSS files. Check the…

thedaviddias/front-end-checklist · skills/css-non-blocking/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Load CSS without blocking render…

thedaviddias/front-end-checklist · skills/css-order/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Order CSS files correctly. Check…

thedaviddias/front-end-checklist · skills/css-print/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Include a print stylesheet. Check…

thedaviddias/front-end-checklist · skills/cumulative-layout-shift/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize cumulative layout shift…

thedaviddias/front-end-checklist · skills/currency-formatting/SKILL.md · Use when reviewing utility functions, component props, or template strings that format numbers, prices, or dates to…

thedaviddias/front-end-checklist · skills/custom-element-accessibility/SKILL.md · Use when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection…

thedaviddias/front-end-checklist · skills/dark-mode-css/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Support dark mode with…

thedaviddias/front-end-checklist · skills/data-minimisation/SKILL.md · Use when reviewing form components, API payloads, or client-side storage to identify fields that are collected but not…

thedaviddias/front-end-checklist · skills/dead-end-pages/SKILL.md · Use when auditing a site's internal link graph for dead-end pages, suggesting related-content links to add to thin or…

thedaviddias/front-end-checklist · skills/debounce-throttle/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Debounce and throttle event…

thedaviddias/front-end-checklist · skills/decorative-elements/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements…

thedaviddias/front-end-checklist · skills/defer-async/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Load scripts with defer, async, or…

thedaviddias/front-end-checklist · skills/definition-list/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct definition…

thedaviddias/front-end-checklist · skills/dependency-audit/SKILL.md · Use when reviewing a project's security posture, setting up CI pipelines, or responding to a reported vulnerability in…

thedaviddias/front-end-checklist · skills/dimensions/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Set explicit width and height on…

thedaviddias/front-end-checklist · skills/direction-attribute/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages…

thedaviddias/front-end-checklist · skills/disclaimers/SKILL.md · Use when auditing YMYL content pages for trust signals, generating disclaimer copy for medical or financial content, or…

thedaviddias/front-end-checklist · skills/dlitem/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Wrap definition items in…

thedaviddias/front-end-checklist · skills/doctype/SKILL.md · Use when applies to all HTML documents. Always check the very first line of the raw HTML source (view-source: or…

thedaviddias/front-end-checklist · skills/dom-performance/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Minimize costly DOM read/write…

thedaviddias/front-end-checklist · skills/dom-size/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Reduce DOM size and complexity. Verify…

thedaviddias/front-end-checklist · skills/draggable-accessibility/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Make drag and drop accessible. Validate…

thedaviddias/front-end-checklist · skills/duplicate-description/SKILL.md · Use when auditing a site's meta tag uniqueness, generating page-specific meta descriptions, or reviewing CMS templates…

thedaviddias/front-end-checklist · skills/duplicate-id-active/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for…

thedaviddias/front-end-checklist · skills/duplicate-id-aria/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for ARIA…

thedaviddias/front-end-checklist · skills/duplicate-js/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Remove duplicate JavaScript libraries…

thedaviddias/front-end-checklist · skills/e2e-testing/SKILL.md · Use when reviewing CI coverage, automated checks, or test strategy related to Implement end-to-end testing. Focus on…

thedaviddias/front-end-checklist · skills/editorial-policy/SKILL.md · Use when auditing a blog, news site, or YMYL content site for trust signals, drafting editorial policy page content, or…

thedaviddias/front-end-checklist · skills/element-hiding/SKILL.md · Use when reviewing a website for layout and functionality issues caused by adblocker filter rules targeting common…

thedaviddias/front-end-checklist · skills/embedded-or-inline-css/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Avoid embedded and inline CSS…

thedaviddias/front-end-checklist · skills/empty-heading/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure headings contain…

thedaviddias/front-end-checklist · skills/empty-links/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Fix empty and broken…

thedaviddias/front-end-checklist · skills/error-handling/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Implement proper error handling…

thedaviddias/front-end-checklist · skills/error-images/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Handle image loading errors gracefully…

thedaviddias/front-end-checklist · skills/error-monitoring/SKILL.md · Use when setting up a new project's production observability stack, reviewing incident response readiness, or…

thedaviddias/front-end-checklist · skills/es-modules/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export)…

thedaviddias/front-end-checklist · skills/event-delegation/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Use event delegation for dynamic…

thedaviddias/front-end-checklist · skills/external-links/SKILL.md · Use when auditing content pages for citation quality, suggesting authoritative sources to link for factual claims, or…

thedaviddias/front-end-checklist · skills/faq/SKILL.md · Use when adding FAQ sections to landing pages or blog posts, generating FAQPage JSON-LD from existing Q&A content, or…

thedaviddias/front-end-checklist · skills/favicon/SKILL.md · Use when checking whether a site has a correctly configured favicon, auditing `<link rel='icon'>` tags in the `<head>`…

thedaviddias/front-end-checklist · skills/favicons/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Implement favicons for all devices…

thedaviddias/front-end-checklist · skills/fetchpriority-attribute/SKILL.md · Use when optimising Largest Contentful Paint (LCP), reducing render-blocking resource contention, or fine-tuning…

thedaviddias/front-end-checklist · skills/figure-figcaption/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image…

thedaviddias/front-end-checklist · skills/file-upload-accessibility/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Make file uploads accessible. Validate the…

thedaviddias/front-end-checklist · skills/filename-quality/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Use descriptive image filenames. Check…

thedaviddias/front-end-checklist · skills/find-npm-packages/SKILL.md · 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 · skills/first-contentful-paint/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize first contentful paint. Verify…

thedaviddias/front-end-checklist · skills/flashing-content/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Prevent…

thedaviddias/front-end-checklist · skills/flexbox-patterns/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices…

thedaviddias/front-end-checklist · skills/focus-management/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Manage focus during…

thedaviddias/front-end-checklist · skills/focus-not-obscured/SKILL.md · Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the…

thedaviddias/front-end-checklist · skills/focus-order/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus…

thedaviddias/front-end-checklist · skills/focus-styles/SKILL.md · Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus…

thedaviddias/front-end-checklist · skills/font-loading/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize web font loading. Verify the…

thedaviddias/front-end-checklist · skills/font-size/SKILL.md · Use when applies to all CSS `font-size` declarations, particularly those using `px` units for body text, UI labels, and…

thedaviddias/front-end-checklist · skills/form-captcha/SKILL.md · Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanisms.

thedaviddias/front-end-checklist · skills/form-field-multiple-labels/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use a single label for…

thedaviddias/front-end-checklist · skills/form-https/SKILL.md · Use when reviewing HTML forms, fetch/XHR calls, and form action attributes to ensure data is submitted exclusively over…

thedaviddias/front-end-checklist · skills/form-labels/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with…

thedaviddias/front-end-checklist · skills/form-validation/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Validate forms accessibly. Validate the…

thedaviddias/front-end-checklist · skills/frame-title/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide titles for…

thedaviddias/front-end-checklist · skills/freshness/SKILL.md · Use when auditing content pages for freshness signals, setting up HTTP Last-Modified headers in a web server config, or…

thedaviddias/front-end-checklist · skills/frontend-checklist-global/SKILL.md · Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry…

thedaviddias/front-end-checklist · skills/geo-meta/SKILL.md · Use when auditing locally-focused or regionally-targeted pages for geo targeting signals, particularly on sites…

thedaviddias/front-end-checklist · skills/gtm-present/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize Google Tag Manager…

thedaviddias/front-end-checklist · skills/h1/SKILL.md · Use when auditing a page's heading structure, generating H1 text for landing pages or blog posts, or reviewing a CMS…

thedaviddias/front-end-checklist · skills/has-selector/SKILL.md · Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child…

thedaviddias/front-end-checklist · skills/heading-hierarchy/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use logical heading…

thedaviddias/front-end-checklist · skills/heading-order/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Maintain logical heading…

thedaviddias/front-end-checklist · skills/horizontal-scroll/SKILL.md · Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`…

thedaviddias/front-end-checklist · skills/hreflang/SKILL.md · Use when auditing metadata, crawlability, structured data, or indexability related to Add hreflang tags for…

thedaviddias/front-end-checklist · skills/hsts/SKILL.md · Use when reviewing HTTP response headers on any site that serves content over HTTPS.

thedaviddias/front-end-checklist · skills/html-resource-hints/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch…

thedaviddias/front-end-checklist · skills/html-size/SKILL.md · Use when auditing page weight for crawl efficiency, investigating why certain page content is not appearing in Google's…

thedaviddias/front-end-checklist · skills/html-xml-lang-mismatch/SKILL.md · Use when applies to XHTML documents and polyglot HTML documents that must parse correctly as both HTML5 and XML. For…

thedaviddias/front-end-checklist · skills/html5-semantic-elements/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Use semantic HTML elements. Validate the…

thedaviddias/front-end-checklist · skills/http-requests/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize HTTP requests. Verify the…

thedaviddias/front-end-checklist · skills/http-to-https/SKILL.md · Use when checking whether a web server is configured to redirect all HTTP traffic to HTTPS.

thedaviddias/front-end-checklist · skills/http2/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Enable HTTP/2 or HTTP/3. Verify the…

thedaviddias/front-end-checklist · skills/https-downgrade/SKILL.md · Use when auditing a site's internal and external links for protocol consistency, migrating a site from HTTP to HTTPS…

thedaviddias/front-end-checklist · skills/https/SKILL.md · Use when auditing whether a website or web application serves content exclusively over HTTPS with a valid certificate.

thedaviddias/front-end-checklist · skills/hyphens/SKILL.md · Use when auditing URL structures for word separator format, generating slugs from titles, or planning a URL migration…

thedaviddias/front-end-checklist · skills/identical-links-same-purpose/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure identical links…

thedaviddias/front-end-checklist · skills/image-cdn/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Serve images from a CDN. Check encoded…

thedaviddias/front-end-checklist · skills/image-compression/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Compress images without quality loss…

thedaviddias/front-end-checklist · skills/image-file-size/SKILL.md · Use when auditing the image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms. Separate…

thedaviddias/front-end-checklist · skills/image-optimization/SKILL.md · Use when reviewing image assets, markup, and CDN or build transforms related to Optimize all images for web. Check…

thedaviddias/front-end-checklist · skills/image-redundant-alt/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid redundant image…

thedaviddias/front-end-checklist · skills/immutable-patterns/SKILL.md · Use when reviewing scripts, client components, bundles, or runtime behavior related to Prefer immutable data patterns…

thedaviddias/front-end-checklist · skills/import-on-interaction/SKILL.md · Use when reviewing slow initial loads caused by optional features. Prioritize code that is expensive to download or…

thedaviddias/front-end-checklist · skills/import-on-visibility/SKILL.md · Use when reviewing long pages, dashboards, or content feeds with expensive offscreen modules. Balance early enough…

thedaviddias/front-end-checklist · skills/improve-rule/SKILL.md · Use when reviewing or improving a Front-End Checklist rule MDX file to raise its quality score, fix stub prompts, add…

thedaviddias/front-end-checklist · skills/inclusive-language/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use inclusive language…

thedaviddias/front-end-checklist · skills/indexability-conflicts/SKILL.md · Use when auditing a site for indexability issues, investigating why pages appear in Google's index that should be…

thedaviddias/front-end-checklist · skills/indexability/SKILL.md · Use when auditing a site for accidental noindex directives, investigating why important pages are not appearing in…

thedaviddias/front-end-checklist · skills/input-image-alt/SKILL.md · Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alt text for…

thedaviddias/front-end-checklist · skills/input-types/SKILL.md · Use when reviewing templates, rendered HTML, or shared components related to Use semantic input type attributes…

thedaviddias/front-end-checklist · skills/integration-testing/SKILL.md · Use when reviewing CI coverage, automated checks, or test strategy related to Write integration tests for key…

thedaviddias/front-end-checklist · skills/interaction-to-next-paint/SKILL.md · Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint…

thedaviddias/front-end-checklist · skills/internal-links/SKILL.md · Use when auditing a site's internal link structure, identifying pages that need more incoming links, generating…

thedaviddias/front-end-checklist · skills/interstitials/SKILL.md · Use when applies to CSS and JavaScript implementations of modals, overlays, pop-ups, cookie banners, newsletter sign-up…