{"owner":"thedaviddias","repo":"Front-End-Checklist","hasSkills":true,"totalSkillsCount":794,"totalTokensCount":690838,"categories":["marketplace","root-instruction","claude-rule","plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":[".agents/plugins/marketplace.json",".claude-plugin/marketplace.json","AGENTS.md","CLAUDE.md","packages/analytics/README.md","packages/cli/README.md","packages/cli/SKILL.md","packages/rules/README.md","plugins/front-end-checklist/.claude-plugin/plugin.json","plugins/front-end-checklist/.codex-plugin/plugin.json","plugins/front-end-checklist/README.md","plugins/front-end-checklist/skills/frontend-checklist-global/SKILL.md","plugins/front-end-checklist/skills/frontend-checklist-global/references/categories.md","skills/404-page/SKILL.md","skills/404-page/references/rule.md","skills/about-page/SKILL.md","skills/about-page/references/rule.md","skills/accessibility-testing/SKILL.md","skills/accessibility-testing/references/rule.md","skills/accessible-authentication/SKILL.md","skills/accessible-authentication/references/rule.md","skills/accessible-notifications/SKILL.md","skills/accessible-notifications/references/rule.md","skills/accessible-tables/SKILL.md","skills/accessible-tables/references/rule.md","skills/accessible-tooltips/SKILL.md","skills/accessible-tooltips/references/rule.md","skills/accesskeys/SKILL.md","skills/accesskeys/references/rule.md","skills/accordion-accessibility/SKILL.md","skills/accordion-accessibility/references/rule.md","skills/affiliate-disclosure/SKILL.md","skills/affiliate-disclosure/references/rule.md","skills/ai-content/SKILL.md","skills/ai-content/references/rule.md","skills/all-noindex-pages/SKILL.md","skills/all-noindex-pages/references/rule.md","skills/alt-text/SKILL.md","skills/alt-text/references/rule.md","skills/anchor-smooth-scroll/SKILL.md","skills/anchor-smooth-scroll/references/rule.md","skills/anchor-text/SKILL.md","skills/anchor-text/references/rule.md","skills/animated-content/SKILL.md","skills/animated-content/references/rule.md","skills/animation-performance/SKILL.md","skills/animation-performance/references/rule.md","skills/aria-allowed-attr/SKILL.md","skills/aria-allowed-attr/references/rule.md","skills/aria-command-name/SKILL.md","skills/aria-command-name/references/rule.md","skills/aria-deprecated-role/SKILL.md","skills/aria-deprecated-role/references/rule.md","skills/aria-dialog-name/SKILL.md","skills/aria-dialog-name/references/rule.md","skills/aria-hidden-body/SKILL.md","skills/aria-hidden-body/references/rule.md","skills/aria-hidden-focus/SKILL.md","skills/aria-hidden-focus/references/rule.md","skills/aria-input-field-name/SKILL.md","skills/aria-input-field-name/references/rule.md","skills/aria-labels/SKILL.md","skills/aria-labels/references/rule.md","skills/aria-live-regions/SKILL.md","skills/aria-live-regions/references/rule.md","skills/aria-meter-name/SKILL.md","skills/aria-meter-name/references/rule.md","skills/aria-progressbar-name/SKILL.md","skills/aria-progressbar-name/references/rule.md","skills/aria-required-attr/SKILL.md","skills/aria-required-attr/references/rule.md","skills/aria-required-children/SKILL.md","skills/aria-required-children/references/rule.md","skills/aria-required-parent/SKILL.md","skills/aria-required-parent/references/rule.md","skills/aria-roles/SKILL.md","skills/aria-roles/references/rule.md","skills/aria-text/SKILL.md","skills/aria-text/references/rule.md","skills/aria-toggle-field-name/SKILL.md","skills/aria-toggle-field-name/references/rule.md","skills/aria-tooltip-name/SKILL.md","skills/aria-tooltip-name/references/rule.md","skills/aria-treeitem-name/SKILL.md","skills/aria-treeitem-name/references/rule.md","skills/aria-valid-attr-value/SKILL.md","skills/aria-valid-attr-value/references/rule.md","skills/aria-valid-attr/SKILL.md","skills/aria-valid-attr/references/rule.md","skills/article-links/SKILL.md","skills/article-links/references/rule.md","skills/article/SKILL.md","skills/article/references/rule.md","skills/audio-descriptions/SKILL.md","skills/audio-descriptions/references/rule.md","skills/author-byline/SKILL.md","skills/author-byline/references/rule.md","skills/author-expertise/SKILL.md","skills/author-expertise/references/rule.md","skills/author-info/SKILL.md","skills/author-info/references/rule.md","skills/autofocus-avoidance/SKILL.md","skills/autofocus-avoidance/references/rule.md","skills/autoplay-media/SKILL.md","skills/autoplay-media/references/rule.md","skills/avif-format/SKILL.md","skills/avif-format/references/rule.md","skills/avoid-eval/SKILL.md","skills/avoid-eval/references/rule.md","skills/back-forward-cache/SKILL.md","skills/back-forward-cache/references/rule.md","skills/blocked-links/SKILL.md","skills/blocked-links/references/rule.md","skills/breadcrumb-navigation/SKILL.md","skills/breadcrumb-navigation/references/rule.md","skills/breadcrumb/SKILL.md","skills/breadcrumb/references/rule.md","skills/broken-external-links/SKILL.md","skills/broken-external-links/references/rule.md","skills/broken-html/SKILL.md","skills/broken-html/references/rule.md","skills/broken-images/SKILL.md","skills/broken-images/references/rule.md","skills/broken-links/SKILL.md","skills/broken-links/references/rule.md","skills/browser-caching/SKILL.md","skills/browser-caching/references/rule.md","skills/browser-required/SKILL.md","skills/browser-required/references/rule.md","skills/button-name/SKILL.md","skills/button-name/references/rule.md","skills/canonical-chain/SKILL.md","skills/canonical-chain/references/rule.md","skills/canonical-header/SKILL.md","skills/canonical-header/references/rule.md","skills/canonical-url/SKILL.md","skills/canonical-url/references/rule.md","skills/carousel-accessibility/SKILL.md","skills/carousel-accessibility/references/rule.md","skills/cascade-layers/SKILL.md","skills/cascade-layers/references/rule.md","skills/cdn/SKILL.md","skills/cdn/references/rule.md","skills/charset/SKILL.md","skills/charset/references/rule.md","skills/citations/SKILL.md","skills/citations/references/rule.md","skills/clean-up-comments/SKILL.md","skills/clean-up-comments/references/rule.md","skills/code-splitting/SKILL.md","skills/code-splitting/references/rule.md","skills/color-contrast/SKILL.md","skills/color-contrast/references/rule.md","skills/color-oklch/SKILL.md","skills/color-oklch/references/rule.md","skills/compression/SKILL.md","skills/compression/references/rule.md","skills/consent-mode/SKILL.md","skills/consent-mode/references/rule.md","skills/consistent-help/SKILL.md","skills/consistent-help/references/rule.md","skills/console-cleanup/SKILL.md","skills/console-cleanup/references/rule.md","skills/const-let/SKILL.md","skills/const-let/references/rule.md","skills/contact-page/SKILL.md","skills/contact-page/references/rule.md","skills/container-queries/SKILL.md","skills/container-queries/references/rule.md","skills/content-dates/SKILL.md","skills/content-dates/references/rule.md","skills/content-security-policy/SKILL.md","skills/content-security-policy/references/rule.md","skills/content-without-css/SKILL.md","skills/content-without-css/references/rule.md","skills/contract-testing/SKILL.md","skills/contract-testing/references/rule.md","skills/cookie-consent/SKILL.md","skills/cookie-consent/references/rule.md","skills/critical-images/SKILL.md","skills/critical-images/references/rule.md","skills/critical-request-chains/SKILL.md","skills/critical-request-chains/references/rule.md","skills/cross-browser-testing/SKILL.md","skills/cross-browser-testing/references/rule.md","skills/cross-origin-isolation/SKILL.md","skills/cross-origin-isolation/references/rule.md","skills/cross-origin-security/SKILL.md","skills/cross-origin-security/references/rule.md","skills/css-at-property/SKILL.md","skills/css-at-property/references/rule.md","skills/css-containment/SKILL.md","skills/css-containment/references/rule.md","skills/css-critical/SKILL.md","skills/css-critical/references/rule.md","skills/css-custom-properties/SKILL.md","skills/css-custom-properties/references/rule.md","skills/css-file-size/SKILL.md","skills/css-file-size/references/rule.md","skills/css-grid/SKILL.md","skills/css-grid/references/rule.md","skills/css-minification/SKILL.md","skills/css-minification/references/rule.md","skills/css-non-blocking/SKILL.md","skills/css-non-blocking/references/rule.md","skills/css-order/SKILL.md","skills/css-order/references/rule.md","skills/css-print/SKILL.md","skills/css-print/references/rule.md","skills/cumulative-layout-shift/SKILL.md","skills/cumulative-layout-shift/references/rule.md","skills/currency-formatting/SKILL.md","skills/currency-formatting/references/rule.md","skills/custom-element-accessibility/SKILL.md","skills/custom-element-accessibility/references/rule.md","skills/dark-mode-css/SKILL.md","skills/dark-mode-css/references/rule.md","skills/data-minimisation/SKILL.md","skills/data-minimisation/references/rule.md","skills/dead-end-pages/SKILL.md","skills/dead-end-pages/references/rule.md","skills/debounce-throttle/SKILL.md","skills/debounce-throttle/references/rule.md","skills/decorative-elements/SKILL.md","skills/decorative-elements/references/rule.md","skills/defer-async/SKILL.md","skills/defer-async/references/rule.md","skills/definition-list/SKILL.md","skills/definition-list/references/rule.md","skills/dependency-audit/SKILL.md","skills/dependency-audit/references/rule.md","skills/dimensions/SKILL.md","skills/dimensions/references/rule.md","skills/direction-attribute/SKILL.md","skills/direction-attribute/references/rule.md","skills/disclaimers/SKILL.md","skills/disclaimers/references/rule.md","skills/dlitem/SKILL.md","skills/dlitem/references/rule.md","skills/doctype/SKILL.md","skills/doctype/references/rule.md","skills/dom-performance/SKILL.md","skills/dom-performance/references/rule.md","skills/dom-size/SKILL.md","skills/dom-size/references/rule.md","skills/draggable-accessibility/SKILL.md","skills/draggable-accessibility/references/rule.md","skills/duplicate-description/SKILL.md","skills/duplicate-description/references/rule.md","skills/duplicate-id-active/SKILL.md","skills/duplicate-id-active/references/rule.md","skills/duplicate-id-aria/SKILL.md","skills/duplicate-id-aria/references/rule.md","skills/duplicate-js/SKILL.md","skills/duplicate-js/references/rule.md","skills/e2e-testing/SKILL.md","skills/e2e-testing/references/rule.md","skills/editorial-policy/SKILL.md","skills/editorial-policy/references/rule.md","skills/element-hiding/SKILL.md","skills/element-hiding/references/rule.md","skills/embedded-or-inline-css/SKILL.md","skills/embedded-or-inline-css/references/rule.md","skills/empty-heading/SKILL.md","skills/empty-heading/references/rule.md","skills/empty-links/SKILL.md","skills/empty-links/references/rule.md","skills/error-handling/SKILL.md","skills/error-handling/references/rule.md","skills/error-images/SKILL.md","skills/error-images/references/rule.md","skills/error-monitoring/SKILL.md","skills/error-monitoring/references/rule.md","skills/es-modules/SKILL.md","skills/es-modules/references/rule.md","skills/event-delegation/SKILL.md","skills/event-delegation/references/rule.md","skills/external-links/SKILL.md","skills/external-links/references/rule.md","skills/faq/SKILL.md","skills/faq/references/rule.md","skills/favicon/SKILL.md","skills/favicon/references/rule.md","skills/favicons/SKILL.md","skills/favicons/references/rule.md","skills/fetchpriority-attribute/SKILL.md","skills/fetchpriority-attribute/references/rule.md","skills/figure-figcaption/SKILL.md","skills/figure-figcaption/references/rule.md","skills/file-upload-accessibility/SKILL.md","skills/file-upload-accessibility/references/rule.md","skills/filename-quality/SKILL.md","skills/filename-quality/references/rule.md","skills/find-npm-packages/SKILL.md","skills/first-contentful-paint/SKILL.md","skills/first-contentful-paint/references/rule.md","skills/flashing-content/SKILL.md","skills/flashing-content/references/rule.md","skills/flexbox-patterns/SKILL.md","skills/flexbox-patterns/references/rule.md","skills/focus-management/SKILL.md","skills/focus-management/references/rule.md","skills/focus-not-obscured/SKILL.md","skills/focus-not-obscured/references/rule.md","skills/focus-order/SKILL.md","skills/focus-order/references/rule.md","skills/focus-styles/SKILL.md","skills/focus-styles/references/rule.md","skills/font-loading/SKILL.md","skills/font-loading/references/rule.md","skills/font-size/SKILL.md","skills/font-size/references/rule.md","skills/form-captcha/SKILL.md","skills/form-captcha/references/rule.md","skills/form-field-multiple-labels/SKILL.md","skills/form-field-multiple-labels/references/rule.md","skills/form-https/SKILL.md","skills/form-https/references/rule.md","skills/form-labels/SKILL.md","skills/form-labels/references/rule.md","skills/form-validation/SKILL.md","skills/form-validation/references/rule.md","skills/frame-title/SKILL.md","skills/frame-title/references/rule.md","skills/freshness/SKILL.md","skills/freshness/references/rule.md","skills/frontend-checklist-global/SKILL.md","skills/frontend-checklist-global/references/categories.md","skills/geo-meta/SKILL.md","skills/geo-meta/references/rule.md","skills/gtm-present/SKILL.md","skills/gtm-present/references/rule.md","skills/h1/SKILL.md","skills/h1/references/rule.md","skills/has-selector/SKILL.md","skills/has-selector/references/rule.md","skills/heading-hierarchy/SKILL.md","skills/heading-hierarchy/references/rule.md","skills/heading-order/SKILL.md","skills/heading-order/references/rule.md","skills/horizontal-scroll/SKILL.md","skills/horizontal-scroll/references/rule.md","skills/hreflang/SKILL.md","skills/hreflang/references/rule.md","skills/hsts/SKILL.md","skills/hsts/references/rule.md","skills/html-resource-hints/SKILL.md","skills/html-resource-hints/references/rule.md","skills/html-size/SKILL.md","skills/html-size/references/rule.md","skills/html-xml-lang-mismatch/SKILL.md","skills/html-xml-lang-mismatch/references/rule.md","skills/html5-semantic-elements/SKILL.md","skills/html5-semantic-elements/references/rule.md","skills/http-requests/SKILL.md","skills/http-requests/references/rule.md","skills/http-to-https/SKILL.md","skills/http-to-https/references/rule.md","skills/http2/SKILL.md","skills/http2/references/rule.md","skills/https-downgrade/SKILL.md","skills/https-downgrade/references/rule.md","skills/https/SKILL.md","skills/https/references/rule.md","skills/hyphens/SKILL.md","skills/hyphens/references/rule.md","skills/identical-links-same-purpose/SKILL.md","skills/identical-links-same-purpose/references/rule.md","skills/image-cdn/SKILL.md","skills/image-cdn/references/rule.md","skills/image-compression/SKILL.md","skills/image-compression/references/rule.md","skills/image-file-size/SKILL.md","skills/image-file-size/references/rule.md","skills/image-optimization/SKILL.md","skills/image-optimization/references/rule.md","skills/image-redundant-alt/SKILL.md","skills/image-redundant-alt/references/rule.md","skills/immutable-patterns/SKILL.md","skills/immutable-patterns/references/rule.md","skills/import-on-interaction/SKILL.md","skills/import-on-interaction/references/rule.md","skills/import-on-visibility/SKILL.md","skills/import-on-visibility/references/rule.md","skills/improve-rule/SKILL.md","skills/improve-rule/references/scoring-rubric.md","skills/inclusive-language/SKILL.md","skills/inclusive-language/references/rule.md","skills/indexability-conflicts/SKILL.md","skills/indexability-conflicts/references/rule.md","skills/indexability/SKILL.md","skills/indexability/references/rule.md","skills/input-image-alt/SKILL.md","skills/input-image-alt/references/rule.md","skills/input-types/SKILL.md","skills/input-types/references/rule.md","skills/integration-testing/SKILL.md","skills/integration-testing/references/rule.md","skills/interaction-to-next-paint/SKILL.md","skills/interaction-to-next-paint/references/rule.md","skills/internal-links/SKILL.md","skills/internal-links/references/rule.md","skills/interstitials/SKILL.md","skills/interstitials/references/rule.md","skills/invalid-links/SKILL.md","skills/invalid-links/references/rule.md","skills/javascript-inline/SKILL.md","skills/javascript-inline/references/rule.md","skills/javascript-linter/SKILL.md","skills/javascript-linter/references/rule.md","skills/javascript-minification/SKILL.md","skills/javascript-minification/references/rule.md","skills/js-file-size/SKILL.md","skills/js-file-size/references/rule.md","skills/js-libraries/SKILL.md","skills/js-libraries/references/rule.md","skills/js-redirects/SKILL.md","skills/js-redirects/references/rule.md","skills/json-ld-valid/SKILL.md","skills/json-ld-valid/references/rule.md","skills/json-safety/SKILL.md","skills/json-safety/references/rule.md","skills/keyboard-navigation/SKILL.md","skills/keyboard-navigation/references/rule.md","skills/keyword-stuffing/SKILL.md","skills/keyword-stuffing/references/rule.md","skills/label-content-name-mismatch/SKILL.md","skills/label-content-name-mismatch/references/rule.md","skills/landmark-one-main/SKILL.md","skills/landmark-one-main/references/rule.md","skills/landmark-regions/SKILL.md","skills/landmark-regions/references/rule.md","skills/lang-attribute/SKILL.md","skills/lang-attribute/references/rule.md","skills/largest-contentful-paint/SKILL.md","skills/largest-contentful-paint/references/rule.md","skills/lazy-above-fold/SKILL.md","skills/lazy-above-fold/references/rule.md","skills/lazy-loading/SKILL.md","skills/lazy-loading/references/rule.md","skills/leaked-secrets/SKILL.md","skills/leaked-secrets/references/rule.md","skills/legacy-js/SKILL.md","skills/legacy-js/references/rule.md","skills/length/SKILL.md","skills/length/references/rule.md","skills/link-checker/SKILL.md","skills/link-checker/references/rule.md","skills/link-in-text-block/SKILL.md","skills/link-in-text-block/references/rule.md","skills/link-text/SKILL.md","skills/link-text/references/rule.md","skills/list-structure/SKILL.md","skills/list-structure/references/rule.md","skills/list-virtualization/SKILL.md","skills/list-virtualization/references/rule.md","skills/listitem/SKILL.md","skills/listitem/references/rule.md","skills/llm-parsability/SKILL.md","skills/llm-parsability/references/rule.md","skills/llms-txt/SKILL.md","skills/llms-txt/references/rule.md","skills/loading-indicators/SKILL.md","skills/loading-indicators/references/rule.md","skills/local-business/SKILL.md","skills/local-business/references/rule.md","skills/locale-images/SKILL.md","skills/locale-images/references/rule.md","skills/logical-properties/SKILL.md","skills/logical-properties/references/rule.md","skills/lowercase/SKILL.md","skills/lowercase/references/rule.md","skills/memory-leaks/SKILL.md","skills/memory-leaks/references/rule.md","skills/meta-description/SKILL.md","skills/meta-description/references/rule.md","skills/meta-in-body/SKILL.md","skills/meta-in-body/references/rule.md","skills/meta-refresh/SKILL.md","skills/meta-refresh/references/rule.md","skills/meta-title/SKILL.md","skills/meta-title/references/rule.md","skills/mime-type/SKILL.md","skills/mime-type/references/rule.md","skills/mixed-content/SKILL.md","skills/mixed-content/references/rule.md","skills/mobile-testing/SKILL.md","skills/mobile-testing/references/rule.md","skills/mock-best-practices/SKILL.md","skills/mock-best-practices/references/rule.md","skills/modal-accessibility/SKILL.md","skills/modal-accessibility/references/rule.md","skills/modern-array-methods/SKILL.md","skills/modern-array-methods/references/rule.md","skills/modern-format/SKILL.md","skills/modern-format/references/rule.md","skills/mutation-testing/SKILL.md","skills/mutation-testing/references/rule.md","skills/naming-conventions/SKILL.md","skills/naming-conventions/references/rule.md","skills/nap-consistency/SKILL.md","skills/nap-consistency/references/rule.md","skills/navigation-landmark/SKILL.md","skills/navigation-landmark/references/rule.md","skills/new-tab/SKILL.md","skills/new-tab/references/rule.md","skills/no-explicit-any/SKILL.md","skills/no-explicit-any/references/rule.md","skills/no-unchecked-indexed-access/SKILL.md","skills/no-unchecked-indexed-access/references/rule.md","skills/nofollow-internal/SKILL.md","skills/nofollow-internal/references/rule.md","skills/noindex-in-sitemap/SKILL.md","skills/noindex-in-sitemap/references/rule.md","skills/noscript-tag/SKILL.md","skills/noscript-tag/references/rule.md","skills/nosnippet/SKILL.md","skills/nosnippet/references/rule.md","skills/object-alt/SKILL.md","skills/object-alt/references/rule.md","skills/offline-fallback/SKILL.md","skills/offline-fallback/references/rule.md","skills/offscreen-lazy/SKILL.md","skills/offscreen-lazy/references/rule.md","skills/og-image-size/SKILL.md","skills/og-image-size/references/rule.md","skills/og-tags/SKILL.md","skills/og-tags/references/rule.md","skills/og-url-match/SKILL.md","skills/og-url-match/references/rule.md","skills/optimized/SKILL.md","skills/optimized/references/rule.md","skills/organization/SKILL.md","skills/organization/references/rule.md","skills/orientation/SKILL.md","skills/orientation/references/rule.md","skills/orphan-pages/SKILL.md","skills/orphan-pages/references/rule.md","skills/page-load-time/SKILL.md","skills/page-load-time/references/rule.md","skills/page-weight/SKILL.md","skills/page-weight/references/rule.md","skills/pagination-accessibility/SKILL.md","skills/pagination-accessibility/references/rule.md","skills/pagination/SKILL.md","skills/pagination/references/rule.md","skills/parallax-effects/SKILL.md","skills/parallax-effects/references/rule.md","skills/parameters/SKILL.md","skills/parameters/references/rule.md","skills/password-field-security/SKILL.md","skills/password-field-security/references/rule.md","skills/paste-inputs/SKILL.md","skills/paste-inputs/references/rule.md","skills/pdf-size/SKILL.md","skills/pdf-size/references/rule.md","skills/performance-budget/SKILL.md","skills/performance-budget/references/rule.md","skills/performance-resource-hints/SKILL.md","skills/performance-resource-hints/references/rule.md","skills/permissions-policy/SKILL.md","skills/permissions-policy/references/rule.md","skills/physical-address/SKILL.md","skills/physical-address/references/rule.md","skills/picture-element/SKILL.md","skills/picture-element/references/rule.md","skills/plain-language/SKILL.md","skills/plain-language/references/rule.md","skills/pluralization/SKILL.md","skills/pluralization/references/rule.md","skills/preconnect/SKILL.md","skills/preconnect/references/rule.md","skills/privacy-policy/SKILL.md","skills/privacy-policy/references/rule.md","skills/product/SKILL.md","skills/product/references/rule.md","skills/progressive-jpeg/SKILL.md","skills/progressive-jpeg/references/rule.md","skills/pwa-installability/SKILL.md","skills/pwa-installability/references/rule.md","skills/quality/SKILL.md","skills/quality/references/rule.md","skills/reading-level/SKILL.md","skills/reading-level/references/rule.md","skills/redirect-chain/SKILL.md","skills/redirect-chain/references/rule.md","skills/redirect-chains/SKILL.md","skills/redirect-chains/references/rule.md","skills/reduced-motion/SKILL.md","skills/reduced-motion/references/rule.md","skills/redundant-entry/SKILL.md","skills/redundant-entry/references/rule.md","skills/referrer-policy/SKILL.md","skills/referrer-policy/references/rule.md","skills/render-blocking/SKILL.md","skills/render-blocking/references/rule.md","skills/reset-css/SKILL.md","skills/reset-css/references/rule.md","skills/resource-hints/SKILL.md","skills/resource-hints/references/rule.md","skills/responsive-images/SKILL.md","skills/responsive-images/references/rule.md","skills/responsive-size/SKILL.md","skills/responsive-size/references/rule.md","skills/responsive-units/SKILL.md","skills/responsive-units/references/rule.md","skills/retina-display/SKILL.md","skills/retina-display/references/rule.md","skills/review/SKILL.md","skills/review/references/rule.md","skills/right-to-erasure/SKILL.md","skills/right-to-erasure/references/rule.md","skills/robots-meta-conflict/SKILL.md","skills/robots-meta-conflict/references/rule.md","skills/robots-meta/SKILL.md","skills/robots-meta/references/rule.md","skills/robots-txt/SKILL.md","skills/robots-txt/references/rule.md","skills/runtime-validation/SKILL.md","skills/runtime-validation/references/rule.md","skills/scheduler-yield/SKILL.md","skills/scheduler-yield/references/rule.md","skills/schema-noindex-conflict/SKILL.md","skills/schema-noindex-conflict/references/rule.md","skills/screen-reader-testing/SKILL.md","skills/screen-reader-testing/references/rule.md","skills/scrolljacking/SKILL.md","skills/scrolljacking/references/rule.md","skills/search-input/SKILL.md","skills/search-input/references/rule.md","skills/select-name/SKILL.md","skills/select-name/references/rule.md","skills/semantic-lists/SKILL.md","skills/semantic-lists/references/rule.md","skills/sensory-instructions/SKILL.md","skills/sensory-instructions/references/rule.md","skills/service-area/SKILL.md","skills/service-area/references/rule.md","skills/service-worker/SKILL.md","skills/service-worker/references/rule.md","skills/session-cookie-flags/SKILL.md","skills/session-cookie-flags/references/rule.md","skills/session-timeout-recovery/SKILL.md","skills/session-timeout-recovery/references/rule.md","skills/share-buttons/SKILL.md","skills/share-buttons/references/rule.md","skills/sitemap-4xx/SKILL.md","skills/sitemap-4xx/references/rule.md","skills/sitemap-coverage/SKILL.md","skills/sitemap-coverage/references/rule.md","skills/sitemap-domain/SKILL.md","skills/sitemap-domain/references/rule.md","skills/sitemap-valid/SKILL.md","skills/sitemap-valid/references/rule.md","skills/sitemap/SKILL.md","skills/sitemap/references/rule.md","skills/skip-link/SKILL.md","skills/skip-link/references/rule.md","skills/skip-navigation/SKILL.md","skills/skip-navigation/references/rule.md","skills/slug-keywords/SKILL.md","skills/slug-keywords/references/rule.md","skills/social-profiles/SKILL.md","skills/social-profiles/references/rule.md","skills/source-maps/SKILL.md","skills/source-maps/references/rule.md","skills/special-chars/SKILL.md","skills/special-chars/references/rule.md","skills/specificity-management/SKILL.md","skills/specificity-management/references/rule.md","skills/speculation-rules/SKILL.md","skills/speculation-rules/references/rule.md","skills/sprite-generation/SKILL.md","skills/sprite-generation/references/rule.md","skills/srcset/SKILL.md","skills/srcset/references/rule.md","skills/stack-trace-exposure/SKILL.md","skills/stack-trace-exposure/references/rule.md","skills/stop-words/SKILL.md","skills/stop-words/references/rule.md","skills/streaming-html/SKILL.md","skills/streaming-html/references/rule.md","skills/structured-data/SKILL.md","skills/structured-data/references/rule.md","skills/styles-lint/SKILL.md","skills/styles-lint/references/rule.md","skills/subgrid/SKILL.md","skills/subgrid/references/rule.md","skills/subresource-integrity/SKILL.md","skills/subresource-integrity/references/rule.md","skills/svg-inline/SKILL.md","skills/svg-inline/references/rule.md","skills/svg-optimization/SKILL.md","skills/svg-optimization/references/rule.md","skills/tabindex/SKILL.md","skills/tabindex/references/rule.md","skills/table-duplicate-name/SKILL.md","skills/table-duplicate-name/references/rule.md","skills/table-headers/SKILL.md","skills/table-headers/references/rule.md","skills/tabs-accessibility/SKILL.md","skills/tabs-accessibility/references/rule.md","skills/td-headers-attr/SKILL.md","skills/td-headers-attr/references/rule.md","skills/tel-mailto/SKILL.md","skills/tel-mailto/references/rule.md","skills/terms-of-service/SKILL.md","skills/terms-of-service/references/rule.md","skills/test-coverage/SKILL.md","skills/test-coverage/references/rule.md","skills/text-expansion/SKILL.md","skills/text-expansion/references/rule.md","skills/text-in-images/SKILL.md","skills/text-in-images/references/rule.md","skills/text-resizing/SKILL.md","skills/text-resizing/references/rule.md","skills/th-has-data-cells/SKILL.md","skills/th-has-data-cells/references/rule.md","skills/third-party-cookies/SKILL.md","skills/third-party-cookies/references/rule.md","skills/third-party-scripts/SKILL.md","skills/third-party-scripts/references/rule.md","skills/title-unique/SKILL.md","skills/title-unique/references/rule.md","skills/token-storage-security/SKILL.md","skills/token-storage-security/references/rule.md","skills/touch-targets/SKILL.md","skills/touch-targets/references/rule.md","skills/trailing-slash/SKILL.md","skills/trailing-slash/references/rule.md","skills/translation-strings/SKILL.md","skills/translation-strings/references/rule.md","skills/trust-signals/SKILL.md","skills/trust-signals/references/rule.md","skills/ttfb/SKILL.md","skills/ttfb/references/rule.md","skills/twitter-cards/SKILL.md","skills/twitter-cards/references/rule.md","skills/type-coercion/SKILL.md","skills/type-coercion/references/rule.md","skills/type-only-imports/SKILL.md","skills/type-only-imports/references/rule.md","skills/typescript-strict-mode/SKILL.md","skills/typescript-strict-mode/references/rule.md","skills/unique-id/SKILL.md","skills/unique-id/references/rule.md","skills/unit-tests/SKILL.md","skills/unit-tests/references/rule.md","skills/unused-css/SKILL.md","skills/unused-css/references/rule.md","skills/video-accessibility/SKILL.md","skills/video-accessibility/references/rule.md","skills/video-captions/SKILL.md","skills/video-captions/references/rule.md","skills/video-optimization/SKILL.md","skills/video-optimization/references/rule.md","skills/video-thumbnail/SKILL.md","skills/video-thumbnail/references/rule.md","skills/video/SKILL.md","skills/video/references/rule.md","skills/view-transitions/SKILL.md","skills/view-transitions/references/rule.md","skills/viewport-zoom/SKILL.md","skills/viewport-zoom/references/rule.md","skills/viewport/SKILL.md","skills/viewport/references/rule.md","skills/visual-regression/SKILL.md","skills/visual-regression/references/rule.md","skills/w3c-compliant/SKILL.md","skills/w3c-compliant/references/rule.md","skills/weak-internal-links/SKILL.md","skills/weak-internal-links/references/rule.md","skills/web-app-manifest/SKILL.md","skills/web-app-manifest/references/rule.md","skills/web-storage/SKILL.md","skills/web-storage/references/rule.md","skills/webfont-format/SKILL.md","skills/webfont-format/references/rule.md","skills/webp-format/SKILL.md","skills/webp-format/references/rule.md","skills/webpagetest/SKILL.md","skills/webpagetest/references/rule.md","skills/website-search/SKILL.md","skills/website-search/references/rule.md","skills/word-count/SKILL.md","skills/word-count/references/rule.md","skills/x-content-type/SKILL.md","skills/x-content-type/references/rule.md","skills/x-frame-options/SKILL.md","skills/x-frame-options/references/rule.md","skills/ymyl-detection/SKILL.md","skills/ymyl-detection/references/rule.md","skills/zoom-reflow/SKILL.md","skills/zoom-reflow/references/rule.md"],"skills":{".agents/plugins/marketplace.json":"",".claude-plugin/marketplace.json":"","AGENTS.md":"# AGENTS.md — Front-End Checklist\n\nRepository rules and conventions for contributors and automation tools.\n\n## Project Overview\n\n**Front-End Checklist** is an open-source monorepo providing 385 quality-gated frontend best practice rules with an MCP server for structured review workflows.\n\n- **MCP Server**: `https://mcp.frontendchecklist.io` (11 tools)\n- **Rules**: `packages/content/rules/en//.mdx`\n- **Web App**: `apps/web/` (Next.js App Router)\n- **MCP Package**: `packages/mcp/` (TypeScript)\n- **Package Manager**: pnpm (workspaces + Turborepo)\n\n## Work Tracking\n\nWork in this repo is tracked in Paperclip project **FEC** (Front-End Checklist, id `c5edfe8f-731b-43e8-b805-c52999831084`). New tickets get the `DAV-` prefix.\n\n## MCP Usage\n\nWhen working on frontend implementation, review, debugging, or audit tasks, use the Front-End Checklist MCP server when available so recommendations stay grounded in the project rule corpus.\n\n- Use `review_code` first for pasted or inspected HTML, CSS, JavaScript, TypeScript, React, or Next.js code.\n- Use `search_rules` before making accessibility, performance, SEO, security, image, privacy, i18n, or testing recommendations.\n- Use `get_rule`, `check_rule`, `fix_rule`, or `explain_rule` for rule-specific guidance and remediation.\n- Use `get_workflow` or `get_checklist_rules` for broad launch, accessibility, SEO, security, performance, and testing audits.\n- Use `audit_url` for public `https://` pages.\n\nSome clients lazy-load installed MCP tools. If the tools are not initially visible, search for or explicitly request the Front-End Checklist MCP before proceeding with frontend work.\n\n## Monorepo Structure\n\n```\napps/\n web/ # Next.js app (App Router)\npackages/\n mcp/ # MCP server implementation\n content/ # Rules MDX content + content-collections config\n auth/ # Better-Auth + Prisma + Supabase\n design-system/ # Shared UI components\n types/ # Shared TypeScript types\n data-layer/ # Data access layer\n schemas/ # Zod v4 schemas\n```\n\n## Rule MDX Frontmatter Spec\n\nRules live at `packages/content/rules/en//.mdx`.\n\n### Required Fields\n\n```yaml\n---\ntitle: \"Human-readable rule title (string, use quotes)\"\ndescription: \"One-sentence description of what to do\"\ncategories: ['html'] # Array; first item = primaryCategory\npriority: 'high' # 'critical' | 'high' | 'medium' | 'low'\ndifficulty: 'beginner' # 'beginner' | 'intermediate' | 'advanced' | 'expert'\nestimatedTime: 15 # Minutes as integer\nprompts:\n check: \"Prompt for checking whether the implementation follows this rule\"\n fix: \"Prompt for fixing the issue\"\n explain: \"Prompt for explaining why this rule matters\"\n---\n```\n\n### Recommended Fields\n\nThese fields are not required by the parser, but they materially improve rule quality, MCP usefulness, and generated skills.\n\n```yaml\nsubcategory: 'keyboard' # Sub-grouping within category\ntldr: # Array of bullet points (used in llms.txt)\n - \"Key point one\"\n - \"Key point two\"\nwhyItMatters: \"Paragraph explaining the business/user impact\"\nsources:\n - title: \"MDN or spec page title\"\n url: \"https://...\"\n type: \"mdn|spec|guide|wcag|google\"\n id: \"stable-source-id\"\n role: \"standard|reference|implementation|compatibility|regulation|search|research\"\n authority: \"primary|secondary\"\nresources:\n - name: \"Supplementary tool or article\"\n url: \"https://...\"\n type: \"tool|article|reference\"\nrelatedRules:\n - slug: other-rule-slug\n reason: \"Why these rules relate\"\ntools:\n - name: \"Tool Name\"\n url: \"https://...\" # or null\ntags: ['wcag', 'performance']\nprompts:\n codeReview: \"Recommended prompt for systematic code review context\"\naiContext: \"Additional context for automated review about when this rule applies\"\n```\n\nAuthoring placement rules:\n\n- Put authoritative citations in `sources`, not in body prose like `Reference: ...`\n- `sources` are proof metadata, not generic further reading. Every rule needs at least 2 sources, 2 source roles, and 1 `authority: primary`.\n- `resources` are for further reading or tools only. Do not map evidence claims to `resources`.\n- The system may infer or normalize `id`, `role`, and `authority` for sources at build time; authors should focus on strong, relevant sources rather than maintaining claim-by-claim proof objects.\n- Put cross-rule navigation in `relatedRules`, not in body prose like `See also ...`\n- Keep intro paragraphs focused on the rule itself; metadata should render from frontmatter-driven UI\n\nInline link contract:\n\n- Natural inline links inside body prose are allowed when they support a specific claim, comparison, or implementation recommendation.\n- Prefer light-touch density: usually `2-5` inline links per rule, with `0-1` in the intro and `1-3` across the main guidance sections.\n- Prefer external links over internal ones; internal rule links should usually stay at `0-1`, with `2` only for unusually interconnected rules.\n- Keep standalone metadata lines out of the body. Do not add paragraphs that start with `See also ...` or `Reference: ...`.\n- Keep evergreen proof in `sources`, and use newer inline external articles only when they add practical or recent context that the primary sources do not cover alone.\n- When a named tool is mentioned in prose for the first meaningful time (for example `Screaming Frog` or `Google Search Console`), link that first mention if the tool materially helps the reader and already exists in `resources` or `tools`.\n- Approved secondary inline links should stay curated. Prefer strong platforms such as `CSS-Tricks`, `Smashing Magazine`, `Nielsen Norman Group`, `WebAIM`, `Screaming Frog`, `Sitebulb`, `Moz`, or `Yoast` when they add practical implementation context.\n- Use descriptive anchor text tied to the sentence claim, not generic labels like “read more”.\n\n`impact`, `standards`, and `automation` are intentionally not part of the active rule-writing contract right now. The current corpus and tooling do not consume them consistently enough to justify treating them as standard authoring fields.\n\n## Canonical Rule Shape\n\nNew and refreshed rules should follow this structure unless there is a strong reason not to:\n\n1. Short intro paragraph explaining the rule in plain language\n2. `## Code Example` or `## Code Examples`\n3. `## Why It Matters`\n4. Optional implementation or guidance sections\n5. `## Verification`\n\nCanonical ordering rules:\n\n- `## Code Example` or `## Code Examples` must appear before `## Why It Matters`\n- `## Why It Matters` must appear before `## Verification`\n- `## Verification` must be the final H2 in the rule body\n- Optional H2 sections belong between `## Why It Matters` and `## Verification`\n\nPreferred optional H2 taxonomy:\n\n- `## Best Practices`\n- `## Common Mistakes`\n- `## Framework Examples`\n- `## Tools & Validation`\n- `## Thresholds`\n- `## Exceptions`\n- `## Browser Support`\n- `## Support Notes`\n- `## Standards`\n- `## Implementation Notes`\n\nThe validator reports headings outside this preferred taxonomy so section sprawl stays visible over time.\n\nRule Contract V2 adds three conditional concepts:\n\n- `## Exceptions` for nuanced rules, false positives, or valid caveats\n- `### Automated Checks` and `### Manual Checks` inside `## Verification` when both matter\n- a short visible standards/support note for compatibility-sensitive or compliance-sensitive rules\n\nApply these conditionally, not universally.\n\nBrowser support guidance should be derived from the repo browser policy in `.browserslistrc` plus package-backed compatibility data, not from memory.\n\nUse explicit thresholds whenever the rule is measurable:\n\n- Web Vitals and performance metrics (`LCP <= 2.5s`, `CLS <= 0.1`, bundle or image size budgets)\n- Accessibility measurements (contrast ratios, target sizes, zoom or reflow thresholds)\n- SEO and crawling states (indexability, status codes, canonical-url behavior)\n- Security headers and transport requirements\n\nPrefer “how to verify” guidance over generic advice. A strong rule should tell an engineer exactly how to confirm the rule passes.\n\n### Common Mistakes to Avoid\n\n- **Unquoted colons in YAML**: Always quote strings containing `:` — e.g. `title: \"Use rel: new-tab\"` not `title: Use rel: noopener`\n- **Stub prompts**: Prompts must be actionable. Bad: `\"Check this rule\"`. Good: `\"Find all elements missing an alt attribute in this HTML\"`\n- **Missing sources**: Add at least one authoritative reference (`MDN`, `W3C/WCAG`, specs, `web.dev`, or product docs) before considering a rule complete\n- **No verification path**: Include a final `## Verification` section so the fix is testable\n- **Verification not last**: Do not place additional H2 sections after `## Verification`\n- **Missing caveats**: Add `## Exceptions` when the rule has important false positives or valid exceptions\n- **Missing support note**: Add `## Browser Support`, `## Support Notes`, or a visible standards note when compatibility or compliance changes implementation decisions\n- **Wrong priority**: `critical` = site-breaking / security / legal. `high` = significantly degrades UX. `medium` = best practice. `low` = nice-to-have\n- **Missing required fields**: All 7 required fields must be present; builds fail otherwise\n- **Emoji in titles**: Titles should be plain text (no emoji)\n\n## Category Taxonomy\n\nValid values for the `categories` array:\n\n| Slug | Description |\n|------|-------------|\n| `html` | Document structure, semantics, forms |\n| `css` | Layout, typography, animation, responsive |\n| `javascript` | Client-side scripting, async, security |\n| `performance` | Loading speed, rendering, Core Web Vitals |\n| `accessibility` | WCAG, ARIA, keyboard, screen readers |\n| `seo` | Meta tags, structured data, crawlability |\n| `security` | HTTPS, CSP, XSS prevention, headers |\n| `images` | Optimization, formats, responsive images |\n| `testing` | Unit, integration, e2e, a11y testing |\n| `privacy` | Consent, data minimisation, data rights |\n| `i18n` | Localization, pluralization, bidi, locale formatting |\n| `general` | Cross-cutting best practices |\n\n## Quality Scoring Rubric\n\nRules are scored automatically via `pnpm score:rules` (100-point base score plus up to 12 conditional points, minimum 50 to pass the current quality gate).\n\n| Dimension | Points | What to Check |\n|-----------|--------|---------------|\n| Prompts (`check`/`fix`/`explain`) | 24 | All 3 prompts are specific and non-generic |\n| TLDR bullets | 4 | 3+ actionable bullets |\n| Why it matters | 4 | Explains user, business, or operational impact |\n| AI context | 6 | Captures where and when the rule applies in automated reviews |\n| Related rules | 6 | Links adjacent rules with clear reasons |\n| Sources | 10 | Includes authoritative references |\n| Resources / tools | 6 | Includes useful supporting docs or tools |\n| Code review prompt | 6 | Provides a systematic review strategy |\n| Code examples | 10 | Includes realistic examples, not just prose |\n| Body depth | 10 | Provides substantive implementation detail |\n| Verification section | 8 | Includes `Verification`, `Testing`, `Audit Checklist`, or equivalent |\n| Thresholds / pass-fail criteria | 6 | Uses explicit numbers or conditions where the rule is measurable |\n| Exceptions (conditional) | 4 | Adds an `Exceptions` section when the rule is nuanced or false-positive-prone |\n| Verification split (conditional) | 4 | Splits verification into automated and manual checks when both apply |\n| Standards/support visibility (conditional) | 4 | Adds a visible threshold, standards note, or support note when required by the rule type |\n\nRules scoring < 50 are excluded from MCP tool responses and the web UI.\n\n## Adding or Updating a Rule\n\n1. Create `packages/content/rules/en//.mdx`\n2. Fill all required frontmatter fields\n3. Add recommended metadata: `sources`, `resources`, `aiContext`, `relatedRules`, and `prompts.codeReview` where applicable\n4. Write the rule using the canonical-url structure (intro, examples, why it matters, verification, category-specific guidance)\n5. Run `pnpm score:rules` — must score ≥ 50 for now; target 60+ for new work\n6. Run `pnpm validate:rule-structure` — validates rule section order and final `Verification` heading\n7. Run `pnpm report:rule-links` — reviews inline-link density and suggests safe internal/external candidates\n8. Run `pnpm validate:sources` — validates external URLs\n9. Run `pnpm generate:skills` — regenerates skills index\n\n## Scripts Reference\n\n```bash\npnpm score:rules # Score all rules; flags < 50 quality gate failures\npnpm validate:rule-structure # Validate rule heading structure and report drift\npnpm report:v2-gaps # Report conditional V2 gaps by category and migration batch\npnpm report:rule-links # Review inline-link density and candidate internal/external links\npnpm generate:exceptions-hints # Dry-run suggestions for missing Exceptions sections\npnpm generate:support-notes # Dry-run support-note suggestions from browser data\npnpm generate:verification-split # Dry-run Verification split suggestions\npnpm validate:sources # Validate external URLs in rule frontmatter\npnpm validate:packages # Check package dependency consistency\npnpm generate:skills # Regenerate skills/ directory from rules\npnpm build # Full monorepo build (via Turborepo)\npnpm typecheck # TypeScript check across all packages\npnpm lint # Biome lint\npnpm lint:fix # Biome lint with auto-fix\n```\n\n## MCP Tool Development\n\nNew MCP tools go in `packages/mcp/src/tools/.ts` and must be:\n\n1. Exported from `packages/mcp/src/tools/index.ts`\n2. Added to `BASE_TOOL_DEFINITIONS` in `packages/mcp/src/server.ts`\n3. Added as a `case` in the `handleToolsCall` switch in `server.ts`\n\nTool definition shape:\n```typescript\nexport const myToolDefinition = {\n name: 'my_tool',\n description: '...', // Critical for tool discoverability — be specific\n inputSchema: {\n type: 'object' as const,\n properties: { ... },\n required: ['fieldName'],\n },\n}\n```\n\n## Workspace Architecture Notes\n\n- **Auth**: Better-Auth + Prisma + Supabase Postgres in `packages/auth/`\n- **Validation**: Zod v4 — use `.issues` not `.errors` on `ZodError`\n- **Forms**: `@tanstack/react-form` with manual Zod validation on submit\n- **Email**: Resend SDK v6, sending domain `mail.frontendchecklist.io`\n- **Rate limiting**: `@upstash/ratelimit` + `@upstash/redis` in `apps/web/lib/rate-limit.ts`\n- **Query**: TanStack Query v5 with `getQueryClient()` factory (not singleton)\n- **Dev server**: `portless run next dev`\n\n## Learned User Preferences\n\n- Put shared concerns (e.g. fonts, typography) in the design system and import from there; apps wire implementation (e.g. next/font) using config from the design system.\n- Do not use `suppressHydrationWarning`; fix server/client mismatch (e.g. defer client-only state until after mount).\n- Reuse existing components instead of creating page-specific variants (e.g. shared `FAQAccordion` for any FAQ section, `.code-block`/`.code-inline` for all code display, ChecklistActionBar instead of new progress bars). When adding a feature to one page type, add it to all relevant page types (e.g. ShareButton on category, rule detail, and all-rules pages).\n- Rule row: click on rule title toggles completion; expand/collapse only via the plus/minus icon. Expanded content shows description first, then tags and action buttons on one row aligned with the description.\n- Prefer Tailwind utility classes in components over custom CSS classes in globals.css.\n- Use a scalable overrides map for special-case labels (e.g. subcategory aria → ARIA) instead of hardcoded conditionals.\n- Do not use `git commit --no-verify`; fix ALL pre-commit violations (JSDoc, as-casts, barrel files, complexity, relative imports) rather than deferring or working around them. Write JSDoc at the same time as the code, not as a batch fix later.\n- **Card-style links**: Use the stretched-link pattern: the ``/`` wraps **only the title text** inside a heading and uses `after:absolute after:inset-0 after:content-[\"\"]` so its `::after` pseudo-element expands to fill the card container (`position: relative`). Secondary interactive elements need `relative z-10`. See `docs/card-links.md`.\n- Centralize all icons in `@repo/design-system`: brand icons in `brand-icons.tsx`, Lucide re-exported from `icons.ts`. Use official brand icons (`@icons-pack/react-simple-icons`) for branded services, not Lucide approximations. Consumers never import directly from `lucide-react`.\n- Never use Tailwind opacity modifiers (`/50`, `/60`, `/70`) on semantic theme text colors like `text-foreground-muted` — it crushes contrast in light mode. Use the appropriate token (`text-foreground-muted`, `text-foreground-subtle`) at full opacity instead.\n- Always refer to the social platform as \"X\", never \"Twitter\". Schema fields use `xUrl` (not `twitterUrl`), UI labels say \"X\", and URLs point to `x.com`.\n- About page link belongs in the footer only, not in the main navbar.\n\n## Learned Workspace Facts\n\n- Fluid typography tokens use `clamp()` in `@theme inline` for `text-base` and above; `text-xs` and `text-sm` stay fixed for compact UI controls (buttons, badges, inputs, tooltips).\n- next/font: apply each font’s `.className` to the document element (not `.variable`); Next.js requires literal option objects, so the app must inline font options while the design system can document them.\n- Do not apply client-side bot protection (e.g. Vercel BotID) to programmatic API endpoints like MCP; use it only for browser-originated form and mutation endpoints.\n- Next.js reads next.config.js at startup; restart the dev server after changing it (e.g. images.remotePatterns). `withContentCollections` returns a Promise (async config) so it must be the outermost wrapper — `export default withContentCollections(withBotId(nextConfig))`. `withBotId` does not handle async configs and will silently drop all properties including `images`.\n- Tailwind preflight resets `list-style` on `ul`/`ol`; `.prose` styles must explicitly set `list-style-type: disc` (ul), `decimal` (ol), and nested variants (`circle`, `lower-alpha`).\n- CSS custom properties use OKLCH color format. Light mode tokens need visible contrast on all screens: `--border` at least oklch(0.885), `--foreground-subtle` at oklch(0.64), shadows at 0.06+ opacity. Use `color-mix(in oklch, var(--token) N%, transparent)` for theme-aware transparent colors instead of hardcoded `rgba()`.\n- Pre-commit hooks (lefthook) enforce: biome check, JSDoc, no-as-casts, no-barrel-files, file-complexity (300 lines React / 500 lines other), no-deep-relative-imports, no-console-logs, test coverage.\n- Button default variant uses `bg-accent text-accent-foreground hover:bg-accent-hover` (project's accent tokens), not shadcn's `bg-primary`; keep project-specific semantic tokens in component variants even when shadcn aliases exist.\n- Scripts are organized in subfolders: `scripts/{validation,generate,rule-structure,validate,audit}/`; `scripts/README.md` documents each script and subfolder.\n- Biome's `useSortedClasses` only sorts class **order**; it cannot rename deprecated classes. Use `@tailwindcss/upgrade` (installed in `apps/web`) to canonicalize class names project-wide.\n- Monorepo uses pnpm catalogs (`catalog:` in `pnpm-workspace.yaml`) for centralized dependency versions; shared deps appearing in 2+ packages use `catalog:` instead of hardcoded version strings.\n- Brand icons (ChatGPT, Claude, X, LinkedIn, Reddit, Cursor, VSCode) live in `packages/design-system/src/brand-icons.tsx` and are re-exported from the design-system barrel.\n\n\n\n# This is NOT the Turborepo you know\n\nTurborepo configuration, task behavior, and CLI commands can vary between installed versions and may differ from your training data. Resolve the `turbo` package from this file's directory or relevant workspace; in monorepos, it may not be visible from the repository root. For example, run `node -p \"require.resolve('turbo/package.json')\"` from a workspace that depends on `turbo`.\n\nRead `docs/README.md` inside that installed package first, then read the relevant pages from its `docs/` directory before changing Turborepo configuration or commands. Heed deprecation notices. These bundled docs match the installed package version and are available without network access.\n\nThis block is written and re-added by `turbo` before repository-scoped commands when an AI agent is detected. In the Turborepo source repository, its template is defined in `crates/turborepo-cli/src/cli/agent_guidance.rs`. Removing the managed block while updates are enabled means a later qualifying invocation will add it again. Set `\"agentGuidance\": false` in the root `turbo.json` or `turbo.jsonc` to opt out; this does not remove an existing block. Keep the block committed with your work to avoid an uncommitted change on the next agent invocation.\n\n","CLAUDE.md":"# Project Guidance\n\nUse [AGENTS.md](AGENTS.md) for repository conventions, workflows, and tool setup.\n\nLocal Claude Code session state belongs in `.claude/`, which is ignored by git and should not be committed.\n","packages/analytics/README.md":"","packages/cli/README.md":"","packages/cli/SKILL.md":"---\nname: frontendchecklist\ndescription: Review frontend code and live pages against the Front-End Checklist (380+ rules for accessibility, performance, SEO, security, HTML, CSS, JavaScript, images, i18n, privacy, testing) using the `frontendchecklist` CLI. Use when writing, reviewing, or shipping HTML/CSS/JS/JSX/TSX/Vue/Svelte/Astro code, before a commit or PR, or when asked to audit a public URL.\n---\n\n# Front-End Checklist CLI\n\n`frontendchecklist` checks frontend code against the Front-End Checklist rules. It works offline,\nprints JSON when its output is piped (which is how you will usually call it), and uses exit codes\nyou can branch on.\n\nRun it with `npx -y @frontendchecklist/cli ` if `frontendchecklist` is not installed.\n\n## When to use it\n\n- After writing or editing frontend files: `frontendchecklist review `.\n- Before committing: `git diff --cached | frontendchecklist review -`.\n- When the user asks to audit a deployed page: `frontendchecklist audit https://...`.\n- When you need the authoritative guidance for a topic: `frontendchecklist search `, then\n `frontendchecklist rule `.\n- For a structured pass (launch, accessibility, SEO, performance): `frontendchecklist checklists`,\n then `frontendchecklist checklist `.\n\n## Commands\n\n| Command | Purpose |\n| --- | --- |\n| `review ` | Static review of files, directories (walked; vendor dirs skipped), or stdin |\n| `audit ` | Fetch a public page and review its HTML |\n| `search [query] [--focus a,b] [-n 10]` | Find rules by keyword, technology, or category |\n| `rule ` | Why a rule matters, how to check it, how to fix it |\n| `checklists` / `checklist ` | Curated checklists and their rules |\n| `categories` | Categories with rule counts |\n| `schema` | Full command reference as JSON |\n\nUseful flags: `--focus accessibility,seo`, `--min-priority high`, `--fail-on high`.\n\n## Reading results\n\n- `review` and `audit` return `{ findings: [{ target, rule, title, priority, issue, fix? }], failing }`.\n- Exit code `0`: fine. `1`: findings at or above `--fail-on`. `2`: bad input or runtime error, with\n `{ \"error\": \"...\" }` on stdout.\n- Findings are conservative static heuristics. \"No findings\" means nothing provable was found, not\n that the code is clean: follow up with `search`/`rule` for areas the heuristics cannot see\n (rendered contrast, focus order, real performance).\n\n## Workflow\n\n1. `frontendchecklist review --min-priority medium`\n2. For each finding, run `frontendchecklist rule ` and apply its fix guidance.\n3. Re-run the review until no critical/high findings remain (`--fail-on high` exits 0).\n4. Mention any remaining medium/low findings to the user instead of silently ignoring them.\n","packages/rules/README.md":"","plugins/front-end-checklist/.claude-plugin/plugin.json":"","plugins/front-end-checklist/.codex-plugin/plugin.json":"","plugins/front-end-checklist/README.md":"","plugins/front-end-checklist/skills/frontend-checklist-global/SKILL.md":"---\nname: frontend-checklist-global\ndescription: \"Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.\"\nmetadata:\n category: global\n priority: high\n difficulty: intermediate\n estimatedTime: \"30\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/mcp\n---\n\n# Front-End Checklist Global Audit\n\nThis skill connects one entry point to all 386 Front-End Checklist rules.\nUse MCP retrieval instead of trying to recall rules from memory.\n\n## Workflow\n\n1. Start with `review_code` for pasted code, file contents, or focused code review.\n2. Use `audit_url` for a public page when you need rendered HTML audited quickly.\n3. Narrow or expand scope with `search_rules`, `list_categories`, `get_workflow`, or `get_quick_reference`.\n4. For each issue, use `get_rule`, `fix_rule`, or `explain_rule` to give exact remediation.\n5. If a checklist is a better fit than ad hoc search, use `get_checklist_rules`.\n\n## Audit Stance\n\n- Be conservative. Prefer fewer, stronger findings over speculative breadth.\n- Only report an issue when the code or markup shown supports it directly.\n- In small component or route audits, prefer the strongest 1-2 supported findings over listing every possible enhancement.\n- Do not infer business intent from a snippet alone. Example: do not assume a field is required unless the code or surrounding copy makes that explicit.\n- Do not treat `alt=\"\"` as an issue by default; empty alt can be correct for decorative images.\n- When an image is explicitly decorative, prefer zero findings unless the snippet shows a concrete problem rather than a hypothetical optimization.\n- If you see an isolated decorative image like `\"\"`, treat it as a zero-issue pattern unless the snippet also shows real evidence of layout instability.\n- Do not raise low-confidence preference tweaks as findings when the snippet is otherwise sound. Prefer silence over weak nitpicks.\n- Do not treat `autocomplete=\"off\"` as a defect by itself unless the snippet shows a stronger user-harm or security reason to flag it.\n- In link-preview cards, decorative preview images and favicons may be safe when nearby visible text already names the destination.\n- Do not treat React or JSX fragments as full HTML documents unless the snippet includes real document context like ``, ``, or ``.\n- When reviewing Next.js or metadata-driven page files, consider `metadata`, `viewport`, and `generateMetadata` APIs before claiming head-tag omissions.\n\n## Coverage Checklist\n\n- Forms: check labels, accessible button names, explicit button types, `autocomplete` hints, password-field autocomplete, and validation semantics that are explicit in the code.\n- Images: check `width`/`height`, `loading`, `srcset`/`sizes`, and whether image semantics are clearly meaningful or decorative. Do not assume tiny SVG logos or clearly decorative assets must be lazy-loaded, and do not demand explicit dimensions for tiny ornamental dividers unless the snippet shows a real layout-shift risk. If an image is both decorative and hidden from assistive tech, bias strongly toward no finding.\n- Metadata: check title placement, canonical-url behavior, meta descriptions, Open Graph coverage, and structured data only when the file is responsible for metadata.\n- Motion: check expensive animated properties, prefer transform/opacity, and require `prefers-reduced-motion` handling for persistent motion.\n- Motion: when counters or visual widgets animate every frame, assess both reduced-motion support and whether the animation strategy adds unnecessary main-thread work.\n- Security: check `target=\"_blank\"` links for `noopener noreferrer`, insecure form actions, password input best practices, and blocking third-party scripts.\n- Structure: check duplicate ids, list semantics, and table headers conservatively. For simple tables, column-header associations are stronger findings than speculative row-header or outer-layout landmark issues.\n- Structure: when a visible heading already introduces a simple table, treat missing captions as a lower-confidence improvement than missing header associations.\n\n## Rule-Derived Highlights\n\n### Set explicit width and height on images\n- Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space\n- Example low-risk exception: `\"\"` should not be flagged on its own without evidence of visible layout shift\n- Always set `width` and `height` attributes on `` matching the image's intrinsic dimensions\n- Pair with `height: auto` in CSS to keep the image fluid while preserving the aspect ratio\n- Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images\n\n### Hide decorative elements from assistive technology\n- Use alt='' (empty) for decorative images—not alt='image' or missing alt\n- Add aria-hidden='true' to decorative SVGs and icons\n- Use CSS background-image for purely decorative visuals\n- Role='presentation' removes semantic meaning from elements\n- Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability\n\n### Use transform and opacity for animations\n- Only transform and opacity can be composited on the GPU without triggering layout\n- Use will-change: transform sparingly to promote an element to its own compositor layer\n- Prefer CSS transitions and animations over JavaScript animation libraries for simple effects\n- Respect prefers-reduced-motion to disable animations for users who need it\n\n### Respect reduced motion preferences\n- Use prefers-reduced-motion media query to disable non-essential animations\n- Never flash content more than 3 times per second (seizure risk)\n- Replace motion with opacity/color transitions when reduced motion is enabled\n- Provide user controls to pause or disable animations\n\n### Use semantic table markup for screen readers\n- Use elements for headers with scope='col' or scope='row'\n- Add to describe the table's purpose\n- Never use tables for layout—use CSS Grid or Flexbox instead\n- Use id/headers for complex tables with merged cells\n- For simple tables with a clear adjacent section heading, missing `scope` is often a stronger finding than missing ``\n\n### Define proper table headers\n- Use `` for all table headers, not ``\n- Apply `scope=\"col\"` or `scope=\"row\"` to clarify header relationship\n- Ensure every data cell is associated with at least one header\n- In simple tables, prefer fixing header associations before escalating to caption-level recommendations\n- Missing `scope=\"col\"` on a straightforward header row is often the clearest first fix\n\n### Minimize costly DOM read/write operations\n- Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)\n- Batch all reads first, then all writes\n- Use requestAnimationFrame for visual updates\n- Use DocumentFragment or innerHTML for bulk DOM insertion\n- Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work\n\n### Validate forms accessibly\n- Associate error messages with fields using aria-describedby\n- Use aria-invalid to indicate validation state\n- Mark required fields programmatically with `required` or `aria-required`\n- Provide inline error messages near the field\n- Don't rely solely on color to indicate errors\n\n### Secure password input fields\n- Use type='password' with correct autocomplete attribute\n- Provide accessible show/hide toggle for password visibility\n- Show password strength indicator with requirements\n- Never store or transmit passwords in plain text\n- Support password managers with proper input names\n\n### Provide visible custom focus indicators\n- Never use outline: none or outline: 0 without a visible :focus-visible replacement\n- Use :focus-visible instead of :focus to show indicators only during keyboard navigation\n- Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.2)\n- Provide at least 2px solid outline with an offset for a high-quality focus ring\n- If a focus ring is drawn with pseudo-elements, verify it is anchored to the correct positioned element and not clipped by `overflow: hidden`\n\n## Known Safe Patterns\n\n### Decorative Divider\n- Safe example: `\"\"`\n- Treat this as a safe decorative pattern by default. Do not flag alt text or missing dimensions unless the snippet also shows a real layout-shift risk.\n\n### Client-Handled React Form\n- Safe example: `
event.preventDefault()}>
`\n- Do not require `method` or `action` when client-side submit handling is explicit and the form controls are otherwise accessible.\n\n### Next Metadata API\n- Safe example: `export async function generateMetadata() { return { title: 'Docs', description: 'Reference' } }`\n- Do not infer missing canonical-url, meta description, or Open Graph tags just because literal `` markup is absent from the component file.\n\n### Preview Card Images\n- Safe example: `\"\"\"\"`\n- In link-preview or resource-card UIs, decorative preview/favicons can legitimately use empty alt when adjacent text already provides the destination name. Do not invent responsive-image or layout-shift defects for tiny favicon assets without stronger evidence.\n\n### Aspect-Ratio Media Wrapper\n- Safe example: `
`\n- When a wrapper already reserves media space with a stable aspect ratio, do not automatically raise a missing dimensions finding for the child preview image.\n\n### Pseudo-Element Focus Ring\n- Safe example: `focus-visible:outline-none focus-visible:after:ring-2 after:absolute after:inset-0`\n- If focus styling depends on a pseudo-element, verify the ring is anchored to the correct positioned element. A removed native outline is only safe when the replacement ring is clearly reliable.\n\n### Per-Frame React Counter Animation\n- Safe example: `requestAnimationFrame(animate); setCount(Math.floor(eased * target))`\n- Repeated requestAnimationFrame state updates across multiple components are a concrete performance concern when shown directly in the code.\n\n### Simple Data Table Headers\n- Safe example: `PriorityRuleTitle`\n- For simple data tables, prefer conservative column-header findings before speculating about row headers or outer-layout landmarks.\n\n### Adjacent Heading + Table\n- Safe example: `

Issues

......
`\n- A nearby visible section heading may already provide table context. Prefer scope/header association findings before requiring a caption unless the table purpose is ambiguous.\n\n## Conflict Resolution\n\n- If decorative-image guidance and dimensions guidance conflict, decorative guidance wins unless the snippet shows visible layout instability.\n- Example zero-issue pattern: `\"\"` in an isolated component should not be flagged for alt text or dimensions unless the snippet also shows real layout-shift evidence.\n- If a form is clearly handled client-side with `onSubmit`, do not require traditional server-post `method` or `action` attributes.\n- If a file uses Next.js metadata APIs, do not infer missing head tags from the absence of literal `` or canonical-url markup.\n\n## Coverage\n\n- accessibility: 89 rules (9 critical, 25 high)\n- css: 31 rules (10 high)\n- html: 34 rules (3 critical, 12 high)\n- i18n: 5 rules\n- images: 25 rules (1 critical, 15 high)\n- javascript: 26 rules (1 critical, 12 high)\n- performance: 43 rules (1 critical, 22 high)\n- privacy: 5 rules (2 high)\n- security: 22 rules (4 critical, 10 high)\n- seo: 93 rules (19 high)\n- testing: 13 rules (7 high)\n\n## Evaluation Standard\n\n- Prefer findings tied to exact files, routes, selectors, or code snippets.\n- Prioritize critical and high issues first.\n- Explain uncertainty instead of overstating when the snippet does not show enough context.\n- Avoid generic advice when the MCP tools can retrieve a rule or fix prompt.\n- When no issue is found automatically, use `search_rules` to broaden review coverage before concluding clean.\n\n---\n\nSee `references/categories.md` for category coverage and tool routing.\n\nMCP docs: https://frontendchecklist.io/mcp\n","plugins/front-end-checklist/skills/frontend-checklist-global/references/categories.md":"# Front-End Checklist Global Skill Reference\n\nThis aggregate skill routes to the Front-End Checklist MCP tools across 386 rules.\n\n## Tool Routing\n\n| Goal | Preferred tool |\n| --- | --- |\n| Review pasted code or a single file | `review_code` |\n| Audit a public page | `audit_url` |\n| Find relevant rules by topic | `search_rules` |\n| Browse available categories | `list_categories` |\n| Get the full content for one rule | `get_rule` |\n| Get remediation guidance | `fix_rule` |\n| Explain impact to the user | `explain_rule` |\n| Pull a curated checklist at once | `get_checklist_rules` |\n| Start from a workflow or quick checklist | `get_workflow`, `get_quick_reference` |\n\n## Frontend Review Guardrails\n\n- Do not infer missing metadata from a component fragment that is not responsible for document head output.\n- Do not infer required fields, password policies, or decorative-image intent unless the code makes the intent explicit.\n- Favor exact evidence from the snippet over broad style advice.\n- When the snippet is a partial component, focus on what the component itself controls.\n\n## Rule-Derived Highlights\n\n- **Set explicit width and height on images**\n Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space\n Example low-risk exception: `\"\"` should not be flagged on its own without evidence of visible layout shift\n Always set `width` and `height` attributes on `` matching the image's intrinsic dimensions\n Pair with `height: auto` in CSS to keep the image fluid while preserving the aspect ratio\n Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images\n- **Hide decorative elements from assistive technology**\n Use alt='' (empty) for decorative images—not alt='image' or missing alt\n Add aria-hidden='true' to decorative SVGs and icons\n Use CSS background-image for purely decorative visuals\n Role='presentation' removes semantic meaning from elements\n Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability\n- **Use transform and opacity for animations**\n Only transform and opacity can be composited on the GPU without triggering layout\n Use will-change: transform sparingly to promote an element to its own compositor layer\n Prefer CSS transitions and animations over JavaScript animation libraries for simple effects\n Respect prefers-reduced-motion to disable animations for users who need it\n- **Respect reduced motion preferences**\n Use prefers-reduced-motion media query to disable non-essential animations\n Never flash content more than 3 times per second (seizure risk)\n Replace motion with opacity/color transitions when reduced motion is enabled\n Provide user controls to pause or disable animations\n- **Use semantic table markup for screen readers**\n Use elements for headers with scope='col' or scope='row'\n Add to describe the table's purpose\n Never use tables for layout—use CSS Grid or Flexbox instead\n Use id/headers for complex tables with merged cells\n For simple tables with a clear adjacent section heading, missing `scope` is often a stronger finding than missing ``\n- **Define proper table headers**\n Use `` for all table headers, not ``\n Apply `scope=\"col\"` or `scope=\"row\"` to clarify header relationship\n Ensure every data cell is associated with at least one header\n In simple tables, prefer fixing header associations before escalating to caption-level recommendations\n Missing `scope=\"col\"` on a straightforward header row is often the clearest first fix\n- **Minimize costly DOM read/write operations**\n Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)\n Batch all reads first, then all writes\n Use requestAnimationFrame for visual updates\n Use DocumentFragment or innerHTML for bulk DOM insertion\n Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work\n- **Validate forms accessibly**\n Associate error messages with fields using aria-describedby\n Use aria-invalid to indicate validation state\n Mark required fields programmatically with `required` or `aria-required`\n Provide inline error messages near the field\n Don't rely solely on color to indicate errors\n- **Secure password input fields**\n Use type='password' with correct autocomplete attribute\n Provide accessible show/hide toggle for password visibility\n Show password strength indicator with requirements\n Never store or transmit passwords in plain text\n Support password managers with proper input names\n- **Provide visible custom focus indicators**\n Never use outline: none or outline: 0 without a visible :focus-visible replacement\n Use :focus-visible instead of :focus to show indicators only during keyboard navigation\n Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.2)\n Provide at least 2px solid outline with an offset for a high-quality focus ring\n If a focus ring is drawn with pseudo-elements, verify it is anchored to the correct positioned element and not clipped by `overflow: hidden`\n\n## Known Safe Patterns\n\n- **Decorative Divider**\n Safe example: `\"\"`\n Treat this as a safe decorative pattern by default. Do not flag alt text or missing dimensions unless the snippet also shows a real layout-shift risk.\n- **Client-Handled React Form**\n Safe example: `
event.preventDefault()}>
`\n Do not require `method` or `action` when client-side submit handling is explicit and the form controls are otherwise accessible.\n- **Next Metadata API**\n Safe example: `export async function generateMetadata() { return { title: 'Docs', description: 'Reference' } }`\n Do not infer missing canonical-url, meta description, or Open Graph tags just because literal `` markup is absent from the component file.\n- **Preview Card Images**\n Safe example: `\"\"\"\"`\n In link-preview or resource-card UIs, decorative preview/favicons can legitimately use empty alt when adjacent text already provides the destination name. Do not invent responsive-image or layout-shift defects for tiny favicon assets without stronger evidence.\n- **Aspect-Ratio Media Wrapper**\n Safe example: `
`\n When a wrapper already reserves media space with a stable aspect ratio, do not automatically raise a missing dimensions finding for the child preview image.\n- **Pseudo-Element Focus Ring**\n Safe example: `focus-visible:outline-none focus-visible:after:ring-2 after:absolute after:inset-0`\n If focus styling depends on a pseudo-element, verify the ring is anchored to the correct positioned element. A removed native outline is only safe when the replacement ring is clearly reliable.\n- **Per-Frame React Counter Animation**\n Safe example: `requestAnimationFrame(animate); setCount(Math.floor(eased * target))`\n Repeated requestAnimationFrame state updates across multiple components are a concrete performance concern when shown directly in the code.\n- **Simple Data Table Headers**\n Safe example: `PriorityRuleTitle`\n For simple data tables, prefer conservative column-header findings before speculating about row headers or outer-layout landmarks.\n- **Adjacent Heading + Table**\n Safe example: `

Issues

......
`\n A nearby visible section heading may already provide table context. Prefer scope/header association findings before requiring a caption unless the table purpose is ambiguous.\n\n## Category Coverage\n\n- **accessibility**: 89 rules · 9 critical · 25 high\n- **css**: 31 rules · 10 high\n- **html**: 34 rules · 3 critical · 12 high\n- **i18n**: 5 rules\n- **images**: 25 rules · 1 critical · 15 high\n- **javascript**: 26 rules · 1 critical · 12 high\n- **performance**: 43 rules · 1 critical · 22 high\n- **privacy**: 5 rules · 2 high\n- **security**: 22 rules · 4 critical · 10 high\n- **seo**: 93 rules · 19 high\n- **testing**: 13 rules · 7 high\n\nRules browser: https://frontendchecklist.io/rules\nFull reference: https://frontendchecklist.io/llms-full.txt\n","skills/404-page/SKILL.md":"---\nname: 404-page\ndescription: \"Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.\"\nmetadata:\n category: html\n priority: medium\n difficulty: beginner\n estimatedTime: \"20\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/html/404-page\n---\n\n# Create a custom 404 error page\n\nA generic browser 404 page causes users to leave immediately—a well-designed custom page provides recovery paths and keeps users engaged with your site.\n\n## Quick Reference\n\n- Custom 404 pages retain users who encounter broken or moved links\n- Include search, navigation, and links to popular content\n- Maintain consistent branding and site design\n- Track 404 errors to identify and fix broken links\n- Return a real HTTP 404 so the page is not treated as a soft 404\n\n## Check\n\nVerify that this website has a custom 404 error page with helpful navigation options. Confirm the route returns HTTP 404 and not a branded page with a 200 response.\n\n## Fix\n\nCreate a user-friendly 404 page with search functionality and links to important pages. Ensure the server or framework returns status code 404 so the page does not become a soft 404.\n\n## Explain\n\nExplain how custom 404 pages help retain users who encounter broken links and why returning 200 for missing pages creates soft-404 indexing problems.\n\n## Code Review\n\nReview templates, server-rendered HTML, and shared components that output markup related to Create a custom 404 error page. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/html/404-page\n","skills/404-page/references/rule.md":"# Create a custom 404 error page\n\n> A custom 404 error page is designed with helpful navigation options for lost users.\n\n**Priority:** medium · **Difficulty:** beginner · **Time:** 20 min\n\n---\nCustom 404 pages transform dead ends into opportunities to guide users back to relevant content.\n\n## Code Example\n\n```html\n\n\n\n \n \n Page Not Found - Site Name\n \n\n\n
\n

Page Not Found

\n

Sorry, the page you're looking for doesn't exist or has been moved.

\n\n \n
\n \n \n \n
\n\n \n \n
\n\n\n```\n\n## Why It Matters\n\nA generic browser 404 page causes users to leave immediately—a well-designed custom page provides recovery paths and keeps users engaged with your site.\n\n## Essential Elements\n\n| Element | Purpose |\n|---------|---------|\n| Clear message | Explain the page wasn't found |\n| Search box | Help users find what they need |\n| Navigation links | Quick access to main sections |\n| Popular content | Suggest relevant pages |\n| Home link | Easy return to start |\n| Contact option | Report broken links |\n\n## Next.js Implementation\n\n```tsx\n// app/not-found.tsx\n\n return (\n
\n
\n

404

\n

Page Not Found

\n

\n The page you're looking for doesn't exist or has been moved.\n

\n\n
\n \n Go Home\n \n\n \n Search Site\n \n
\n\n \n
\n
\n )\n}\n```\n\n## React Component with Error Tracking\n\n```tsx\ninterface NotFoundPageProps {\n searchEnabled?: boolean\n popularLinks?: Array<{ href: string; label: string }>\n}\n\n searchEnabled = true,\n popularLinks = []\n}: NotFoundPageProps) {\n // Track 404 for analytics\n useEffect(() => {\n // Report to analytics\n if (typeof window !== 'undefined') {\n const path = window.location.pathname\n console.error(`404 Error: ${path}`)\n\n // Send to analytics service\n analytics?.track('404_error', { path, referrer: document.referrer })\n }\n }, [])\n\n return (\n
\n
\n

Oops! Page not found

\n

\n We couldn't find the page you're looking for.\n It may have been moved or deleted.\n

\n\n {searchEnabled && (\n
\n \n \n \n \n )}\n\n {popularLinks.length > 0 && (\n \n )}\n\n \n ← Back to Home\n \n
\n
\n )\n}\n```\n\n## Server Configuration\n\n```nginx\n# Nginx\nserver {\n error_page 404 /404.html;\n location = /404.html {\n root /var/www/html;\n internal;\n }\n}\n```\n\n```apache\n# Apache .htaccess\nErrorDocument 404 /404.html\n```\n\n## 404 Error Tracking\n\n```tsx\n// middleware.ts (Next.js)\n\n // Log 404s for monitoring\n const response = NextResponse.next()\n\n // You can check response status and log accordingly\n // This runs before the 404 page renders\n\n return response\n}\n\n// Alternative: Track in the 404 page itself\n// app/not-found.tsx\n'use client'\n\n const pathname = usePathname()\n\n useEffect(() => {\n // Send to error tracking service\n fetch('/api/track-404', {\n method: 'POST',\n body: JSON.stringify({\n path: pathname,\n referrer: document.referrer,\n timestamp: new Date().toISOString()\n })\n })\n }, [pathname])\n\n return (/* ... */)\n}\n```\n\n## SEO Considerations\n\n```html\n\n \n \n\n \n \n\n```\n\n## Avoid Soft 404s\n\nA branded \"page not found\" template is still a search bug if the server responds with `200 OK`. Search engines can treat that as a soft 404, which wastes crawl budget and may surface broken pages in reports.\n\n## Styling Best Practices\n\n```css\n.error-page {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n}\n\n.error-content {\n max-width: 500px;\n}\n\n.error-page h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n/* Keep consistent with site branding */\n.error-page {\n font-family: inherit;\n background: var(--background);\n color: var(--foreground);\n}\n\n/* Ensure search is prominent */\n.search-form {\n margin: 2rem 0;\n}\n\n.search-form input {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n width: 100%;\n max-width: 300px;\n}\n```\n\n## Verification\n\n1. Navigate to a non-existent URL\n2. Verify HTTP 404 status code is returned\n3. Check page includes navigation options\n4. Test search functionality works\n5. Verify page is not indexed (check robots meta)\n6. Test on mobile devices\n7. Verify screen reader announces content properly\n8. Confirm the missing URL appears as a real 404 in DevTools Network, not a 200 soft-404 response\n\nA custom 404 page must return HTTP status code 404, not 200. Search engines treat 200 responses as valid pages, potentially indexing your error page content.","skills/about-page/SKILL.md":"---\nname: about-page\ndescription: \"Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.\"\nmetadata:\n category: seo\n priority: medium\n difficulty: intermediate\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/seo/about-page\n---\n\n# Create a dedicated About page\n\nAn About page is a primary trust signal for both users and search engines, directly impacting the website's E-E-A-T profile and overall credibility.\n\n## Quick Reference\n\n- Include a dedicated page explaining the purpose, history, and mission of the website\n- Introduce the key people or organization behind the content to build trust\n- Provide clear evidence of expertise and contact information\n\n## Check\n\nVerify that the website has a dedicated About page that clearly identifies the people or organization responsible for the content.\n\n## Fix\n\nCreate a new page at `/about` and add detailed information about your organization, mission, and the experts behind your content.\n\n## Explain\n\nExplain how an About page contributes to E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness) and why it's a critical SEO factor.\n\n## Code Review\n\nReview metadata generation, rendered HTML, structured data, and response headers related to Create a dedicated About page. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/seo/about-page\n","skills/about-page/references/rule.md":"# Create a dedicated About page\n\n> Checks for a dedicated about or company page with meaningful content.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 10 min\n\n---\nAn About page provides essential context about the source of the information on your website. It helps search engines and users understand the expertise and authority behind the content.\n\n## Code Example\n\nEnsure the About page is easily discoverable, typically via the main navigation or the footer.\n\n```html\n\n```\n\n## Why It Matters\n\n- **E-E-A-T**: Directly supports the Trustworthiness and Authoritativeness pillars of Google's Quality Rater Guidelines.\n- **Transparency**: Shows users who you are, reducing bounce rates and building long-term brand loyalty.\n- **Entity Recognition**: Helps search engines connect your website to a real-world entity (person or organization).\n- **Compliance**: For many industries, identifying the content creator is a legal or regulatory requirement.\n\n## Exceptions\n\n- Necessary utility or compliance pages can be intentionally brief and should not be judged by the same editorial-depth expectations as ranking-focused content.\n- AI-assisted drafting is not a failure by itself; flag unsupported claims, missing editorial review, or low-originality output instead.\n- When a page has both trust-signal issues and crawl/index problems, make the page eligible to rank first and then improve the content quality signals.\n\n## Standards\n\n- Use these references as the standard for the final search-facing HTML, metadata, and crawl behavior.\n- Check the implementation against Google Search Central: Search Essentials before treating the rule as satisfied.\n- Check the implementation against Google Search Central documentation before treating the rule as satisfied.\n\n## Verification\n\n### Automated Checks\n\n- Inspect rendered HTML and HTTP headers to confirm the expected metadata or crawlability signal is present.\n- Test the affected URL with Google Search Console or equivalent tooling where relevant.\n- Re-crawl a representative page set after deployment.\n\n### Manual Checks\n\n- Confirm the change does not create conflicting canonical-url, robots, or structured-data signals.","skills/accessibility-testing/SKILL.md":"---\nname: accessibility-testing\ndescription: \"Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.\"\nmetadata:\n category: testing\n priority: high\n difficulty: intermediate\n estimatedTime: \"30\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/testing/accessibility-testing\n---\n\n# Include accessibility testing\n\nAutomated accessibility testing catches 30-50% of WCAG violations before code reaches users—reducing legal risk and improving usability for everyone.\n\n## Quick Reference\n\n- Use jest-axe for component-level accessibility testing\n- Integrate @axe-core/playwright or cypress-axe for E2E a11y tests\n- Run accessibility tests in CI/CD to catch regressions early\n- Test specific WCAG rules like color-contrast individually\n\n## Check\n\nReview this test suite for accessibility testing coverage using axe-core, jest-axe, or similar tools.\n\n## Fix\n\nAdd automated accessibility testing to detect WCAG violations in components and pages.\n\n## Explain\n\nExplain how to implement automated accessibility testing and what issues it can detect.\n\n## Code Review\n\nInspect component tests, E2E suites, and CI workflows for automated accessibility coverage. Flag critical pages or shared components that ship without axe-based checks, and note issues that still require manual keyboard or screen reader validation.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/testing/accessibility-testing\n","skills/accessibility-testing/references/rule.md":"# Include accessibility testing\n\n> Automate accessibility testing with tools like axe-core, jest-axe, or Playwright's accessibility testing.\n\n**Priority:** high · **Difficulty:** intermediate · **Time:** 30 min\n\n---\nAutomated accessibility testing catches common WCAG violations before they reach production, protecting your users and reducing legal risk.\n\n## Code Example\n\n```javascript\n\nexpect.extend(toHaveNoViolations)\n\ndescribe('Button', () => {\n it('should have no accessibility violations', async () => {\n const { container } = render(\n {}}>Click me\n )\n const results = await axe(container)\n expect(results).toHaveNoViolations()\n })\n})\n\n// Test specific rules\nit('should have proper color contrast', async () => {\n const { container } = render(Warning)\n const results = await axe(container, {\n rules: {\n 'color-contrast': { enabled: true }\n }\n })\n expect(results).toHaveNoViolations()\n})\n```\n\n## Why It Matters\n\nAutomated accessibility testing catches 30-50% of WCAG violations before code reaches users—reducing legal risk and improving usability for everyone.\n\n## Testing Tools\n\n| Tool | Use Case | Framework |\n|------|----------|-----------|\n| jest-axe | Unit/component tests | Jest |\n| @axe-core/playwright | E2E tests | Playwright |\n| cypress-axe | E2E tests | Cypress |\n| pa11y | CI/CD pipeline | Any |\n\n## Playwright\n\n```typescript\n\ntest.describe('Homepage accessibility', () => {\n test('should have no violations', async ({ page }) => {\n await page.goto('/')\n\n const accessibilityScanResults = await new AxeBuilder({ page }).analyze()\n\n expect(accessibilityScanResults.violations).toEqual([])\n })\n\n test('should have no violations on mobile', async ({ page }) => {\n await page.setViewportSize({ width: 375, height: 667 })\n await page.goto('/')\n\n const results = await new AxeBuilder({ page })\n .withTags(['wcag2a', 'wcag2aa'])\n .analyze()\n\n expect(results.violations).toEqual([])\n })\n})\n```\n\n## Cypress\n\n```javascript\n\ndescribe('Form accessibility', () => {\n beforeEach(() => {\n cy.visit('/contact')\n cy.injectAxe()\n })\n\n it('should have no violations on load', () => {\n cy.checkA11y()\n })\n\n it('should have no violations after form errors', () => {\n cy.get('button[type=\"submit\"]').click()\n cy.checkA11y()\n })\n\n it('should exclude known issues', () => {\n cy.checkA11y(null, {\n rules: {\n 'color-contrast': { enabled: false } // Known issue, tracked in backlog\n }\n })\n })\n})\n```\n\n## CI/CD Integration\n\n```yaml\n# GitHub Actions\nname: Accessibility Tests\non: [push, pull_request]\n\njobs:\n a11y:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n - run: npm ci\n - run: npm run test:a11y\n - uses: actions/upload-artifact@v4\n if: failure()\n with:\n name: a11y-report\n path: a11y-report.html\n```\n\n## Lighthouse CI Accessibility\n\n```json\n{\n \"ci\": {\n \"assert\": {\n \"assertions\": {\n \"categories:accessibility\": [\"error\", { \"minScore\": 0.9 }],\n \"image-alt\": \"error\",\n \"label\": \"error\",\n \"link-name\": \"error\"\n }\n }\n }\n}\n```\n\n## Tools & Validation\n\nAutomated checks are a floor, not a ceiling.\n\nTypically caught automatically:\n\n- Missing alt text\n- Missing form labels\n- Invalid ARIA roles and attributes\n- Many color-contrast failures\n\nUsually still manual:\n\n- Whether alt text is actually meaningful\n- Keyboard interaction quality in complex widgets\n- Screen reader announcements and reading order\n- Whether the flow is understandable, not just technically valid\n\n## Verification\n\n### Automated Checks\n\n- Run the accessibility test suite locally and confirm new violations fail the build or test run; the default target should be `<= 0` unexpected axe violations for covered states.\n- Pair automated coverage with manual keyboard and screen-reader checks for at least one critical user flow.\n- Track ignored or suppressed rules explicitly so temporary exceptions do not become permanent blind spots.\n\n### Manual Checks\n\n- Ensure the suite covers high-risk states such as modal open, form validation errors, and mobile layouts.","skills/accessible-authentication/SKILL.md":"---\nname: accessible-authentication\ndescription: \"Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.\"\nmetadata:\n category: accessibility\n priority: high\n difficulty: advanced\n estimatedTime: \"25\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/accessibility/accessible-authentication\n---\n\n# Provide accessible authentication methods\n\nAuthentication often becomes the first hard blocker for users with cognitive, motor, low-vision, or speech-input needs. If sign-in, MFA, or recovery relies on memorization or transcription with no assisted path, the user may be locked out before they can access the product at all.\n\n## Quick Reference\n\n- Do not block paste or password managers in login and recovery flows\n- Prefer passkeys, magic links, device approval, or password-manager-friendly flows\n- Support OTP autofill and paste with appropriate semantics such as `autocomplete=\"one-time-code\"`\n- Avoid CAPTCHA or secondary checks that require memorizing or transcribing information without an alternative\n\n## Check\n\nReview login, MFA, password reset, and account recovery for accessible authentication problems. Flag blocked paste, password-manager hostility, manual transcription requirements, inaccessible OTP handling, and CAPTCHA or knowledge checks without a compliant alternative.\n\n## Fix\n\nAdd password-manager-friendly fields, support paste and OTP autofill, and provide at least one authentication path that does not depend on a cognitive function test.\n\n## Explain\n\nExplain WCAG Accessible Authentication, why memorization and transcription are barriers, and how passkeys, password managers, OTP autofill, and device approval improve both accessibility and security.\n\n## Code Review\n\nReview authentication pages, MFA steps, recovery flows, and security controls related to Provide accessible authentication methods. Flag exact steps that require memorization, transcription, blocked assistive tooling, or inaccessible fallback paths.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/accessibility/accessible-authentication\n","skills/accessible-authentication/references/rule.md":"# Provide accessible authentication methods\n\n> Authentication flows avoid unnecessary cognitive tests and support assistive mechanisms such as password managers, paste, OTP autofill, and passkeys.\n\n**Priority:** high · **Difficulty:** advanced · **Time:** 25 min\n\n---\nAuthentication should not depend on the user's ability to memorize, transcribe, or manually reproduce information when an assistive path is feasible. Good accessible authentication usually improves security too, because it works with password managers, device-based verification, and passkeys rather than against them.\n\n## Code Example\n\n```html\n\n\n\n\n\n\n\n\n\n```\n\n```tsx\nfunction VerifyCodeField({\n onSubmit,\n}: {\n onSubmit: (code: string) => void\n}) {\n return (\n {\n event.preventDefault()\n const formData = new FormData(event.currentTarget)\n onSubmit(String(formData.get('otp') ?? ''))\n }}\n >\n \n \n\n \n \n )\n}\n```\n\n```html\n\n\n\n```\n\n## Why It Matters\n\nMany authentication patterns are built around unnecessary friction: blocked paste, custom OTP widgets that break autofill, CAPTCHA transcription, or backup questions that require memory instead of possession-based proof.\n\n- cognitive barriers prevent account access before the user can do anything else\n- password-manager hostility leads to weaker, reused passwords\n- speech, switch, and keyboard-only users face more effort when copy/paste and autofill are disabled\n- recovery and MFA steps often fail even when the main login form looks acceptable\n\n## Best Practices\n\n### Support assisted entry\n\nAuthentication should work with:\n\n- password managers\n- pasted credentials and codes\n- OS/browser OTP autofill\n- passkeys or device approval when available\n\nDo not split a one-time code into a widget that breaks standard autofill unless you have verified the real browser behavior.\n\n### Provide a non-memory-dependent path\n\nAt least one viable route through sign-in, MFA, and recovery should avoid a cognitive function test. Good examples include:\n\n- passkeys\n- approval on a trusted device\n- magic links\n- password-manager-assisted password entry\n\n### Keep anti-abuse controls proportional\n\nIf you use CAPTCHA or other abuse mitigations in auth flows, provide an alternative path that does not force memorization or transcription. Accessibility and abuse prevention must be designed together, not as competing concerns.\n\n## Standards\n\n- This rule maps to WCAG 2.2 Success Criterion 3.3.8 Accessible Authentication (Minimum).\n- The practical goal is not \"less security\"; it is at least one viable path that does not depend on a cognitive function test.\n\n## Exceptions\n\n- Re-entering a newly created password can be a valid security exception when the system does not reveal the password back to the user.\n- MFA is compatible with this rule, but the user still needs at least one practical path that does not rely on memorizing or transcribing information.\n- Accessibility does not require removing security; it requires choosing security controls that users can actually complete.\n\n## Verification\n\n### Automated Checks\n\n- Search auth flows for blocked paste handlers, OTP widgets, and missing autocomplete attributes.\n- Verify username, current-password, new-password, and one-time-code fields use appropriate semantics.\n\n### Manual Checks\n\n- Test sign-in with a password manager.\n- Paste an OTP or let the browser autofill it where supported.\n- Exercise recovery and MFA flows, not only the primary login form.\n- Fail if the only available path requires memorizing, transcribing, or solving a cognitive test without an assisted alternative.","skills/accessible-notifications/SKILL.md":"---\nname: accessible-notifications\ndescription: \"Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.\"\nmetadata:\n category: html\n priority: high\n difficulty: intermediate\n estimatedTime: \"25\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/html/accessible-notifications\n---\n\n# Make notifications accessible\n\nWithout proper ARIA attributes, screen reader users miss critical notifications like form errors, success messages, and real-time updates—leaving them unaware of important page changes.\n\n## Quick Reference\n\n- Use aria-live regions to announce dynamic content changes\n- Choose between 'polite' (waits) and 'assertive' (interrupts) based on urgency\n- Ensure notifications persist long enough to be read\n- Provide visible and programmatic dismiss options\n\n## Check\n\nVerify notifications use aria-live regions, appropriate role (alert or status), and persist long enough to be read.\n\n## Fix\n\nImplement notifications with role='alert' or role='status', aria-live='polite' or 'assertive', and adequate display time.\n\n## Explain\n\nExplain how accessible notifications ensure all users are informed of important updates regardless of how they interact with the page.\n\n## Code Review\n\nReview templates, server-rendered HTML, and shared components that output markup related to Make notifications accessible. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/html/accessible-notifications\n","skills/accessible-notifications/references/rule.md":"# Make notifications accessible\n\n> Toast notifications and alerts are announced to screen readers using ARIA live regions and appropriate roles.\n\n**Priority:** high · **Difficulty:** intermediate · **Time:** 25 min\n\n---\nAccessible notifications ensure all users receive important feedback about actions and state changes.\n\n## Code Example\n\n```html\n\n
\n Your changes have been saved.\n
\n\n\n
\n Error: Please fill in all required fields.\n
\n\n\n\n```\n\n## Why It Matters\n\nWithout proper ARIA attributes, screen reader users miss critical notifications like form errors, success messages, and real-time updates—leaving them unaware of important page changes.\n\n## ARIA Live Region Types\n\n| Attribute | Behavior | Use For |\n|-----------|----------|---------|\n| `aria-live=\"polite\"` | Waits for user pause | Status updates, non-urgent info |\n| `aria-live=\"assertive\"` | Interrupts immediately | Errors, time-sensitive alerts |\n| `role=\"status\"` | Implicit polite | Progress, success messages |\n| `role=\"alert\"` | Implicit assertive | Errors, warnings |\n\n## React Toast Component\n\n```tsx\n\ntype NotificationType = 'success' | 'error' | 'warning' | 'info'\n\ninterface ToastProps {\n message: string\n type: NotificationType\n duration?: number\n onDismiss: () => void\n}\n\n message,\n type,\n duration = 5000,\n onDismiss\n}: ToastProps) {\n const toastRef = useRef(null)\n\n // Auto-dismiss after duration\n useEffect(() => {\n if (duration > 0) {\n const timer = setTimeout(onDismiss, duration)\n return () => clearTimeout(timer)\n }\n }, [duration, onDismiss])\n\n // Focus toast for keyboard users\n useEffect(() => {\n toastRef.current?.focus()\n }, [])\n\n const isError = type === 'error' || type === 'warning'\n\n return (\n \n \n {type === 'success' && '✓'}\n {type === 'error' && '✕'}\n {type === 'warning' && '⚠'}\n {type === 'info' && 'ℹ'}\n \n\n {message}\n\n \n ×\n \n \n )\n}\n```\n\n## Toast Container with Live Region\n\n```tsx\n\ninterface Notification {\n id: string\n message: string\n type: NotificationType\n duration?: number\n}\n\ninterface ToastContextType {\n addToast: (notification: Omit\n {children}\n\n {/* Toast container with live region */}\n \n {toasts.map(toast => (\n removeToast(toast.id)}\n />\n ))}\n \n\n {/* Screen reader announcement region */}\n \n {toasts.length > 0 && toasts[toasts.length - 1].message}\n \n \n )\n}\n\n const context = useContext(ToastContext)\n if (!context) throw new Error('useToast must be used within ToastProvider')\n return context\n}\n```\n\n## Usage Example\n\n```tsx\nfunction SaveButton() {\n const { addToast } = useToast()\n\n const handleSave = async () => {\n try {\n await saveData()\n addToast({\n message: 'Changes saved successfully',\n type: 'success',\n duration: 3000\n })\n } catch (error) {\n addToast({\n message: 'Failed to save changes. Please try again.',\n type: 'error',\n duration: 0 // Don't auto-dismiss errors\n })\n }\n }\n\n return \n}\n```\n\n## Inline Notifications\n\n```tsx\ninterface InlineNotificationProps {\n type: 'error' | 'warning' | 'success' | 'info'\n title?: string\n children: React.ReactNode\n dismissible?: boolean\n onDismiss?: () => void\n}\n\n type,\n title,\n children,\n dismissible = false,\n onDismiss\n}: InlineNotificationProps) {\n const isUrgent = type === 'error' || type === 'warning'\n\n return (\n \n {title && (\n {title}\n )}\n
{children}
\n\n {dismissible && (\n \n ×\n \n )}\n \n )\n}\n```\n\n## Progress Notifications\n\n```tsx\nfunction UploadProgress({ progress, fileName }: { progress: number; fileName: string }) {\n return (\n \n \n Uploading {fileName}: {progress}% complete\n \n\n
\n {fileName}\n \n {progress}%\n
\n \n )\n}\n```\n\n## Timing Guidelines\n\n| Notification Type | Recommended Duration |\n|-------------------|---------------------|\n| Success messages | 3-5 seconds |\n| Info/status | 5-7 seconds |\n| Warnings | 8-10 seconds or manual dismiss |\n| Errors | No auto-dismiss (manual only) |\n\n```tsx\nconst DURATION_MAP = {\n success: 3000,\n info: 5000,\n warning: 8000,\n error: 0, // No auto-dismiss\n} as const\n```\n\n## Styling\n\n```css\n.toast-container {\n position: fixed;\n bottom: 1rem;\n right: 1rem;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.toast {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n animation: slideIn 0.3s ease-out;\n}\n\n.toast--success { background: #d4edda; border-left: 4px solid #28a745; }\n.toast--error { background: #f8d7da; border-left: 4px solid #dc3545; }\n.toast--warning { background: #fff3cd; border-left: 4px solid #ffc107; }\n.toast--info { background: #d1ecf1; border-left: 4px solid #17a2b8; }\n\n.toast__dismiss {\n background: none;\n border: none;\n font-size: 1.25rem;\n cursor: pointer;\n padding: 0.25rem;\n margin-left: auto;\n}\n\n/* Screen reader only */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n/* Respect motion preferences */\n@media (prefers-reduced-motion: reduce) {\n .toast {\n animation: none;\n }\n}\n```\n\n## Verification\n\n1. Enable screen reader and trigger notifications\n2. Verify announcements occur at appropriate times\n3. Test keyboard dismissal (Escape key)\n4. Check notifications don't disappear too quickly\n5. Verify focus management after dismissal\n6. Test with different screen readers (NVDA, VoiceOver, JAWS)\n\nReserve `aria-live=\"assertive\"` for truly urgent messages. Overuse disrupts the user experience by constantly interrupting screen reader output.","skills/accessible-tables/SKILL.md":"---\nname: accessible-tables\ndescription: \"Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.\"\nmetadata:\n category: accessibility\n priority: medium\n difficulty: intermediate\n estimatedTime: \"20\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/accessibility/accessible-tables\n---\n\n# Use semantic table markup for screen readers\n\nScreen readers read table data cell-by-cell—without proper headers, users hear meaningless numbers without context. 'Row 3, Column 2: $99' vs just '$99'.\n\n## Quick Reference\n\n- Use elements for headers with scope='col' or scope='row'\n- Add to describe the table's purpose\n- Never use tables for layout—use CSS Grid or Flexbox instead\n- Use id/headers for complex tables with merged cells\n- For simple tables with a clear adjacent section heading, missing `scope` is often a stronger finding than missing ``\n- Prefer one strong table-semantics finding over multiple weaker enhancements on the same simple table\n\n## Check\n\nVerify tables use proper th elements with scope, caption or aria-labelledby, and semantic table structure.\n\n## Fix\n\nAdd proper table headers with scope attributes, captions for context, and ensure tables are not used for layout.\n\n## Explain\n\nExplain how proper table markup helps screen reader users understand data relationships and navigate table content.\n\n## Code Review\n\nReview the rendered markup and interactive states that affect Use semantic table markup for screen readers. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/accessibility/accessible-tables\n","skills/accessible-tables/references/rule.md":"# Use semantic table markup for screen readers\n\n> Data tables use proper semantic markup with headers, captions, and scope attributes for screen reader accessibility.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 20 min\n\n---\nProper table markup enables screen readers to announce header-cell relationships, making data understandable.\n\n## Code Example\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Q1 2024 Sales by Region
RegionJanuaryFebruaryMarch
North$12,000$14,500$13,200
South$9,800$11,000$10,500
\n```\n\n## Why It Matters\n\nScreen readers read table data cell-by-cell—without proper headers, users hear meaningless numbers without context. 'Row 3, Column 2: $99' vs just '$99'.\n\n## Scope Attribute\n\n| Value | Use When |\n|-------|----------|\n| `scope=\"col\"` | Header applies to column below |\n| `scope=\"row\"` | Header applies to row beside it |\n| `scope=\"colgroup\"` | Header spans multiple columns |\n| `scope=\"rowgroup\"` | Header spans multiple rows |\n\n## Complex Tables with Headers Attribute\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Sales Report
RegionQ1Q2
UnitsRevenueUnitsRevenue
North150$15,000180$18,000
\n```\n\n## React Table Component\n\n```tsx\ninterface Column{caption}\n \n \n {columns.map(col => (\n \n {col.header}\n \n ))}\n \n \n \n {data.map((row, i) => (\n \n {columns.map(col => {\n const isRowHeader = col.key === rowHeader\n const Tag = isRowHeader ? 'th' : 'td'\n return (\n \n {String(row[col.key])}\n \n )\n })}\n \n ))}\n \n \n )\n}\n```\n\n## Responsive Tables\n\n```html\n\n
\n \n \n
\n
\n```\n\n```css\n.table-wrapper {\n overflow-x: auto;\n max-width: 100%;\n}\n\n/* Focus indicator for keyboard users scrolling */\n.table-wrapper:focus {\n outline: 2px solid #005fcc;\n}\n```\n\n## Exceptions\n\n- Simple data tables can sometimes fail more from missing header relationships than from missing enhancements such as captions or mobile wrappers, so prioritize the strongest semantic issue.\n- Do not convert layout structures into data-table markup just to satisfy a rule; the correct fix may be to remove table semantics entirely.\n- When several table-accessibility issues overlap, resolve the header-cell relationship first because downstream announcements depend on it.\n\n## Verification\n\n### Automated Checks\n\n- Use browser accessibility tooling, axe, Lighthouse, or equivalent automated checks against a representative rendered state.\n\n### Manual Checks\n\n- Use screen reader table navigation (Ctrl+Alt+Arrow keys in NVDA)\n- Verify headers are announced with each cell\n- Check caption describes the table purpose\n- Confirm table is not used for layout","skills/accessible-tooltips/SKILL.md":"---\nname: accessible-tooltips\ndescription: \"Use when reviewing templates, rendered HTML, or shared components related to Create accessible tooltips. Validate the final browser-facing markup, not just the source framework abstraction.\"\nmetadata:\n category: html\n priority: medium\n difficulty: intermediate\n estimatedTime: \"20\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/html/accessible-tooltips\n---\n\n# Create accessible tooltips\n\nInaccessible tooltips leave keyboard and screen reader users without important contextual information, creating an unequal experience and potential confusion.\n\n## Quick Reference\n\n- Tooltips must be keyboard accessible (focusable trigger)\n- Use aria-describedby to associate tooltip with trigger\n- Allow hover and focus to show tooltip, Escape to dismiss\n- Ensure sufficient contrast and don't hide essential info in tooltips\n\n## Check\n\nVerify tooltips are keyboard accessible, use appropriate ARIA roles (tooltip), and can be dismissed without moving focus.\n\n## Fix\n\nImplement tooltips with role='tooltip', aria-describedby, keyboard triggering, and Escape key dismissal.\n\n## Explain\n\nExplain the accessibility requirements for tooltips including keyboard access, ARIA attributes, and timing considerations.\n\n## Code Review\n\nReview templates, server-rendered HTML, and shared components that output markup related to Create accessible tooltips. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/html/accessible-tooltips\n","skills/accessible-tooltips/references/rule.md":"# Create accessible tooltips\n\n> Tooltips are accessible to keyboard users and screen readers with proper ARIA attributes and focus handling.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 20 min\n\n---\nAccessible tooltips provide supplementary information without excluding keyboard or screen reader users.\n\n## Code Example\n\n```html\n
\n \n Settings\n \n \n Configure your preferences\n
\n\n```\n\n## Why It Matters\n\nInaccessible tooltips leave keyboard and screen reader users without important contextual information, creating an unequal experience and potential confusion.\n\n## Accessibility Requirements\n\n| Requirement | Implementation |\n|-------------|----------------|\n| Keyboard accessible | Show on focus, not just hover |\n| Programmatically associated | Use `aria-describedby` |\n| Dismissible | Close with Escape key |\n| Persistent | Stay visible while hovered/focused |\n| Non-essential | Don't hide critical info in tooltips |\n\n## React Tooltip Component\n\n```tsx\n\ninterface TooltipProps {\n content: string\n children: React.ReactElement\n position?: 'top' | 'bottom' | 'left' | 'right'\n delay?: number\n}\n\n content,\n children,\n position = 'top',\n delay = 300\n}: TooltipProps) {\n const [isVisible, setIsVisible] = useState(false)\n const tooltipId = useId()\n const timeoutRef = useRef {\n clearTimeout(timeoutRef.current)\n setIsVisible(false)\n }\n\n // Handle Escape key\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && isVisible) {\n hideTooltip()\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [isVisible])\n\n // Clone child to add props\n const trigger = React.cloneElement(children, {\n ref: triggerRef,\n 'aria-describedby': isVisible ? tooltipId : undefined,\n onMouseEnter: showTooltip,\n onMouseLeave: hideTooltip,\n onFocus: showTooltip,\n onBlur: hideTooltip,\n })\n\n return (\n
\n {trigger}\n {isVisible && (\n \n {content}\n
\n )}\n \n )\n}\n```\n\n## Usage\n\n```tsx\n\n \n\n \n\n```\n\n## Advanced Tooltip with Floating UI\n\n```tsx\n\ninterface AdvancedTooltipProps {\n content: React.ReactNode\n children: React.ReactElement\n}\n\n const [isOpen, setIsOpen] = useState(false)\n const arrowRef = useRef(null)\n const tooltipId = useId()\n\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: setIsOpen,\n placement: 'top',\n middleware: [\n offset(8),\n flip(),\n shift({ padding: 8 }),\n arrow({ element: arrowRef })\n ],\n })\n\n return (\n <>\n {React.cloneElement(children, {\n ref: refs.setReference,\n 'aria-describedby': isOpen ? tooltipId : undefined,\n onMouseEnter: () => setIsOpen(true),\n onMouseLeave: () => setIsOpen(false),\n onFocus: () => setIsOpen(true),\n onBlur: () => setIsOpen(false),\n })}\n\n {isOpen && (\n \n {content}\n
\n
\n )}\n \n )\n}\n```\n\n## Icon Button with Tooltip\n\n```tsx\ninterface IconButtonProps {\n icon: React.ReactNode\n label: string\n onClick: () => void\n tooltip?: string\n}\n\n const tooltipId = useId()\n const [showTooltip, setShowTooltip] = useState(false)\n\n return (\n
\n setShowTooltip(true)}\n onMouseLeave={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n className=\"icon-button\"\n >\n {icon}\n \n\n {tooltip && showTooltip && (\n \n {tooltip}\n \n )}\n
\n )\n}\n```\n\n## Native Title Attribute (Limited)\n\n```html\n\n\n\n\n\n \n\n
\n Save document (Ctrl+S)\n
\n```\n\n## Styling\n\n```css\n.tooltip-wrapper {\n position: relative;\n display: inline-block;\n}\n\n.tooltip {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n background: #1a1a1a;\n color: #ffffff;\n border-radius: 4px;\n white-space: nowrap;\n pointer-events: none;\n\n /* Animation */\n opacity: 0;\n animation: tooltipFadeIn 0.15s ease-out forwards;\n}\n\n.tooltip--top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 8px;\n}\n\n.tooltip--bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 8px;\n}\n\n.tooltip--left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 8px;\n}\n\n.tooltip--right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 8px;\n}\n\n/* Arrow */\n.tooltip::after {\n content: '';\n position: absolute;\n border: 6px solid transparent;\n}\n\n.tooltip--top::after {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: #1a1a1a;\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; transform: translateX(-50%) translateY(4px); }\n to { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n\n/* Respect motion preferences */\n@media (prefers-reduced-motion: reduce) {\n .tooltip {\n animation: none;\n opacity: 1;\n }\n}\n\n/* Ensure sufficient contrast */\n.tooltip {\n /* WCAG requires 4.5:1 for normal text */\n /* #ffffff on #1a1a1a = 16.1:1 ✓ */\n}\n```\n\n## When to Use Tooltips vs Other Patterns\n\n| Use Case | Pattern |\n|----------|---------|\n| Supplementary hint | Tooltip |\n| Essential instruction | Inline text |\n| Complex content | Popover/Dialog |\n| Form field help | `aria-describedby` text |\n| Icon-only button | `aria-label` + optional tooltip |\n\n## Verification\n\n1. Tab to trigger element - tooltip should appear\n2. Press Escape - tooltip should close\n3. Hover over trigger - tooltip appears after delay\n4. Move mouse to tooltip - should stay visible\n5. Test with screen reader (tooltip content announced)\n6. Verify tooltip doesn't block other content\n7. Check color contrast meets WCAG requirements\n\nNever put essential information in tooltips. They're for supplementary hints only. Critical content should be visible by default or in the main UI.","skills/accesskeys/SKILL.md":"---\nname: accesskeys\ndescription: \"Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure accesskey values are unique. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.\"\nmetadata:\n category: accessibility\n priority: medium\n difficulty: intermediate\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/accessibility/accesskeys\n---\n\n# Ensure accesskey values are unique\n\nDuplicate access keys cause conflicts where only one element (usually the first) is reachable via the shortcut, making other elements inaccessible to keyboard users.\n\n## Quick Reference\n\n- Each `accesskey` attribute value must be unique on the page\n- Duplicate access keys can lead to unpredictable browser behavior\n- Helps keyboard users navigate reliably using defined shortcuts\n\n## Check\n\nCheck for duplicate `accesskey` attributes across the document to ensure each shortcut is unique.\n\n## Fix\n\nAssign unique values to each `accesskey` attribute or remove redundant ones to prevent shortcut conflicts.\n\n## Explain\n\nExplain how duplicate access keys affect keyboard accessibility and browser shortcut handling.\n\n## Code Review\n\nReview the rendered markup and interactive states that affect Ensure accesskey values are unique. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/accessibility/accesskeys\n","skills/accesskeys/references/rule.md":"# Ensure accesskey values are unique\n\n> Checks that accesskey values are unique to avoid shortcut conflicts.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 10 min\n\n---\nThe `accesskey` attribute allows developers to assign keyboard shortcuts to specific elements. To ensure these shortcuts work reliably, each value must be unique within the document.\n\n## Code Example\n\n```html\n\nHome\nContact\n\n\nSave\nSearch\n```\n\n## Why It Matters\n\n- **Predictable Navigation**: Ensures keyboard shortcuts work as intended without conflicts.\n- **Assistive Technology**: Screen readers and other assistive technologies depend on unique identifiers for reliable interaction.\n- **User Experience**: Prevents user frustration when a shortcut doesn't trigger the expected action or moves focus to the wrong element.\n- **Browser Consistency**: Different browsers handle duplicate access keys differently; uniqueness ensures a consistent experience across all platforms.\n\n## Exceptions\n\n- Evaluate the rendered experience before treating a static-code smell as a blocker; interaction timing, browser behavior, and assistive technology output often determine severity.\n- Not every secondary accessibility issue deserves equal weight; prioritize the issue that most directly blocks perception, operation, or understanding.\n- Avoid adding redundant markup or ARIA solely to satisfy a rule when a simpler semantic implementation would eliminate the issue entirely.\n\n## Standards\n\n- Align the implementation with W3C WAI: WCAG Overview and verify the rendered experience, not only the source code.\n- Align the implementation with MDN: Accessibility and verify the rendered experience, not only the source code.\n\n## Verification\n\n### Automated Checks\n\n- Inspect the browser accessibility tree or accessibility pane for the relevant element, role, or accessible name.\n- Run an automated accessibility checker such as axe or Lighthouse where applicable.\n\n### Manual Checks\n\n- Test the affected UI with keyboard-only navigation and confirm the rule holds in the rendered experience.\n- Re-test one representative user flow with a screen reader if this rule affects a key interaction.","skills/accordion-accessibility/SKILL.md":"---\nname: accordion-accessibility\ndescription: \"Use when reviewing templates, rendered HTML, or shared components related to Make accordions keyboard navigable. Validate the final browser-facing markup, not just the source framework abstraction.\"\nmetadata:\n category: html\n priority: medium\n difficulty: intermediate\n estimatedTime: \"25\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/html/accordion-accessibility\n---\n\n# Make accordions keyboard navigable\n\nPoorly implemented accordions trap keyboard users and leave screen reader users unable to understand or navigate collapsed content sections.\n\n## Quick Reference\n\n- Use button elements for accordion triggers with aria-expanded\n- Associate panels with triggers using aria-controls\n- Support Arrow keys for navigation between headers\n- Use heading elements appropriately for document structure\n\n## Check\n\nVerify accordions use button triggers with aria-expanded, aria-controls, and proper keyboard navigation (Enter, Space, arrows).\n\n## Fix\n\nImplement accordions with button elements, aria-expanded state, aria-controls linking to content panels, and keyboard support.\n\n## Explain\n\nExplain the ARIA pattern for accessible accordions and how they enable keyboard and screen reader users to navigate collapsible content.\n\n## Code Review\n\nReview templates, server-rendered HTML, and shared components that output markup related to Make accordions keyboard navigable. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/html/accordion-accessibility\n","skills/accordion-accessibility/references/rule.md":"# Make accordions keyboard navigable\n\n> Accordion components use proper ARIA attributes and keyboard interactions for screen reader accessibility.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 25 min\n\n---\nAccessible accordions allow users to efficiently navigate and reveal content sections using any input method.\n\n## Code Example\n\n```html\n
\n

\n \n Section 1\n \n \n

\n \n

Panel 1 content goes here.

\n
\n\n

\n \n Section 2\n \n \n

\n \n

Panel 2 content goes here.

\n \n\n```\n\n## Why It Matters\n\nPoorly implemented accordions trap keyboard users and leave screen reader users unable to understand or navigate collapsed content sections.\n\n## ARIA Pattern Requirements\n\n| Element | Attribute | Purpose |\n|---------|-----------|---------|\n| Trigger | `button` element | Activatable with Enter/Space |\n| Trigger | `aria-expanded` | Indicates open/closed state |\n| Trigger | `aria-controls` | References panel ID |\n| Panel | `id` | Target of aria-controls |\n| Panel | `role=\"region\"` | Optional, for important sections |\n| Header | Heading element | Maintains document structure |\n\n## React Accordion Component\n\n```tsx\n\ninterface AccordionItemProps {\n title: string\n children: React.ReactNode\n defaultOpen?: boolean\n}\n\ninterface AccordionProps {\n children: React.ReactNode\n allowMultiple?: boolean\n}\n\n const [openItems, setOpenItems] = useState { itemRefs.current[index] = el },\n } as any)\n }\n return child\n })}\n \n )\n}\n\n title,\n children,\n defaultOpen = false,\n _index,\n _isOpen,\n _onToggle,\n _onKeyDown,\n _ref,\n}: AccordionItemProps & {\n _index?: number\n _isOpen?: boolean\n _onToggle?: () => void\n _onKeyDown?: (e: KeyboardEvent) => void\n _ref?: (el: HTMLButtonElement) => void\n}) {\n const triggerId = useId()\n const panelId = useId()\n const isOpen = _isOpen ?? defaultOpen\n\n return (\n
\n

\n \n {title}\n \n \n

\n
\n \n )\n}\n```\n\n## Usage\n\n```tsx\nYou can return items within 30 days of purchase...

\n \n \n

Standard shipping takes 5-7 business days...

\n \n \n

Yes, we ship to over 50 countries...

\n \n\n```\n\n## Keyboard Navigation\n\n| Key | Action |\n|-----|--------|\n| `Enter` / `Space` | Toggle panel open/closed |\n| `Arrow Down` | Move focus to next header |\n| `Arrow Up` | Move focus to previous header |\n| `Home` | Move focus to first header |\n| `End` | Move focus to last header |\n\n## Native HTML Details/Summary\n\n```html\n\n
\n Section Title\n
\n

Content here...

\n
\n
\n\n
\n Another Section\n
\n

More content...

\n
\n
\n```\n\n```tsx\n// React wrapper for details/summary\nfunction NativeAccordion({ title, children, defaultOpen = false }) {\n return (\n
\n {title}\n
\n {children}\n
\n
\n )\n}\n```\n\n## Styling\n\n```css\n.accordion {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.accordion__item {\n border-bottom: 1px solid #e0e0e0;\n}\n\n.accordion__item:last-child {\n border-bottom: none;\n}\n\n.accordion__header {\n margin: 0;\n}\n\n.accordion__trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 1rem 1.5rem;\n font-size: 1rem;\n font-weight: 600;\n text-align: left;\n background: #fff;\n border: none;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.accordion__trigger:hover {\n background: #f5f5f5;\n}\n\n.accordion__trigger:focus-visible {\n outline: 2px solid #0066cc;\n outline-offset: -2px;\n}\n\n.accordion__icon {\n width: 1.25rem;\n height: 1.25rem;\n transition: transform 0.2s;\n}\n\n.accordion__trigger[aria-expanded=\"true\"] .accordion__icon {\n transform: rotate(180deg);\n}\n\n.accordion__panel[hidden] {\n display: none;\n}\n\n.accordion__content {\n padding: 0 1.5rem 1rem;\n}\n\n/* Animation */\n.accordion__panel {\n animation: slideDown 0.2s ease-out;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion__panel,\n .accordion__icon {\n animation: none;\n transition: none;\n }\n}\n```\n\n## Verification\n\n1. Tab to first accordion header\n2. Press Enter/Space to toggle\n3. Use Arrow keys to navigate between headers\n4. Press Home/End to jump to first/last\n5. Test with screen reader (announces expanded state)\n6. Verify heading structure in accessibility tree\n7. Check focus is visible on all interactive elements\n\nChoose an appropriate heading level (h2, h3, etc.) based on the accordion's position in the document outline. Don't skip heading levels.","skills/affiliate-disclosure/SKILL.md":"---\nname: affiliate-disclosure\ndescription: \"Use when auditing metadata, crawlability, structured data, or indexability related to Provide clear affiliate disclosures. Verify the rendered HTML and HTTP response rather than relying only on source files.\"\nmetadata:\n category: seo\n priority: medium\n difficulty: intermediate\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/seo/affiliate-disclosure\n---\n\n# Provide clear affiliate disclosures\n\nClear disclosures are required by law (e.g., FTC guidelines) and are essential for maintaining user trust and preventing search engine penalties for hidden advertisements.\n\n## Quick Reference\n\n- Add a clear and conspicuous disclosure for any affiliate or sponsored links\n- Place the disclosure at the top of the page, before any affiliate links appear\n- Use simple, unambiguous language to explain the financial relationship\n\n## Check\n\nVerify that all pages containing affiliate links or sponsored content have a clear, visible disclosure before the links appear.\n\n## Fix\n\nAdd a standardized disclosure statement at the beginning of your content or near affiliate links to inform users of the partnership.\n\n## Explain\n\nExplain the legal and ethical importance of affiliate disclosures and how they impact user trust and SEO.\n\n## Code Review\n\nReview metadata generation, rendered HTML, structured data, and response headers related to Provide clear affiliate disclosures. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/seo/affiliate-disclosure\n","skills/affiliate-disclosure/references/rule.md":"# Provide clear affiliate disclosures\n\n> Checks for affiliate and sponsored content disclosures to maintain transparency.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 10 min\n\n---\nTransparency regarding financial incentives is crucial for building a sustainable relationship with your audience and complying with consumer protection laws.\n\n## Code Example\n\n```html\n
\n
\n

The Best Laptops for Developers in 2024

\n
\n

Disclaimer: This post contains affiliate links. If you click on one and make a purchase, we may receive a small commission at no extra cost to you.

\n
\n
\n \n

Looking for a new laptop? Here are our top recommendations...

\n
\n```\n\n## Why It Matters\n\n- **Legal Compliance**: Adheres to FTC (Federal Trade Commission) and other international regulations regarding online advertising.\n- **User Trust**: Demonstrates honesty and transparency, which can lead to higher conversion rates over time.\n- **SEO Quality**: Prevents being flagged for \"sneaky redirects\" or hidden affiliate programs that can negatively impact rankings.\n- **E-E-A-T**: Supports the \"Trust\" pillar by showing you aren't hiding financial motivations.\n\n## Exceptions\n\n- Necessary utility or compliance pages can be intentionally brief and should not be judged by the same editorial-depth expectations as ranking-focused content.\n- AI-assisted drafting is not a failure by itself; flag unsupported claims, missing editorial review, or low-originality output instead.\n- When a page has both trust-signal issues and crawl/index problems, make the page eligible to rank first and then improve the content quality signals.\n\n## Verification\n\n### Automated Checks\n\n- Inspect rendered HTML and HTTP headers to confirm the expected metadata or crawlability signal is present.\n- Test the affected URL with Google Search Console or equivalent tooling where relevant.\n- Re-crawl a representative page set after deployment.\n\n### Manual Checks\n\n- Confirm the change does not create conflicting canonical-url, robots, or structured-data signals.","skills/ai-content/SKILL.md":"---\nname: ai-content\ndescription: \"Use when auditing metadata, crawlability, structured data, or indexability related to Audit and refine AI-generated content. Verify the rendered HTML and HTTP response rather than relying only on source files.\"\nmetadata:\n category: seo\n priority: medium\n difficulty: intermediate\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/seo/ai-content\n---\n\n# Audit and refine AI-generated content\n\nSearch engines prioritize helpful, reliable, people-first content; unedited AI content often lacks the depth and accuracy required for high rankings.\n\n## Quick Reference\n\n- Review AI-generated content for accuracy, unique value, and human-like voice\n- Ensure content isn't just a rewrite of existing top-ranking articles\n- Verify all factual claims and include original research or insights\n\n## Check\n\nReview the content to see if it provides unique value beyond what AI models can generate by default.\n\n## Fix\n\nRewrite AI-generated sections to include original research, personal experiences, and a unique brand voice.\n\n## Explain\n\nExplain why human oversight is necessary for AI-generated content to meet SEO quality standards and user expectations.\n\n## Code Review\n\nReview metadata generation, rendered HTML, structured data, and response headers related to Audit and refine AI-generated content. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/seo/ai-content\n","skills/ai-content/references/rule.md":"# Audit and refine AI-generated content\n\n> Detects and reviews content that appears to be primarily AI-generated to ensure quality.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 10 min\n\n---\nWhile AI tools can assist in the writing process, the final output still has to satisfy [Google's Search Essentials](https://developers.google.com/search/docs/fundamentals/seo-starter-guide) and deliver the depth expected from [high-quality content](/en/rules/seo/quality) that genuinely helps the reader.\n\n## Code Example\n\nWhile there's no \"code\" to detect AI, you can signal human involvement and expertise in your metadata and bylines.\n\n```html\n
\n
\n

Advanced TypeScript Patterns

\n
\n By Jane Smith, Senior Engineer\n Fact-checked on October 20, 2023\n
\n
\n \n

In this article, we'll explore patterns I've used in production at ScaleTech...

\n
\n```\n\n## Why It Matters\n\n- **Quality Standards**: Google's guidance on [creating helpful, reliable, people-first content](https://developers.google.com/search/docs/fundamentals/creating-helpful-content) targets low-value automation that does not add original insight.\n- **Accuracy**: AI can hallucinate facts; human verification is essential for [YMYL content](/en/rules/seo/ymyl-detection), where bad advice can cause real harm.\n- **Uniqueness**: Prevents your site from becoming a \"carbon copy\" of other sites using the same AI prompts.\n- **User Experience**: Human-edited content is generally more engaging, nuanced, and better at solving specific user problems.\n\nIf a draft feels generic, unsupported, or too close to what a model would produce by default, review it alongside thin-content risk before deciding it is ready to publish.\n\n## Exceptions\n\n- Necessary utility or compliance pages can be intentionally brief and should not be judged by the same editorial-depth expectations as ranking-focused content.\n- AI-assisted drafting is not a failure by itself; flag unsupported claims, missing editorial review, or low-originality output instead.\n- When a page has both trust-signal issues and crawl/index problems, make the page eligible to rank first and then improve the content quality signals.\n\n## Standards\n\n- Use these references as the standard for the final search-facing HTML, metadata, and crawl behavior.\n- Check the implementation against Google Search Central: Search Essentials before treating the rule as satisfied.\n- Check the implementation against Google Search Central documentation before treating the rule as satisfied.\n\n## Verification\n\n### Automated Checks\n\n- Inspect rendered HTML and HTTP headers to confirm the expected metadata or crawlability signal is present.\n- Test the affected URL with Google Search Console or equivalent tooling where relevant.\n- Re-crawl a representative page set after deployment.\n\n### Manual Checks\n\n- Confirm the change does not create conflicting canonical-url, robots, or structured-data signals.","skills/all-noindex-pages/SKILL.md":"---\nname: all-noindex-pages\ndescription: \"Use when auditing metadata, crawlability, structured data, or indexability related to Audit all noindex pages. Verify the rendered HTML and HTTP response rather than relying only on source files.\"\nmetadata:\n category: seo\n priority: medium\n difficulty: intermediate\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/seo/all-noindex-pages\n---\n\n# Audit all noindex pages\n\nAn incorrect `noindex` tag can completely remove important pages from search results, while proper usage helps manage crawl budget and prevents duplicate content issues.\n\n## Quick Reference\n\n- Identify all pages using the `noindex` directive in meta tags or headers\n- Verify that critical pages (products, articles) aren't accidentally blocked\n- Ensure `noindex` is correctly applied to thin content, admin, or utility pages\n\n## Check\n\nVerify that the `noindex` directive is only applied to pages that should not appear in search results.\n\n## Fix\n\nRemove `<meta name=\"robots\" content=\"noindex\">` from pages that should be indexed and ranking.\n\n## Explain\n\nExplain the difference between `noindex` and `disallow` in robots.txt and when to use each for optimal SEO.\n\n## Code Review\n\nReview metadata generation, rendered HTML, structured data, and response headers related to Audit all noindex pages. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/seo/all-noindex-pages\n","skills/all-noindex-pages/references/rule.md":"# Audit all noindex pages\n\n> Lists and reviews all pages blocked from indexing to ensure critical content is accessible.\n\n**Priority:** medium · **Difficulty:** intermediate · **Time:** 10 min\n\n---\nRegularly auditing your `noindex` directives ensures that you are only blocking pages that don't provide search value, such as staging environments, admin panels, or internal search results.\n\n## Code Example\n\n```html\n\n \n \n \n \n \n\n```\n\n## Why It Matters\n\n- **Visibility**: Prevents accidental exclusion of high-value pages from Google and Bing.\n- **Crawl Budget**: Helps search engines focus their limited crawl resources on your most important pages.\n- **De-indexing**: Useful for removing outdated or sensitive pages from search results without deleting them.\n- **Strategic Control**: Allows you to manage which versions of content (e.g., filtered lists) are available for indexing.\n\n## Exceptions\n\n- Staging, utility, login, account, or internal search pages may intentionally use different crawl or index signals if they are not meant to rank.\n- Temporary migration states can produce noisy intermediate signals; flag the live production URL pattern, not one-off transition artifacts.\n- When redirects, canonicals, robots directives, or indexability signals conflict, fix the strongest final signal first instead of reporting every downstream symptom as a separate blocker.\n\n## Standards\n\n- Use these references as the standard for the final search-facing HTML, metadata, and crawl behavior.\n- Check the implementation against Google Search Central: Search Essentials before treating the rule as satisfied.\n- Check the implementation against Google Search Central documentation before treating the rule as satisfied.\n\n## Verification\n\n### Automated Checks\n\n- Inspect rendered HTML and HTTP headers to confirm the expected metadata or crawlability signal is present.\n- Test the affected URL with Google Search Console or equivalent tooling where relevant.\n- Re-crawl a representative page set after deployment.\n\n### Manual Checks\n\n- Confirm the change does not create conflicting canonical-url, robots, or structured-data signals.","skills/alt-text/SKILL.md":"---\nname: alt-text\ndescription: \"Use when reviewing image assets, markup, and CDN or build transforms related to Provide meaningful alt text for images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.\"\nmetadata:\n category: images\n priority: critical\n difficulty: beginner\n estimatedTime: \"15\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/images/alt-text\n---\n\n# Provide meaningful alt text for images\n\nApproximately 2.2 billion people worldwide have vision impairment. Screen readers read the alt attribute aloud—without meaningful alt text, users who are blind receive no information about image content. Missing alt text also fails WCAG 2.1 Success Criterion 1.1.1, which is a Level A (minimum) requirement. Search engines also rely on alt text to index image content.\n\n## Quick Reference\n\n- Every `` must have an `alt` attribute—omitting it entirely violates WCAG 2.1 SC 1.1.1\n- Decorative images use `alt=\"\"` so screen readers ignore them\n- Alt text should describe the image's *purpose*, not just its appearance\n- Linked images: alt describes the link destination, not the visual\n\n## Check\n\nScan all elements in the codebase. Verify: 1) Every has an alt attribute (missing alt is an error). 2) Decorative images use alt=\"\". 3) Informative images have descriptive text that conveys the image's meaning—not just its file name. 4) Images that are links describe the destination. 5) Images of text reproduce the text in alt. Flag any without alt, with alt matching the filename (e.g., alt=\"photo1.jpg\"), or with generic values like alt=\"image\" or alt=\"photo\".\n\n## Fix\n\nFor each image missing or with poor alt text: 1) Informative images—describe what the image conveys, not just what it shows (e.g., alt=\"Bar chart showing 40% increase in sales Q3 2024\" not alt=\"chart\"). 2) Decorative images—add alt=\"\" so screen readers skip them. 3) Linked images—describe the link destination (e.g., alt=\"Visit our Twitter profile\"). 4) Images of text—copy the text verbatim into alt. 5) Complex images (charts, infographics)—provide a short alt plus a longer description via aria-describedby or a visible caption.\n\n## Explain\n\nExplain WCAG 2.1 Success Criterion 1.1.1 Non-text Content: every image must have a text alternative. Screen readers announce the alt attribute aloud—without it, users who are blind or have low vision cannot understand the page. Bad alt text (like alt=\"image\") is no better than no alt text. Decorative images must use alt=\"\" explicitly so screen readers skip them entirely—omitting alt causes some screen readers to announce the filename.\n\n## Code Review\n\nReview image assets, markup, and delivery configuration related to Provide meaningful alt text for images. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/images/alt-text\n","skills/alt-text/references/rule.md":"# Provide meaningful alt text for images\n\n> Every informative image has a descriptive alt attribute; decorative images use alt=\"\" to be ignored by screen readers.\n\n**Priority:** critical · **Difficulty:** beginner · **Time:** 15 min\n\n---\nThe `alt` attribute is the primary accessibility mechanism for images. Every `` must have an `alt` attribute. Its value depends on the image's role.\n\nUse the [W3C alt decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to determine the correct alt value for any image type.\n\n## Code Example\n\nImages that convey meaning need descriptive alt text explaining what the image communicates.\n\n```html\n\n\n\n\n\"revenue-chart.png\"\n\n\n\"chart\"\n\n\n\n```\n\n## Why It Matters\n\nApproximately 2.2 billion people worldwide have vision impairment. Screen readers read the alt attribute aloud—without meaningful alt text, users who are blind receive no information about image content. Missing alt text also fails WCAG 2.1 Success Criterion 1.1.1, which is a Level A (minimum) requirement. Search engines also rely on alt text to index image content.\n\n## Decorative Images\n\nImages used purely for visual decoration carry no information and should be hidden from assistive technology.\n\n```html\n\n\n\n\n\"\"\n\n\n
\n```\n\n## Images Used as Links\n\nWhen an `` is inside an ``, the alt text must describe the link destination, not the visual appearance.\n\n```html\n\n\n \"Blue\n\n\n\n\n \"Follow\n\n```\n\n## Images of Text\n\nIf an image contains text (e.g., a logo, banner, or screenshot), reproduce that text verbatim in alt.\n\n```html\n\n\"Summer\n\n\n\"Acme\n```\n\n## Complex Images (Charts, Diagrams)\n\nFor complex visuals, provide a brief alt plus a longer description accessible to all users.\n\n```html\n\n
\n \n
\n The chart shows three departments reporting to the CEO: Engineering (12 staff),\n Marketing (8 staff), and Operations (5 staff).\n
\n
\n```\n\n## Framework Examples\n\n \n\n```tsx\ninterface ImageProps {\n src: string\n alt: string\n decorative?: boolean\n}\n\nfunction AccessibleImage({ src, alt, decorative = false }: ImageProps) {\n return (\n \n )\n}\n\n// Usage\n\n```\n\n \n \n\n```tsx\n\n// Next.js Image requires alt; use \"\" for decorative\nfunction HeroBanner() {\n return (\n <>\n {/* Informative */}\n \n\n {/* Decorative */}\n \n \n )\n}\n```\n\n \n\n## Standards\n\n- Use these references as the standard for the final image format, delivery, accessibility, and rendering behavior.\n- Check the implementation against MDN: Responsive images before treating the rule as satisfied.\n- Check the implementation against web.dev: Image performance before treating the rule as satisfied.\n\n## Verification\n\n### Automated Checks\n\n- Run axe DevTools or WAVE on the page—both flag missing or empty non-decorative alt attributes\n- Use Lighthouse Accessibility audit—\"Images do not have alternate text\" is a scored item\n\n### Manual Checks\n\n- Enable a screen reader (VoiceOver, NVDA, or JAWS) and navigate through images with the `G` key\n- Inspect the Network tab: for any image URL, verify the corresponding `` has a meaningful `alt`\n- **CAPTCHA images** — provide alt describing the purpose, not the characters (e.g., `alt=\"CAPTCHA: type the characters shown\"`), and offer an audio alternative per WCAG 1.1.1\n- **SVG icons with adjacent text labels** — if the icon's meaning is already conveyed by visible text, use `aria-hidden=\"true\"` on the SVG instead of alt","skills/anchor-smooth-scroll/SKILL.md":"---\nname: anchor-smooth-scroll\ndescription: \"Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide instant anchor scroll option. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.\"\nmetadata:\n category: accessibility\n priority: low\n difficulty: beginner\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll\n---\n\n# Provide instant anchor scroll option\n\nSmooth scroll animations can trigger vertigo, nausea, and disorientation for users with vestibular disorders—instant navigation is safer and often faster.\n\n## Quick Reference\n\n- Disable smooth scroll when prefers-reduced-motion is set\n- Use CSS scroll-behavior: smooth with media query check\n- Ensure focus moves to anchor target for keyboard users\n- Provide instant scroll as default or fallback\n\n## Check\n\nClick anchor links (same-page navigation) and verify smooth scrolling is disabled when prefers-reduced-motion is set. Confirm anchor navigation works correctly with keyboard and screen readers.\n\n## Fix\n\nUse scroll-behavior: smooth only within a prefers-reduced-motion media query check. Provide instant scrolling as the default or reduced-motion fallback. Ensure focus moves to the anchor target.\n\n## Explain\n\nExplain how animated scroll transitions can cause motion sickness and disorientation for users with vestibular disorders, and why instant navigation is often preferable for accessibility.\n\n## Code Review\n\nReview the rendered markup and interactive states that affect Provide instant anchor scroll option. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll\n","skills/anchor-smooth-scroll/references/rule.md":"# Provide instant anchor scroll option\n\n> Smooth scroll animations to anchor links respect motion preferences or provide an instant alternative.\n\n**Priority:** low · **Difficulty:** beginner · **Time:** 10 min\n\n---\nSmooth scrolling should respect motion preferences to avoid triggering vestibular disorders.\n\n## Code Example\n\n```css\n/* ❌ Bad: Always smooth, ignores preferences */\nhtml {\n scroll-behavior: smooth;\n}\n\n/* ✅ Good: Respect motion preferences */\n@media (prefers-reduced-motion: no-preference) {\n html {\n scroll-behavior: smooth;\n }\n}\n\n/* Users who prefer reduced motion get instant scrolling (default) */\n```\n\n## Why It Matters\n\nSmooth scroll animations can trigger vertigo, nausea, and disorientation for users with vestibular disorders—instant navigation is safer and often faster.\n\n## JavaScript Approach\n\n```typescript\nfunction scrollToElement(elementId: string) {\n const element = document.getElementById(elementId)\n if (!element) return\n\n const prefersReducedMotion = window.matchMedia(\n '(prefers-reduced-motion: reduce)'\n ).matches\n\n element.scrollIntoView({\n behavior: prefersReducedMotion ? 'instant' : 'smooth',\n block: 'start'\n })\n\n // Move focus to target for keyboard users\n element.focus({ preventScroll: true })\n}\n```\n\n## React Hook\n\n```tsx\nfunction useScrollToAnchor() {\n const prefersReducedMotion = useReducedMotion()\n\n const scrollTo = useCallback((elementId: string) => {\n const element = document.getElementById(elementId)\n if (!element) return\n\n element.scrollIntoView({\n behavior: prefersReducedMotion ? 'instant' : 'smooth',\n block: 'start'\n })\n\n // Set tabindex if element isn't focusable\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '-1')\n }\n element.focus({ preventScroll: true })\n }, [prefersReducedMotion])\n\n return scrollTo\n}\n\nfunction useReducedMotion() {\n const [prefersReduced, setPrefersReduced] = useState(false)\n\n useEffect(() => {\n const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n setPrefersReduced(mediaQuery.matches)\n\n const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches)\n mediaQuery.addEventListener('change', handler)\n return () => mediaQuery.removeEventListener('change', handler)\n }, [])\n\n return prefersReduced\n}\n```\n\n## Anchor Link Component\n\n```tsx\ninterface AnchorLinkProps {\n href: string\n children: React.ReactNode\n}\n\nfunction AnchorLink({ href, children }: AnchorLinkProps) {\n const scrollTo = useScrollToAnchor()\n\n const handleClick = (e: React.MouseEvent) => {\n if (href.startsWith('#')) {\n e.preventDefault()\n scrollTo(href.slice(1))\n }\n }\n\n return (\n \n {children}\n \n )\n}\n```\n\n## Focus Management\n\n```html\n\n
\n

Features

\n \n
\n```\n\n```css\n/* Hide focus ring when section is focused via anchor */\nsection:focus {\n outline: none;\n}\n\n/* But show focus for keyboard navigation */\nsection:focus-visible {\n outline: 2px solid var(--focus-color);\n}\n```\n\n## Exceptions\n\n- Simple data tables can sometimes fail more from missing header relationships than from missing enhancements such as captions or mobile wrappers, so prioritize the strongest semantic issue.\n- Do not convert layout structures into data-table markup just to satisfy a rule; the correct fix may be to remove table semantics entirely.\n- When several table-accessibility issues overlap, resolve the header-cell relationship first because downstream announcements depend on it.\n\n## Verification\n\n### Automated Checks\n\n- Use browser accessibility tooling, axe, Lighthouse, or equivalent automated checks against a representative rendered state.\n\n### Manual Checks\n\n- Enable \"Reduce motion\" in system accessibility settings\n- Click anchor links—should scroll instantly, not smoothly\n- Verify focus moves to target section\n- Tab through page after anchor click—focus should continue from anchor target","skills/anchor-text/SKILL.md":"---\nname: anchor-text\ndescription: \"Use when auditing metadata, crawlability, structured data, or indexability related to Use descriptive anchor text. Verify the rendered HTML and HTTP response rather than relying only on source files.\"\nmetadata:\n category: seo\n priority: medium\n difficulty: beginner\n estimatedTime: \"5\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/seo/anchor-text\n---\n\n# Use descriptive anchor text\n\nDescriptive anchor text helps search engines understand the context of the linked page and significantly improves accessibility for users using screen readers.\n\n## Quick Reference\n\n- Use descriptive text for links instead of generic phrases like 'click here' or 'read more'\n- Ensure the anchor text provides clear context about the linked page's content\n- Avoid over-optimizing with excessive keyword stuffing in your internal links\n\n## Check\n\nVerify that all links in the content use descriptive anchor text that accurately describes the target page.\n\n## Fix\n\nReplace generic link text like 'click here' with descriptive phrases that include relevant keywords for the destination page.\n\n## Explain\n\nExplain how descriptive anchor text improves both SEO crawlability and web accessibility for disabled users.\n\n## Code Review\n\nReview metadata generation, rendered HTML, structured data, and response headers related to Use descriptive anchor text. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.\n\n---\n\nFor full implementation details, code examples, and framework-specific guidance,\nsee `references/rule.md`.\n\nRule page: https://frontendchecklist.io/rules/seo/anchor-text\n","skills/anchor-text/references/rule.md":"# Use descriptive anchor text\n\n> Checks for descriptive, keyword-rich anchor text that provides context for users and search engines.\n\n**Priority:** medium · **Difficulty:** beginner · **Time:** 5 min\n\n---\nAnchor text is the clickable text in a hyperlink. It should provide a clear indication of what the user will find when they click the link.\n\n## Code Example\n\n```html\n\n

For more information, read our complete guide to SEO best practices.

\n\n\n

To learn more about our SEO services, click here.

\n```\n\n## Why It Matters\n\n- **Search Context**: Tells search engines what the linked page is about, helping it rank for those terms.\n- **Accessibility**: Screen reader users often navigate via a list of links; descriptive text makes this list meaningful.\n- **User Trust**: Users are more likely to click a link when they know exactly where it leads.\n- **Internal Navigation**: Helps distribute authority throughout your site by creating a logical web of related content.\n\n## Exceptions\n\n- Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.\n- Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.\n- If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.\n\n## Standards\n\n- Use these references as the standard for the final search-facing HTML, metadata, and crawl behavior.\n- Check the implementation against Google Search Central: Search Essentials before treating the rule as satisfied.\n- Check the implementation against Google Search Central documentation before treating the rule as satisfied.\n\n## Verification\n\n### Automated Checks\n\n- Inspect rendered HTML and HTTP headers to confirm the expected metadata or crawlability signal is present.\n- Test the affected URL with Google Search Console or equivalent tooling where relevant.\n- Re-crawl a representative page set after deployment.\n\n### Manual Checks\n\n- Confirm the change does not create conflicting canonical-url, robots, or structured-data signals.","skills/animated-content/SKILL.md":"---\nname: animated-content\ndescription: \"Use when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.\"\nmetadata:\n category: performance\n priority: medium\n difficulty: intermediate\n estimatedTime: \"10\"\n source: frontendchecklist.io\n url: https://frontendchecklist.io/rules/performance/animated-content\n---\n\n# Convert animated GIFs to video\n\nLarge animated GIFs can significantly increase page weight and consume excessive CPU/memory, leading to slower page loads and poor scrolling performance.\n\n## Quick Reference\n\n- Use `