#23 by GitHub stars
thedaviddias/Front-End-Checklist
🗂 The essential checklist for modern web development, for humans and AI agents
History
Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.
View weekly changes
packages/cli/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
plugins/front-end-checklist/skills/frontend-checklist-global/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/404-page/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/about-page/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accessibility-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accessible-authentication/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accessible-notifications/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accessible-tables/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accessible-tooltips/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accesskeys/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/accordion-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/affiliate-disclosure/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/ai-content/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/all-noindex-pages/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/alt-text/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/anchor-smooth-scroll/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/anchor-text/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/animated-content/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/animation-performance/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-allowed-attr/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-command-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-deprecated-role/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-dialog-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-hidden-body/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-hidden-focus/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-input-field-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-labels/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-live-regions/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-meter-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-progressbar-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-required-attr/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-required-children/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-required-parent/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-roles/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-text/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-toggle-field-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-tooltip-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-treeitem-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-valid-attr/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/aria-valid-attr-value/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/article/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/article-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/audio-descriptions/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/author-byline/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/author-expertise/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/author-info/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/autofocus-avoidance/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/autoplay-media/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/avif-format/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/avoid-eval/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/back-forward-cache/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/blocked-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/breadcrumb/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/breadcrumb-navigation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/broken-external-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/broken-html/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/broken-images/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/broken-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/browser-caching/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/browser-required/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/button-name/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/canonical-chain/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/canonical-header/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/canonical-url/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/carousel-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cascade-layers/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cdn/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/charset/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/citations/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/clean-up-comments/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/code-splitting/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/color-contrast/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/color-oklch/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/compression/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/consent-mode/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/consistent-help/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/console-cleanup/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/const-let/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/contact-page/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/container-queries/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/content-dates/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/content-security-policy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/content-without-css/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/contract-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cookie-consent/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/critical-images/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/critical-request-chains/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cross-browser-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cross-origin-isolation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cross-origin-security/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-at-property/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-containment/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-critical/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-custom-properties/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-file-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-grid/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-minification/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-non-blocking/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-order/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/css-print/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/cumulative-layout-shift/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/currency-formatting/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/custom-element-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dark-mode-css/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/data-minimisation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dead-end-pages/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/debounce-throttle/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/decorative-elements/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/defer-async/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/definition-list/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dependency-audit/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dimensions/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/direction-attribute/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/disclaimers/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dlitem/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/doctype/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dom-performance/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/dom-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/draggable-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/duplicate-description/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/duplicate-id-active/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/duplicate-id-aria/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/duplicate-js/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/e2e-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/editorial-policy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/element-hiding/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/embedded-or-inline-css/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/empty-heading/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/empty-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/error-handling/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/error-images/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/error-monitoring/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/es-modules/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/event-delegation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/external-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/faq/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/favicon/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/favicons/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/fetchpriority-attribute/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/figure-figcaption/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/file-upload-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/filename-quality/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/find-npm-packages/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/first-contentful-paint/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/flashing-content/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/flexbox-patterns/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/focus-management/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/focus-not-obscured/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/focus-order/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/focus-styles/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/font-loading/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/font-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/form-captcha/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/form-field-multiple-labels/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/form-https/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/form-labels/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/form-validation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/frame-title/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/freshness/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/frontend-checklist-global/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/geo-meta/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/gtm-present/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/h1/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/has-selector/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/heading-hierarchy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/heading-order/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/horizontal-scroll/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/hreflang/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/hsts/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/html-resource-hints/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/html-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/html-xml-lang-mismatch/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/html5-semantic-elements/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/http-requests/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/http-to-https/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/http2/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/https/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/https-downgrade/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/hyphens/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/identical-links-same-purpose/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/image-cdn/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/image-compression/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/image-file-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/image-optimization/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/image-redundant-alt/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/immutable-patterns/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/import-on-interaction/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/import-on-visibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/improve-rule/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/inclusive-language/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/indexability/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/indexability-conflicts/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/input-image-alt/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/input-types/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/integration-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/interaction-to-next-paint/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/internal-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/interstitials/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/invalid-links/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/javascript-inline/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/javascript-linter/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/javascript-minification/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/js-file-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/js-libraries/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/js-redirects/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/json-ld-valid/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/json-safety/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/keyboard-navigation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/keyword-stuffing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/label-content-name-mismatch/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/landmark-one-main/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/landmark-regions/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/lang-attribute/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/largest-contentful-paint/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/lazy-above-fold/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/lazy-loading/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/leaked-secrets/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/legacy-js/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/length/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/link-checker/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/link-in-text-block/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/link-text/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/list-structure/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/list-virtualization/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/listitem/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/llm-parsability/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/llms-txt/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/loading-indicators/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/local-business/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/locale-images/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/logical-properties/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/lowercase/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/memory-leaks/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/meta-description/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/meta-in-body/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/meta-refresh/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/meta-title/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/mime-type/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/mixed-content/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/mobile-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/mock-best-practices/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/modal-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/modern-array-methods/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/modern-format/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/mutation-testing/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/naming-conventions/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/nap-consistency/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/navigation-landmark/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/new-tab/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/no-explicit-any/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/no-unchecked-indexed-access/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/nofollow-internal/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/noindex-in-sitemap/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/noscript-tag/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/nosnippet/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/object-alt/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/offline-fallback/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/offscreen-lazy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/og-image-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/og-tags/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/og-url-match/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/optimized/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/organization/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/orientation/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/orphan-pages/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/page-load-time/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/page-weight/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/pagination/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/pagination-accessibility/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/parallax-effects/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/parameters/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/password-field-security/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/paste-inputs/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/pdf-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/performance-budget/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/performance-resource-hints/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/permissions-policy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/physical-address/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/picture-element/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/plain-language/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/pluralization/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/preconnect/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/privacy-policy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/product/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/progressive-jpeg/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/pwa-installability/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/quality/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/reading-level/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/redirect-chain/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/redirect-chains/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/reduced-motion/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/redundant-entry/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/referrer-policy/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/render-blocking/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/reset-css/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/resource-hints/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Network or broad shell → After Network or broad shell
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/responsive-images/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/responsive-size/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/responsive-units/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
skills/retina-display/SKILL.md
Week of Nov 2, 2026 · +0 / −0 lines
Before Instructions only → After Instructions only
e8d14d049010 → e8d14d049010
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Instructions only
First observation → e8d14d049010
No earlier version was observed for comparison.
View on GitHubAdd to my skills
Verified commit e8d14d049010e2ce25afcd5e8609dfcbbe63e47e
git clone --filter=blob:none --no-checkout https://github.com/thedaviddias/Front-End-Checklist.git .hotskills/thedaviddias-front-end-checklist && git -C .hotskills/thedaviddias-front-end-checklist checkout --detach e8d14d049010e2ce25afcd5e8609dfcbbe63e47e
# Copy each selected skill directory from .hotskills/thedaviddias-front-end-checklist into .claude/skills/<skill-name>/git clone --filter=blob:none --no-checkout https://github.com/thedaviddias/Front-End-Checklist.git .hotskills/thedaviddias-front-end-checklist && git -C .hotskills/thedaviddias-front-end-checklist checkout --detach e8d14d049010e2ce25afcd5e8609dfcbbe63e47e
# Copy each selected skill directory from .hotskills/thedaviddias-front-end-checklist into .agents/skills/<skill-name>/74.7kGitHub stars
51stars in 7 days
393skills in this repository
0commits in 30 days
Heat
4.1- Star growth, last 7 daysAhead of 36% of tracked repositories
- Star growth, last 24 hoursAhead of 69% of tracked repositories
- Rank movement, last 7 daysAhead of 78% of tracked repositories
- Commits, last 30 daysAhead of 0% of tracked repositories
- Accounts asking about it through MCP, last 7 daysNot available
- Hot votes this weekAhead of 0% of tracked repositories
Heat never changes the order by stars, and sponsorship never touches it. How heat works
Stars over time
Individual skills in this repository
- frontendchecklist
packages/cli - frontend-checklist-global
plugins/front-end-checklist/skills/frontend-checklist-global - 404-page
skills/404-page - about-page
skills/about-page - accessibility-testing
skills/accessibility-testing - accessible-authentication
skills/accessible-authentication - accessible-notifications
skills/accessible-notifications - accessible-tables
skills/accessible-tables - accessible-tooltips
skills/accessible-tooltips - accesskeys
skills/accesskeys - accordion-accessibility
skills/accordion-accessibility - affiliate-disclosure
skills/affiliate-disclosure - ai-content
skills/ai-content - all-noindex-pages
skills/all-noindex-pages - alt-text
skills/alt-text - anchor-smooth-scroll
skills/anchor-smooth-scroll - anchor-text
skills/anchor-text - animated-content
skills/animated-content - animation-performance
skills/animation-performance - aria-allowed-attr
skills/aria-allowed-attr - aria-command-name
skills/aria-command-name - aria-deprecated-role
skills/aria-deprecated-role - aria-dialog-name
skills/aria-dialog-name - aria-hidden-body
skills/aria-hidden-body - aria-hidden-focus
skills/aria-hidden-focus - aria-input-field-name
skills/aria-input-field-name - aria-labels
skills/aria-labels - aria-live-regions
skills/aria-live-regions - aria-meter-name
skills/aria-meter-name - aria-progressbar-name
skills/aria-progressbar-name - aria-required-attr
skills/aria-required-attr - aria-required-children
skills/aria-required-children - aria-required-parent
skills/aria-required-parent - aria-roles
skills/aria-roles - aria-text
skills/aria-text - aria-toggle-field-name
skills/aria-toggle-field-name - aria-tooltip-name
skills/aria-tooltip-name - aria-treeitem-name
skills/aria-treeitem-name - aria-valid-attr
skills/aria-valid-attr - aria-valid-attr-value
skills/aria-valid-attr-value - article
skills/article - article-links
skills/article-links - audio-descriptions
skills/audio-descriptions - author-byline
skills/author-byline - author-expertise
skills/author-expertise - author-info
skills/author-info - autofocus-avoidance
skills/autofocus-avoidance - autoplay-media
skills/autoplay-media - avif-format
skills/avif-format - avoid-eval
skills/avoid-eval - back-forward-cache
skills/back-forward-cache - blocked-links
skills/blocked-links - breadcrumb
skills/breadcrumb - breadcrumb-navigation
skills/breadcrumb-navigation - broken-external-links
skills/broken-external-links - broken-html
skills/broken-html - broken-images
skills/broken-images - broken-links
skills/broken-links - browser-caching
skills/browser-caching - browser-required
skills/browser-required - button-name
skills/button-name - canonical-chain
skills/canonical-chain - canonical-header
skills/canonical-header - canonical-url
skills/canonical-url - carousel-accessibility
skills/carousel-accessibility - cascade-layers
skills/cascade-layers - cdn
skills/cdn - charset
skills/charset - citations
skills/citations - clean-up-comments
skills/clean-up-comments - code-splitting
skills/code-splitting - color-contrast
skills/color-contrast - color-oklch
skills/color-oklch - compression
skills/compression - consent-mode
skills/consent-mode - consistent-help
skills/consistent-help - console-cleanup
skills/console-cleanup - const-let
skills/const-let - contact-page
skills/contact-page - container-queries
skills/container-queries - content-dates
skills/content-dates - content-security-policy
skills/content-security-policy - content-without-css
skills/content-without-css - contract-testing
skills/contract-testing - cookie-consent
skills/cookie-consent - critical-images
skills/critical-images - critical-request-chains
skills/critical-request-chains - cross-browser-testing
skills/cross-browser-testing - cross-origin-isolation
skills/cross-origin-isolation - cross-origin-security
skills/cross-origin-security - css-at-property
skills/css-at-property - css-containment
skills/css-containment - css-critical
skills/css-critical - css-custom-properties
skills/css-custom-properties - css-file-size
skills/css-file-size - css-grid
skills/css-grid - css-minification
skills/css-minification - css-non-blocking
skills/css-non-blocking - css-order
skills/css-order - css-print
skills/css-print - cumulative-layout-shift
skills/cumulative-layout-shift - currency-formatting
skills/currency-formatting - custom-element-accessibility
skills/custom-element-accessibility - dark-mode-css
skills/dark-mode-css - data-minimisation
skills/data-minimisation - dead-end-pages
skills/dead-end-pages - debounce-throttle
skills/debounce-throttle - decorative-elements
skills/decorative-elements - defer-async
skills/defer-async - definition-list
skills/definition-list - dependency-audit
skills/dependency-audit - dimensions
skills/dimensions - direction-attribute
skills/direction-attribute - disclaimers
skills/disclaimers - dlitem
skills/dlitem - doctype
skills/doctype - dom-performance
skills/dom-performance - dom-size
skills/dom-size - draggable-accessibility
skills/draggable-accessibility - duplicate-description
skills/duplicate-description - duplicate-id-active
skills/duplicate-id-active - duplicate-id-aria
skills/duplicate-id-aria - duplicate-js
skills/duplicate-js - e2e-testing
skills/e2e-testing - editorial-policy
skills/editorial-policy - element-hiding
skills/element-hiding - embedded-or-inline-css
skills/embedded-or-inline-css - empty-heading
skills/empty-heading - empty-links
skills/empty-links - error-handling
skills/error-handling - error-images
skills/error-images - error-monitoring
skills/error-monitoring - es-modules
skills/es-modules - event-delegation
skills/event-delegation - external-links
skills/external-links - faq
skills/faq - favicon
skills/favicon - favicons
skills/favicons - fetchpriority-attribute
skills/fetchpriority-attribute - figure-figcaption
skills/figure-figcaption - file-upload-accessibility
skills/file-upload-accessibility - filename-quality
skills/filename-quality - find-npm-packages
skills/find-npm-packages - first-contentful-paint
skills/first-contentful-paint - flashing-content
skills/flashing-content - flexbox-patterns
skills/flexbox-patterns - focus-management
skills/focus-management - focus-not-obscured
skills/focus-not-obscured - focus-order
skills/focus-order - focus-styles
skills/focus-styles - font-loading
skills/font-loading - font-size
skills/font-size - form-captcha
skills/form-captcha - form-field-multiple-labels
skills/form-field-multiple-labels - form-https
skills/form-https - form-labels
skills/form-labels - form-validation
skills/form-validation - frame-title
skills/frame-title - freshness
skills/freshness - frontend-checklist-global
skills/frontend-checklist-global - geo-meta
skills/geo-meta - gtm-present
skills/gtm-present - h1
skills/h1 - has-selector
skills/has-selector - heading-hierarchy
skills/heading-hierarchy - heading-order
skills/heading-order - horizontal-scroll
skills/horizontal-scroll - hreflang
skills/hreflang - hsts
skills/hsts - html-resource-hints
skills/html-resource-hints - html-size
skills/html-size - html-xml-lang-mismatch
skills/html-xml-lang-mismatch - html5-semantic-elements
skills/html5-semantic-elements - http-requests
skills/http-requests - http-to-https
skills/http-to-https - http2
skills/http2 - https
skills/https - https-downgrade
skills/https-downgrade - hyphens
skills/hyphens - identical-links-same-purpose
skills/identical-links-same-purpose - image-cdn
skills/image-cdn - image-compression
skills/image-compression - image-file-size
skills/image-file-size - image-optimization
skills/image-optimization - image-redundant-alt
skills/image-redundant-alt - immutable-patterns
skills/immutable-patterns - import-on-interaction
skills/import-on-interaction - import-on-visibility
skills/import-on-visibility - improve-rule
skills/improve-rule - inclusive-language
skills/inclusive-language - indexability
skills/indexability - indexability-conflicts
skills/indexability-conflicts - input-image-alt
skills/input-image-alt - input-types
skills/input-types - integration-testing
skills/integration-testing - interaction-to-next-paint
skills/interaction-to-next-paint - internal-links
skills/internal-links - interstitials
skills/interstitials - invalid-links
skills/invalid-links - javascript-inline
skills/javascript-inline - javascript-linter
skills/javascript-linter - javascript-minification
skills/javascript-minification - js-file-size
skills/js-file-size - js-libraries
skills/js-libraries - js-redirects
skills/js-redirects - json-ld-valid
skills/json-ld-valid - json-safety
skills/json-safety - keyboard-navigation
skills/keyboard-navigation - keyword-stuffing
skills/keyword-stuffing - label-content-name-mismatch
skills/label-content-name-mismatch - landmark-one-main
skills/landmark-one-main - landmark-regions
skills/landmark-regions - lang-attribute
skills/lang-attribute - largest-contentful-paint
skills/largest-contentful-paint - lazy-above-fold
skills/lazy-above-fold - lazy-loading
skills/lazy-loading - leaked-secrets
skills/leaked-secrets - legacy-js
skills/legacy-js - length
skills/length - link-checker
skills/link-checker - link-in-text-block
skills/link-in-text-block - link-text
skills/link-text - list-structure
skills/list-structure - list-virtualization
skills/list-virtualization - listitem
skills/listitem - llm-parsability
skills/llm-parsability - llms-txt
skills/llms-txt - loading-indicators
skills/loading-indicators - local-business
skills/local-business - locale-images
skills/locale-images - logical-properties
skills/logical-properties - lowercase
skills/lowercase - memory-leaks
skills/memory-leaks - meta-description
skills/meta-description - meta-in-body
skills/meta-in-body - meta-refresh
skills/meta-refresh - meta-title
skills/meta-title - mime-type
skills/mime-type - mixed-content
skills/mixed-content - mobile-testing
skills/mobile-testing - mock-best-practices
skills/mock-best-practices - modal-accessibility
skills/modal-accessibility - modern-array-methods
skills/modern-array-methods - modern-format
skills/modern-format - mutation-testing
skills/mutation-testing - naming-conventions
skills/naming-conventions - nap-consistency
skills/nap-consistency - navigation-landmark
skills/navigation-landmark - new-tab
skills/new-tab - no-explicit-any
skills/no-explicit-any - no-unchecked-indexed-access
skills/no-unchecked-indexed-access - nofollow-internal
skills/nofollow-internal - noindex-in-sitemap
skills/noindex-in-sitemap - noscript-tag
skills/noscript-tag - nosnippet
skills/nosnippet - object-alt
skills/object-alt - offline-fallback
skills/offline-fallback - offscreen-lazy
skills/offscreen-lazy - og-image-size
skills/og-image-size - og-tags
skills/og-tags - og-url-match
skills/og-url-match - optimized
skills/optimized - organization
skills/organization - orientation
skills/orientation - orphan-pages
skills/orphan-pages - page-load-time
skills/page-load-time - page-weight
skills/page-weight - pagination
skills/pagination - pagination-accessibility
skills/pagination-accessibility - parallax-effects
skills/parallax-effects - parameters
skills/parameters - password-field-security
skills/password-field-security - paste-inputs
skills/paste-inputs - pdf-size
skills/pdf-size - performance-budget
skills/performance-budget - performance-resource-hints
skills/performance-resource-hints - permissions-policy
skills/permissions-policy - physical-address
skills/physical-address - picture-element
skills/picture-element - plain-language
skills/plain-language - pluralization
skills/pluralization - preconnect
skills/preconnect - privacy-policy
skills/privacy-policy - product
skills/product - progressive-jpeg
skills/progressive-jpeg - pwa-installability
skills/pwa-installability - quality
skills/quality - reading-level
skills/reading-level - redirect-chain
skills/redirect-chain - redirect-chains
skills/redirect-chains - reduced-motion
skills/reduced-motion - redundant-entry
skills/redundant-entry - referrer-policy
skills/referrer-policy - render-blocking
skills/render-blocking - reset-css
skills/reset-css - resource-hints
skills/resource-hints - responsive-images
skills/responsive-images - responsive-size
skills/responsive-size - responsive-units
skills/responsive-units - retina-display
skills/retina-display - review
skills/review - right-to-erasure
skills/right-to-erasure - robots-meta
skills/robots-meta - robots-meta-conflict
skills/robots-meta-conflict - robots-txt
skills/robots-txt - runtime-validation
skills/runtime-validation - scheduler-yield
skills/scheduler-yield - schema-noindex-conflict
skills/schema-noindex-conflict - screen-reader-testing
skills/screen-reader-testing - scrolljacking
skills/scrolljacking - search-input
skills/search-input - select-name
skills/select-name - semantic-lists
skills/semantic-lists - sensory-instructions
skills/sensory-instructions - service-area
skills/service-area - service-worker
skills/service-worker - session-cookie-flags
skills/session-cookie-flags - session-timeout-recovery
skills/session-timeout-recovery - share-buttons
skills/share-buttons - sitemap
skills/sitemap - sitemap-4xx
skills/sitemap-4xx - sitemap-coverage
skills/sitemap-coverage - sitemap-domain
skills/sitemap-domain - sitemap-valid
skills/sitemap-valid - skip-link
skills/skip-link - skip-navigation
skills/skip-navigation - slug-keywords
skills/slug-keywords - social-profiles
skills/social-profiles - source-maps
skills/source-maps - special-chars
skills/special-chars - specificity-management
skills/specificity-management - speculation-rules
skills/speculation-rules - sprite-generation
skills/sprite-generation - srcset
skills/srcset - stack-trace-exposure
skills/stack-trace-exposure - stop-words
skills/stop-words - streaming-html
skills/streaming-html - structured-data
skills/structured-data - styles-lint
skills/styles-lint - subgrid
skills/subgrid - subresource-integrity
skills/subresource-integrity - svg-inline
skills/svg-inline - svg-optimization
skills/svg-optimization - tabindex
skills/tabindex - table-duplicate-name
skills/table-duplicate-name - table-headers
skills/table-headers - tabs-accessibility
skills/tabs-accessibility - td-headers-attr
skills/td-headers-attr - tel-mailto
skills/tel-mailto - terms-of-service
skills/terms-of-service - test-coverage
skills/test-coverage - text-expansion
skills/text-expansion - text-in-images
skills/text-in-images - text-resizing
skills/text-resizing - th-has-data-cells
skills/th-has-data-cells - third-party-cookies
skills/third-party-cookies - third-party-scripts
skills/third-party-scripts - title-unique
skills/title-unique - token-storage-security
skills/token-storage-security - touch-targets
skills/touch-targets - trailing-slash
skills/trailing-slash - translation-strings
skills/translation-strings - trust-signals
skills/trust-signals - ttfb
skills/ttfb - twitter-cards
skills/twitter-cards - type-coercion
skills/type-coercion - type-only-imports
skills/type-only-imports - typescript-strict-mode
skills/typescript-strict-mode - unique-id
skills/unique-id - unit-tests
skills/unit-tests - unused-css
skills/unused-css - video
skills/video - video-accessibility
skills/video-accessibility - video-captions
skills/video-captions - video-optimization
skills/video-optimization - video-thumbnail
skills/video-thumbnail - view-transitions
skills/view-transitions - viewport
skills/viewport - viewport-zoom
skills/viewport-zoom - visual-regression
skills/visual-regression - w3c-compliant
skills/w3c-compliant - weak-internal-links
skills/weak-internal-links - web-app-manifest
skills/web-app-manifest - web-storage
skills/web-storage - webfont-format
skills/webfont-format - webp-format
skills/webp-format - webpagetest
skills/webpagetest - website-search
skills/website-search - word-count
skills/word-count - x-content-type
skills/x-content-type - x-frame-options
skills/x-frame-options - ymyl-detection
skills/ymyl-detection - zoom-reflow
skills/zoom-reflow
How it works
frontendchecklist
When your agent uses it
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.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
694 tokensWhen the skill is activated
Reference documents
614 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- When to use it
- Commands
- Reading results
- Workflow
Scripts executed separately
package.jsonscripts/build.tssrc/args.tssrc/commands/audit.tssrc/commands/lookup.tssrc/commands/review.tssrc/content.tssrc/index.tssrc/output.tssrc/spec.tstests/cli.test.mjs
Files
../../.claude-plugin/marketplace.jsonasset623 bytes.gitignoreasset6 bytesREADME.mddoc2,448 bytesSKILL.mdcore2,767 bytespackage.jsonruns1,509 bytesscripts/build.tsruns1,990 bytessrc/args.tsruns5,655 bytessrc/commands/audit.tsruns2,898 bytessrc/commands/lookup.tsruns5,083 bytessrc/commands/review.tsruns3,944 bytessrc/content.tsruns1,523 bytessrc/index.tsruns2,984 bytessrc/output.tsruns3,416 bytessrc/spec.tsruns5,213 bytestests/cli.test.mjsruns4,706 bytestsconfig.jsonasset202 bytes../../plugins/front-end-checklist/.claude-plugin/plugin.jsonasset854 bytes
Read SKILL.md
# Front-End Checklist CLI
`frontendchecklist` checks frontend code against the Front-End Checklist rules. It works offline,
prints JSON when its output is piped (which is how you will usually call it), and uses exit codes
you can branch on.
Run it with `npx -y @frontendchecklist/cli <command>` if `frontendchecklist` is not installed.
## When to use it
- After writing or editing frontend files: `frontendchecklist review <paths>`.
- Before committing: `git diff --cached | frontendchecklist review -`.
- When the user asks to audit a deployed page: `frontendchecklist audit https://...`.
- When you need the authoritative guidance for a topic: `frontendchecklist search <topic>`, thenfrontend-checklist-global
When your agent uses it
Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.
What it loads into context
Frontmatter
75 tokensAlways available to the agent
SKILL.md
2,652 tokensWhen the skill is activated
Reference documents
1,884 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Workflow
- Audit Stance
- Coverage Checklist
- Rule-Derived Highlights
- Known Safe Patterns
- Conflict Resolution
- Coverage
- Evaluation Standard
Files
SKILL.mdcore12,706 bytesreferences/categories.mddoc8,606 bytes
Read SKILL.md
# Front-End Checklist Global Audit
This skill connects one entry point to all 386 Front-End Checklist rules.
Use MCP retrieval instead of trying to recall rules from memory.
## Workflow
1. Start with `review_code` for pasted code, file contents, or focused code review.
2. Use `audit_url` for a public page when you need rendered HTML audited quickly.
3. Narrow or expand scope with `search_rules`, `list_categories`, `get_workflow`, or `get_quick_reference`.
4. For each issue, use `get_rule`, `fix_rule`, or `explain_rule` to give exact remediation.
5. If a checklist is a better fit than ad hoc search, use `get_checklist_rules`.
## Audit Stance404-page
When your agent uses it
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.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
388 tokensWhen the skill is activated
Reference documents
1,781 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,846 bytesSKILL.mdcore1,846 bytesreferences/rule.mddoc7,133 bytes
Read SKILL.md
# Create a custom 404 error page
A generic browser 404 page causes users to leave immediately—a well-designed custom page provides recovery paths and keeps users engaged with your site.
## Quick Reference
- Custom 404 pages retain users who encounter broken or moved links
- Include search, navigation, and links to popular content
- Maintain consistent branding and site design
- Track 404 errors to identify and fix broken links
- Return a real HTTP 404 so the page is not treated as a soft 404
## Check
about-page
When your agent uses it
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.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
349 tokensWhen the skill is activated
Reference documents
480 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,739 bytesSKILL.mdcore1,739 bytesreferences/rule.mddoc2,427 bytes
Read SKILL.md
# Create a dedicated About page
An 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.
## Quick Reference
- Include a dedicated page explaining the purpose, history, and mission of the website
- Introduce the key people or organization behind the content to build trust
- Provide clear evidence of expertise and contact information
## Check
Verify that the website has a dedicated About page that clearly identifies the people or organization responsible for the content.
accessibility-testing
When your agent uses it
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.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
340 tokensWhen the skill is activated
Reference documents
992 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,730 bytesreferences/rule.mddoc4,199 bytes
Read SKILL.md
# Include accessibility testing
Automated accessibility testing catches 30-50% of WCAG violations before code reaches users—reducing legal risk and improving usability for everyone.
## Quick Reference
- Use jest-axe for component-level accessibility testing
- Integrate @axe-core/playwright or cypress-axe for E2E a11y tests
- Run accessibility tests in CI/CD to catch regressions early
- Test specific WCAG rules like color-contrast individually
## Check
Review this test suite for accessibility testing coverage using axe-core, jest-axe, or similar tools.accessible-authentication
When your agent uses it
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.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
435 tokensWhen the skill is activated
Reference documents
918 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,314 bytesreferences/rule.mddoc4,466 bytes
Read SKILL.md
# Provide accessible authentication methods
Authentication 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.
## Quick Reference
- Do not block paste or password managers in login and recovery flows
- Prefer passkeys, magic links, device approval, or password-manager-friendly flows
- Support OTP autofill and paste with appropriate semantics such as `autocomplete="one-time-code"`
- Avoid CAPTCHA or secondary checks that require memorizing or transcribing information without an alternative
## Check
Review 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.accessible-notifications
When your agent uses it
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.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
345 tokensWhen the skill is activated
Reference documents
2,039 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,754 bytesSKILL.mdcore1,754 bytesreferences/rule.mddoc7,770 bytes
Read SKILL.md
# Make notifications accessible
Without 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.
## Quick Reference
- Use aria-live regions to announce dynamic content changes
- Choose between 'polite' (waits) and 'assertive' (interrupts) based on urgency
- Ensure notifications persist long enough to be read
- Provide visible and programmatic dismiss options
## Check
Verify notifications use aria-live regions, appropriate role (alert or status), and persist long enough to be read.accessible-tables
When your agent uses it
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.
What it loads into context
Frontmatter
104 tokensAlways available to the agent
SKILL.md
419 tokensWhen the skill is activated
Reference documents
1,055 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,088 bytesreferences/rule.mddoc4,049 bytes
Read SKILL.md
# Use semantic table markup for screen readers
Screen readers read table data cell-by-cell—without proper headers, users hear meaningless numbers without context. 'Row 3, Column 2: $99' vs just '$99'.
## Quick Reference
- Use <th> elements for headers with scope='col' or scope='row'
- Add <caption> to describe the table's purpose
- Never use tables for layout—use CSS Grid or Flexbox instead
- Use id/headers for complex tables with merged cells
- For simple tables with a clear adjacent section heading, missing `scope` is often a stronger finding than missing `<caption>`
- Prefer one strong table-semantics finding over multiple weaker enhancements on the same simple table
## Checkaccessible-tooltips
When your agent uses it
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.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
325 tokensWhen the skill is activated
Reference documents
1,881 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,681 bytesSKILL.mdcore1,681 bytesreferences/rule.mddoc7,422 bytes
Read SKILL.md
# Create accessible tooltips
Inaccessible tooltips leave keyboard and screen reader users without important contextual information, creating an unequal experience and potential confusion.
## Quick Reference
- Tooltips must be keyboard accessible (focusable trigger)
- Use aria-describedby to associate tooltip with trigger
- Allow hover and focus to show tooltip, Escape to dismiss
- Ensure sufficient contrast and don't hide essential info in tooltips
## Check
Verify tooltips are keyboard accessible, use appropriate ARIA roles (tooltip), and can be dismissed without moving focus.accesskeys
When your agent uses it
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.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
330 tokensWhen the skill is activated
Reference documents
461 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,744 bytesreferences/rule.mddoc2,392 bytes
Read SKILL.md
# Ensure accesskey values are unique
Duplicate access keys cause conflicts where only one element (usually the first) is reachable via the shortcut, making other elements inaccessible to keyboard users.
## Quick Reference
- Each `accesskey` attribute value must be unique on the page
- Duplicate access keys can lead to unpredictable browser behavior
- Helps keyboard users navigate reliably using defined shortcuts
## Check
Check for duplicate `accesskey` attributes across the document to ensure each shortcut is unique.
accordion-accessibility
When your agent uses it
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.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
326 tokensWhen the skill is activated
Reference documents
1,736 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,724 bytesSKILL.mdcore1,724 bytesreferences/rule.mddoc6,488 bytes
Read SKILL.md
# Make accordions keyboard navigable
Poorly implemented accordions trap keyboard users and leave screen reader users unable to understand or navigate collapsed content sections.
## Quick Reference
- Use button elements for accordion triggers with aria-expanded
- Associate panels with triggers using aria-controls
- Support Arrow keys for navigation between headers
- Use heading elements appropriately for document structure
## Check
Verify accordions use button triggers with aria-expanded, aria-controls, and proper keyboard navigation (Enter, Space, arrows).affiliate-disclosure
When your agent uses it
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.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
338 tokensWhen the skill is activated
Reference documents
457 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,773 bytesSKILL.mdcore1,773 bytesreferences/rule.mddoc2,216 bytes
Read SKILL.md
# Provide clear affiliate disclosures
Clear disclosures are required by law (e.g., FTC guidelines) and are essential for maintaining user trust and preventing search engine penalties for hidden advertisements.
## Quick Reference
- Add a clear and conspicuous disclosure for any affiliate or sponsored links
- Place the disclosure at the top of the page, before any affiliate links appear
- Use simple, unambiguous language to explain the financial relationship
## Check
Verify that all pages containing affiliate links or sponsored content have a clear, visible disclosure before the links appear.
ai-content
When your agent uses it
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.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
328 tokensWhen the skill is activated
Reference documents
629 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,676 bytesSKILL.mdcore1,676 bytesreferences/rule.mddoc3,032 bytes
Read SKILL.md
# Audit and refine AI-generated content
Search engines prioritize helpful, reliable, people-first content; unedited AI content often lacks the depth and accuracy required for high rankings.
## Quick Reference
- Review AI-generated content for accuracy, unique value, and human-like voice
- Ensure content isn't just a rewrite of existing top-ranking articles
- Verify all factual claims and include original research or insights
## Check
Review the content to see if it provides unique value beyond what AI models can generate by default.
all-noindex-pages
When your agent uses it
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.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
358 tokensWhen the skill is activated
Reference documents
460 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,673 bytesSKILL.mdcore1,673 bytesreferences/rule.mddoc2,380 bytes
Read SKILL.md
# Audit all noindex pages
An incorrect `noindex` tag can completely remove important pages from search results, while proper usage helps manage crawl budget and prevents duplicate content issues.
## Quick Reference
- Identify all pages using the `noindex` directive in meta tags or headers
- Verify that critical pages (products, articles) aren't accidentally blocked
- Ensure `noindex` is correctly applied to thin content, admin, or utility pages
## Check
Verify that the `noindex` directive is only applied to pages that should not appear in search results.
alt-text
When your agent uses it
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.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
707 tokensWhen the skill is activated
Reference documents
1,136 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,118 bytesreferences/rule.mddoc4,931 bytes
Read SKILL.md
# Provide meaningful alt text for images
Approximately 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.
## Quick Reference
- Every `<img>` must have an `alt` attribute—omitting it entirely violates WCAG 2.1 SC 1.1.1
- Decorative images use `alt=""` so screen readers ignore them
- Alt text should describe the image's *purpose*, not just its appearance
- Linked images: alt describes the link destination, not the visual
## Check
Scan all <img> elements in the codebase. Verify: 1) Every <img> 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 <img> without alt, with alt matching the filename (e.g., alt="photo1.jpg"), or with generic values like alt="image" or alt="photo".anchor-smooth-scroll
When your agent uses it
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.
What it loads into context
Frontmatter
104 tokensAlways available to the agent
SKILL.md
394 tokensWhen the skill is activated
Reference documents
906 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,067 bytesreferences/rule.mddoc4,096 bytes
Read SKILL.md
# Provide instant anchor scroll option
Smooth scroll animations can trigger vertigo, nausea, and disorientation for users with vestibular disorders—instant navigation is safer and often faster.
## Quick Reference
- Disable smooth scroll when prefers-reduced-motion is set
- Use CSS scroll-behavior: smooth with media query check
- Ensure focus moves to anchor target for keyboard users
- Provide instant scroll as default or fallback
## Check
Click 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.anchor-text
When your agent uses it
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.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
329 tokensWhen the skill is activated
Reference documents
448 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,701 bytesSKILL.mdcore1,701 bytesreferences/rule.mddoc2,310 bytes
Read SKILL.md
# Use descriptive anchor text
Descriptive anchor text helps search engines understand the context of the linked page and significantly improves accessibility for users using screen readers.
## Quick Reference
- Use descriptive text for links instead of generic phrases like 'click here' or 'read more'
- Ensure the anchor text provides clear context about the linked page's content
- Avoid over-optimizing with excessive keyword stuffing in your internal links
## Check
Verify that all links in the content use descriptive anchor text that accurately describes the target page.
animated-content
When your agent uses it
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.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
348 tokensWhen the skill is activated
Reference documents
716 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,652 bytesreferences/rule.mddoc3,349 bytes
Read SKILL.md
# Convert animated GIFs to video
Large animated GIFs can significantly increase page weight and consume excessive CPU/memory, leading to slower page loads and poor scrolling performance.
## Quick Reference
- Use `<video>` instead of large GIFs for animations
- GIFs are significantly larger than MP4/WebM
- Videos allow for better control and performance
## Check
Check for large animated GIFs that could be replaced with more efficient video formats like MP4 or WebM.
animation-performance
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use transform and opacity for animations. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
408 tokensWhen the skill is activated
Reference documents
947 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,118 bytesreferences/rule.mddoc3,793 bytes
Read SKILL.md
# Use transform and opacity for animations
Animating layout properties (width, height, top, margin) triggers the full browser rendering pipeline on every frame — style recalculation, layout, paint, and composite. This runs on the main thread and competes with JavaScript. Animating transform and opacity skips layout and paint entirely and runs on a dedicated GPU thread, achieving smooth 60fps even when the main thread is busy.
## Quick Reference
- Only transform and opacity can be composited on the GPU without triggering layout
- Use will-change: transform sparingly to promote an element to its own compositor layer
- Prefer CSS transitions and animations over JavaScript animation libraries for simple effects
- Respect prefers-reduced-motion to disable animations for users who need it
## Check
Find CSS animations or transitions in this file that animate layout-triggering properties like top, left, width, height, or margin. Flag them for optimization.aria-allowed-attr
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use only allowed ARIA attributes for each role. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
110 tokensAlways available to the agent
SKILL.md
359 tokensWhen the skill is activated
Reference documents
475 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,799 bytesreferences/rule.mddoc2,402 bytes
Read SKILL.md
# Use only allowed ARIA attributes for each role
Invalid ARIA attributes are ignored by screen readers or may cause them to misinterpret the element's purpose, leading to a broken experience for users with disabilities.
## Quick Reference
- Each ARIA role only supports a specific set of ARIA attributes
- Using unsupported attributes can confuse assistive technologies
- Ensures the accessibility tree remains valid and meaningful
## Check
Verify that all ARIA attributes used on elements are valid for their assigned WAI-ARIA roles.
aria-command-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for ARIA command elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
365 tokensWhen the skill is activated
Reference documents
488 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,846 bytesreferences/rule.mddoc2,426 bytes
Read SKILL.md
# Provide accessible names for ARIA command elements
Without an accessible name, screen reader users will only hear the role (e.g., 'button') without knowing what it does, making the interface impossible to navigate.
## Quick Reference
- Elements with command roles (button, link, menuitem) must have a label
- Accessible names can be provided via text content, `aria-label`, or `aria-labelledby`
- Ensures users know the purpose of the interactive element
## Check
Identify elements with command roles (like button or link) that lack a clear accessible name.
aria-deprecated-role
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid using deprecated ARIA roles. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
340 tokensWhen the skill is activated
Reference documents
461 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,762 bytesreferences/rule.mddoc2,328 bytes
Read SKILL.md
# Avoid using deprecated ARIA roles
Using deprecated roles can lead to inconsistent behavior across different browsers and screen readers as they transition to newer standards.
## Quick Reference
- Deprecated ARIA roles should be replaced with modern equivalents
- Browsers may drop support for deprecated roles in future versions
- Ensures long-term compatibility with assistive technologies
## Check
Search the codebase for deprecated ARIA roles like `directory` or abstract roles that shouldn't be used in HTML.
aria-dialog-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure dialogs have an accessible name. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
356 tokensWhen the skill is activated
Reference documents
536 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,771 bytesreferences/rule.mddoc2,563 bytes
Read SKILL.md
# Ensure dialogs have an accessible name
When a dialog opens, screen readers should announce its purpose immediately so users know why their focus has shifted and what information is required.
## Quick Reference
- All dialog and alertdialog elements must have a descriptive label
- Use `aria-labelledby` to point to a title or `aria-label` for a direct string
- Helps users understand the context and purpose of the modal
## Check
Verify that every element with `role="dialog"` or `role="alertdialog"` has an accessible name.
aria-hidden-body
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden on the document body. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
106 tokensAlways available to the agent
SKILL.md
359 tokensWhen the skill is activated
Reference documents
521 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,775 bytesreferences/rule.mddoc2,537 bytes
Read SKILL.md
# Do not use aria-hidden on the document body
Setting `aria-hidden="true"` on the body effectively silences the entire application for screen reader users, rendering the site completely unusable.
## Quick Reference
- The `<body>` element should never have `aria-hidden="true"`
- Hiding the body makes the entire page invisible to assistive technologies
- Often happens accidentally when managing modal states
## Check
Check if the `<body>` element has `aria-hidden="true"` applied at any point in the lifecycle.
aria-hidden-focus
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Remove focusable elements from aria-hidden containers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
380 tokensWhen the skill is activated
Reference documents
635 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,870 bytesreferences/rule.mddoc3,078 bytes
Read SKILL.md
# Remove focusable elements from aria-hidden containers
When a keyboard user tabs into an `aria-hidden` element, the screen reader remains silent, leaving the user with no idea where their focus is or what they can interact with.
## Quick Reference
- Elements with `aria-hidden="true"` must not contain focusable children
- Focusing on a hidden element creates a 'ghost' focus for screen reader users
- Use `tabindex="-1"` or `inert` to properly hide interactive elements
## Check
Scan `aria-hidden="true"` containers for focusable elements like links, buttons, or inputs.
aria-input-field-name
When your agent uses it
Use when applies to all `<input>` (except type=hidden), `<textarea>`, `<select>`, and custom form widgets using role=textbox, role=combobox, role=spinbutton, role=searchbox, or role=listbox.
What it loads into context
Frontmatter
111 tokensAlways available to the agent
SKILL.md
800 tokensWhen the skill is activated
Reference documents
781 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,421 bytesreferences/rule.mddoc3,679 bytes
Read SKILL.md
# Ensure all input fields have accessible names
Screen readers announce the accessible name of a focused input before the user types. Without a name, VoiceOver reads 'text field' and NVDA reads 'edit' with no context, making it impossible for blind users to fill out forms correctly. Voice control users (Dragon NaturallySpeaking) also need the visible label text to match the accessible name so they can say 'click Email Address' to move focus to the field.
## Quick Reference
- Every `<input>`, `<textarea>`, and `<select>` must have a programmatically associated accessible name
- Preferred: associate a `<label>` via matching `for`/`id` attributes
- Alternatives: `aria-label` (inline string) or `aria-labelledby` (references another element's `id`)
- Placeholder text is not an accessible name — it disappears on input and is not reliably announced
- Applies to WCAG 2.1 SC 1.3.1 (Info and Relationships) and SC 4.1.2 (Name, Role, Value)
## Check
aria-labels
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for all interactive elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
104 tokensAlways available to the agent
SKILL.md
339 tokensWhen the skill is activated
Reference documents
559 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,742 bytesreferences/rule.mddoc2,688 bytes
Read SKILL.md
# Provide accessible names for all interactive elements
Interactive elements are the core of web navigation; without names, they become 'mystery meat' that users cannot confidently interact with.
## Quick Reference
- Buttons, links, and other controls must have a discernable name
- Names should be concise and describe the action or destination
- Avoid generic names like 'Click Here' or 'More'
## Check
Audit all interactive elements (buttons, links, widgets) for missing or unhelpful accessible names.
aria-live-regions
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Announce dynamic content with ARIA live regions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
108 tokensAlways available to the agent
SKILL.md
386 tokensWhen the skill is activated
Reference documents
901 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,913 bytesreferences/rule.mddoc3,899 bytes
Read SKILL.md
# Announce dynamic content with ARIA live regions
Without live regions, screen reader users miss dynamic updates entirely—they won't know their form submitted, their cart updated, or an error occurred.
## Quick Reference
- Use aria-live='polite' for non-urgent updates (cart count, status messages)
- Use aria-live='assertive' only for critical alerts (errors, session expiry)
- Use role='alert' or role='status' for semantic live regions
- The live region must exist in DOM before content changes
## Check
Verify that dynamic content changes (notifications, form errors, loading states) use aria-live regions appropriately.aria-meter-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for meter elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
371 tokensWhen the skill is activated
Reference documents
466 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,784 bytesreferences/rule.mddoc2,279 bytes
Read SKILL.md
# Provide accessible names for meter elements
A meter represents a scalar measurement; without a label, a user might hear a value (e.g., '50%') but have no idea if it refers to battery life, storage space, or a password strength.
## Quick Reference
- The `<meter>` element or `role="meter"` must have an accessible label
- Use `aria-label` or `aria-labelledby` to provide context
- Helps users understand what measurement is being displayed
## Check
Check for `<meter>` elements or elements with `role="meter"` that lack an accessible name.
aria-progressbar-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for progress bars. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
395 tokensWhen the skill is activated
Reference documents
491 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,993 bytesreferences/rule.mddoc2,323 bytes
Read SKILL.md
# Provide accessible names for progress bars
Without an accessible name, screen reader users will only hear that a progress bar exists but won't know what task or process it represents.
## Quick Reference
- Use `aria-label` or `aria-labelledby` to name progress bars
- Ensure the name describes what the progress indicates
- Avoid redundant text like "progress" in the label
- Provide `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` when the value is known
- Visual progress meters should use real progress semantics rather than decorative divs when they communicate status
## Check
aria-required-attr
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Include required ARIA attributes for roles. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
106 tokensAlways available to the agent
SKILL.md
353 tokensWhen the skill is activated
Reference documents
478 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,833 bytesreferences/rule.mddoc2,343 bytes
Read SKILL.md
# Include required ARIA attributes for roles
Certain ARIA roles are incomplete without their required attributes, preventing assistive technologies from correctly communicating the element's state or value.
## Quick Reference
- Identify roles that require specific state or property attributes
- Ensure attributes like `aria-valuenow` for sliders are present
- Validate that all required ARIA attributes are correctly implemented
## Check
Verify that all ARIA roles have their mandatory attributes as defined by the WAI-ARIA specification.
aria-required-children
When your agent uses it
Use when applies to custom ARIA widgets using composite roles: tablist, list, listbox, menu, menubar, tree, treegrid, grid, rowgroup, row, radiogroup. Use when reviewing components built with div/span elements that replace native HTML list, select, or nav elements.
What it loads into context
Frontmatter
122 tokensAlways available to the agent
SKILL.md
848 tokensWhen the skill is activated
Reference documents
1,023 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,635 bytesreferences/rule.mddoc4,196 bytes
Read SKILL.md
# Ensure ARIA roles contain required child roles
Screen readers like NVDA and VoiceOver navigate composite widgets (menus, tabs, trees) by moving between the required child roles. If a `tablist` contains `<div>` elements instead of `role='tab'`, the user hears no tabs at all. JAWS announces 'list of 5 items' only when `role='listitem'` children exist inside `role='list'`. Without correct nesting, the entire widget becomes opaque to keyboard-only and screen reader users.
## Quick Reference
- Container roles mandate specific owned child roles: `tablist` → `tab`, `list`/`listbox` → `listitem`/`option`, `menu`/`menubar` → `menuitem`, `tree` → `treeitem`, `grid`/`rowgroup` → `row`
- Missing required children break the accessibility tree so screen readers cannot enumerate items or announce counts
- Use `role='none'` or `role='presentation'` on purely structural wrapper elements inside the container to avoid invalid nesting
- Applies to WAI-ARIA 1.2 required owned elements for composite widget roles
## Check
Identify all elements with ARIA container roles (tablist, list, listbox, menu, menubar, tree, treegrid, grid, rowgroup, radiogroup). For each, verify it contains the required owned child roles per the WAI-ARIA spec: tablist must own tab elements; list must own listitem; listbox must own option; menu/menubar must own menuitem, menuitemcheckbox, or menuitemradio; tree must own treeitem; grid must own row (which owns gridcell); radiogroup must own radio. Flag any container roles missing required children.aria-required-parent
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA roles are contained by required parent roles. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
107 tokensAlways available to the agent
SKILL.md
400 tokensWhen the skill is activated
Reference documents
476 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,991 bytesreferences/rule.mddoc2,273 bytes
Read SKILL.md
# Ensure ARIA roles are contained by required parent roles
If an ARIA child role (like a menu item) is not contained within its required parent role (like a menu), screen readers may fail to announce the item as part of a group, breaking navigation.
## Quick Reference
- Certain roles (like `listitem`) must be owned by specific parent roles (like `list`)
- Ensure children elements are not orphaned from their semantic containers
- Maintain valid ARIA hierarchies for menu items, tabs, and list items
## Check
Verify that elements with roles like listitem, tab, or menuitem are correctly nested within their required parent roles.
aria-roles
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid ARIA role values. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
418 tokensWhen the skill is activated
Reference documents
485 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,057 bytesreferences/rule.mddoc2,366 bytes
Read SKILL.md
# Use valid ARIA role values
Invalid or misspelled ARIA roles are ignored by browsers and assistive technologies, rendering the intended accessibility features useless and potentially confusing users.
## Quick Reference
- Use only standard ARIA roles defined in the W3C specification
- Avoid typos or non-existent roles (e.g., use `checkbox`, not `check-box`)
- Ensure roles are applied to appropriate HTML elements
- Prefer native HTML controls over custom ARIA widgets whenever possible
## Check
Search for any role attributes that use non-standard or misspelled ARIA role values.aria-text
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid focusable descendants in role='text' elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
380 tokensWhen the skill is activated
Reference documents
552 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,943 bytesreferences/rule.mddoc2,591 bytes
Read SKILL.md
# Avoid focusable descendants in role="text" elements
Using `role="text"` on a container forces screen readers to treat everything inside as a single string of text, which effectively hides any interactive elements from users who rely on assistive technology.
## Quick Reference
- Elements with `role="text"` should not contain interactive children (links, buttons)
- Ensure `role="text"` only contains static text content
- Prevent accessibility "black holes" where interactive items are hidden from screen readers
## Check
Identify elements with role="text" and verify they do not contain any focusable elements like buttons, links, or inputs.
aria-toggle-field-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for toggle fields. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
359 tokensWhen the skill is activated
Reference documents
495 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,810 bytesreferences/rule.mddoc2,453 bytes
Read SKILL.md
# Provide accessible names for toggle fields
Toggle fields like checkboxes and switches are unusable for screen reader users if they don't have a label, as the user won't know what they are turning on or off.
## Quick Reference
- Use `aria-label`, `aria-labelledby`, or `<label>` for checkboxes and radios
- Ensure the label clearly describes the state or action of the toggle
- Avoid empty or non-descriptive labels for switches
## Check
Check all toggle fields (checkboxes, radio buttons, switches) for a valid accessible name.
aria-tooltip-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for tooltips. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
351 tokensWhen the skill is activated
Reference documents
455 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,856 bytesreferences/rule.mddoc2,259 bytes
Read SKILL.md
# Provide accessible names for tooltips
Tooltips often contain essential information; if they aren't properly named or associated with an element, that information remains hidden from screen reader users.
## Quick Reference
- Tooltips must have an accessible name or be referenced by `aria-describedby`
- Ensure the tooltip content is actually accessible to assistive technology
- Verify that tooltips are correctly associated with their trigger elements
## Check
Verify that all elements with role="tooltip" have an accessible name or are linked to a trigger element via aria-describedby.
aria-treeitem-name
When your agent uses it
Use when applies to custom tree widgets built with role='tree', role='treeitem', and role='group'. Common in file explorers, nested navigation menus, org charts, and any UI where items can be expanded or collapsed to reveal children.
What it loads into context
Frontmatter
109 tokensAlways available to the agent
SKILL.md
753 tokensWhen the skill is activated
Reference documents
851 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,412 bytesSKILL.mdcore3,412 bytesreferences/rule.mddoc3,773 bytes
Read SKILL.md
# Provide accessible names for tree items
Tree widgets represent hierarchical data (file explorers, nested navigation, organization charts). Screen readers announce each focused treeitem's name, level, and position — e.g., 'src, collapsed, level 1, 1 of 3'. If the name is empty or generic ('folder', 'item'), blind users cannot distinguish between nodes and cannot navigate the hierarchy with confidence. VoiceOver on macOS uses the name to populate the rotor, and NVDA reads it as the user moves through the tree with arrow keys.
## Quick Reference
- Every element with `role='treeitem'` must have a non-empty accessible name
- Text content of the element is used as the name by default — ensure it is descriptive
- Use `aria-label` to override or supplement the visible text (e.g., adding file type context)
- Use `aria-labelledby` to compose a name from multiple visible elements within the item
- A treeitem with `aria-expanded` must also convey its expanded/collapsed state — this is separate from its name
## Check
aria-valid-attr
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure ARIA attributes are valid. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
335 tokensWhen the skill is activated
Reference documents
608 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,703 bytesreferences/rule.mddoc2,851 bytes
Read SKILL.md
# Ensure ARIA attributes are valid
Invalid ARIA attributes are ignored by browsers and screen readers, potentially leaving users with disabilities unable to navigate or understand the interface.
## Quick Reference
- Use only valid, standard-defined ARIA attributes
- Avoid misspelled or non-existent aria-* properties
- Ensure screen readers correctly interpret element roles and states
## Check
Identify any invalid or misspelled ARIA attributes on HTML elements.
aria-valid-attr-value
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid values for ARIA attributes. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
108 tokensAlways available to the agent
SKILL.md
371 tokensWhen the skill is activated
Reference documents
518 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,822 bytesreferences/rule.mddoc2,530 bytes
Read SKILL.md
# Use valid values for ARIA attributes
Invalid attribute values cause ARIA properties to be ignored or misinterpreted by assistive technologies, leading to a broken or confusing user experience.
## Quick Reference
- Ensure ARIA attribute values (like `aria-expanded="true"`) are valid
- Avoid using "yes/no" where "true/false" is required
- Check that IDs referenced in `aria-labelledby` or `aria-owns` actually exist
## Check
Validate that all ARIA attribute values conform to the allowed types (boolean, integer, ID list, etc.).
article
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid Article structured data. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
332 tokensWhen the skill is activated
Reference documents
515 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,684 bytesSKILL.mdcore1,684 bytesreferences/rule.mddoc2,420 bytes
Read SKILL.md
# Implement valid Article structured data
Structured data helps your content appear as rich results (like Top Stories or rich snippets), significantly increasing click-through rates and visibility in search results.
## Quick Reference
- Use Schema.org `Article`, `NewsArticle`, or `BlogPosting` types for content
- Include required properties like `headline`, `image`, `datePublished`, and `author`
- Format the data using JSON-LD for the best compatibility with search engines
## Check
Verify that the page contains valid Article structured data with all required properties.
article-links
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Optimize article link density. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
330 tokensWhen the skill is activated
Reference documents
475 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,698 bytesSKILL.mdcore1,698 bytesreferences/rule.mddoc2,378 bytes
Read SKILL.md
# Optimize article link density
A natural link profile within articles establishes authority, improves site crawlability, and provides additional value to users by pointing them to relevant resources.
## Quick Reference
- Include a balanced mix of internal and external links based on content length
- Link to authoritative external sources to validate facts and data
- Use internal links to connect related topics and keep users engaged on your site
## Check
Review the article to ensure it contains a sufficient number of relevant internal and external links.
audio-descriptions
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide audio descriptions for video. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
401 tokensWhen the skill is activated
Reference documents
1,142 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,197 bytesreferences/rule.mddoc5,162 bytes
Read SKILL.md
# Provide audio descriptions for video
Blind users miss critical plot points, product demos, and on-screen information that's only shown visually—audio descriptions provide equal access to the complete experience.
## Quick Reference
- Add audio descriptions for visual-only content (actions, expressions, text)
- Use track element with kind='descriptions' for separate description track
- Provide extended description version if gaps between dialogue are too short
- Integrate visual descriptions into main narration when possible
## Check
Identify videos where visual content conveys information not available in the audio track (actions, expressions, scene changes, on-screen text). Verify audio descriptions are available or visual content is described in dialogue.author-byline
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Display clear author bylines. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
333 tokensWhen the skill is activated
Reference documents
485 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,635 bytesSKILL.mdcore1,635 bytesreferences/rule.mddoc2,210 bytes
Read SKILL.md
# Display clear author bylines
A visible author byline is a critical E-E-A-T signal, helping users and search engines identify the person responsible for the content and their level of expertise.
## Quick Reference
- Ensure every article has a visible author name prominently displayed
- Link the author's name to a detailed bio page to establish expertise
- Include the author's credentials or professional role near their name
## Check
Verify that all articles and blog posts have a clearly visible author byline.
author-expertise
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Highlight author credentials and expertise. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
339 tokensWhen the skill is activated
Reference documents
532 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,749 bytesSKILL.mdcore1,749 bytesreferences/rule.mddoc2,632 bytes
Read SKILL.md
# Highlight author credentials and expertise
Demonstrating the expertise of the content creator is a core component of E-E-A-T, helping both users and search engines trust the accuracy of your information.
## Quick Reference
- Include a short bio for each author highlighting their relevant qualifications
- Link to the author's social profiles or professional websites (e.g., LinkedIn)
- Mention specific certifications or previous work to establish authority
## Check
Verify that all authors have a bio or profile that clearly states their qualifications for writing on the topic.
author-info
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Implement comprehensive author markup. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
340 tokensWhen the skill is activated
Reference documents
503 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,688 bytesSKILL.mdcore1,688 bytesreferences/rule.mddoc2,493 bytes
Read SKILL.md
# Implement comprehensive author markup
Structured author information helps search engines uniquely identify authors across the web, building an authority profile that can benefit your site's rankings.
## Quick Reference
- Use JSON-LD to provide detailed metadata about the author (Person or Organization)
- Include properties like `name`, `url`, `sameAs`, and `jobTitle`
- Connect author markup to the main `Article` or `WebPage` schema
## Check
Verify that the page includes structured data identifying the author with relevant metadata.
autofocus-avoidance
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autofocus on form fields. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
393 tokensWhen the skill is activated
Reference documents
869 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,032 bytesreferences/rule.mddoc3,824 bytes
Read SKILL.md
# Avoid autofocus on form fields
Autofocus teleports screen reader users to mid-page without context—they miss everything before the form and have no idea where they landed.
## Quick Reference
- Avoid autofocus on pages with content before the form
- Autofocus disrupts screen reader users who lose page context
- Use JavaScript focus after user interaction instead of page load
- Login and search-only pages are exceptions where autofocus may be acceptable
## Check
Search for autofocus attributes on form elements. Verify that page load does not unexpectedly move focus away from the page top, especially on pages with content before the form.autoplay-media
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
397 tokensWhen the skill is activated
Reference documents
833 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,062 bytesreferences/rule.mddoc3,655 bytes
Read SKILL.md
# Avoid autoplaying media
Autoplaying audio drowns out screen reader speech, startles users, and wastes bandwidth—providing user control is essential for accessibility and good UX.
## Quick Reference
- Never autoplay audio—it interferes with screen readers
- If video must autoplay, ensure it's muted by default
- Provide immediately accessible pause/stop controls
- Autoplay should stop after 5 seconds or provide stop mechanism
## Check
Verify no audio or video autoplays on page load. If autoplay is essential, confirm media is muted by default and pause controls are immediately accessible via keyboard within the first few tab stops.avif-format
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Use AVIF format for modern browsers. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
338 tokensWhen the skill is activated
Reference documents
1,327 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,576 bytesreferences/rule.mddoc5,188 bytes
Read SKILL.md
# Use AVIF format for modern browsers
AVIF provides the best compression available—50% smaller than JPEG and 20% smaller than WebP—dramatically reducing bandwidth and improving load times.
## Quick Reference
- AVIF offers 50% better compression than JPEG
- Even better than WebP for photographic images
- Use picture element with WebP and JPEG fallbacks
- Browser support: Chrome, Firefox, Safari 16+, Edge
## Check
Check if the website supports AVIF format for even better compression than WebP.avoid-eval
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Never use eval() or unsafe dynamic code execution. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
455 tokensWhen the skill is activated
Reference documents
998 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,220 bytesSKILL.mdcore2,220 bytesreferences/rule.mddoc4,460 bytes
Read SKILL.md
# Never use eval() or unsafe dynamic code execution
eval() and its equivalents are the root cause of some of the most severe XSS vulnerabilities. If any user-controlled string reaches eval(), an attacker can execute arbitrary JavaScript in your users' browsers — stealing sessions, making requests as the user, or redirecting to malicious sites. Content Security Policy (CSP) blocks eval() but not new Function(), and there is never a legitimate use case that can't be solved without it.
## Quick Reference
- eval() executes arbitrary strings as code — any user input passed to it is a critical security hole
- new Function() is equally dangerous and not caught by CSP eval restrictions
- setTimeout('code', delay) and setInterval('code', delay) also evaluate strings — use function references instead
- Use JSON.parse() instead of eval() for parsing JSON
## Check
Search this codebase for any use of eval(), new Function(), or setTimeout/setInterval with string arguments.back-forward-cache
When your agent uses it
Use when reviewing navigation performance, browser lifecycle events, or resume-from-memory behavior. Check the actual browser lifecycle and restore path, not only static code patterns.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
444 tokensWhen the skill is activated
Reference documents
1,060 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,163 bytesreferences/rule.mddoc5,041 bytes
Read SKILL.md
# Optimize pages for back/forward cache
Back/forward cache turns many browser back and forward navigations into near-instant restores because the entire page is resumed from memory instead of being rebuilt from the network. Losing bfcache eligibility makes common navigations feel far slower than they need to.
## Quick Reference
- Never add an `unload` listener - it is the most common bfcache blocker
- Use `pagehide` and `pageshow` instead of assuming every navigation reloads
- Refresh time-sensitive state when `pageshow.persisted` is `true`
- Keep `beforeunload` conditional and remove it when there are no unsaved changes
- Verify eligibility in DevTools instead of assuming a page is cacheable
## Check
blocked-links
When your agent uses it
Use when reviewing HTML source and JavaScript for links or resource URLs pointing to domains listed in common adblocker filter lists.
What it loads into context
Frontmatter
80 tokensAlways available to the agent
SKILL.md
466 tokensWhen the skill is activated
Reference documents
1,091 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,348 bytesSKILL.mdcore2,348 bytesreferences/rule.mddoc4,945 bytes
Read SKILL.md
# Blocked Tracking Links
When a navigation link's URL matches a tracking domain pattern, the adblocker may block the request entirely — the user clicks the link and nothing happens, breaking core site functionality.
## Quick Reference
- Adblockers block URLs matching domain-level filter lists like EasyList and EasyPrivacy
- Affected resources include external scripts, images, fonts, and API endpoints hosted on blocked domains
- Analytics and tag management scripts (Google Analytics, GTM, Hotjar, Heap) are commonly blocked
- Self-hosting or proxying external scripts through your own domain bypasses most domain-level blocks
- 20–40% of desktop users have an adblocker installed — blocked analytics skews your data significantly
## Check
breadcrumb
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Implement valid BreadcrumbList schema. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
328 tokensWhen the skill is activated
Reference documents
570 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,690 bytesSKILL.mdcore1,690 bytesreferences/rule.mddoc2,797 bytes
Read SKILL.md
# Implement valid BreadcrumbList schema
Breadcrumbs help search engines understand your site's structure and often appear in search results, improving navigation and click-through rates.
## Quick Reference
- Add `BreadcrumbList` structured data only when the page has a visible, meaningful breadcrumb trail
- Ensure the breadcrumb path matches the visible trail and the site's logical hierarchy
- Use JSON-LD to mark up each item in the breadcrumb trail correctly
## Check
Verify that the page contains valid `BreadcrumbList` structured data matching the visible breadcrumbs.
breadcrumb-navigation
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
311 tokensWhen the skill is activated
Reference documents
2,014 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,669 bytesSKILL.mdcore1,669 bytesreferences/rule.mddoc8,363 bytes
Read SKILL.md
# Implement accessible breadcrumb navigation
Proper breadcrumb markup helps screen reader users understand site hierarchy and their current location, while also improving SEO through structured data.
## Quick Reference
- Use nav element with aria-label='Breadcrumb'
- Use ordered list (ol) for semantic structure
- Mark current page with aria-current='page'
- Keep any structured data aligned with the visible breadcrumb trail
## Check
Verify breadcrumbs use nav element with aria-label, ordered list markup, and aria-current for the current page.broken-external-links
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Fix or remove broken external links. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
335 tokensWhen the skill is activated
Reference documents
491 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,604 bytesSKILL.mdcore1,604 bytesreferences/rule.mddoc2,501 bytes
Read SKILL.md
# Fix or remove broken external links
Broken links provide a poor user experience and can signal to search engines that your content is outdated or poorly maintained.
## Quick Reference
- Regularly scan for external links returning 4xx or 5xx error codes
- Update broken links to the new correct URL or remove them entirely
- Avoid linking to expired domains that may have been repurposed
## Check
Scan the page for any external links that lead to 404 pages or other error states.
broken-html
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Fix malformed HTML structure. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
325 tokensWhen the skill is activated
Reference documents
469 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,692 bytesSKILL.mdcore1,692 bytesSKILL.mdcore1,692 bytesreferences/rule.mddoc2,396 bytes
Read SKILL.md
# Fix malformed HTML structure
Malformed HTML can cause rendering issues across browsers and may prevent search engine crawlers from accurately parsing and indexing your content.
## Quick Reference
- Ensure all HTML tags are properly closed and nested according to specifications
- Remove stray tags or unescaped characters from the source code
- Verify the document structure follows a logical hierarchy with valid head and body sections
## Check
Validate the HTML structure of the page to identify any unclosed tags, incorrect nesting, or structural errors.
broken-images
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Fix broken images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
613 tokensWhen the skill is activated
Reference documents
1,095 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,916 bytesreferences/rule.mddoc4,563 bytes
Read SKILL.md
# Fix broken images
A broken image shows an ugly placeholder icon, breaks visual layouts, and communicates that the site is poorly maintained. If the broken image is the Largest Contentful Paint element, it also harms LCP scores. On e-commerce sites, a missing product image can directly reduce purchase intent.
## Quick Reference
- Broken images show an icon and console error—validate all `<img src>` paths at build time
- Use `onerror` handlers to swap broken `<img>` elements to fallback images
- Set `this.onerror=null` inside the handler to prevent infinite error loops
- Test with DevTools Network tab blocked requests to verify fallback behaviour
## Check
Scan all <img> src attributes and CSS background-image URLs in this codebase. Identify: 1) Any relative or absolute paths that point to files not present in the project. 2) Any <img> elements without an onerror handler or fallback mechanism. 3) Hardcoded external image URLs that may become unavailable. 4) Dynamic image paths constructed from user data without existence checks. Report each broken or potentially broken image with its file path and line number.broken-links
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Resolve internal broken links. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
337 tokensWhen the skill is activated
Reference documents
476 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,647 bytesSKILL.mdcore1,647 bytesreferences/rule.mddoc2,351 bytes
Read SKILL.md
# Resolve internal broken links
Internal broken links frustrate users and waste crawl budget by sending search engine bots to non-existent pages, potentially harming your site's SEO.
## Quick Reference
- Identify and fix all internal links that return 404 (Not Found) or 5xx (Server Error) codes
- Ensure all navigation elements and inline links point to live, valid URLs
- Regularly audit your site after moving or deleting content to prevent dead links
## Check
Scan the website for any internal links that lead to 404 pages or server errors.
browser-caching
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Enable browser caching. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
312 tokensWhen the skill is activated
Reference documents
1,523 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,598 bytesreferences/rule.mddoc6,269 bytes
Read SKILL.md
# Enable browser caching
Proper caching eliminates redundant downloads on repeat visits—returning users see near-instant page loads when assets are served from browser cache.
## Quick Reference
- Use immutable caching for hashed assets (1 year max-age)
- Use short cache + revalidation for HTML pages
- ETags enable efficient cache validation
- stale-while-revalidate improves perceived performance
## Check
Verify that proper cache headers are set for static resources to enable browser caching.browser-required
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Perform browser-based performance audits. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
339 tokensWhen the skill is activated
Reference documents
855 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,791 bytesreferences/rule.mddoc4,064 bytes
Read SKILL.md
# Perform browser-based performance audits
Static analysis alone cannot simulate the complex rendering, script execution, and layout processes of modern web browsers, which is essential for capturing real-world performance.
## Quick Reference
- Use real browser engines to capture runtime metrics (LCP, CLS, INP)
- Synthetic tests in full browsers reveal execution bottlenecks
- Verify performance across different device and connection simulations
## Check
Ensure that performance audits are conducted in an environment that executes JavaScript and renders the page (e.g., Lighthouse, Puppeteer).
button-name
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for buttons. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
373 tokensWhen the skill is activated
Reference documents
679 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,951 bytesreferences/rule.mddoc3,220 bytes
Read SKILL.md
# Provide accessible names for buttons
Buttons without accessible names are announced as 'button' by screen readers, leaving users unable to determine what action will be triggered.
## Quick Reference
- Ensure every <button> has a discernible, descriptive label
- Use inner text, aria-label, or aria-labelledby for identification
- Use buttons for actions and state changes, not page navigation
- Avoid empty buttons or those containing only non-text icons
## Check
Scan for buttons that lack descriptive text or accessible labels.canonical-chain
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Avoid redirect chains on canonical URLs. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
348 tokensWhen the skill is activated
Reference documents
483 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,668 bytesSKILL.mdcore1,668 bytesreferences/rule.mddoc2,482 bytes
Read SKILL.md
# Avoid redirect chains on canonical URLs
Canonical chains confuse search engines and can result in the wrong version of a page being indexed, while also adding unnecessary latency for crawlers.
## Quick Reference
- Ensure that the URL in your `rel="canonical"` tag returns a 200 OK status
- Never point a canonical tag to a URL that then redirects to another location
- Verify that the canonical URL is the final, intended version of the content
## Check
Verify that the canonical URL of the page does not result in any redirects.
canonical-header
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Sync HTML canonical tags and Link headers. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
338 tokensWhen the skill is activated
Reference documents
493 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,726 bytesSKILL.mdcore1,726 bytesreferences/rule.mddoc2,548 bytes
Read SKILL.md
# Sync HTML canonical tags and Link headers
Conflicting canonical-url signals can lead search engines to ignore both declarations, potentially causing duplicate content issues and incorrect indexing.
## Quick Reference
- Ensure the `rel="canonical"` tag in your HTML matches the `Link` canonical-url header if both are used
- Avoid sending conflicting signals to search engines about the primary version of a page
- Maintain consistency across all methods of declaring your canonical URL
## Check
Compare the HTML canonical tag with the HTTP Link header to ensure they point to the exact same URL.
canonical-url
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Set canonical URLs for all pages. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
331 tokensWhen the skill is activated
Reference documents
1,056 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,657 bytesSKILL.mdcore1,657 bytesreferences/rule.mddoc4,655 bytes
Read SKILL.md
# Set canonical URLs for all pages
Duplicate content from URL parameters, www vs non-www, or pagination dilutes ranking signals—canonical tags consolidate these signals to the preferred URL.
## Quick Reference
- Canonical URLs tell search engines which version of a page to index
- Prevents duplicate content penalties from URL variations
- Use absolute URLs including protocol and domain
- Self-referencing canonicals are a best practice
## Check
Verify that this page has a canonical URL tag and that it points to the correct preferred version.carousel-accessibility
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Make carousels accessible. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
334 tokensWhen the skill is activated
Reference documents
2,494 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,688 bytesSKILL.mdcore1,688 bytesreferences/rule.mddoc9,984 bytes
Read SKILL.md
# Make carousels accessible
Auto-playing carousels without controls trap users, cause disorientation, and violate WCAG requirements—proper implementation ensures all users can interact with slideshow content.
## Quick Reference
- Always provide pause/stop controls for auto-rotating carousels
- Support keyboard navigation with arrow keys and tab
- Use aria-live regions to announce slide changes
- Respect prefers-reduced-motion preference
## Check
Verify carousels have pause/play controls, keyboard navigation, proper ARIA roles, and respect prefers-reduced-motion.cascade-layers
When your agent uses it
Use when reviewing a CSS architecture for specificity issues, setting up a design system, or migrating a large codebase from utility-first to a layered architecture.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
406 tokensWhen the skill is activated
Reference documents
1,641 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,059 bytesSKILL.mdcore2,059 bytesreferences/rule.mddoc6,811 bytes
Read SKILL.md
# Use @layer to manage CSS cascade order explicitly
Specificity conflicts are one of the most common causes of CSS bugs in large codebases. Developers resort to !important, deeply nested selectors, or inline styles to win specificity wars, creating an unmaintainable arms race. Cascade layers move the source of truth for cascade order from selector specificity to explicit layer ordering, making the system predictable and easy to reason about.
## Quick Reference
- Declare your layer stack at the top of your main CSS file to fix order regardless of import sequence
- Styles in later layers win over styles in earlier layers, regardless of selector specificity
- Put third-party/reset styles in early layers so your own styles always override them
- Unlayered styles (no @layer) have the highest priority — migrate gradually
## Check
Check whether the CSS uses cascade layers to manage specificity, and whether the layer order is explicitly declared.cdn
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Use a content delivery network. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
332 tokensWhen the skill is activated
Reference documents
1,194 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,622 bytesreferences/rule.mddoc5,254 bytes
Read SKILL.md
# Use a content delivery network
A CDN serves static assets from geographically distributed servers—users download from the nearest location, dramatically reducing latency and improving load times.
## Quick Reference
- CDNs serve content from edge servers closest to users
- Reduces latency by 50-70% for global users
- Handles traffic spikes and provides DDoS protection
- Popular options: Cloudflare, Vercel, AWS CloudFront, Fastly
## Check
Check if static assets are served from a CDN and if the CDN is properly configured.charset
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Declare UTF-8 character encoding. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
325 tokensWhen the skill is activated
Reference documents
669 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,578 bytesSKILL.mdcore1,578 bytesreferences/rule.mddoc2,856 bytes
Read SKILL.md
# Declare UTF-8 character encoding
Missing or incorrect charset causes mojibake (garbled text), broken special characters, and security vulnerabilities from character encoding attacks.
## Quick Reference
- Add `<meta charset="UTF-8">` as the first element in <head>
- Must appear within the first 1024 bytes of the document
- UTF-8 supports all languages and special characters
## Check
Verify that this HTML document declares UTF-8 character encoding in the head section and that it's positioned early in the document.
citations
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Cite authoritative external sources. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
343 tokensWhen the skill is activated
Reference documents
461 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,708 bytesSKILL.mdcore1,708 bytesreferences/rule.mddoc2,340 bytes
Read SKILL.md
# Cite authoritative external sources
Citing authoritative sources is a key trust signal for E-E-A-T, demonstrating that your content is well-researched and grounded in verifiable information.
## Quick Reference
- Link to reputable, high-authority websites to validate factual claims, data, or quotes
- Ensure citations are highly relevant and provide extra value to the reader
- Use descriptive anchor text when linking to external research, studies, or official sources
## Check
Review the content for any factual claims that should be backed up with a link to an authoritative source.
clean-up-comments
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Remove comments and debug code in production. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
329 tokensWhen the skill is activated
Reference documents
3,331 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,739 bytesSKILL.mdcore1,739 bytesreferences/rule.mddoc13,929 bytes
Read SKILL.md
# Remove comments and debug code in production
Comments expose internal logic to attackers, increase file size, and can leak sensitive information like API endpoints, credentials, or system architecture.
## Quick Reference
- Remove TODO, FIXME, DEBUG comments before production
- Keep accessibility and legal comments
- Configure build tools to strip comments automatically
- Review for sensitive data leaks in comments
## Check
Review this HTML code for unnecessary comments, debug code, console logs, and temporary markup that should be removed before production deployment.code-splitting
When your agent uses it
Use when reviewing large SPA bundles, new dependency additions, or routes that feel slow to hydrate. Focus on code that is not required for the initial view and can move behind route transitions, user interaction, or viewport-based loading.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
397 tokensWhen the skill is activated
Reference documents
863 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,971 bytesreferences/rule.mddoc3,994 bytes
Read SKILL.md
# Split large JavaScript bundles
A 500 KB JavaScript bundle blocks page interactivity for 3–5 seconds on a mid-range mobile device even after the bytes arrive — JS must be parsed and compiled before execution. Code splitting means users only download and parse the code they actually need for the current page, dramatically improving Time to Interactive.
## Quick Reference
- Use dynamic import() to load code only when it's actually needed
- Split routes in SPAs so each page loads only its own code
- Lazy-load heavy third-party libraries (chart libraries, rich text editors)
- Analyze your bundle with a visualizer to find what to split
## Check
Identify any large third-party imports or feature modules in this file that could be loaded lazily with dynamic import() instead of statically.color-contrast
When your agent uses it
Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators, icons that convey meaning, and graphical objects required to understand content. Does not apply to inactive/disabled UI components or purely decorative elements.
What it loads into context
Frontmatter
107 tokensAlways available to the agent
SKILL.md
836 tokensWhen the skill is activated
Reference documents
947 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,427 bytesreferences/rule.mddoc4,013 bytes
Read SKILL.md
# Meet minimum color contrast ratios
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is also difficult for users with low vision, aging eyesight, or those reading in bright sunlight. Insufficient contrast is one of the most common WCAG failures and directly prevents users from reading content they need.
## Quick Reference
- Normal text (< 18pt or < 14pt bold): minimum contrast ratio of 4.5:1 — WCAG 2.1 SC 1.4.3 Level AA
- Large text (≥ 18pt / 24px, or ≥ 14pt bold / ~18.67px bold): minimum 3:1 contrast ratio
- Non-text UI components (icons, focus indicators, input borders): minimum 3:1 against adjacent color — WCAG 2.1 SC 1.4.11 Level AA
- WCAG 2.1 SC 1.4.6 (Level AAA) requires 7:1 for normal text and 4.5:1 for large text
- Decorative text and logotypes are exempt from contrast requirements
## Check
color-oklch
When your agent uses it
Use when building a design token system, creating accessible colour palettes, generating colour ramps programmatically, or migrating a design system to support wide-gamut displays.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
496 tokensWhen the skill is activated
Reference documents
2,319 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,260 bytesreferences/rule.mddoc7,656 bytes
Read SKILL.md
# Use oklch() and oklab() for perceptually uniform colour palettes
HSL and hex colours are defined in the sRGB colour space, which is not perceptually uniform — a 10 % lightness change looks dramatically different depending on the hue. This makes creating accessible, harmonious palettes by hand extremely difficult. oklch corrects this: adjusting the L channel produces the same perceived brightness change regardless of hue or chroma, making it far easier to build accessible colour ramps, dark-mode palettes, and consistent hover/active states.
## Quick Reference
- oklch(L C H) — Lightness, Chroma, Hue — is the most practical perceptually uniform colour space for design systems
- Equal lightness steps in oklch look equal to the human eye; equal steps in hsl do not
- Define your colour palette tokens in oklch custom properties
- Use @media (color-gamut: p3) to serve wide-gamut colours to capable displays
## Check
Check whether the CSS colour tokens use oklch() or a perceptually uniform colour space, or whether they use hsl/hex which may produce inconsistent perceived lightness across hues.compression
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Enable text-based compression. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
341 tokensWhen the skill is activated
Reference documents
957 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,682 bytesreferences/rule.mddoc4,398 bytes
Read SKILL.md
# Enable text-based compression
Compressed assets download faster, reducing the time to first paint and improving the overall perceived performance, especially on slower mobile networks.
## Quick Reference
- Use Gzip or Brotli to compress text resources (HTML, JS, CSS)
- Brotli provides superior compression for modern browsers
- Significantly reduces data transfer size and load times
- Compression helps network cost, but it does not remove parse and execution cost from oversized bundles
## Check
Verify that text-based resources are served with `Content-Encoding: gzip` or `br` headers.consent-mode
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Implement Google Consent Mode v2. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
349 tokensWhen the skill is activated
Reference documents
852 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,700 bytesreferences/rule.mddoc3,940 bytes
Read SKILL.md
# Implement Google Consent Mode v2
Consent Mode v2 is essential for adhering to privacy regulations (like GDPR) while maintaining the ability to measure conversion and analytics data in a privacy-safe way.
## Quick Reference
- Adjust tag behavior based on user consent for privacy compliance
- Maintain data insights through modeling for non-consenting users
- Ensure the `gcd` parameter is present in pings to Google services
## Check
Verify that Google Consent Mode v2 is correctly implemented and sending the appropriate consent states.
consistent-help
When your agent uses it
Use when reviewing support UI across multi-page flows such as checkout, onboarding, account recovery, or support journeys. Compare multiple pages in the same variation instead of reviewing a single page alone.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
376 tokensWhen the skill is activated
Reference documents
712 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,925 bytesreferences/rule.mddoc3,354 bytes
Read SKILL.md
# Keep repeated help mechanisms in a consistent location
Users who need help during a task should not have to hunt for it on every screen. Predictable placement reduces stress and makes support easier to find when a user is already struggling.
## Quick Reference
- Put repeated help in the same place across related pages
- Keep the same relative order at the same breakpoint and zoom level
- Review chat, phone, contact, FAQ, and help-center entry points together
- Inconsistency across steps matters more than the exact visual style
## Check
Audit repeated help mechanisms across this set of pages. Check whether contact links, chat triggers, help-center links, or support phone numbers appear in the same relative order on each page.console-cleanup
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Remove console statements in production. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
336 tokensWhen the skill is activated
Reference documents
706 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,808 bytesSKILL.mdcore1,808 bytesreferences/rule.mddoc3,214 bytes
Read SKILL.md
# Remove console statements in production
Console statements leak sensitive information, impact performance, and create unprofessional user experiences when visible in production.
## Quick Reference
- Remove console.log, console.debug, console.table before production
- Use environment-aware logging utilities
- Configure build tools to strip console statements automatically
- Keep console.error for critical error tracking if needed
## Check
Scan this JavaScript code for console.log, console.debug, console.warn, console.error, and other console statements that should be removed before production deployment.const-let
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Prefer const and let over var. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
383 tokensWhen the skill is activated
Reference documents
666 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,880 bytesSKILL.mdcore1,880 bytesreferences/rule.mddoc2,697 bytes
Read SKILL.md
# Prefer const and let over var
var's function scope and hoisting behavior regularly causes bugs where variables are accessible outside the block they were declared in. const and let enforce block scope and make code intent clearer — const signals that a binding should not be reassigned, which helps readers understand data flow.
## Quick Reference
- Use const for values that are never reassigned
- Use let when reassignment is needed
- Never use var — it has function scope and is hoisted, causing subtle bugs
- const does not mean immutable — objects and arrays declared with const can still be mutated
## Check
Scan this JavaScript file for any use of var and flag every occurrence with line numbers.contact-page
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Create a comprehensive Contact page. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
335 tokensWhen the skill is activated
Reference documents
486 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,695 bytesSKILL.mdcore1,695 bytesreferences/rule.mddoc2,216 bytes
Read SKILL.md
# Create a comprehensive Contact page
A clear and accessible contact page is a major trust signal for E-E-A-T and provides essential support for users, improving overall site credibility.
## Quick Reference
- Provide multiple contact methods such as a functional email address, phone number, or contact form
- Include a physical address or map if applicable to establish local presence and trust
- Ensure the contact page is easily discoverable from any page on the site
## Check
Verify that the website has a dedicated Contact page with multiple, working contact methods.
container-queries
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use container queries for component-level responsiveness. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
397 tokensWhen the skill is activated
Reference documents
866 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,105 bytesreferences/rule.mddoc3,530 bytes
Read SKILL.md
# Use container queries for component-level responsiveness
Media queries respond to viewport width, which makes components context-dependent — a card designed for a 3-column grid might break when placed in a 2-column grid or a sidebar. Container queries solve this: a card can layout itself based on how much space its container gives it, making the component genuinely reusable in any layout context.
## Quick Reference
- Container queries respond to the parent container's size, not the viewport
- Set container-type: inline-size on the parent to enable container queries
- Use @container rule to write styles that activate at container breakpoints
- Container queries make components reusable in sidebars, grids, and full-width areas
## Check
Look for components in this CSS that have media query breakpoints — consider whether container queries would make them more reusable in different layout contexts.content-dates
When your agent uses it
Use when auditing article or blog pages for date markup, generating Article JSON-LD with datePublished/dateModified, or checking whether a CMS template surfaces dates correctly.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
668 tokensWhen the skill is activated
Reference documents
967 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,766 bytesreferences/rule.mddoc4,204 bytes
Read SKILL.md
# Show published and updated dates
Google uses publication and modification dates to assess content freshness, which influences rankings for time-sensitive queries. Visible dates also build user trust by signalling that content is current and maintained.
## Quick Reference
- Include a visible published date and a `dateModified` in JSON-LD for every article or blog post
- Use ISO 8601 format (`2024-03-15T10:00:00Z`) in structured data; human-readable in the visible UI
- Update `dateModified` only when content meaningfully changes — not on trivial edits
## Check
On each article or blog page, check: (1) Is there a visible published date in the page body or byline? (2) Does the JSON-LD `Article` or `BlogPosting` block include `datePublished` and `dateModified` properties in ISO 8601 format? (3) Does the `<head>` include `<meta property="article:published_time">` and `<meta property="article:modified_time">` Open Graph tags?
content-security-policy
When your agent uses it
Use when reviewing headers, forms, cookies, or third-party integrations related to Implement a content security policy. Validate the effective browser and HTTP behavior in a production-like environment.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
466 tokensWhen the skill is activated
Reference documents
2,725 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,441 bytesreferences/rule.mddoc10,924 bytes
Read SKILL.md
# Implement a content security policy
Content Security Policy prevents cross-site scripting (XSS), clickjacking, and data injection attacks by controlling which resources can be loaded and executed on your pages. It reduces blast radius, but it does not replace output encoding and sanitization.
## Quick Reference
- Start with Content-Security-Policy-Report-Only to test without breaking your site
- Use nonces or hashes for inline scripts instead of unsafe-inline
- Avoid unsafe-eval unless absolutely necessary
- Set strict default-src then allow specific sources
- Monitor CSP reports to catch violations
- Sanitize untrusted HTML before rendering it into the DOM
- Use Trusted Types in larger apps as defense in depth for DOM XSS sinks
content-without-css
When your agent uses it
Use when reviewing rendered HTML, layout components, or design-system patterns that may depend on presentation for meaning. Check the DOM order, semantic structure, form relationships, and whether CSS generated content carries essential information.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
426 tokensWhen the skill is activated
Reference documents
1,972 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,189 bytesreferences/rule.mddoc8,677 bytes
Read SKILL.md
# Ensure content remains usable without CSS
Users can browse with custom styles, high contrast modes, reader tools, or failed stylesheets. If the page only makes sense visually, content order, instructions, and task flow break as soon as presentation changes.
## Quick Reference
- Use semantic HTML so headings, lists, and form relationships survive without CSS
- Keep DOM order aligned with the reading and task-completion order
- Do not put essential labels, instructions, or required markers in CSS generated content
- Test key journeys with author styles disabled or overridden by user styles
## Check
Find pages or components that rely on CSS for meaning. Verify the page still has a logical reading order, visible labels, instructions, error text, and operable primary actions when author styles are disabled or replaced by user styles.contract-testing
When your agent uses it
Use when setting up integration testing for a frontend-backend API boundary, evaluating whether two services are safe to deploy independently, or replacing slow end-to-end tests with contract tests.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
417 tokensWhen the skill is activated
Reference documents
2,429 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,193 bytesreferences/rule.mddoc10,342 bytes
Read SKILL.md
# Implement consumer-driven contract testing for API boundaries
Integration tests that require both services running at the same time are slow, brittle, and hard to maintain. Consumer-driven contract testing decouples the consumer and provider test suites — each team can run their tests independently, yet the broker guarantees that the published contract is always verified against the live provider. This catches API mismatches days earlier than end-to-end tests, with far less infrastructure overhead.
## Quick Reference
- The consumer writes tests that describe what it expects from the API (the "contract")
- The contract is published to a Pact Broker and verified against the real provider
- Provider changes that break the contract fail CI before they are deployed
- This replaces fragile end-to-end tests that require both services to be running simultaneously
## Check
Check whether the frontend has consumer-driven contract tests that define and verify the API contract with the backend.cookie-consent
When your agent uses it
Use when reviewing a website for GDPR/CCPA compliance, specifically whether cookie consent is obtained before non-essential cookies are set.
What it loads into context
Frontmatter
82 tokensAlways available to the agent
SKILL.md
485 tokensWhen the skill is activated
Reference documents
1,832 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,549 bytesreferences/rule.mddoc8,307 bytes
Read SKILL.md
# Show a cookie consent notice
GDPR violations can result in fines up to €20 million or 4% of global annual turnover. Regulators across the EU have actively fined organizations for deploying tracking cookies without valid consent.
## Quick Reference
- GDPR requires consent before setting non-essential cookies (analytics, advertising, personalization)
- Essential/strictly necessary cookies (session, security, login) do not require consent
- Consent must be freely given, specific, informed, and unambiguous — pre-ticked boxes are invalid
- Users must be able to withdraw consent as easily as they gave it
- Scripts and pixels must not load until the user has actively accepted their category
- Non-essential trackers must stay blocked until consent and after revocation
## Checkcritical-images
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Prioritize loading critical images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
332 tokensWhen the skill is activated
Reference documents
882 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,567 bytesreferences/rule.mddoc3,493 bytes
Read SKILL.md
# Prioritize loading critical images
The Largest Contentful Paint (LCP) is often an image—prioritizing its load can improve LCP by 20-40%, directly impacting Core Web Vitals and SEO.
## Quick Reference
- Use fetchpriority='high' on LCP images
- Preload hero images in document head
- Remove loading='lazy' from above-the-fold images
- Critical images directly impact LCP Core Web Vital
## Check
Identify which images are critical for initial render and ensure they load with high priority.critical-request-chains
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize critical request chains. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
333 tokensWhen the skill is activated
Reference documents
901 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,671 bytesreferences/rule.mddoc4,020 bytes
Read SKILL.md
# Minimize critical request chains
Long chains of dependent requests delay the initial rendering of the page, as each resource must wait for its parent to be fetched and processed.
## Quick Reference
- Reduce the depth of dependent resource requests
- Inline critical CSS to avoid extra network roundtrips
- Use `preload` hints for essential assets found deep in the chain
## Check
Identify long chains of dependent requests that block the critical rendering path using Lighthouse or WebPageTest.
cross-browser-testing
When your agent uses it
Use when reviewing CI coverage, automated checks, or test strategy related to Test across all major browsers. Focus on whether the rule is continuously verified, not just documented.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
332 tokensWhen the skill is activated
Reference documents
2,536 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,707 bytesreferences/rule.mddoc10,491 bytes
Read SKILL.md
# Test across all major browsers
Users access your site from different browsers, each with unique rendering engines. Without cross-browser testing, a significant portion of users may experience broken layouts, missing features, or complete failures.
## Quick Reference
- Test on Chrome, Firefox, Safari, and Edge at minimum
- Use automated tools like Playwright or BrowserStack for CI testing
- Check CSS features with caniuse.com before using
- Test on both desktop and mobile versions of browsers
- Document and gracefully handle unsupported features
## Check
cross-origin-isolation
When your agent uses it
Use when reviewing security-sensitive web apps, SharedArrayBuffer usage, worker-heavy apps, editors, or measurement features that require cross-origin isolation. Check both headers and real browser behavior.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
473 tokensWhen the skill is activated
Reference documents
829 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,257 bytesreferences/rule.mddoc4,029 bytes
Read SKILL.md
# Use COOP, COEP, and CORP for cross-origin isolation when needed
Cross-origin isolation reduces opener-based attacks and XS-Leak risk, and it is required for powerful browser features such as SharedArrayBuffer in modern browsers. It also breaks integrations if deployed carelessly, so it needs a deliberate rollout rather than a copy-pasted header block.
## Quick Reference
- Use `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` together when you need cross-origin isolation
- Audit every cross-origin script, iframe, image, worker, and font before enforcing COEP
- Serve embeddable resources with CORS or `Cross-Origin-Resource-Policy` as appropriate
- Verify `self.crossOriginIsolated === true` before depending on isolated-only features
## Check
Review security headers and embedded resources for cross-origin isolation. Check whether the app needs COOP/COEP, whether resources are compatible with COEP, and whether the runtime actually becomes crossOriginIsolated.cross-origin-security
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Handle cross-origin requests securely. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
452 tokensWhen the skill is activated
Reference documents
1,129 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,382 bytesSKILL.mdcore2,382 bytesreferences/rule.mddoc5,316 bytes
Read SKILL.md
# Handle cross-origin requests securely
The Same-Origin Policy is the browser's primary defense against malicious sites stealing data or performing actions on behalf of your users. Misconfiguring CORS or failing to validate postMessage origins can allow attackers to bypass this protection — reading private data, submitting forms as users, or injecting content into your pages.
## Quick Reference
- Always verify event.origin before processing postMessage data
- Never set Access-Control-Allow-Origin: * for authenticated endpoints
- Validate and sanitize all data received from cross-origin messages
- Use SameSite cookies to prevent CSRF from cross-origin requests
- Reject unvalidated redirect targets such as `next`, `redirect`, or `callbackUrl`
## Check
css-at-property
When your agent uses it
Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a typed design token system where custom property misuse should produce visible errors.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
437 tokensWhen the skill is activated
Reference documents
1,597 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,411 bytesreferences/rule.mddoc6,828 bytes
Read SKILL.md
# Register CSS custom properties with @property for animation and type safety
CSS custom properties are powerful but limited by default: they are untyped string substitutions that the browser cannot interpolate during transitions or animations. Registering a property with @property gives the browser the information it needs to animate between values, validate token assignments, and scope inheritance — turning custom properties from string macros into first-class typed values. This unlocks gradient animations, typed design tokens, and scoped component theming that are impossible with unregistered properties.
## Quick Reference
- Unregistered custom properties cannot be animated — they transition as discrete strings
- @property specifies syntax (color, length, number), initial-value, and inherits
- Registered properties enable smooth interpolation for gradients and complex values
- inherits: false creates scoped tokens that do not cascade to children
## Check
Review the CSS custom properties in this file. Identify any properties that are used in transitions or animations — these require @property registration to animate correctly.css-containment
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS containment to limit repaint scope. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
390 tokensWhen the skill is activated
Reference documents
787 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,048 bytesreferences/rule.mddoc3,825 bytes
Read SKILL.md
# Use CSS containment to limit repaint scope
By default, a CSS change anywhere on the page can potentially affect any other element's layout. CSS containment declares that certain elements are isolated — changes inside them don't affect the outside world. This lets browsers skip large portions of the rendering pipeline for unchanged content, which is especially valuable for pages with many independent components.
## Quick Reference
- contain: layout style paint tells the browser a component is visually self-contained
- content-visibility: auto skips rendering off-screen content entirely
- Containment limits how far layout recalculations need to propagate
- Use contain: strict for widgets with no overflow that shouldn't affect the page
## Check
Identify components in this CSS that are visually self-contained (no overflow, no interaction with elements outside) and could benefit from CSS containment.css-critical
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster rendering. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
345 tokensWhen the skill is activated
Reference documents
3,237 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,767 bytesreferences/rule.mddoc13,354 bytes
Read SKILL.md
# Inline critical CSS for faster rendering
Critical CSS eliminates render-blocking resources, enabling browsers to paint content immediately—directly improving LCP and FCP scores.
## Quick Reference
- Inline ~14KB of critical above-the-fold CSS in <head>
- Use tools: critical, critters, or Lighthouse to extract
- Load remaining CSS asynchronously after page load
- Automate in build process—don't manually maintain
## Check
Analyze this page's CSS loading strategy to identify critical above-the-fold styles that should be inlined and non-critical styles that can be loaded asynchronously.css-custom-properties
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS custom properties for design tokens. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
386 tokensWhen the skill is activated
Reference documents
914 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,972 bytesreferences/rule.mddoc3,303 bytes
Read SKILL.md
# Use CSS custom properties for design tokens
Hard-coded color values and magic numbers scattered across CSS files make global changes (a rebrand, a dark mode, a spacing adjustment) require finding and updating dozens of individual lines. Custom properties centralize these values so one change propagates everywhere — and enable runtime theming that preprocessor variables cannot.
## Quick Reference
- Define reusable values as --variable-name on :root
- Custom properties cascade and inherit — they can be overridden at any scope
- Use var(--name, fallback) to provide fallback values
- Custom properties are runtime values — JavaScript can read and write them
## Check
Find hard-coded color values, spacing values, and font sizes in this CSS file that should be replaced with CSS custom properties.css-file-size
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize CSS file size. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
331 tokensWhen the skill is activated
Reference documents
778 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,595 bytesreferences/rule.mddoc3,599 bytes
Read SKILL.md
# Optimize CSS file size
Large CSS files block rendering and increase the time it takes for the browser to construct the CSSOM, leading to a slower First Contentful Paint.
## Quick Reference
- Keep individual CSS files small to speed up parsing and rendering
- Use minification and remove unused CSS (PurgeCSS)
- Leverage modular CSS or Tailwind to reduce duplication
## Check
Audit the size of CSS files and identify those exceeding recommended limits (e.g., > 50KB gzipped).
css-grid
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS Grid for two-dimensional layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
396 tokensWhen the skill is activated
Reference documents
900 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,973 bytesreferences/rule.mddoc3,708 bytes
Read SKILL.md
# Use CSS Grid for two-dimensional layouts
CSS Grid solves layout problems that previously required JavaScript or complex CSS hacks — aligning items across both axes simultaneously, creating named layout areas, and building responsive grids that adapt to content. Using Flexbox for two-dimensional layouts results in workarounds like fixed widths that break responsiveness.
## Quick Reference
- Use Grid for two-dimensional layouts (rows AND columns); use Flexbox for one-dimensional
- grid-template-areas provides a visual representation of the layout in your CSS
- minmax() and auto-fill/auto-fit create responsive grids without media queries
- Subgrid allows nested elements to align to the parent grid's tracks
## Check
Look for float-based or Flexbox layouts in this CSS that are trying to control both rows and columns — they may be better implemented with CSS Grid.css-minification
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Minify all CSS files. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
346 tokensWhen the skill is activated
Reference documents
4,086 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,659 bytesreferences/rule.mddoc16,794 bytes
Read SKILL.md
# Minify all CSS files
Unminified CSS wastes bandwidth with whitespace, comments, and verbose syntax—minification delivers the same styles in significantly fewer bytes.
## Quick Reference
- Enable minification in build tool (Vite, webpack, etc.)
- Use cssnano or lightningcss for PostCSS pipelines
- Typical reduction: 20-40% file size savings
- Combine with Gzip/Brotli for maximum compression
## Check
Verify that all CSS files are minified in production to reduce file size, eliminate whitespace, and improve page load performance.css-non-blocking
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Load CSS without blocking render. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
338 tokensWhen the skill is activated
Reference documents
1,835 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,666 bytesreferences/rule.mddoc7,367 bytes
Read SKILL.md
# Load CSS without blocking render
Render-blocking CSS delays First Contentful Paint—users see a blank screen while waiting for stylesheets to download and parse.
## Quick Reference
- Use `<link rel="preload" as="style">` with onload handler
- Inline critical CSS, defer non-critical styles
- Use media queries to split CSS by viewport/feature
- Modern: Next.js/Vite handle this automatically
## Check
Analyze this CSS loading implementation to ensure stylesheets are loaded without blocking the DOM parsing and rendering process.css-order
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Order CSS files correctly. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
334 tokensWhen the skill is activated
Reference documents
4,518 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,616 bytesreferences/rule.mddoc19,070 bytes
Read SKILL.md
# Order CSS files correctly
Incorrect CSS/JS order causes render-blocking delays and FOUC—users see unstyled content while waiting for styles to load.
## Quick Reference
- Load all CSS files before JavaScript in the document head
- Use async/defer for non-critical JavaScript
- Inline critical CSS for faster first paint
- Prevents FOUC (Flash of Unstyled Content)
## Check
Verify that all CSS files are loaded before JavaScript files in the document head to prevent render-blocking and ensure proper styling precedence.css-print
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Include a print stylesheet. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
327 tokensWhen the skill is activated
Reference documents
5,078 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,688 bytesreferences/rule.mddoc20,120 bytes
Read SKILL.md
# Include a print stylesheet
Print stylesheets ensure content is readable when printed—removing digital clutter and optimizing for paper saves ink and improves accessibility.
## Quick Reference
- Use @media print for print-specific styles
- Hide navigation, ads, and interactive elements with .no-print
- Use serif fonts at 12pt and optimize page breaks
- Show full URLs for external links in printed output
## Check
Verify that a print stylesheet is provided and properly optimized for printed pages with appropriate typography, layout, and hidden elements.cumulative-layout-shift
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize cumulative layout shift. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
349 tokensWhen the skill is activated
Reference documents
1,303 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,754 bytesreferences/rule.mddoc5,150 bytes
Read SKILL.md
# Minimize cumulative layout shift
Layout shifts cause accidental clicks, reading disruption, and user frustration—a good CLS score ensures content stays where users expect it.
## Quick Reference
- CLS measures visual stability—target score below 0.1
- Always set width/height on images and embeds
- Reserve space for ads, banners, and dynamic content
- Use transform animations instead of layout-changing properties
## Check
Measure CLS using Lighthouse or PageSpeed Insights. Verify score is below 0.1 for good visual stability.currency-formatting
When your agent uses it
Use when reviewing utility functions, component props, or template strings that format numbers, prices, or dates to check whether Intl APIs are used correctly.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
469 tokensWhen the skill is activated
Reference documents
1,631 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,372 bytesreferences/rule.mddoc6,688 bytes
Read SKILL.md
# Use Intl APIs for currency, number, and date formatting
Number and currency formatting rules differ significantly across locales — a value formatted as "$1,234.56" in the US is written "1.234,56 $" in Germany and "¥1,235" in Japan. Hardcoded formatting causes incorrect display for international users and is expensive to maintain manually as you add locales.
## Quick Reference
- Never hardcode currency symbols or thousand separators like $ or comma
- Use Intl.NumberFormat with the currency style for monetary values
- Use Intl.DateTimeFormat for locale-aware date and time display
- Pass the user locale explicitly rather than relying on the browser default
- Use Intl.Collator and locale fallback chains for sorting and searching
## Check
custom-element-accessibility
When your agent uses it
Use when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.
What it loads into context
Frontmatter
85 tokensAlways available to the agent
SKILL.md
497 tokensWhen the skill is activated
Reference documents
2,067 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,619 bytesSKILL.mdcore2,619 bytesreferences/rule.mddoc8,834 bytes
Read SKILL.md
# Make custom elements and Web Components accessible
Custom elements that lack ARIA reflection are invisible to screen readers — a button that looks correct visually may be announced as a generic "group" or not at all. ElementInternals provides the bridge between the shadow DOM and the accessibility tree, and it is also the only standards-compliant way to integrate custom inputs with native HTML forms.
## Quick Reference
- Prefer native `<button>`, `<input>`, `<select>`, and `<details>` before building a custom widget
- Use ElementInternals.ariaRole to expose ARIA semantics from the shadow DOM
- Implement form-associated custom elements with ElementInternals for native form participation
- Apply roving tabindex for compound widgets (listbox, toolbar, menu)
- The shadow DOM does not automatically expose ARIA to the accessibility tree without ElementInternals
## Check
dark-mode-css
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Support dark mode with prefers-color-scheme. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
423 tokensWhen the skill is activated
Reference documents
958 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,080 bytesreferences/rule.mddoc3,745 bytes
Read SKILL.md
# Support dark mode with prefers-color-scheme
More than half of users prefer dark mode for reduced eye strain, especially in low-light environments. Users with photosensitivity rely on it. Implementing dark mode via prefers-color-scheme respects the user's OS preference without them needing to find a toggle, and CSS custom properties make it a clean, maintainable addition rather than a disruptive refactor.
## Quick Reference
- Use @media (prefers-color-scheme: dark) to apply dark mode styles
- Define light/dark colors as CSS custom properties on :root for easy switching
- Support a manual toggle by storing preference in localStorage and setting a data-theme attribute
- Ensure dark mode colors maintain WCAG contrast ratios
## Check
Check if this CSS supports dark mode. Look for prefers-color-scheme usage or a data-theme attribute pattern. Identify any hard-coded colors that would look wrong in dark mode.data-minimisation
When your agent uses it
Use when reviewing form components, API payloads, or client-side storage to identify fields that are collected but not consumed by a stated feature.
What it loads into context
Frontmatter
86 tokensAlways available to the agent
SKILL.md
477 tokensWhen the skill is activated
Reference documents
1,296 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,428 bytesreferences/rule.mddoc6,179 bytes
Read SKILL.md
# Collect only the minimum personal data necessary
Collecting more data than necessary increases the blast radius of a breach, exposes your organisation to regulatory fines, and erodes user trust. GDPR Article 5(1)(c) makes data minimisation a legal obligation for any controller processing EU residents' data — but it is also sound engineering practice regardless of jurisdiction.
## Quick Reference
- Collect only fields your application actually needs to function
- Document the purpose for every piece of personal data you store
- Prefer anonymous or pseudonymous data over identifiable data where possible
- Clear client-side storage (localStorage, sessionStorage, cookies) on logout or after a defined retention window
- Never send raw PII to analytics, monitoring, or client-side logs
## Check
dead-end-pages
When your agent uses it
Use when auditing a site's internal link graph for dead-end pages, suggesting related-content links to add to thin or standalone pages, or reviewing CMS templates that produce link-free content pages.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
583 tokensWhen the skill is activated
Reference documents
1,149 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,737 bytesSKILL.mdcore2,737 bytesreferences/rule.mddoc5,163 bytes
Read SKILL.md
# Add outgoing links to dead-end pages
Googlebot follows links to discover and re-crawl pages. A page with no outgoing internal links stops the crawler from reaching the rest of your site from that point and leaves users with nowhere logical to go, increasing bounce rate.
## Quick Reference
- Every page should link to at least 2–3 contextually relevant internal pages to aid navigation and crawling
- Pages with zero outgoing links trap crawlers and users, forming dead ends in your site's link graph
- Contextual inline links (within body content) pass more value than footer or navigation links alone
## Check
For each page, count the number of `<a href>` links pointing to other pages on the same domain (exclude navigation/header/footer if they are templated identically across all pages). Flag any page with zero or fewer than two unique internal links in the main content body (`<main>` or `<article>` element).
debounce-throttle
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Debounce and throttle event handlers. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
367 tokensWhen the skill is activated
Reference documents
881 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,808 bytesSKILL.mdcore1,808 bytesreferences/rule.mddoc3,771 bytes
Read SKILL.md
# Debounce and throttle event handlers
High-frequency events fire hundreds of times per second, causing UI jank, excessive API calls, and poor Interaction to Next Paint (INP) scores.
## Quick Reference
- Debounce: delays execution until activity stops (search inputs, form validation)
- Throttle: limits execution rate (scroll, resize handlers)
- Use 150-300ms delay for user input, 100ms for scroll/resize
- Clean up event listeners to prevent memory leaks
## Check
Review this JavaScript code for scroll, resize, input, mousemove, or other high-frequency event handlers that should use debounce or throttle.decorative-elements
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements from assistive technology. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant. If an image is clearly decorative, default to no finding unless the snippet shows an actual issue such as broken semantics, focusability, or visible layout instability.
What it loads into context
Frontmatter
134 tokensAlways available to the agent
SKILL.md
507 tokensWhen the skill is activated
Reference documents
931 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,692 bytesreferences/rule.mddoc4,202 bytes
Read SKILL.md
# Hide decorative elements from assistive technology
Screen readers announce every image and icon—decorative elements clutter the experience with meaningless 'image, decorative border, image, bullet' announcements.
## Quick Reference
- Use alt='' (empty) for decorative images—not alt='image' or missing alt
- Add aria-hidden='true' to decorative SVGs and icons
- Use CSS background-image for purely decorative visuals
- Role='presentation' removes semantic meaning from elements
- Do not automatically raise performance findings on decorative micro-assets unless the snippet shows real layout instability
- Example safe pattern: `<img src="/divider.svg" alt="" aria-hidden="true">` is usually a decorative no-op, not a finding by itself
## Checkdefer-async
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Load scripts with defer, async, or type=module. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
425 tokensWhen the skill is activated
Reference documents
925 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,977 bytesSKILL.mdcore1,977 bytesreferences/rule.mddoc4,342 bytes
Read SKILL.md
# Load scripts with defer, async, or type=module
A plain <script> tag in the document head blocks all HTML parsing until the script downloads, parses, and executes. On a slow network this can add seconds of white-screen time before any content renders. defer and async allow the browser to continue parsing HTML while the script downloads, reducing Time to First Contentful Paint dramatically.
## Quick Reference
- defer downloads in parallel and executes after HTML parsing, in order — use for most scripts
- async downloads in parallel and executes immediately when ready — use for independent scripts
- type=module always defers and enables ES module syntax
- Never place scripts in <head> without defer or async
## Check
Find all script tags in this HTML file. Flag any in the <head> without defer or async, and any at the bottom of <body> that could be in <head> with defer.definition-list
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct definition list structure. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
348 tokensWhen the skill is activated
Reference documents
732 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,793 bytesreferences/rule.mddoc3,130 bytes
Read SKILL.md
# Use correct definition list structure
Broken list structures confuse assistive technologies, preventing users from understanding the relationship between terms and their definitions.
## Quick Reference
- Ensure <dl> contains only <dt>, <dd>, or <script>/<template> tags
- Avoid wrapping list items in invalid container elements like <div>
- Maintain semantic relationships between terms and descriptions
## Check
Verify that all <dl> elements contain only valid child elements (dt, dd, or allowed wrappers).
dependency-audit
When your agent uses it
Use when reviewing a project's security posture, setting up CI pipelines, or responding to a reported vulnerability in a dependency.
What it loads into context
Frontmatter
80 tokensAlways available to the agent
SKILL.md
361 tokensWhen the skill is activated
Reference documents
1,428 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,853 bytesreferences/rule.mddoc6,472 bytes
Read SKILL.md
# Audit dependencies for known vulnerabilities
Third-party packages are the most common attack surface in modern web applications. The 2021 Log4Shell incident, the 2022 node-ipc supply-chain attack, and countless npm package hijackings demonstrate that a single vulnerable transitive dependency can compromise every application that depends on it. Automated, continuous scanning drastically reduces the window between a CVE being published and your team being aware of it.
## Quick Reference
- Run pnpm audit (or npm audit) before every production deployment
- Integrate automated dependency scanning in CI (GitHub Dependabot or Snyk)
- Treat critical and high severity findings as release blockers
- Pin transitive dependencies with a lock file committed to version control
## Check
Check the project's dependencies for known security vulnerabilities using the package manager audit command.dimensions
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Set explicit width and height on images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Separate real CLS risks from tiny decorative SVGs or ornament-only assets that are unlikely to move surrounding content.
What it loads into context
Frontmatter
115 tokensAlways available to the agent
SKILL.md
767 tokensWhen the skill is activated
Reference documents
1,403 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,711 bytesreferences/rule.mddoc5,729 bytes
Read SKILL.md
# Set explicit width and height on images
Images without explicit dimensions are the most common cause of Cumulative Layout Shift (CLS), a Core Web Vitals metric. When images load and cause layout jumps, users accidentally click the wrong element—a frustrating experience that Google penalises in search rankings. A CLS score above 0.1 is considered 'needs improvement'; above 0.25 is 'poor'.
## Quick Reference
- Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space
- Example low-risk exception: `<img src="/divider.svg" alt="" aria-hidden="true">` should not be flagged on its own without evidence of visible layout shift
- Always set `width` and `height` attributes on `<img>` matching the image's intrinsic dimensions
- Pair with `height: auto` in CSS to keep the image fluid while preserving the aspect ratio
- Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images
- Browsers derive `aspect-ratio` from these attributes—do not set arbitrary placeholder values
## Checkdirection-attribute
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Set text direction for RTL languages. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
434 tokensWhen the skill is activated
Reference documents
3,463 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,136 bytesSKILL.mdcore2,136 bytesreferences/rule.mddoc13,713 bytes
Read SKILL.md
# Set text direction for RTL languages
Without proper dir attributes, RTL text displays incorrectly, UI elements appear backwards, and screen readers announce content in the wrong order.
## Quick Reference
- Set `dir="rtl"` on <html> for Arabic, Hebrew, Persian, Urdu
- Use `dir="auto"` for user-generated content
- Combine with CSS logical properties (inline-start, inline-end)
- Test UI mirroring for navigation, icons, and layouts
- Use bidi isolation such as `<bdi>` for inline mixed-direction user content
## Check
disclaimers
When your agent uses it
Use when auditing YMYL content pages for trust signals, generating disclaimer copy for medical or financial content, or reviewing affiliate disclosure requirements under FTC or ASA guidelines.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
688 tokensWhen the skill is activated
Reference documents
1,011 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,391 bytesreferences/rule.mddoc4,789 bytes
Read SKILL.md
# Add disclaimers to sensitive content
Google's Search Quality Rater Guidelines classify health, finance, and legal topics as 'Your Money or Your Life' (YMYL) pages that are held to the highest trust standards. Pages lacking appropriate disclaimers score low on Trustworthiness within the E-E-A-T framework, suppressing their rankings.
## Quick Reference
- YMYL pages (medical, legal, financial, safety topics) require visible, accurate disclaimers to demonstrate trustworthiness
- Google's quality raters assess E-E-A-T; missing disclaimers on sensitive topics signal low trust
- Disclaimers must be accurate and specific — generic 'consult a professional' text with no context is insufficient
## Check
Identify pages covering medical, legal, financial, safety, or affiliate content. For each, check: (1) Is there a visible disclaimer stating the content does not constitute professional advice? (2) For affiliate content, is there an FTC-compliant disclosure before the first affiliate link? (3) Is the disclaimer placed prominently — not hidden in footers or after lengthy content?
dlitem
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Wrap definition items in a definition list. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
102 tokensAlways available to the agent
SKILL.md
398 tokensWhen the skill is activated
Reference documents
698 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,751 bytesreferences/rule.mddoc2,955 bytes
Read SKILL.md
# Wrap definition items in a definition list
Standalone <dt> or <dd> elements lose their semantic meaning and fail to provide the context needed for assistive technologies to link terms with definitions.
## Quick Reference
- Place all <dt> (terms) and <dd> (descriptions) within a <dl>
- Avoid using description list items as standalone elements
- Ensure proper grouping of related metadata or glossary terms
## Check
Locate any <dt> or <dd> elements that are not children of a <dl> element.
doctype
When your agent uses it
Use when applies to all HTML documents. Always check the very first line of the raw HTML source (view-source: or DevTools > Network > Response). In SSR frameworks, check the root HTML template (e.g., _document.tsx in Next.js, index.html in Vite/Vue, application.html.erb in Rails). The doctype is not a tag — it is a declaration and does not need a closing tag.
What it loads into context
Frontmatter
141 tokensAlways available to the agent
SKILL.md
739 tokensWhen the skill is activated
Reference documents
755 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,334 bytesSKILL.mdcore3,334 bytesSKILL.mdcore3,334 bytesreferences/rule.mddoc3,204 bytes
Read SKILL.md
# Use the HTML5 doctype
Without the HTML5 doctype, browsers fall back to Quirks Mode, which emulates the rendering behavior of pre-standards browsers from the late 1990s. In Quirks Mode, the CSS box model changes (padding adds to element width), vertical centering breaks, and many modern HTML5 APIs may behave unexpectedly. This causes cross-browser rendering inconsistencies that are difficult to debug and may produce inaccessible layouts.
## Quick Reference
- Every HTML document must begin with `<!DOCTYPE html>` as its very first line
- Without a doctype, browsers enter Quirks Mode — a legacy compatibility mode with inconsistent CSS and JavaScript behavior
- The HTML5 doctype is case-insensitive but `<!DOCTYPE html>` (uppercase DOCTYPE) is the conventional form
- No other content, not even whitespace or BOM characters, should appear before the doctype
- Frameworks like Next.js, Nuxt, and Remix automatically include the doctype — verify in rendered HTML, not source templates
## Check
dom-performance
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Minimize costly DOM read/write operations. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug. In React, repeated requestAnimationFrame-driven state updates across multiple mounted components are a valid performance smell when visible in the source.
What it loads into context
Frontmatter
121 tokensAlways available to the agent
SKILL.md
496 tokensWhen the skill is activated
Reference documents
1,071 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,517 bytesSKILL.mdcore2,517 bytesreferences/rule.mddoc4,703 bytes
Read SKILL.md
# Minimize costly DOM read/write operations
Every time you read a layout property after making a DOM change, the browser must synchronously recalculate layout (reflow) before returning the value. Doing this in a loop — even with just 10 elements — can freeze the page for hundreds of milliseconds. This is called layout thrashing and is one of the most common causes of janky animations and slow renders.
## Quick Reference
- Never interleave DOM reads (offsetHeight, getBoundingClientRect) with DOM writes (style changes)
- Batch all reads first, then all writes
- Use requestAnimationFrame for visual updates
- Use DocumentFragment or innerHTML for bulk DOM insertion
- Avoid per-frame React state updates across many visible components when a simpler CSS or reduced-frequency approach would work
- Use passive listeners for scroll, touch, and wheel when you do not call preventDefault
## Checkdom-size
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Reduce DOM size and complexity. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
316 tokensWhen the skill is activated
Reference documents
1,028 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,560 bytesreferences/rule.mddoc4,755 bytes
Read SKILL.md
# Reduce DOM size and complexity
An excessive DOM size increases memory usage, slows down style calculations, and makes layout reflows more expensive, leading to poor interaction performance.
## Quick Reference
- Keep total DOM nodes below 1,500
- Avoid deep nesting (maximum depth < 32)
- Use virtualization for long lists of elements
## Check
Check the total number of DOM nodes and the maximum DOM depth using Lighthouse or Chrome DevTools.
draggable-accessibility
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Make drag and drop accessible. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
329 tokensWhen the skill is activated
Reference documents
2,743 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,695 bytesSKILL.mdcore1,695 bytesreferences/rule.mddoc10,752 bytes
Read SKILL.md
# Make drag and drop accessible
Drag and drop is mouse-dependent by default—keyboard and screen reader users are completely locked out without proper alternatives and ARIA announcements.
## Quick Reference
- Always provide keyboard alternatives to drag and drop
- Use aria-grabbed and aria-dropeffect (or newer attributes)
- Announce drag operations to screen readers via live regions
- Support both mouse/touch and keyboard interaction patterns
## Check
Verify drag and drop interfaces have keyboard alternatives, proper ARIA attributes, and live region announcements.duplicate-description
When your agent uses it
Use when auditing a site's meta tag uniqueness, generating page-specific meta descriptions, or reviewing CMS templates that inject the same description globally.
What it loads into context
Frontmatter
82 tokensAlways available to the agent
SKILL.md
551 tokensWhen the skill is activated
Reference documents
871 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,784 bytesreferences/rule.mddoc4,291 bytes
Read SKILL.md
# Avoid duplicate meta descriptions
When multiple pages share the same meta description, Google ignores them and generates its own snippet, often pulling unrelated text. Unique descriptions improve click-through rates from search results and help users quickly understand what a page offers.
## Quick Reference
- Each page must have a unique `<meta name="description">` — never reuse the same text across multiple pages
- Google may auto-generate snippets when descriptions are duplicated or missing, often producing worse results
- Target 50–160 characters; craft descriptions that describe the specific page, not the site
## Check
Scan the HTML of every page for `<meta name="description" content="...">`. Identify any description value that appears on more than one URL. Flag pages using the same description as another page, and flag pages where the description matches the site tagline or homepage description.
duplicate-id-active
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for active elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
336 tokensWhen the skill is activated
Reference documents
603 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,760 bytesreferences/rule.mddoc2,988 bytes
Read SKILL.md
# Use unique IDs for active elements
Duplicate IDs on active elements can cause browsers and assistive technologies to skip items, misdirect focus, or fail to trigger the correct action.
## Quick Reference
- Ensure all focusable elements (links, buttons, inputs) have unique id values
- Avoid duplicate IDs that can break keyboard navigation and focus management
- Prevent screen reader confusion when navigating interactive controls
## Check
Search for duplicate id attributes on focusable or active HTML elements.
duplicate-id-aria
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use unique IDs for ARIA references. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
106 tokensAlways available to the agent
SKILL.md
348 tokensWhen the skill is activated
Reference documents
641 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,802 bytesreferences/rule.mddoc3,073 bytes
Read SKILL.md
# Use unique IDs for ARIA references
When ARIA attributes point to duplicate IDs, assistive technologies may read the wrong label or description, providing misleading information to the user.
## Quick Reference
- Ensure IDs referenced by ARIA attributes (e.g., aria-labelledby) are unique
- Avoid duplicate IDs that lead to ambiguous accessibility relationships
- Verify that ARIA controls correctly target their intended elements
## Check
Identify elements where an ARIA attribute references an id that appears multiple times in the DOM.
duplicate-js
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Remove duplicate JavaScript libraries. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
321 tokensWhen the skill is activated
Reference documents
828 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,692 bytesreferences/rule.mddoc3,875 bytes
Read SKILL.md
# Remove duplicate JavaScript libraries
Duplicate libraries increase bundle size and memory usage, and can lead to unexpected behavior or conflicts between different versions of the same code.
## Quick Reference
- Detect and remove multiple versions of the same library
- Use a single version across the entire application
- Audit third-party scripts for bundled dependencies
## Check
Identify duplicate JavaScript libraries or multiple versions of the same library being loaded using Lighthouse or bundle analysis tools.
e2e-testing
When your agent uses it
Use when reviewing CI coverage, automated checks, or test strategy related to Implement end-to-end testing. Focus on whether the rule is continuously verified, not just documented.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
324 tokensWhen the skill is activated
Reference documents
1,162 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,591 bytesreferences/rule.mddoc5,112 bytes
Read SKILL.md
# Implement end-to-end testing
E2E tests catch integration issues that unit tests miss—verifying your application works correctly from the user's perspective across all components.
## Quick Reference
- Test critical user journeys: authentication, checkout, core business flows
- Use data-testid attributes for stable, maintainable selectors
- Implement Page Object Model for reusable test components
- Run E2E tests in CI/CD with artifact uploads on failure
## Check
Review this project for E2E test coverage of critical user journeys like authentication, checkout, and form submissions.editorial-policy
When your agent uses it
Use when auditing a blog, news site, or YMYL content site for trust signals, drafting editorial policy page content, or evaluating whether a site meets Google's quality rater trustworthiness criteria.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
616 tokensWhen the skill is activated
Reference documents
1,073 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,057 bytesreferences/rule.mddoc4,911 bytes
Read SKILL.md
# Publish an editorial policy page
Google's E-E-A-T framework rates sites on Expertise, Authoritativeness, and Trustworthiness. Quality raters look for editorial standards pages as evidence of a trustworthy publication. Sites without visible editorial policies — especially YMYL sites — receive lower trust ratings, which suppresses search rankings.
## Quick Reference
- Publish a dedicated editorial policy page explaining how content is researched, written, reviewed, and updated
- Link to the editorial policy from your About page and from individual articles (byline or footer)
- Include information on author qualifications, fact-checking processes, and correction policies
## Check
Check if the site has a publicly accessible editorial policy page (commonly at /editorial-policy, /about/editorial-standards, or linked from the About page). Verify it covers: (1) how topics are chosen, (2) author qualifications, (3) fact-checking or review process, (4) how corrections are handled, and (5) conflicts of interest or funding disclosures.
element-hiding
When your agent uses it
Use when reviewing a website for layout and functionality issues caused by adblocker filter rules targeting common ad-related class names and IDs.
What it loads into context
Frontmatter
83 tokensAlways available to the agent
SKILL.md
511 tokensWhen the skill is activated
Reference documents
1,266 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,387 bytesSKILL.mdcore2,387 bytesreferences/rule.mddoc5,779 bytes
Read SKILL.md
# Adblock Element Hiding
If your cookie consent banner has class `.cookie-banner` or ID `#consent-popup`, adblockers may hide it — users never see the consent notice, which can cause GDPR compliance issues and broken UX for ~30-40% of desktop users.
## Quick Reference
- Adblockers use EasyList filter rules to hide elements with class names, IDs, or patterns associated with ads
- Common blocked names: `.ad`, `.ads`, `.advertisement`, `.banner`, `#ad`, `#ads`, `#banner`, `.sponsor`
- Affected elements: legitimate banners, notification bars, promotional sections, and cookie consent notices
- Test your site with uBlock Origin enabled — check for missing content, broken layouts, or hidden consent banners
- Rename affected elements using semantic, content-specific class names to avoid false-positive blocking
## Check
embedded-or-inline-css
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Avoid embedded and inline CSS. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
345 tokensWhen the skill is activated
Reference documents
4,500 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,737 bytesreferences/rule.mddoc16,430 bytes
Read SKILL.md
# Avoid embedded and inline CSS
Inline CSS cannot be cached separately, increases HTML payload, breaks separation of concerns, and is harder to maintain in large codebases.
## Quick Reference
- Move inline styles to external CSS files or CSS-in-JS
- Exception: critical CSS should be inlined for performance
- Exception: dynamic values (CSS custom properties) can be inline
- Inline CSS breaks caching and increases HTML size
## Check
Verify that inline CSS and embedded styles are avoided except for valid use cases like critical CSS, dynamic styles, or performance optimization.empty-heading
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure headings contain text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
331 tokensWhen the skill is activated
Reference documents
609 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,701 bytesreferences/rule.mddoc2,869 bytes
Read SKILL.md
# Ensure headings contain text
Empty headings create 'ghost' stops in the document outline, confusing users who rely on headings to navigate and understand the page structure.
## Quick Reference
- Add visible, descriptive text to all heading elements (h1-h6)
- Avoid using headings solely for styling or as empty placeholders
- Ensure document structure is meaningful for screen reader navigation
## Check
Find any heading tags (h1 through h6) that are empty or contain only non-perceivable whitespace.
empty-links
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Fix empty and broken links. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
401 tokensWhen the skill is activated
Reference documents
872 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,035 bytesreferences/rule.mddoc3,545 bytes
Read SKILL.md
# Fix empty and broken links
Screen readers announce empty links as just 'link' with no context—users have no idea where they lead or what they do, making navigation impossible.
## Quick Reference
- Every link must have accessible text (visible or via aria-label)
- Icon-only links need aria-label describing the destination
- Empty anchor tags are completely inaccessible—always add content
- Use visually-hidden text when visual labels aren't desired
## Check
Scan for links with no text content (empty anchor tags, icon-only links without labels). Verify all links have accessible names via text content, aria-label, or aria-labelledby. Check for broken link destinations.error-handling
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Implement proper error handling. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
323 tokensWhen the skill is activated
Reference documents
1,022 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,664 bytesSKILL.mdcore1,664 bytesreferences/rule.mddoc4,505 bytes
Read SKILL.md
# Implement proper error handling
Unhandled errors crash applications, create poor user experiences, and make debugging impossible without proper context.
## Quick Reference
- Wrap async operations in try-catch blocks
- Use Error Boundaries in React for UI-level error handling
- Log errors with context for debugging
- Always re-throw or handle—never silently swallow errors
## Check
Review error handling in this code, ensuring async operations use try-catch and errors are properly logged.error-images
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Handle image loading errors gracefully. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
305 tokensWhen the skill is activated
Reference documents
1,142 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,583 bytesreferences/rule.mddoc4,411 bytes
Read SKILL.md
# Handle image loading errors gracefully
Broken image icons look unprofessional and confuse users—graceful fallbacks maintain visual consistency and user trust when images fail to load.
## Quick Reference
- Use onerror to replace broken images with fallbacks
- Provide meaningful placeholder content, not broken image icons
- Consider skeleton loaders while images load
- Log image errors for monitoring and debugging
## Check
Check if the website handles broken images gracefully with fallback images or error states.error-monitoring
When your agent uses it
Use when setting up a new project's production observability stack, reviewing incident response readiness, or investigating why errors are going undetected.
What it loads into context
Frontmatter
82 tokensAlways available to the agent
SKILL.md
426 tokensWhen the skill is activated
Reference documents
1,835 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,226 bytesreferences/rule.mddoc8,126 bytes
Read SKILL.md
# Integrate real-time error monitoring in production
Production errors are invisible without monitoring. Users rarely file detailed bug reports — they simply leave. Error monitoring gives you actionable stack traces, breadcrumbs, and user context within seconds of an issue occurring, cutting mean time to detect (MTTD) from days to minutes and dramatically reducing the cost of incidents.
## Quick Reference
- Install an error monitoring SDK (Sentry, Datadog, Bugsnag, etc.) early in the app entry point
- Capture unhandled exceptions, unhandled promise rejections, and React error boundaries
- Attach user context, release version, and environment to every event
- Configure alert thresholds and on-call routing so critical errors page the right team
- Capture failed network requests and production RUM signals such as Core Web Vitals
## Check
es-modules
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export). Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
394 tokensWhen the skill is activated
Reference documents
655 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,928 bytesSKILL.mdcore1,928 bytesreferences/rule.mddoc3,124 bytes
Read SKILL.md
# Use ES modules (import/export)
ES modules are statically analyzable — bundlers can determine at build time what code is actually used and eliminate the rest (tree-shaking). CommonJS require() is dynamic and prevents this optimization. ES modules are also the browser-native standard, reducing the need for build-time transformation.
## Quick Reference
- Use import/export syntax instead of require()/module.exports
- Named exports improve IDE autocompletion and enable tree-shaking
- Add type="module" to script tags or use a bundler to load ES modules in browsers
- Default exports are fine but named exports scale better in large codebases
## Check
Identify any use of require(), module.exports, or exports in this JavaScript file that should be converted to ES module syntax.event-delegation
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Use event delegation for dynamic content. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
382 tokensWhen the skill is activated
Reference documents
846 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,001 bytesSKILL.mdcore2,001 bytesreferences/rule.mddoc3,798 bytes
Read SKILL.md
# Use event delegation for dynamic content
Adding hundreds of individual event listeners for list items or table rows consumes significant memory and creates performance overhead. Dynamic content (items loaded via AJAX or rendered after user actions) won't have event listeners unless you re-attach them after each update — event delegation solves both problems at once.
## Quick Reference
- Attach one listener to a parent instead of many to individual children
- Use event.target.closest() to identify the intended target element
- Event delegation automatically works for elements added dynamically
- Clean up listeners on the parent when the container is removed
## Check
Find any code in this file that attaches the same event handler to multiple elements in a loop. Suggest event delegation as an alternative.external-links
When your agent uses it
Use when auditing content pages for citation quality, suggesting authoritative sources to link for factual claims, or reviewing whether a page's external link attributes (nofollow, noopener) are correctly set.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
639 tokensWhen the skill is activated
Reference documents
803 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,096 bytesSKILL.mdcore3,096 bytesreferences/rule.mddoc3,781 bytes
Read SKILL.md
# Add relevant external links
Outbound links to authoritative sources strengthen the credibility of your content and are considered a positive trust signal by Google. Pages that cite their sources rank better for informational queries than those that make unsupported claims.
## Quick Reference
- Link out to authoritative sources that support your claims — this demonstrates E-E-A-T and improves credibility
- External links to reputable sites do not hurt your SEO; Google treats them as a trust signal
- Use `rel="noopener noreferrer"` on external links; add `rel="nofollow"` only for untrusted or paid links
## Check
For each content page, count the number of external `<a href>` links pointing to domains other than the current site. Check: (1) Are factual claims backed by links to authoritative sources (government sites, peer-reviewed research, official documentation)? (2) Do all external links have `rel="noopener noreferrer"` for security? (3) Are paid or sponsored links marked with `rel="sponsored"` or `rel="nofollow"`?
faq
When your agent uses it
Use when adding FAQ sections to landing pages or blog posts, generating FAQPage JSON-LD from existing Q&A content, or validating that structured data on pages with FAQ sections is syntactically and semantically correct.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
725 tokensWhen the skill is activated
Reference documents
1,050 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,095 bytesreferences/rule.mddoc4,655 bytes
Read SKILL.md
# Add FAQPage schema markup
Valid FAQPage structured data can generate rich results in Google Search, displaying expandable question-and-answer pairs directly in the SERP. This increases click-through rate and SERP real estate without requiring a higher ranking position.
## Quick Reference
- Add `FAQPage` JSON-LD with `mainEntity` question/answer pairs to pages that contain FAQ sections
- Each `Question` must include `acceptedAnswer` with an `Answer` type containing the `text` property
- Only use FAQPage schema when the page actually contains FAQ-style question-and-answer content visible to users
## Check
Check pages that contain FAQ or Q&A sections. For each: (1) Is there a `<script type="application/ld+json">` block with `"@type": "FAQPage"`? (2) Does it include a `mainEntity` array of `Question` objects? (3) Does each `Question` have a `name` (the question text) and an `acceptedAnswer` with `"@type": "Answer"` and a `text` property? (4) Does the schema content match what is visible on the page?
favicon
When your agent uses it
Use when checking whether a site has a correctly configured favicon, auditing `<link rel='icon'>` tags in the `<head>`, or setting up favicon infrastructure for a new project.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
691 tokensWhen the skill is activated
Reference documents
824 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,932 bytesreferences/rule.mddoc3,631 bytes
Read SKILL.md
# Add a favicon to every page
Google displays favicons next to search results on mobile devices, making your brand immediately recognisable in the SERP. A missing or inaccessible favicon prevents Google from showing it, reducing visual brand presence in search.
## Quick Reference
- Provide a `<link rel="icon">` pointing to a favicon file; Google uses it to identify your site in search results
- Serve the favicon via HTTPS, ensure it is publicly accessible (not blocked by robots.txt), and at least 48×48px for Google's use
- Include both an ICO fallback and SVG/PNG versions for broad browser and device compatibility
## Check
In the page `<head>`, look for `<link rel="icon">` or `<link rel="shortcut icon">` elements. Verify: (1) The href points to an accessible URL (returns 200, not blocked by robots.txt). (2) The file is at least 48×48px (for Google Search use). (3) A PNG or SVG version is provided alongside the ICO fallback. (4) The favicon is accessible over HTTPS.
favicons
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Implement favicons for all devices. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
345 tokensWhen the skill is activated
Reference documents
5,569 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,705 bytesSKILL.mdcore1,705 bytesreferences/rule.mddoc21,548 bytes
Read SKILL.md
# Implement favicons for all devices
Missing or low-quality favicons make sites look unprofessional in browser tabs, bookmarks, and home screens—damaging brand recognition and user trust.
## Quick Reference
- Minimum: favicon.ico (32x32) + apple-touch-icon.png (180x180)
- Modern: SVG favicon with dark mode support
- PWA: Include in manifest.json with multiple sizes
- Use RealFaviconGenerator or favicons npm package
## Check
Verify that all necessary favicon formats and sizes are implemented correctly for optimal display across different browsers, devices, and platforms.fetchpriority-attribute
When your agent uses it
Use when optimising Largest Contentful Paint (LCP), reducing render-blocking resource contention, or fine-tuning resource loading order in the critical rendering path.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
452 tokensWhen the skill is activated
Reference documents
1,410 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,143 bytesreferences/rule.mddoc6,112 bytes
Read SKILL.md
# Use fetchpriority to hint resource loading priority
Browsers use internal heuristics to guess resource priority, but they cannot know which image is your LCP candidate. Adding fetchpriority="high" to the LCP image has been shown to reduce LCP by 5–30 % in real-world tests, directly improving Core Web Vitals scores and user-perceived load speed. The attribute costs nothing to add and is the lowest-effort high-impact performance optimisation available today.
## Quick Reference
- Add fetchpriority="high" to the LCP image to accelerate Largest Contentful Paint
- Add fetchpriority="low" to below-the-fold images that would otherwise compete with critical resources
- Use fetchpriority="high" on <link rel="preload"> for critical fonts and CSS
- Avoid marking more than one or two resources as high priority — it defeats the purpose
## Check
Check whether the LCP image or hero element has fetchpriority="high" and whether any high-priority preload links are missing the attribute.figure-figcaption
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image captions. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
104 tokensAlways available to the agent
SKILL.md
730 tokensWhen the skill is activated
Reference documents
1,177 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,270 bytesreferences/rule.mddoc4,980 bytes
Read SKILL.md
# Use <figure> and <figcaption> for image captions
Using a `<p>` tag as a caption is invisible to assistive technology as an image description. The `<figure>`/`<figcaption>` pattern creates a machine-readable relationship between an image and its caption, which screen readers surface to users. It also communicates to search engines that the caption describes the image, supporting image SEO.
## Quick Reference
- Wrap image + visible caption pairs in `<figure>` with `<figcaption>` as a direct child
- `<figcaption>` must be the first or last child of `<figure>`
- Do not duplicate alt text in figcaption—alt is the fallback, figcaption is the visible description
- `<figure>` is appropriate for images, code blocks, diagrams, and charts—not every image
## Check
Scan the codebase for images with adjacent visible text that acts as a caption (e.g., a <p> or <span> immediately below an <img> describing it). Verify: 1) Such image-caption pairs are wrapped in <figure>. 2) The caption text is inside a <figcaption> element. 3) <figcaption> is a direct child of <figure>. 4) The alt text on the <img> is not identical to the <figcaption> text—they serve different purposes. Flag any <img> followed by descriptive text that is not structured as figure/figcaption.file-upload-accessibility
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Make file uploads accessible. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
313 tokensWhen the skill is activated
Reference documents
1,999 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,669 bytesSKILL.mdcore1,669 bytesreferences/rule.mddoc7,627 bytes
Read SKILL.md
# Make file uploads accessible
Unlabeled file inputs and inaccessible drag zones exclude screen reader and keyboard users from completing file upload tasks.
## Quick Reference
- Always associate labels with file inputs
- Clearly communicate accepted file types and size limits
- Provide accessible progress feedback during uploads
- Make drag-and-drop zones keyboard accessible
## Check
Verify file inputs have proper labels, accept attributes for file types, and accessible feedback for upload progress and errors.filename-quality
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Use descriptive image filenames. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
670 tokensWhen the skill is activated
Reference documents
1,282 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,199 bytesreferences/rule.mddoc5,274 bytes
Read SKILL.md
# Use descriptive image filenames
Google explicitly recommends descriptive filenames in its Image SEO best practices. A file named red-leather-wallet.jpg gives search engines context about the image content, improving discoverability in image search. Generic filenames waste this SEO signal. Descriptive names also help developers maintain large asset libraries without opening every file to identify its content.
## Quick Reference
- Use descriptive, hyphen-separated filenames: `hero-homepage-team-collaboration.jpg`
- Avoid generic names like `image1.jpg`, `photo.png`, or camera defaults like `IMG_4532.jpg`
- Use lowercase only—avoid uppercase letters and spaces which can cause URL encoding issues
- Google uses filenames as a relevance signal for image search results
## Check
Scan all image file references in this codebase (<img src>, CSS url(), import statements, and public/assets directories). Identify filenames that: 1) Use auto-generated names (e.g., IMG_1234.jpg, DSC_0056.png, screenshot-2024-01-01.png). 2) Use meaningless names (e.g., image1.jpg, photo.png, pic.jpg). 3) Contain spaces (e.g., 'my photo.jpg'). 4) Use underscores as word separators (e.g., hero_image.jpg instead of hero-image.jpg). 5) Mix uppercase and lowercase letters. Report each problematic filename with its path.find-npm-packages
When your agent uses it
Use when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule, validate they meet quality thresholds, and add them to the rule's frontmatter.
What it loads into context
Frontmatter
83 tokensAlways available to the agent
SKILL.md
942 tokensWhen the skill is activated
Reference documents
0 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- What this skill does
- Quality thresholds (mandatory — do not skip)
- Research steps
- Validation after adding
- Example output
- What NOT to do
Files
SKILL.mdcore3,986 bytesSKILL.mdcore3,986 bytesSKILL.mdcore3,986 bytes
Read SKILL.md
# find-npm-packages
Identify, validate, and add npm package references to a Front-End Checklist rule.
## What this skill does
Given a rule file or rule slug, this skill will:
1. Understand what the rule is checking for
2. Research which npm packages are commonly used to implement, automate, or enforce the rule
3. Validate each candidate against quality thresholds (popularity + maintenance)
4. Select the best 2–3 packages
5. Add them to the rule's `npmPackages` frontmatter field
first-contentful-paint
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize first contentful paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
362 tokensWhen the skill is activated
Reference documents
1,195 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,709 bytesreferences/rule.mddoc4,796 bytes
Read SKILL.md
# Optimize first contentful paint
FCP is the first visual signal that a page is loading—fast FCP reassures users that the site is responding, reducing perceived wait time and bounce rates.
## Quick Reference
- FCP measures time until first text/image appears—target under 1.8s
- Eliminate render-blocking CSS and JavaScript
- Inline critical CSS for above-fold content
- Use preconnect for third-party origins
## Check
Measure FCP using Lighthouse or PageSpeed Insights. Verify first content appears within 1.8 seconds.flashing-content
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Prevent seizure-triggering flashing content. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
418 tokensWhen the skill is activated
Reference documents
1,480 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,122 bytesreferences/rule.mddoc6,122 bytes
Read SKILL.md
# Prevent seizure-triggering flashing content
Flashing content between 3-60 Hz can trigger seizures in people with photosensitive epilepsy—this is a critical safety requirement, not just an accessibility preference.
## Quick Reference
- Never flash content more than 3 times per second (WCAG Level A)
- Flashing area must be smaller than 25% of viewport
- Red flashing is especially dangerous—avoid entirely
- Test GIFs, videos, and CSS animations for rapid flashing
## Check
Verify no content flashes more than 3 times per second, and that any flashing content occupies less than 25% of the viewport. Test animated GIFs, videos, and CSS animations for rapid flashing patterns.flexbox-patterns
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
421 tokensWhen the skill is activated
Reference documents
892 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,916 bytesreferences/rule.mddoc3,503 bytes
Read SKILL.md
# Apply Flexbox best practices
Flexbox is one of the most used CSS features, but its unintuitive default values (flex-shrink:1, min-width:auto) cause layout bugs that are hard to diagnose. Understanding the flex shorthand and the min-width:0 fix prevents the most common Flexbox breakage scenarios.
## Quick Reference
- Flexbox is for one-dimensional layouts (a row OR a column)
- Use flex: 1 1 0 (shorthand: flex:1) for equal-width items that fill space
- Add min-width: 0 to flex children when text overflow truncation doesn't work
- Use gap instead of margin for spacing between flex items
## Check
Review this CSS for common Flexbox mistakes: missing min-width:0 on text-containing flex children, using margin instead of gap for spacing, and improper flex shorthand usage.focus-management
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Manage focus during dynamic interactions. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
348 tokensWhen the skill is activated
Reference documents
962 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,859 bytesreferences/rule.mddoc4,264 bytes
Read SKILL.md
# Manage focus during dynamic interactions
Poor focus management leaves keyboard users stranded—they can't find new content, get trapped in closed modals, or lose their place entirely after interactions.
## Quick Reference
- Move focus to modal when opened, return to trigger when closed
- Focus new content after SPA navigation or dynamic updates
- Use tabindex='-1' to make non-interactive elements focusable
- Never lose focus to an unexpected location
## Check
Verify that focus is properly managed when opening/closing modals, navigating between views, or updating content dynamically.focus-not-obscured
When your agent uses it
Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
403 tokensWhen the skill is activated
Reference documents
756 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,959 bytesreferences/rule.mddoc3,387 bytes
Read SKILL.md
# Keep focused elements unobscured
A visible focus ring is not enough if the focused element sits behind a sticky header or footer. Keyboard users need to see the actual focused control and the focus indicator at the same time in order to continue the task.
## Quick Reference
- Sticky UI must not cover the focused control while keyboard users tab through the page
- Use `scroll-padding` or equivalent spacing when fixed headers or footers are present
- Test with cookie banners, chat widgets, and consent bars open
- Re-test at zoomed and mobile layouts where overlap problems usually appear
## Check
Audit keyboard focus with all sticky UI active. Check headers, footers, cookie banners, promo bars, and chat launchers for cases where the focused element scrolls underneath them.focus-order
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
407 tokensWhen the skill is activated
Reference documents
1,026 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,082 bytesreferences/rule.mddoc4,420 bytes
Read SKILL.md
# Ensure logical focus order
When focus jumps unexpectedly, keyboard users get disoriented and can't find content—mismatched visual and focus order makes navigation impossible.
## Quick Reference
- Tab order should match visual reading order (left-to-right, top-to-bottom)
- DOM order determines tab order—arrange HTML to match visual layout
- Never use positive tabindex values (1, 2, 3)—they break natural flow
- Use CSS for visual positioning, not DOM reordering
## Check
Tab through the page and verify focus moves in a logical sequence matching visual layout. Check that modals trap focus appropriately, and focus returns to triggering elements when dialogs close.focus-styles
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Provide visible custom focus indicators. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
520 tokensWhen the skill is activated
Reference documents
818 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,553 bytesreferences/rule.mddoc3,413 bytes
Read SKILL.md
# Provide visible custom focus indicators
Users who navigate by keyboard (people with motor disabilities, power users, people in assistive technology contexts) rely entirely on focus indicators to know where they are on the page. Removing outlines without replacement makes an entire site unusable for keyboard users. WCAG 2.4.7 requires a visible focus indicator, and WCAG 2.4.13 defines a stronger size-and-contrast target for custom indicators.
## Quick Reference
- Never use outline: none or outline: 0 without a visible :focus-visible replacement
- Use :focus-visible instead of :focus to show indicators only during keyboard navigation
- Focus indicators must have 3:1 contrast ratio against adjacent colors (WCAG 2.2)
- Provide at least 2px solid outline with an offset for a high-quality focus ring
- If a focus ring is drawn with pseudo-elements, verify it is anchored to the correct positioned element and not clipped by `overflow: hidden`
- If the component uses a stretched-link pattern, verify the visible focus ring follows the actual interactive element rather than a parent wrapper by accident
## Checkfont-loading
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize web font loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
332 tokensWhen the skill is activated
Reference documents
874 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,597 bytesreferences/rule.mddoc3,991 bytes
Read SKILL.md
# Optimize web font loading
Slow font loading can cause 'Flash of Invisible Text' (FOIT) or significant layout shifts, negatively impacting both user experience and Core Web Vitals.
## Quick Reference
- Use `font-display: swap` to prevent invisible text during load
- Preload critical fonts to discover them earlier
- Use modern formats like WOFF2 for better compression
## Check
Check font loading strategies and verify that `font-display` is used and critical fonts are preloaded.
font-size
When your agent uses it
Use when applies to all CSS `font-size` declarations, particularly those using `px` units for body text, UI labels, and navigation. Use when auditing mobile responsiveness and accessibility compliance. Check for `font-size` in media queries targeting small screens.
What it loads into context
Frontmatter
105 tokensAlways available to the agent
SKILL.md
877 tokensWhen the skill is activated
Reference documents
698 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,593 bytesreferences/rule.mddoc2,601 bytes
Read SKILL.md
# Use readable font sizes on mobile
Approximately 1 in 3 adults over 65 increases their browser's default font size. Low-vision users who cannot use screen magnifiers rely on browser font size settings as their primary accessibility tool. If font sizes are set in `px` only, browser font size preferences are ignored entirely. Text smaller than 16px on mobile forces all users to zoom in, breaking the page layout and triggering horizontal scroll. iOS Safari's auto-inflation of sub-12px text causes unintended layout shifts.
## Quick Reference
- Body text should be at least 16px (1rem) on mobile — smaller sizes force users to zoom
- Avoid `font-size` values below 12px; iOS Safari ignores values below 12px and auto-inflates them
- Use `rem` or `em` units instead of `px` so text scales with the user's browser font size preference
- Never set `font-size: 100%` on `<html>` using an override that blocks user scaling — respect the browser default (16px)
- WCAG 2.1 SC 1.4.4 (Resize Text, Level AA): text must be resizable up to 200% without loss of content or functionality
## Check
form-captcha
When your agent uses it
Use when reviewing public HTML forms (no authentication required to reach them) for bot and abuse protection mechanisms.
What it loads into context
Frontmatter
77 tokensAlways available to the agent
SKILL.md
475 tokensWhen the skill is activated
Reference documents
1,605 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,406 bytesreferences/rule.mddoc6,954 bytes
Read SKILL.md
# Protect public forms with CAPTCHA
An unprotected registration form can create thousands of spam accounts per minute; an unprotected login form enables credential stuffing attacks that test millions of username/password combinations from data breaches.
## Quick Reference
- Public forms (contact, registration, login, password reset, comment) without CAPTCHA are targets for automated abuse
- Prefer invisible/automated solutions (Cloudflare Turnstile, Google reCAPTCHA v3, hCaptcha) over interactive challenges that harm UX
- Always validate CAPTCHA tokens server-side — client-side validation is bypassable
- Rate limiting is complementary to CAPTCHA but not a substitute — bots can solve rate limits with distributed attacks
- Honeypot fields (hidden inputs that users never fill but bots do) are a lightweight CAPTCHA alternative for low-risk forms
## Check
form-field-multiple-labels
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use a single label for each form field. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
110 tokensAlways available to the agent
SKILL.md
358 tokensWhen the skill is activated
Reference documents
625 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,799 bytesreferences/rule.mddoc2,966 bytes
Read SKILL.md
# Use a single label for each form field
Multiple labels for a single field can cause screen readers to announce redundant information or fail to correctly associate the input with its purpose.
## Quick Reference
- Associate each form input with exactly one <label> element
- Use aria-labelledby if multiple pieces of text must label a single field
- Avoid duplicate labels that can confuse screen readers and voice control
## Check
Search for form inputs that are associated with more than one <label> element.
form-https
When your agent uses it
Use when reviewing HTML forms, fetch/XHR calls, and form action attributes to ensure data is submitted exclusively over HTTPS.
What it loads into context
Frontmatter
80 tokensAlways available to the agent
SKILL.md
464 tokensWhen the skill is activated
Reference documents
1,085 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,213 bytesreferences/rule.mddoc4,788 bytes
Read SKILL.md
# Submit forms over HTTPS
A login form that posts credentials to an HTTP endpoint sends usernames and passwords as plain text over the network — anyone on the same Wi-Fi, the ISP, or a network proxy can read them without any special tools.
## Quick Reference
- Every `<form action>` URL must use `https://` — never `http://`
- Forms without an explicit `action` attribute submit to the current page URL — ensure the page itself is on HTTPS
- Check `fetch()` and `XMLHttpRequest` calls in JavaScript — data posted to `http://` endpoints is unencrypted
- Browsers show a 'Not Secure' warning in the address bar when a form is on an HTTP page
- From Chrome 86+, autofill is disabled on HTTP forms to protect credentials
## Check
form-labels
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with form controls. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
452 tokensWhen the skill is activated
Reference documents
761 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,259 bytesreferences/rule.mddoc3,585 bytes
Read SKILL.md
# Associate labels with form controls
Properly associated labels ensure that screen readers can identify the purpose of form inputs and increase the clickable area for users with motor impairments.
## Quick Reference
- Use `<label>` elements for all form inputs
- Connect labels using `for` and `id` attributes
- Placeholder text is not a label and must not be the only field name
- Use `<fieldset>` and `<legend>` when multiple controls share one question
- Ensure every input has a clear, accessible name
## Check
form-validation
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Validate forms accessibly. Validate the final browser-facing markup, not just the source framework abstraction. Distinguish between browser-posted forms and client-handled React forms so you do not over-report missing `method` or `action` as accessibility defects.
What it loads into context
Frontmatter
118 tokensAlways available to the agent
SKILL.md
481 tokensWhen the skill is activated
Reference documents
2,429 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,529 bytesSKILL.mdcore2,529 bytesreferences/rule.mddoc9,214 bytes
Read SKILL.md
# Validate forms accessibly
Inaccessible form validation leaves screen reader users unable to understand what went wrong and how to fix it, causing frustration and form abandonment.
## Quick Reference
- Associate error messages with fields using aria-describedby
- Use aria-invalid to indicate validation state
- Mark required fields programmatically with `required` or `aria-required`
- Provide inline error messages near the field
- Don't rely solely on color to indicate errors
- Keep help text and error text linked to the field throughout validation
## Checkframe-title
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide titles for iframes and frames. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
102 tokensAlways available to the agent
SKILL.md
346 tokensWhen the skill is activated
Reference documents
649 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,749 bytesreferences/rule.mddoc3,134 bytes
Read SKILL.md
# Provide titles for iframes and frames
Frame titles allow users of assistive technology to quickly understand the content of an iframe without having to navigate into it, which is crucial for navigation and orientation.
## Quick Reference
- Add a descriptive `title` attribute to every `<iframe>`
- Ensure titles clearly describe the frame's content
- Helps screen reader users navigate between frames
## Check
Verify that all <iframe> and <frame> elements have a non-empty 'title' attribute.
freshness
When your agent uses it
Use when auditing content pages for freshness signals, setting up HTTP Last-Modified headers in a web server config, or ensuring Article JSON-LD dateModified is updated when CMS content changes.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
668 tokensWhen the skill is activated
Reference documents
1,048 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,969 bytesreferences/rule.mddoc4,567 bytes
Read SKILL.md
# Show content freshness signals
Google's Query Deserves Freshness (QDF) algorithm boosts recent or recently updated content for time-sensitive queries. Missing or stale freshness signals mean your updated content competes without the freshness advantage it deserves.
## Quick Reference
- Set the `Last-Modified` HTTP response header and include `dateModified` in Article JSON-LD on all content pages
- Update `dateModified` only when content substantively changes — trivial edits should not alter the date
- For time-sensitive topics (news, tutorials, product reviews), freshness directly influences Google's ranking of your content
## Check
For each article or blog page: (1) Check the HTTP response `Last-Modified` header — is it set and recent? (2) Check the JSON-LD for a `dateModified` property in ISO 8601 format. (3) Is a visible 'Last updated' date shown to users? (4) Is the `dateModified` in JSON-LD consistent with the visible date and the `Last-Modified` header?
frontend-checklist-global
When your agent uses it
Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.
What it loads into context
Frontmatter
75 tokensAlways available to the agent
SKILL.md
2,652 tokensWhen the skill is activated
Reference documents
1,884 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Workflow
- Audit Stance
- Coverage Checklist
- Rule-Derived Highlights
- Known Safe Patterns
- Conflict Resolution
- Coverage
- Evaluation Standard
Files
SKILL.mdcore12,706 bytesreferences/categories.mddoc8,606 bytes
Read SKILL.md
# Front-End Checklist Global Audit
This skill connects one entry point to all 386 Front-End Checklist rules.
Use MCP retrieval instead of trying to recall rules from memory.
## Workflow
1. Start with `review_code` for pasted code, file contents, or focused code review.
2. Use `audit_url` for a public page when you need rendered HTML audited quickly.
3. Narrow or expand scope with `search_rules`, `list_categories`, `get_workflow`, or `get_quick_reference`.
4. For each issue, use `get_rule`, `fix_rule`, or `explain_rule` to give exact remediation.
5. If a checklist is a better fit than ad hoc search, use `get_checklist_rules`.
## Audit Stancegeo-meta
When your agent uses it
Use when auditing locally-focused or regionally-targeted pages for geo targeting signals, particularly on sites targeting audiences through Bing or regional search engines. Note that these meta tags have no documented effect on Google's ranking.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
733 tokensWhen the skill is activated
Reference documents
1,101 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,049 bytesreferences/rule.mddoc4,968 bytes
Read SKILL.md
# Geo Meta Tags
While Google does not officially support geo meta tags, Bing and other search engines may use them for geographic targeting. For sites with clear regional focus, they provide a low-effort supplementary signal alongside the primary approaches (hreflang, LocalBusiness schema, NAP consistency).
## Quick Reference
- Geo meta tags (`geo.region`, `geo.placename`, `geo.position`) are not used by Google, but may be read by Bing and minor engines
- Prefer hreflang for multi-region/language targeting and LocalBusiness JSON-LD for local business signals
- Include geo meta tags only as a supplementary signal alongside, not instead of, structured data and hreflang
## Check
In the page `<head>`, check for `<meta name="geo.region">`, `<meta name="geo.placename">`, and `<meta name="geo.position">` tags. Verify: (1) `geo.region` uses a valid ISO 3166-1/3166-2 code (e.g., `US-CA` for California, `GB-ENG` for England). (2) `geo.position` uses latitude;longitude format (e.g., `37.7749;-122.4194`). (3) ICBM meta tag matches geo.position if present.
gtm-present
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize Google Tag Manager implementation. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
330 tokensWhen the skill is activated
Reference documents
963 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,636 bytesreferences/rule.mddoc4,280 bytes
Read SKILL.md
# Optimize Google Tag Manager implementation
An unoptimized GTM setup can lead to significant main-thread blocking and increased page weight, slowing down the overall user experience.
## Quick Reference
- Place the GTM script in the `<head>` but audit its impact
- Minimize the number of tags and triggers to reduce execution
- Use Server-Side GTM to offload processing from the client
## Check
Verify that GTM is implemented correctly and evaluate its impact on page performance using Lighthouse.
h1
When your agent uses it
Use when auditing a page's heading structure, generating H1 text for landing pages or blog posts, or reviewing a CMS template that may produce empty or missing H1 elements.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
701 tokensWhen the skill is activated
Reference documents
1,062 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,939 bytesreferences/rule.mddoc4,628 bytes
Read SKILL.md
# Use a single descriptive H1
The H1 is the most prominent heading on a page and a strong on-page ranking signal. Google uses it to understand the page's primary topic. Missing, duplicate, or keyword-free H1 tags reduce topical clarity, hurting rankings for the page's target terms.
## Quick Reference
- Each page should have exactly one `<h1>` tag that describes the page's primary topic with relevant keywords
- The H1 does not need to be identical to the `<title>` tag, but they should be topically consistent
- Empty `<h1>` tags, multiple `<h1>` tags on one page, or H1s containing only the brand name are all issues to fix
## Check
Parse the rendered DOM of each page. Count all `<h1>` elements. Flag: (1) Pages with zero `<h1>` tags. (2) Pages with more than one `<h1>` tag. (3) `<h1>` elements whose text content is empty or contains only whitespace. (4) `<h1>` elements that contain only the brand name with no page-specific topic. (5) `<h1>` text that does not reflect the page's primary content topic.
has-selector
When your agent uses it
Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child state, form input values, or content presence — :has() may replace the JavaScript entirely.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
459 tokensWhen the skill is activated
Reference documents
1,434 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,194 bytesreferences/rule.mddoc5,877 bytes
Read SKILL.md
# Use :has() to style parent elements based on their descendants
Before :has(), styling a parent based on its children required JavaScript: detecting state, toggling classes, and keeping DOM and styles in sync. This created coupling between styling logic and application logic. :has() moves that relationship back into CSS where it belongs, reducing JavaScript complexity, eliminating class-toggling boilerplate, and making styling intent readable in the stylesheet itself.
## Quick Reference
- :has() selects an element when a matching descendant exists inside it
- It is the parent selector CSS has needed for decades
- Baseline support since late 2023 — all major browsers include it
- Avoid complex :has() selectors in hot reflow paths — they can affect layout performance
## Check
Look for patterns in this code where JavaScript toggles a class on a parent element based on the state or content of a child element. These are candidates for replacement with :has().heading-hierarchy
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use logical heading hierarchy. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
414 tokensWhen the skill is activated
Reference documents
873 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,078 bytesreferences/rule.mddoc3,609 bytes
Read SKILL.md
# Use logical heading hierarchy
Screen reader users navigate by headings like a table of contents—skipping levels or poor hierarchy makes content impossible to understand and navigate.
## Quick Reference
- Use exactly one h1 per page for the main title
- Never skip heading levels (h1 → h2 → h3, not h1 → h3)
- Heading text should describe the content that follows
- Don't use headings for visual styling—use CSS instead
## Check
Verify pages have exactly one h1, headings follow sequential order without skipping levels (h1 → h2 → h3), and heading text clearly describes the content that follows. Use accessibility tools to generate a heading outline.heading-order
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Maintain logical heading order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
377 tokensWhen the skill is activated
Reference documents
598 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,807 bytesreferences/rule.mddoc2,781 bytes
Read SKILL.md
# Maintain logical heading order
A logical heading structure allows screen reader users to navigate the page content efficiently and helps all users understand the relationship between different sections.
## Quick Reference
- Use heading levels (`<h1>`-`<h6>`) in sequential order
- Do not skip heading levels (e.g., `<h1>` followed by `<h3>`)
- Ensure the document structure is logical and hierarchical
## Check
Check the heading structure of the page to ensure that heading levels are not skipped (e.g., check that an <h2> follows an <h1>).
horizontal-scroll
When your agent uses it
Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties. Use when auditing responsive design or WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.
What it loads into context
Frontmatter
123 tokensAlways available to the agent
SKILL.md
885 tokensWhen the skill is activated
Reference documents
601 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,631 bytesreferences/rule.mddoc2,625 bytes
Read SKILL.md
# Prevent horizontal scrolling
Low-vision users who cannot read at standard zoom levels increase browser zoom to 200–400%. At these zoom levels, a 1280px-wide page becomes effectively 320px wide. If elements overflow the viewport, users must scroll both vertically and horizontally to read content — this is exhausting and error-prone with a screen magnifier. WCAG 2.1 SC 1.4.10 (Reflow) specifically addresses this, requiring that all content is available without two-dimensional scrolling at 400% zoom.
## Quick Reference
- Pages must not produce horizontal scrollbars at viewport widths of 320px and above — WCAG 2.1 SC 1.4.10 (Reflow)
- WCAG 2.1 SC 1.4.10 requires content to reflow at 400% zoom (equivalent to 320px CSS width) without horizontal scroll
- Common causes: fixed-width elements wider than the viewport, `width: 100vw` not accounting for scrollbar width, long unbreakable strings, `white-space: nowrap`
- Use `max-width: 100%` on images and media, `overflow-wrap: break-word` on text containers, and fluid layout units
## Check
Test the page at a 320px CSS viewport width (equivalent to 400% browser zoom on a 1280px screen). Look for horizontal scrollbars or content overflowing outside the viewport. Specifically check: (1) elements with fixed `width` values in px that exceed the viewport; (2) `min-width` values that prevent shrinking; (3) images or media without `max-width: 100%`; (4) `white-space: nowrap` on text that causes overflow; (5) `width: 100vw` on elements (scrollbar width causes overflow); (6) long URLs or unbreakable strings in content areas.hreflang
When your agent uses it
Use when auditing metadata, crawlability, structured data, or indexability related to Add hreflang tags for multilingual sites. Verify the rendered HTML and HTTP response rather than relying only on source files.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
360 tokensWhen the skill is activated
Reference documents
1,344 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,721 bytesSKILL.mdcore1,721 bytesreferences/rule.mddoc5,085 bytes
Read SKILL.md
# Add hreflang tags for multilingual sites
Without hreflang, users searching in French might see your English page—proper implementation ensures the right language version appears in search results for each region.
## Quick Reference
- hreflang tells search engines which language version to show users
- Always include x-default for fallback/language selector pages
- Must be reciprocal—all pages must link to all variations
- Use ISO 639-1 language codes and ISO 3166-1 Alpha-2 regions
## Check
Check if this multilingual website properly implements hreflang tags for language and regional targeting.hsts
When your agent uses it
Use when reviewing HTTP response headers on any site that serves content over HTTPS.
What it loads into context
Frontmatter
69 tokensAlways available to the agent
SKILL.md
432 tokensWhen the skill is activated
Reference documents
1,254 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,986 bytesreferences/rule.mddoc5,534 bytes
Read SKILL.md
# Set an HSTS header
Without HSTS, an attacker on the same network can intercept the first HTTP request and strip TLS (SSL stripping), silently downgrading the connection before the browser ever sees a redirect.
## Quick Reference
- Set `Strict-Transport-Security: max-age=31536000; includeSubDomains` on all HTTPS responses
- Use `max-age=31536000` (1 year) minimum; HSTS preloading requires at least 1 year
- Add `includeSubDomains` to protect all subdomains from downgrade attacks
- Add `preload` only after testing — it is difficult to reverse and takes weeks to propagate
- Never send the HSTS header over plain HTTP — only over HTTPS
## Check
html-resource-hints
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch, dns-prefetch). Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
437 tokensWhen the skill is activated
Reference documents
982 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,109 bytesSKILL.mdcore2,109 bytesreferences/rule.mddoc4,234 bytes
Read SKILL.md
# Add resource hints (preload, prefetch, dns-prefetch)
The browser's HTML parser discovers resources sequentially — a font referenced in a CSS file won't be fetched until the CSS is parsed. Resource hints break this dependency chain, allowing the browser to start fetching critical resources in parallel with parsing. A single preload directive for a critical font can eliminate a 100–300ms Flash of Invisible Text.
## Quick Reference
- preload forces immediate download of resources needed by the current page
- prefetch fetches resources likely needed for the next navigation (low priority)
- dns-prefetch resolves DNS for third-party origins in advance
- preconnect does DNS + TCP + TLS for origins you'll connect to soon
## Check
Look at this HTML file for late-discovered critical resources — fonts referenced in CSS, hero images, and key scripts. Identify where preload or preconnect hints would help.html-size
When your agent uses it
Use when auditing page weight for crawl efficiency, investigating why certain page content is not appearing in Google's index, or reviewing server-rendered pages that embed large JSON payloads in HTML.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
720 tokensWhen the skill is activated
Reference documents
868 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,148 bytesreferences/rule.mddoc3,604 bytes
Read SKILL.md
# Keep HTML documents under crawl limits
Googlebot has a documented crawl size limit of approximately 15MB per HTML document. Content beyond this threshold is not parsed or indexed. Excessively large HTML also slows Googlebot crawls, reducing how many of your pages are crawled per budget period.
## Quick Reference
- Googlebot stops parsing HTML beyond approximately 15MB; content after that point is not indexed
- Large HTML is usually caused by inline JSON data dumps, excessive inline SVG, or unminified JavaScript in `<script>` tags
- Target HTML document size under 2MB for optimal crawl efficiency; investigate anything over 5MB
## Check
Measure the raw HTML response size (before compression) for each page. Flag pages over 2MB (investigate) and over 5MB (critical). Identify the cause of oversized HTML: (1) Large inline JSON (`<script id='__NEXT_DATA__'>` or similar). (2) Inline SVG files. (3) Base64-encoded images in HTML. (4) Inline CSS with large amounts of utility classes. (5) Unminified scripts in `<script>` tags.
html-xml-lang-mismatch
When your agent uses it
Use when applies to XHTML documents and polyglot HTML documents that must parse correctly as both HTML5 and XML. For modern HTML5-only documents, only `lang` is needed and `xml:lang` is not required. Check when auditing documents served as application/xhtml+xml or documents that include both attributes.
What it loads into context
Frontmatter
125 tokensAlways available to the agent
SKILL.md
736 tokensWhen the skill is activated
Reference documents
815 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,202 bytesreferences/rule.mddoc3,660 bytes
Read SKILL.md
# Match lang and xml:lang attributes
Screen readers use the `lang` attribute to select the correct voice profile and pronunciation engine. If `lang` and `xml:lang` disagree, XML-based processors (including some EPUB readers and older assistive technologies) may use `xml:lang` and get a different language than intended — causing text to be read aloud in the wrong language. For example, French text read with an English voice profile produces unintelligible output for French-speaking blind users.
## Quick Reference
- If both `lang` and `xml:lang` are present on `<html>`, their values must be identical
- `xml:lang` is only needed for XHTML or polyglot documents (valid as both HTML and XML)
- For standard HTML5 documents, only `lang` is required — `xml:lang` is redundant
- The primary language tag must be a valid BCP 47 language code (e.g., `en`, `en-US`, `fr`, `zh-Hant`)
- Relates to WCAG 2.1 SC 3.1.1 (Language of Page)
## Check
html5-semantic-elements
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Use semantic HTML elements. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
368 tokensWhen the skill is activated
Reference documents
3,323 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,796 bytesSKILL.mdcore1,796 bytesreferences/rule.mddoc13,142 bytes
Read SKILL.md
# Use semantic HTML elements
Screen readers use semantic elements to navigate pages—users can jump directly to <main> content or <nav>. Search engines also use semantics to understand content hierarchy.
## Quick Reference
- Use <header>, <main>, <footer> for page structure
- Use <article> for self-contained content, <section> for grouped content
- Use <nav> for navigation, <aside> for related/sidebar content
- Only one <main> per page, but multiple <header>/<footer> allowed
## Check
Review this HTML structure to ensure it uses appropriate semantic elements like header, main, section, article, aside, and footer instead of generic div elements.http-requests
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize HTTP requests. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
337 tokensWhen the skill is activated
Reference documents
1,149 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,660 bytesreferences/rule.mddoc4,405 bytes
Read SKILL.md
# Minimize HTTP requests
Each HTTP request incurs network overhead—DNS lookup, TCP connection, and TLS handshake add latency. Reducing requests significantly improves initial load time.
## Quick Reference
- Each HTTP request adds latency (DNS, TCP, TLS handshakes)
- HTTP/2 multiplexing reduces but doesn't eliminate request overhead
- Bundle critical CSS/JS, use SVG sprites for icons
- Target under 50 requests for initial page load
## Check
Count the number of HTTP requests this page makes and identify opportunities for reduction.http-to-https
When your agent uses it
Use when checking whether a web server is configured to redirect all HTTP traffic to HTTPS.
What it loads into context
Frontmatter
75 tokensAlways available to the agent
SKILL.md
432 tokensWhen the skill is activated
Reference documents
920 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,047 bytesreferences/rule.mddoc4,306 bytes
Read SKILL.md
# Redirect HTTP to HTTPS
Without an HTTP-to-HTTPS redirect, users who type the domain without `https://` or follow old links land on the insecure version of the site, exposing session cookies and form data to network attackers.
## Quick Reference
- Redirect `http://example.com` to `https://example.com` with HTTP 301 (permanent redirect)
- Preserve the full path and query string in the redirect: `https://$host$request_uri`
- Use 301 (not 302) so browsers and search engines cache the redirect and future requests go directly to HTTPS
- Configure redirects at the server/CDN level — never rely on client-side JavaScript for security redirects
- After validating HTTPS works, add HSTS to eliminate future HTTP requests entirely
## Check
http2
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Enable HTTP/2 or HTTP/3. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
352 tokensWhen the skill is activated
Reference documents
932 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,579 bytesreferences/rule.mddoc4,168 bytes
Read SKILL.md
# Enable HTTP/2 or HTTP/3
Modern HTTP protocols significantly reduce the impact of latency and allow multiple resources to be downloaded simultaneously over a single connection, leading to much faster page loads.
## Quick Reference
- Enable HTTP/2 or HTTP/3 for request multiplexing
- Eliminate the need for resource concatenation
- Reduce overhead with header compression
## Check
Verify that the server is serving resources over HTTP/2 or HTTP/3 using browser DevTools or online checkers.
https
When your agent uses it
Use when auditing whether a website or web application serves content exclusively over HTTPS with a valid certificate.
What it loads into context
Frontmatter
72 tokensAlways available to the agent
SKILL.md
435 tokensWhen the skill is activated
Reference documents
1,157 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,054 bytesreferences/rule.mddoc5,301 bytes
Read SKILL.md
# Serve all pages over HTTPS
Plain HTTP exposes every request and response to anyone on the network path — ISPs, Wi-Fi operators, and MITM attackers can read passwords, session tokens, and personal data without any warning to the user.
## Quick Reference
- All HTTP traffic must redirect to HTTPS with a 301 (permanent) redirect
- TLS certificates must be valid, not expired, and cover all hostnames (including `www`)
- HTTPS is a prerequisite for HSTS, HTTP/2, Service Workers, geolocation, and other modern APIs
- Use a free certificate from Let's Encrypt or your hosting provider's managed TLS
- Verify the certificate chain with SSL Labs (ssllabs.com/ssltest) — aim for A or A+
## Check
https-downgrade
When your agent uses it
Use when auditing a site's internal and external links for protocol consistency, migrating a site from HTTP to HTTPS, or reviewing hardcoded URLs in a codebase that may use `http://` instead of `https://`.
What it loads into context
Frontmatter
106 tokensAlways available to the agent
SKILL.md
734 tokensWhen the skill is activated
Reference documents
1,012 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,226 bytesreferences/rule.mddoc4,622 bytes
Read SKILL.md
# Do not link from HTTPS to HTTP
Linking from a secure HTTPS page to an HTTP destination creates a mixed content situation that browsers warn users about or block entirely. It also means the linked page does not receive the ranking signal passed through the HTTPS referrer. For internal links, it can cause redirect loops or broken navigation.
## Quick Reference
- All internal links on an HTTPS page must point to HTTPS URLs — HTTP links trigger mixed content warnings
- External links to HTTP destinations break the security chain and may be blocked by browsers
- Use protocol-relative URLs (`//example.com`) or absolute HTTPS URLs — never hardcode `http://` for internal links
## Check
On pages served over HTTPS, scan all `<a href>` attributes for URLs starting with `http://` (not `https://`). Flag: (1) Internal links using `http://` that should use `https://` or a relative path. (2) External links to third-party sites still on HTTP (flag for review — the destination may not support HTTPS). (3) Resource links (`<img src>`, `<script src>`, `<link href>`) pointing to HTTP URLs — these cause active mixed content warnings.
hyphens
When your agent uses it
Use when auditing URL structures for word separator format, generating slugs from titles, or planning a URL migration from underscores or spaces to hyphens with appropriate redirects.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
684 tokensWhen the skill is activated
Reference documents
866 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,882 bytesreferences/rule.mddoc3,609 bytes
Read SKILL.md
# Use hyphens in URLs
Google's search systems interpret hyphens in URLs as word boundaries, enabling it to match the URL against individual keyword queries. Underscores join words into a single token, meaning `/seo_practices` is seen as one word 'seopractices' rather than two separate words 'seo' and 'practices'.
## Quick Reference
- Use hyphens (`-`) to separate words in URLs — Google treats hyphens as word separators, underscores as part of the word
- `/best-seo-practices` is better than `/best_seo_practices` or `/bestseopractices`
- Changing existing URLs from underscores to hyphens requires 301 redirects to preserve link equity
## Check
Inspect the URL path segment of each page. Flag any URL that contains: (1) Underscores (`_`) as word separators (e.g., `/best_practices`). (2) Spaces encoded as `%20` or `+` in path segments. (3) Mixed separators in the same URL (e.g., `/best-practices_guide`). Report the count of non-hyphenated URLs by category.
identical-links-same-purpose
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure identical links have consistent destinations. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
108 tokensAlways available to the agent
SKILL.md
360 tokensWhen the skill is activated
Reference documents
670 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,887 bytesreferences/rule.mddoc3,110 bytes
Read SKILL.md
# Ensure identical links have consistent destinations
When links with identical text lead to different destinations, it creates confusion and unpredictability, especially for users who rely on a list of links to navigate.
## Quick Reference
- Links with the same text should point to the same URL
- Differentiate links that lead to different places
- Reduces confusion for screen reader users navigating by link list
## Check
Identify any links on the page that have identical link text but point to different URLs.
image-cdn
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Serve images from a CDN. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
338 tokensWhen the skill is activated
Reference documents
1,202 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,579 bytesreferences/rule.mddoc4,614 bytes
Read SKILL.md
# Serve images from a CDN
Image CDNs automatically optimize, resize, and convert images on-the-fly—delivering the smallest file in the best format without manual processing.
## Quick Reference
- Use image CDN for automatic format conversion (WebP, AVIF)
- Generate responsive sizes on-the-fly via URL parameters
- CDN edge caching delivers images from nearest location
- Popular options: Cloudinary, Imgix, Cloudflare Images, Vercel
## Check
Verify if images are served from a CDN or image optimization service.image-compression
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Compress images without quality loss. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
330 tokensWhen the skill is activated
Reference documents
1,312 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,620 bytesreferences/rule.mddoc5,370 bytes
Read SKILL.md
# Compress images without quality loss
Uncompressed images are often 5-10x larger than needed—proper compression dramatically reduces page weight and load times with minimal visual impact.
## Quick Reference
- Compress JPEG to 70-85% quality (often visually identical)
- Use lossy compression for photos, lossless for graphics
- Automate compression in build process
- Can reduce file sizes by 60-80% without visible quality loss
## Check
Analyze if images are properly compressed without significant quality loss.image-file-size
When your agent uses it
Use when auditing the image pipeline, static assets in `public/`, CMS-managed media, or image CDN transforms. Separate file-size problems from dimension mismatches so you can tell whether the issue is compression, format choice, or responsive delivery.
What it loads into context
Frontmatter
104 tokensAlways available to the agent
SKILL.md
733 tokensWhen the skill is activated
Reference documents
1,400 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,169 bytesreferences/rule.mddoc5,297 bytes
Read SKILL.md
# Keep image file sizes within recommended limits
Images account for over 50% of average page weight according to HTTP Archive data. Oversized images waste user bandwidth (costly on mobile data plans), delay Largest Contentful Paint (LCP), and increase bounce rates. A 1-second delay in mobile page load can reduce conversions by up to 20% according to Google research.
## Quick Reference
- Photos: target under 200KB (WebP 80% quality); under 400KB for full-bleed hero images
- Graphics/icons: target under 50KB; use SVG for vector graphics
- WebP is typically 25-35% smaller than equivalent-quality JPEG (per web.dev)
- AVIF is typically 40-50% smaller than equivalent-quality JPEG (per web.dev)
## Check
Audit all image assets in this project. For each image: 1) Check the file size in bytes. 2) Flag any photo (JPEG/WebP/AVIF) over 200KB. 3) Flag any graphic/icon (PNG/SVG) over 100KB. 4) Flag any hero or full-width image over 400KB. 5) Flag any thumbnail (under 200px wide) over 30KB. Also check if Lighthouse reports 'Properly size images' or 'Efficiently encode images' as opportunities. Report each oversized image with its path, current size, and an estimated target size.image-optimization
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Optimize all images for web. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
634 tokensWhen the skill is activated
Reference documents
2,278 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,860 bytesreferences/rule.mddoc8,659 bytes
Read SKILL.md
# Optimize all images for web
Images typically account for 50%+ of page weight. Unoptimized images cause slow load times, wasted bandwidth, poor Core Web Vitals scores, and frustrated users—especially on mobile networks.
## Quick Reference
- Use modern formats: AVIF > WebP > JPEG/PNG
- Compress images to 80% quality for photos
- Always provide responsive srcset for different screen sizes
- Use `<picture>` element for format fallbacks
## Check
Scan this codebase for all image assets and <img> elements. For each image, verify: 1) Format is appropriate (WebP/AVIF for photos, SVG for icons, PNG only for transparency). 2) Responsive srcset and sizes attributes exist for images > 100px wide. 3) width/height attributes are present to prevent layout shift. 4) loading='lazy' is set for below-fold images. 5) File sizes are reasonable (< 200KB for photos, < 50KB for graphics). Report issues grouped by severity with file paths.image-redundant-alt
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid redundant image alternative text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
107 tokensAlways available to the agent
SKILL.md
354 tokensWhen the skill is activated
Reference documents
582 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,786 bytesreferences/rule.mddoc2,769 bytes
Read SKILL.md
# Avoid redundant image alternative text
Redundant alt text increases the verbosity for screen reader users without adding value, leading to a poorer user experience and slower navigation.
## Quick Reference
- Do not repeat 'image of' or 'picture of' in alt text
- Avoid alt text that exactly matches adjacent text
- Keep alt text concise and focused on the image's meaning
## Check
Scan image alt attributes for redundant phrases like 'image of', 'photo of', or text that duplicates surrounding content.
immutable-patterns
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Prefer immutable data patterns. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
396 tokensWhen the skill is activated
Reference documents
880 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,022 bytesSKILL.mdcore2,022 bytesreferences/rule.mddoc3,787 bytes
Read SKILL.md
# Prefer immutable data patterns
Mutating shared objects makes it impossible to track where a value changed. When you update state immutably, each version of the data is a separate object — you can compare references to detect changes, time-travel debug, and know exactly which part of your code changed the data.
## Quick Reference
- Use spread (...) to create modified copies of objects and arrays
- Prefer map(), filter(), and reduce() over push(), splice(), and direct assignment
- Use Object.freeze() for configuration objects that should never change
- Immutability is especially important in state management (Redux, Zustand, Signals)
## Check
Find all places in this code where objects or arrays are mutated in place. Flag direct property assignments on function parameters and push/splice on arrays.import-on-interaction
When your agent uses it
Use when reviewing slow initial loads caused by optional features. Prioritize code that is expensive to download or execute and not required for the first viewport, first input, or core task completion.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
432 tokensWhen the skill is activated
Reference documents
725 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,147 bytesreferences/rule.mddoc3,459 bytes
Read SKILL.md
# Load non-critical code on user interaction
Users should not pay the download, parse, and execution cost for features they may never use. Import-on-interaction shrinks initial JavaScript, reduces main-thread work during page load, and keeps the first view focused on content that matters immediately.
## Quick Reference
- Move non-essential code behind clicks, focus, hovers, or explicit user actions
- Use dynamic import() so the code is absent from the initial route bundle
- Show immediate UI feedback while the deferred chunk loads
- Use this for chat widgets, editors, maps, filters, and export flows that are not needed on first paint
## Check
Inspect this route or component for heavy modules, widgets, or third-party scripts that load on first render but are only needed after a user clicks, focuses, hovers, or opens a panel.import-on-visibility
When your agent uses it
Use when reviewing long pages, dashboards, or content feeds with expensive offscreen modules. Balance early enough loading for smooth scrolling against keeping the initial route light.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
409 tokensWhen the skill is activated
Reference documents
785 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,128 bytesreferences/rule.mddoc3,709 bytes
Read SKILL.md
# Load non-critical code when content approaches the viewport
Many pages ship JavaScript for offscreen sections that a user may never reach. Import-on-visibility keeps the initial route lighter while still loading content early enough to feel ready when users scroll to it.
## Quick Reference
- Use Intersection Observer to start loading code before an offscreen section becomes visible
- Reserve space with placeholders or skeletons so deferred sections do not cause layout shift
- Tune `rootMargin` so heavy content loads early enough without competing with above-the-fold work
- Use this for charts, reviews, related products, embeds, and offscreen dashboards
## Check
Identify components, widgets, or modules that load on first render even though they only appear after the user scrolls. Flag which ones can switch to visibility-based loading.improve-rule
When your agent uses it
Use when reviewing or improving a Front-End Checklist rule MDX file to raise its quality score, fix stub prompts, add missing fields, or enrich content with real code examples.
What it loads into context
Frontmatter
67 tokensAlways available to the agent
SKILL.md
1,272 tokensWhen the skill is activated
Reference documents
971 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quality Dimensions
- Stub Prompts — What to Avoid
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore5,286 bytesSKILL.mdcore5,286 bytesSKILL.mdcore5,286 bytesreferences/scoring-rubric.mddoc3,573 bytes
Read SKILL.md
# Improve a Front-End Checklist Rule
This skill helps you review and improve the quality of rule MDX files in the Front-End Checklist project. Use it to fix stub content, write better AI prompts, and enrich rules so they score well against the quality rubric.
## Quality Dimensions
Every rule is scored across these dimensions (see `references/scoring-rubric.md` for full details):
| Dimension | Max | What "good" looks like |
|-----------|-----|------------------------|
| `prompts.check` | 10 | Specific audit instruction, not generic |
| `prompts.fix` | 10 | Actionable fix steps with CSS/HTML/JS specifics |
| `prompts.explain` | 10 | Explains the *why*, not just restates the title |
| `tldr` | 5 | 3+ concise bullets, each a standalone takeaway |inclusive-language
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use inclusive language. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
397 tokensWhen the skill is activated
Reference documents
1,308 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,080 bytesreferences/rule.mddoc5,688 bytes
Read SKILL.md
# Use inclusive language
Language shapes experience—ableist, gendered, or exclusionary terminology creates unwelcoming experiences and reinforces harmful stereotypes, even unintentionally.
## Quick Reference
- Replace ableist terms (crazy, lame, blind to) with neutral alternatives
- Use gender-neutral language (they, users, people) by default
- Write error messages that guide rather than blame users
- Avoid idioms and cultural references that don't translate globally
## Check
Review content for ableist language (crazy, lame, blind to), gendered assumptions (he/she defaults), cultural bias, and exclusionary terminology. Verify error messages and instructions are respectful and constructive.indexability
When your agent uses it
Use when auditing a site for accidental noindex directives, investigating why important pages are not appearing in Google Search, or reviewing CMS settings that control indexing at the page or category level.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
732 tokensWhen the skill is activated
Reference documents
967 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,265 bytesreferences/rule.mddoc4,247 bytes
Read SKILL.md
# Make important pages indexable
A page blocked from indexing cannot appear in search results, regardless of its content quality or backlinks. Accidentally blocking key landing pages, product pages, or blog posts is one of the most impactful technical SEO errors — often silently losing significant organic traffic.
## Quick Reference
- Verify that pages you want ranked are not blocked by `noindex`, robots.txt, or `X-Robots-Tag` headers
- Test indexability with Google Search Console's URL Inspection tool — 'URL is on Google' confirms indexing
- Common accidental blocks: staging environments promoted to production, CMS default noindex settings, and overly broad robots.txt Disallow rules
## Check
For each important page (homepage, key landing pages, product pages, top blog posts): (1) Check `<meta name='robots' content='...'>` — does it contain `noindex`? (2) Check `X-Robots-Tag` HTTP response header — does it contain `noindex`? (3) Check robots.txt — is the URL's path blocked by a Disallow rule? (4) In Google Search Console, use URL Inspection to confirm the page is indexed. Flag any important page with any form of noindex or robots.txt block.
indexability-conflicts
When your agent uses it
Use when auditing a site for indexability issues, investigating why pages appear in Google's index that should be excluded (or vice versa), or reviewing robots.txt and meta robots configurations for consistency.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
777 tokensWhen the skill is activated
Reference documents
1,097 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,512 bytesreferences/rule.mddoc4,931 bytes
Read SKILL.md
# Avoid conflicting indexability signals
Conflicting indexability directives create unpredictable crawling and indexing behaviour. The most dangerous combination is robots.txt blocking a page that also has a `noindex` tag — the `noindex` is never read, but the URL is still known to Google, leaving it in a limbo state that wastes crawl budget.
## Quick Reference
- robots.txt blocks crawling; `noindex` blocks indexing — they are different mechanisms and should not be applied together
- A page blocked in robots.txt cannot receive a `noindex` directive because crawlers never read the page
- Canonical tags pointing to a `noindex` page create an unresolvable conflict — canonicalise to an indexable URL instead
## Check
For each page, collect four signals: (1) Is the URL path blocked by robots.txt? (2) Does the page HTML contain `<meta name='robots' content='noindex'>`? (3) Does the HTTP response include an `X-Robots-Tag: noindex` header? (4) Does the page's `<link rel='canonical'>` point to a different URL? Flag: pages blocked in robots.txt that also have noindex directives, pages with canonical pointing to a noindex URL, and pages with conflicting index/noindex signals from meta and HTTP header.
input-image-alt
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alt text for image buttons. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
102 tokensAlways available to the agent
SKILL.md
360 tokensWhen the skill is activated
Reference documents
570 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,737 bytesreferences/rule.mddoc2,643 bytes
Read SKILL.md
# Provide alt text for image buttons
Without alt text, screen readers may read the file name of the image, leaving users unable to determine the function of the button.
## Quick Reference
- Add an `alt` attribute to `<input type='image'>`
- Describe the action of the button, not just the image
- Ensures the button's purpose is clear to assistive technology
## Check
Verify that all <input type='image'> elements have a non-empty 'alt' attribute.
input-types
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Use semantic input type attributes. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
376 tokensWhen the skill is activated
Reference documents
1,023 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,946 bytesSKILL.mdcore1,946 bytesreferences/rule.mddoc4,676 bytes
Read SKILL.md
# Use semantic input type attributes
Using type=text for every input forces mobile users to switch keyboards manually for email, phone, and number entry. The correct type also enables browser autofill to correctly identify fields for name, address, and payment data. Combined with autocomplete attributes, semantic types can make form completion 40% faster for returning users.
## Quick Reference
- type=email shows the @ keyboard on mobile and enables email format validation
- type=tel shows the numeric phone keypad on mobile
- type=number shows a numeric keypad; use inputmode=numeric for fields that look like numbers but aren't
- type=date/time renders native pickers and returns standardized values
## Check
Audit all input elements in this HTML file. Check whether each uses the most appropriate type attribute and autocomplete value.integration-testing
When your agent uses it
Use when reviewing CI coverage, automated checks, or test strategy related to Write integration tests for key workflows. Focus on whether the rule is continuously verified, not just documented.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
383 tokensWhen the skill is activated
Reference documents
856 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,057 bytesreferences/rule.mddoc3,991 bytes
Read SKILL.md
# Write integration tests for key workflows
Unit tests verify individual functions in isolation, but they can't catch the bugs that occur when those functions interact — a perfectly correct validation function and a correct database function can still fail when wired together incorrectly. Integration tests catch these wiring bugs before they reach production, where they're expensive to diagnose.
## Quick Reference
- Integration tests verify that multiple units work correctly together
- Test at the boundary where different parts of your system meet
- Use a real database in tests (test DB or in-memory) rather than mocking everything
- Test happy paths and the most critical error paths
## Check
Identify the key integration points in this codebase — where API routes call services, where services interact with the database, and where components interact with state management. Are these tested?interaction-to-next-paint
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
358 tokensWhen the skill is activated
Reference documents
1,410 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,768 bytesreferences/rule.mddoc5,839 bytes
Read SKILL.md
# Optimize interaction to next paint
INP replaced FID as a Core Web Vital in 2024—it measures how quickly your page responds to user interactions throughout the session, not just the first interaction.
## Quick Reference
- INP measures responsiveness to ALL interactions—target under 200ms
- Break up long tasks into smaller chunks
- Use web workers for heavy computation
- Optimize event handlers and avoid blocking the main thread
## Check
Measure INP using Chrome DevTools or PageSpeed Insights. Verify interaction responses occur within 200ms.internal-links
When your agent uses it
Use when auditing a site's internal link structure, identifying pages that need more incoming links, generating contextual linking opportunities between related content, or reviewing a CMS template's internal linking patterns.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
626 tokensWhen the skill is activated
Reference documents
1,128 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,090 bytesreferences/rule.mddoc5,107 bytes
Read SKILL.md
# Add internal links to key pages
Internal links are how PageRank flows through your site. A key page with few internal links receives less PageRank signal, ranking lower than its content quality would otherwise allow. Googlebot also discovers pages through internal links — a page with zero incoming links is likely an orphan page.
## Quick Reference
- Important pages should receive multiple internal links with descriptive, keyword-relevant anchor text
- Internal links distribute PageRank; pages receiving few internal links rank lower regardless of content quality
- Use contextual inline links in body content — these carry more weight than navigation or footer links
## Check
Using a site crawl, build a map of internal links. For each important page (key landing pages, top blog posts, product pages): (1) Count the number of unique internal pages linking to it. (2) Check if the anchor text of those links includes relevant keywords for the target page. (3) Identify pages with 0–2 incoming internal links (likely orphans or under-linked). (4) Verify links are in body content, not only in global navigation or footer.
interstitials
When your agent uses it
Use when applies to CSS and JavaScript implementations of modals, overlays, pop-ups, cookie banners, newsletter sign-up dialogs, and promotional overlays. Check for `position: fixed`, `position: absolute` with large z-index, backdrop overlays, and JavaScript that shows modals on page load or shortly after. Consider both SEO impact (Google) and accessibility (WCAG focus management).
What it loads into context
Frontmatter
136 tokensAlways available to the agent
SKILL.md
932 tokensWhen the skill is activated
Reference documents
814 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore4,267 bytesreferences/rule.mddoc3,435 bytes
Read SKILL.md
# Avoid intrusive interstitials
Intrusive interstitials are a barrier for screen reader users who may not know a modal is blocking the page — they hear content that appears interactive but cannot activate it. Keyboard users may find focus trapped behind an overlay with no way to dismiss it. Users on mobile are most affected visually, as full-screen pop-ups eliminate all access to content until dismissed. Additionally, Google Search penalizes mobile pages with intrusive interstitials in search rankings.
## Quick Reference
- Full-screen pop-ups that cover the main content immediately on mobile page load are penalized by Google Search (January 2017 Intrusive Interstitials Update)
- Acceptable interstitials: age verification, legally required notices (cookie consent where legally mandated), login walls for private content
- Unacceptable: pop-ups covering the main content area on mobile that are not easy to dismiss
- For accessibility: modal dialogs must trap focus, be dismissible by keyboard (Escape key), and return focus to the trigger element
- WCAG 2.1 SC 2.1.2 (No Keyboard Trap): users must be able to move focus away from any component using the keyboard
## Check
invalid-links
When your agent uses it
Use when auditing a page's link elements for crawlability, reviewing JavaScript-heavy SPAs where navigation may not use `<a href>` tags, or checking that dynamically generated links have valid href values.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
760 tokensWhen the skill is activated
Reference documents
958 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,233 bytesreferences/rule.mddoc4,210 bytes
Read SKILL.md
# Fix invalid links
Google can only follow links declared as valid `<a href>` elements with crawlable URL values. Invalid links — empty hrefs, JavaScript voids, or non-URL content — prevent PageRank from flowing to linked pages and stop Googlebot from discovering those destinations.
## Quick Reference
- Invalid `<a>` tags (empty href, JavaScript voids, non-URL values) are not crawlable — Googlebot cannot follow them
- Links must use crawlable `<a href='...'>` elements with valid absolute or relative URLs to pass PageRank and be followed
- JavaScript-only navigation (onClick handlers without `href`) is invisible to search engine crawlers
## Check
Parse all `<a>` elements on the page. Flag links where `href`: (1) is empty (`href=''` or `href='#'` with no meaningful target). (2) starts with `javascript:` (e.g., `href='javascript:void(0)'`). (3) starts with `mailto:` or `tel:` — these are valid but not crawlable for page discovery. (4) contains only a fragment identifier that references an anchor not present on the page. (5) is absent entirely (`<a>` without any href attribute). Report the count per type.
javascript-inline
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Avoid inline JavaScript. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
352 tokensWhen the skill is activated
Reference documents
6,707 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,842 bytesSKILL.mdcore1,842 bytesreferences/rule.mddoc29,482 bytes
Read SKILL.md
# Avoid inline JavaScript
Inline JavaScript breaks browser caching, violates Content Security Policy (CSP), and creates unmaintainable spaghetti code mixing markup with behavior.
## Quick Reference
- Move onclick/onmouseover handlers to external JS files
- Use addEventListener instead of inline event handlers
- Exception: critical above-the-fold JS can be inlined
- External files enable browser caching across pages
## Check
Verify that JavaScript code is not mixed with HTML markup using external script files and proper separation of concerns for better maintainability and performance.javascript-linter
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Lint JavaScript code. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
360 tokensWhen the skill is activated
Reference documents
7,523 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,783 bytesSKILL.mdcore1,783 bytesreferences/rule.mddoc30,306 bytes
Read SKILL.md
# Lint JavaScript code
Linting catches bugs before runtime, enforces team coding standards, and prevents common mistakes that slip through code review.
## Quick Reference
- Set up ESLint with `pnpm dlx eslint --init`
- Use shared configs (eslint:recommended, @typescript-eslint)
- Integrate with your editor for real-time feedback
- Add lint checks to CI/CD pipeline
## Check
Set up JavaScript linting tools like ESLint to automatically detect syntax errors, enforce coding standards, and maintain consistent code quality across the team.javascript-minification
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Minify all JavaScript files. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
372 tokensWhen the skill is activated
Reference documents
4,475 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,821 bytesSKILL.mdcore1,821 bytesreferences/rule.mddoc19,363 bytes
Read SKILL.md
# Minify all JavaScript files
Unminified JavaScript adds hundreds of KB to page weight, slowing down load times especially on mobile networks where every byte counts.
## Quick Reference
- Enable minification in your build tool (Vite, webpack, etc.)
- Use Terser for modern JavaScript minification
- Enable tree-shaking to remove unused code
- Typical reduction: 50-70% file size savings
## Check
Verify that all JavaScript files are minified in production to reduce file size, remove comments, and optimize code for faster loading and execution.js-file-size
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize JavaScript bundle size. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
346 tokensWhen the skill is activated
Reference documents
534 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,629 bytesreferences/rule.mddoc2,365 bytes
Read SKILL.md
# Optimize JavaScript bundle size
Excessive JavaScript increases parse and execution time, especially on low-end devices, leading to sluggish user experiences and high data costs.
## Quick Reference
- Keep individual JS bundles under 200KB (compressed)
- Large bundles delay Time to Interactive (TTI) and First Input Delay (FID)
- Use code-splitting and tree-shaking to reduce unused code
## Check
Review the JavaScript bundle sizes and identify any files exceeding 200KB (Gzip/Brotli).
js-libraries
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Use secure and up-to-date JS libraries. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
329 tokensWhen the skill is activated
Reference documents
583 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,691 bytesreferences/rule.mddoc2,622 bytes
Read SKILL.md
# Use secure and up-to-date JS libraries
Outdated or vulnerable libraries pose security risks and often include unnecessary bloat that degrades performance.
## Quick Reference
- Regularly audit dependencies for known security vulnerabilities
- Replace heavy libraries with lightweight alternatives (e.g., date-fns vs moment)
- Ensure libraries are properly versioned and served via reliable CDNs or self-hosted
## Check
Check the project's JavaScript dependencies for known vulnerabilities and outdated versions.
js-redirects
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Avoid JavaScript-based redirects. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
343 tokensWhen the skill is activated
Reference documents
712 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,707 bytesreferences/rule.mddoc3,298 bytes
Read SKILL.md
# Avoid JavaScript-based redirects
JavaScript redirects force an additional round-trip after the initial page load, significantly increasing the time users spend waiting for content.
## Quick Reference
- Use 301 or 302 server-side redirects instead of `window.location`
- JS redirects delay page load as the browser must first download and execute the script
- Client-side redirects can negatively impact SEO and indexability
## Check
Check the project for instances where JavaScript is being used for page-level redirects (e.g., window.location).
json-ld-valid
When your agent uses it
Use when generating or auditing any `<script type='application/ld+json'>` blocks, implementing structured data for articles, products, FAQs, breadcrumbs, or local businesses, or investigating why rich results are not appearing in Google Search Console.
What it loads into context
Frontmatter
107 tokensAlways available to the agent
SKILL.md
743 tokensWhen the skill is activated
Reference documents
1,216 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,321 bytesreferences/rule.mddoc5,215 bytes
Read SKILL.md
# Use valid JSON-LD structured data
Invalid JSON-LD is silently ignored by Google — there are no error messages in search results, only the absence of rich results. Invalid structured data means no eligibility for rich results (stars, FAQs, breadcrumbs, etc.) that increase click-through rates.
## Quick Reference
- JSON-LD must be valid JSON, reference `@context: 'https://schema.org'`, and include all required properties for the chosen `@type`
- Invalid JSON (unclosed brackets, missing commas) causes the entire block to be silently ignored by Google
- Validate with Google's Rich Results Test before deploying structured data changes
## Check
Find all `<script type='application/ld+json'>` elements on the page. For each: (1) Attempt to parse the content as JSON — flag syntax errors. (2) Verify `@context` is set to `'https://schema.org'`. (3) Verify `@type` is a valid schema.org type. (4) For the detected type, check required properties are present (e.g., Article requires `headline`, `author`, `datePublished`; Product requires `name`; FAQPage requires `mainEntity`). (5) Run through Google's Rich Results Test API if available.
json-safety
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Parse JSON safely with error handling. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
414 tokensWhen the skill is activated
Reference documents
915 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,047 bytesSKILL.mdcore2,047 bytesreferences/rule.mddoc4,080 bytes
Read SKILL.md
# Parse JSON safely with error handling
JSON.parse() on invalid input throws a SyntaxError that will crash your application if uncaught. API responses, localStorage values, and user-provided data can all be malformed. Safe parsing with validation catches these errors at the point of parsing, not deep in your application logic when a missing property causes an unexpected error.
## Quick Reference
- JSON.parse() throws a SyntaxError on invalid input — always use try/catch
- Validate the shape of parsed data before accessing its properties
- JSON.stringify() can return undefined for values that can't be serialized
- Use a type-safe parser (Zod, Valibot) for data from external sources
## Check
Find all JSON.parse() calls in this file and check whether each one is wrapped in try/catch and whether the result is validated before use.keyboard-navigation
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Enable keyboard navigation for all elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
427 tokensWhen the skill is activated
Reference documents
815 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,270 bytesreferences/rule.mddoc3,799 bytes
Read SKILL.md
# Enable keyboard navigation for all elements
15% of users rely on keyboard navigation—broken focus order or keyboard traps make your site completely unusable for them.
## Quick Reference
- All interactive elements must be reachable via Tab key
- Focus order should follow visual reading order (left-to-right, top-to-bottom)
- Never use positive tabindex values—they break natural flow
- Hidden content must be removed from tab sequence with tabindex='-1'
- Keyboard traps are only acceptable inside active modals with a working Escape path
## Check
keyword-stuffing
When your agent uses it
Use when auditing content pages for over-optimisation, reviewing AI-generated content that may repeat target phrases excessively, or checking meta tags and alt text for unnatural keyword accumulation.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
747 tokensWhen the skill is activated
Reference documents
863 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,595 bytesreferences/rule.mddoc4,250 bytes
Read SKILL.md
# Avoid keyword stuffing
Google's spam detection algorithms penalise pages that unnaturally repeat keywords to manipulate rankings. Keyword-stuffed pages are demoted in search results or removed from the index entirely. Natural, reader-focused writing with topical variation outperforms keyword-dense content.
## Quick Reference
- Keyword density above ~2–3% for any single term is a signal of keyword stuffing — write for readers, not keyword counters
- Repeating keywords unnaturally in titles, headers, alt text, or meta descriptions triggers Google's spam filters
- Google's algorithms (Panda, SpamBrain) penalise pages with manipulative keyword density; natural language variation is rewarded
## Check
Analyse the page's main content body, `<title>`, `<meta name='description'>`, heading elements (H1–H6), and `<img alt>` attributes. Flag: (1) Any single keyword or phrase appearing more than 3× in the title tag. (2) Any keyword with a density above 3% of total word count. (3) Lists of keywords with no context (e.g., 'cheap flights, affordable flights, discount flights, best flight deals'). (4) Alt text that is a comma-separated list of keywords instead of a description. (5) Hidden text (white text on white background, or `display:none` containing keywords).
label-content-name-mismatch
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Align visible labels with accessible names. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
107 tokensAlways available to the agent
SKILL.md
371 tokensWhen the skill is activated
Reference documents
544 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,935 bytesreferences/rule.mddoc2,701 bytes
Read SKILL.md
# Align visible labels with accessible names
When the visible label doesn't match the accessible name, voice control users may find it impossible to interact with the element by speaking its name.
## Quick Reference
- Visible text should be part of the accessible name (ARIA label)
- Ensure speech-to-text users can trigger controls by their visible name
- Maintain consistency between what is seen and what is read by tech
## Check
Compare the visible text of buttons and links with their 'aria-label' or 'aria-labelledby' attributes to ensure the visible text is included in the accessible name.
landmark-one-main
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use exactly one main landmark. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
356 tokensWhen the skill is activated
Reference documents
610 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,768 bytesreferences/rule.mddoc2,774 bytes
Read SKILL.md
# Use exactly one main landmark
A single main landmark allows keyboard and screen reader users to jump directly to the primary content of the page, bypassing repetitive navigation.
## Quick Reference
- Ensure each page has exactly one `<main>` element
- Avoid multiple elements with `role='main'`
- Provides a clear starting point for the page's primary content
## Check
Count the number of <main> elements or elements with role='main' on the page to ensure there is exactly one.
landmark-regions
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use landmark regions correctly. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
102 tokensAlways available to the agent
SKILL.md
357 tokensWhen the skill is activated
Reference documents
516 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,795 bytesreferences/rule.mddoc2,493 bytes
Read SKILL.md
# Use landmark regions correctly
Landmark regions allow screen reader users to quickly identify and jump to major sections of a page, significantly improving navigation efficiency.
## Quick Reference
- Use HTML5 landmark elements like `<header>`, `<nav>`, `<main>`, and `<footer>`
- Ensure each landmark appears only once where appropriate (e.g., one `<main>`)
- Provide labels for multiple landmarks of the same type using `aria-label`
## Check
Verify that the page uses appropriate HTML5 landmark elements and that they are correctly structured.
lang-attribute
When your agent uses it
Use when applies to all HTML documents. Check the `<html>` opening tag for a `lang` attribute with a non-empty, valid BCP 47 language code. Also check for `lang` attribute changes on individual elements when the document contains content in multiple languages (inline quotes, foreign terms, multilingual sections). The `lang` attribute is inherited — child elements inherit the language from their nearest ancestor with `lang`.
What it loads into context
Frontmatter
141 tokensAlways available to the agent
SKILL.md
936 tokensWhen the skill is activated
Reference documents
994 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,991 bytesreferences/rule.mddoc4,131 bytes
Read SKILL.md
# Set the page lang attribute
Screen readers select the correct text-to-speech voice and pronunciation engine based on the `lang` attribute. Without it, VoiceOver defaults to the user's system language, and NVDA uses its default voice — both may mispronounce words in other languages, making content unintelligible. French text read with an English voice profile is incomprehensible. The `lang` attribute also enables browser translation features (Chrome's Translate), hyphenation algorithms (CSS `hyphens: auto`), and correct spell checking. This is a WCAG Level A requirement — the most fundamental accessibility baseline.
## Quick Reference
- The `<html>` element must have a `lang` attribute — WCAG 2.1 SC 3.1.1 (Language of Page, Level A)
- The value must be a valid BCP 47 language tag: `en`, `en-US`, `fr`, `zh-Hant`, `ar`, etc.
- Use `lang` on individual elements to indicate language changes within the page — WCAG 2.1 SC 3.1.2 (Level AA)
- The `lang` attribute affects screen reader pronunciation, spell checking, hyphenation, and browser translation
- An empty `lang=''` is treated as unknown language — equivalent to having no `lang` attribute
## Check
largest-contentful-paint
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize largest contentful paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
356 tokensWhen the skill is activated
Reference documents
975 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,765 bytesreferences/rule.mddoc4,220 bytes
Read SKILL.md
# Optimize largest contentful paint
LCP is the most important Core Web Vital for perceived load speed—it measures when the main content becomes visible, directly impacting user perception and SEO rankings.
## Quick Reference
- LCP measures when the largest element renders—target under 2.5s
- Use preload for hero images and critical resources
- Optimize image formats and use responsive sizes
- Reduce server response time (TTFB)
## Check
Measure LCP using Lighthouse or PageSpeed Insights. Verify the largest visible element renders within 2.5 seconds.lazy-above-fold
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Disable lazy loading for above-the-fold content. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
102 tokensAlways available to the agent
SKILL.md
360 tokensWhen the skill is activated
Reference documents
703 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,739 bytesreferences/rule.mddoc3,250 bytes
Read SKILL.md
# Disable lazy loading for above-the-fold content
Applying lazy loading to hero images or other primary content can cause a significant delay in how quickly users perceive the page as loaded.
## Quick Reference
- Do not use `loading="lazy"` for images in the initial viewport
- Lazy loading above-the-fold images delays the Largest Contentful Paint (LCP)
- Ensure critical images start downloading as early as possible
## Check
Review the page's images and check for `loading="lazy"` on any images that are likely to be in the initial viewport (above-the-fold).
lazy-loading
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Implement lazy loading for offscreen content. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes. Absence of `loading='lazy'` is not enough by itself when fold position is unknown.
What it loads into context
Frontmatter
117 tokensAlways available to the agent
SKILL.md
401 tokensWhen the skill is activated
Reference documents
976 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,952 bytesreferences/rule.mddoc4,529 bytes
Read SKILL.md
# Implement lazy loading for offscreen content
Lazy loading defers non-critical resources until needed—this reduces initial page weight, speeds up first paint, and saves bandwidth for content users may never scroll to.
## Quick Reference
- Use loading='lazy' for images below the fold
- Never lazy load LCP/above-fold images—they need priority
- Lazy load iframes, videos, and heavy components
- Use Intersection Observer for custom lazy loading
- If fold position is unclear from the snippet, do not invent a lazy-loading defect
## Check
leaked-secrets
When your agent uses it
Use when reviewing client-side JavaScript, HTML source, or git history for exposed credentials, API keys, or tokens.
What it loads into context
Frontmatter
81 tokensAlways available to the agent
SKILL.md
498 tokensWhen the skill is activated
Reference documents
1,386 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,392 bytesSKILL.mdcore2,392 bytesreferences/rule.mddoc5,859 bytes
Read SKILL.md
# Leaked Environment Variables
An API key embedded in client-side JavaScript gives anyone with a browser devtools tab full access to your cloud services, databases, or third-party APIs — leading to data breaches, unexpected charges, or account takeover.
## Quick Reference
- Any secret in client-side JavaScript is publicly readable — treat all front-end code as public
- In Next.js, only variables prefixed with `NEXT_PUBLIC_` are exposed to the browser — never put secrets in these
- Common leak locations: `.env` files committed to git, hardcoded API keys in JS bundles, service account credentials in `window.__INITIAL_STATE__`
- Use `git log -S 'keyword'` to search git history for previously committed secrets; rotate any found secrets immediately
- Tools: GitLeaks, TruffleHog, GitHub Secret Scanning can detect leaks in repositories automatically
## Check
legacy-js
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Avoid serving legacy JavaScript to modern browsers. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
356 tokensWhen the skill is activated
Reference documents
738 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,777 bytesreferences/rule.mddoc3,479 bytes
Read SKILL.md
# Avoid serving legacy JavaScript to modern browsers
Modern browsers can execute ES6+ code faster and more efficiently; serving them transpiled ES5 with polyfills adds unnecessary weight.
## Quick Reference
- Use differential serving (module/nomodule) to target modern and legacy browsers
- Avoid heavy ES5 polyfills for browsers that support ES6+
- Compile code to modern targets to reduce bundle size and improve execution speed
## Check
Analyze the project's JavaScript output to see if modern browsers are being served unnecessary ES5 code and polyfills.
length
When your agent uses it
Use when generating URL slugs from article titles, auditing URL structures for unnecessary depth or length, or reviewing URL patterns in a CMS or router configuration.
What it loads into context
Frontmatter
84 tokensAlways available to the agent
SKILL.md
695 tokensWhen the skill is activated
Reference documents
934 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,062 bytesreferences/rule.mddoc4,129 bytes
Read SKILL.md
# Keep URLs concise
While Google has no strict URL length limit beyond technical constraints, long URLs with deep nesting, excessive parameters, or redundant words are harder for users to read, copy, and share. Google's John Mueller has confirmed that shorter, cleaner URLs are easier to understand and may perform slightly better in search.
## Quick Reference
- Keep URL paths under 100 characters; Google recommends short, descriptive URLs without unnecessary parameters
- Remove stop words (`the`, `a`, `of`, `in`) from slugs — `/guide-css-grid` is better than `/a-guide-to-css-grid`
- Deeply nested paths (`/blog/2024/03/category/subcategory/post-title`) are harder to share and signal distance from the root
## Check
For each page URL, extract the path component (excluding domain and query string). Flag: (1) Path length over 100 characters. (2) More than 4 path segments (e.g., `/a/b/c/d/e` has 5 segments). (3) Common stop words in slugs (`the`, `a`, `an`, `of`, `in`, `at`, `to`, `for`, `with`). (4) Dates in URL paths for evergreen content (e.g., `/blog/2024/03/css-guide`). (5) Session IDs, tracking parameters, or other dynamic values in paths.
link-checker
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Check for broken links. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
333 tokensWhen the skill is activated
Reference documents
6,143 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,634 bytesSKILL.mdcore1,634 bytesreferences/rule.mddoc25,528 bytes
Read SKILL.md
# Check for broken links
Broken links frustrate users, hurt SEO rankings (Google penalizes 404s), and damage credibility—especially for documentation and e-commerce sites.
## Quick Reference
- Use lychee, linkchecker, or broken-link-checker npm packages
- Check internal, external, anchor, and mailto links
- Integrate into CI/CD for automatic detection
- Set up regular monitoring for external link rot
## Check
Verify that all internal and external links are working properly and don't return 404 errors or redirect to unintended destinations.link-in-text-block
When your agent uses it
Use when applies to hyperlinks (`<a>` elements) that appear inline within paragraphs or text blocks. Does not apply to navigation menus, button-style links, or standalone links that are visually isolated from body text. Use when reviewing CSS that removes text-decoration from inline body copy links.
What it loads into context
Frontmatter
115 tokensAlways available to the agent
SKILL.md
773 tokensWhen the skill is activated
Reference documents
826 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,680 bytesreferences/rule.mddoc3,679 bytes
Read SKILL.md
# Make links in text blocks visually distinguishable
Approximately 8% of men and 0.5% of women have color vision deficiency (red-green being most common). If links are distinguished only by a color like blue or red, these users may not identify them as links and miss critical navigation or reference information. The underline is a universal, color-independent signal understood across cultures and vision abilities. Removing underlines is a common design trend that disproportionately affects users with low vision and cognitive disabilities.
## Quick Reference
- Color must not be the only visual means of distinguishing links from surrounding text — WCAG 2.1 SC 1.4.1 (Use of Color)
- Option 1: Underline links (the browser default and most robust approach)
- Option 2: If no underline, the link color must have ≥ 3:1 contrast ratio against surrounding body text AND ≥ 4.5:1 against the background
- Focus and hover states must also maintain distinguishability
- Applies only to links embedded within paragraphs/text blocks; standalone navigation links have different requirements
## Check
link-text
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use descriptive link text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
419 tokensWhen the skill is activated
Reference documents
827 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,136 bytesreferences/rule.mddoc3,669 bytes
Read SKILL.md
# Use descriptive link text
Screen reader users navigate by listing all links—'click here' repeated 10 times tells them nothing, while descriptive links let them jump directly to relevant content.
## Quick Reference
- Avoid generic text like 'click here', 'read more', 'learn more'
- Link text should describe the destination without surrounding context
- Use links for navigation to a URL, not for in-page actions
- Use aria-label when visual design requires short text
- Include file type and size for download links
## Check
list-structure
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct list structure. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
360 tokensWhen the skill is activated
Reference documents
608 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,752 bytesreferences/rule.mddoc2,849 bytes
Read SKILL.md
# Use correct list structure
Screen readers rely on a specific parent-child relationship for lists to correctly announce the number of items and the user's current position within the list.
## Quick Reference
- Unordered (`<ul>`) and ordered (`<ol>`) lists must only contain `<li>` elements
- Do not put other elements like `<div>` or `<p>` directly inside a list
- Ensure nested lists are also properly contained within an `<li>` element
## Check
Check the structure of all lists to ensure only `<li>` elements are direct children of `<ul>` or `<ol>`.
list-virtualization
When your agent uses it
Use when reviewing dashboards, admin tables, search results, or feeds with many repeated items. Confirm the bottleneck is DOM or rendering cost before introducing virtualization because small lists usually do not need the added complexity.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
421 tokensWhen the skill is activated
Reference documents
665 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,210 bytesSKILL.mdcore2,210 bytesreferences/rule.mddoc3,214 bytes
Read SKILL.md
# Virtualize long lists and tables
Rendering hundreds or thousands of rows at once wastes memory and makes style calculation, layout, and painting more expensive. Virtualization keeps large collections responsive by limiting the number of mounted nodes.
## Quick Reference
- Render only what is visible plus a small overscan buffer instead of the entire list
- Use virtualization when repeated rows or cards push DOM size and layout cost too high
- Preserve item sizing, keyboard access, and screen-reader semantics when windowing content
- Measure scroll smoothness, memory use, and DOM node count before and after the change
## Check
Inspect long lists, tables, grids, and feeds for places where the UI renders every item at once. Flag views where the number of mounted rows or cards is large enough to create DOM, memory, or scroll-performance issues.listitem
When your agent uses it
Use when applies to HTML documents with `<li>` elements. Also applies to custom ARIA lists where `role='listitem'` must be owned by `role='list'`. Common violations occur in templating systems where list markup is split across components or in CSS resets where developers use `<li>` for layout without proper list parents.
What it loads into context
Frontmatter
123 tokensAlways available to the agent
SKILL.md
762 tokensWhen the skill is activated
Reference documents
798 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,279 bytesreferences/rule.mddoc3,495 bytes
Read SKILL.md
# Place list items within list containers
When a `<li>` element exists outside a list container, screen readers lose the ability to announce critical context: NVDA and JAWS will not say 'list of 5 items' or 'item 2 of 5' because there is no list context. VoiceOver may announce the orphan `<li>` as plain text without any group context, stripping users of the structural information that helps them understand how many items exist and where they are in the list.
## Quick Reference
- Every `<li>` element must have a direct parent of `<ul>`, `<ol>`, or `<menu>`
- Orphan `<li>` elements are invalid HTML per the HTML Living Standard
- Screen readers announce list type and item count (e.g., 'list, 3 items') only when `<li>` is inside a valid list container
- Similarly, `role='listitem'` must be owned by a `role='list'` element per WAI-ARIA requirements
## Check
Find all `<li>` elements in the DOM. For each, check that its direct parent element is `<ul>`, `<ol>`, or `<menu>`. Flag any `<li>` whose parent is `<div>`, `<section>`, `<nav>`, `<span>`, or any element other than those three. Also check `role='listitem'` elements to ensure their closest ancestor with a list-related role is `role='list'`.llm-parsability
When your agent uses it
Use when auditing content pages for AI discoverability. Applies to any informational page intended to appear in AI-generated answers, search snippets, or knowledge base extraction.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
597 tokensWhen the skill is activated
Reference documents
1,295 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,758 bytesreferences/rule.mddoc5,558 bytes
Read SKILL.md
# Make content easy for LLMs to parse
AI assistants and answer engines (including Google's AI Overviews) extract and cite content from web pages—pages with clear structure and explicit context are more likely to be accurately cited and surfaced in AI-generated responses.
## Quick Reference
- Use semantic HTML headings, paragraphs, and lists — LLMs prefer structured markup
- Avoid content locked behind JavaScript rendering or requiring user interaction
- Write clear, self-contained sections that make sense out of full-page context
- Structured data (JSON-LD) provides machine-readable context alongside human-readable text
## Check
Evaluate whether the page content is parseable by an LLM. Check: (1) Is content in semantic HTML tags (<h1>–<h6>, <p>, <ul>, <ol>, <table>)? (2) Is key content accessible without JavaScript? (3) Are section headings descriptive enough to stand alone? (4) Does the page have JSON-LD structured data? (5) Are there FAQ sections or explicit Q&A patterns that match common search queries?llms-txt
When your agent uses it
Use when auditing public documentation portals, API references, help centers, SDK docs, or large knowledge bases. Check the final file served at `/llms.txt` and verify that the linked pages are stable, high-value, and accessible without relying on a JavaScript-only interface.
What it loads into context
Frontmatter
115 tokensAlways available to the agent
SKILL.md
594 tokensWhen the skill is activated
Reference documents
1,345 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,607 bytesreferences/rule.mddoc6,218 bytes
Read SKILL.md
# Publish llms.txt for documentation-heavy sites
Documentation portals often bury the most important pages behind dense navigation, search UIs, or framework-specific layouts. A curated `llms.txt` gives AI tools a cleaner entry point without replacing the normal crawl and indexing mechanisms of the web described by the [llms.txt convention](https://llmstxt.org/).
## Quick Reference
- Serve `llms.txt` at the root (`/llms.txt` on the production domain) if you run a docs-heavy site
- Curate a short list of stable, high-signal docs pages instead of dumping every URL
- Use `llms-full.txt` only as an optional companion when you can keep it current
- Keep crawl and indexing controls in `robots.txt`; `llms.txt` does not replace them
## Check
Check whether this documentation-heavy site publishes `llms.txt` at the root and whether it contains a curated set of stable, high-value links such as getting-started guides, API references, concepts, and examples. Confirm that linked URLs return HTTP 200 and that `llms.txt` is not being treated as a replacement for `robots.txt` or XML sitemaps.loading-indicators
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Show loading indicators. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
329 tokensWhen the skill is activated
Reference documents
1,527 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,736 bytesreferences/rule.mddoc5,562 bytes
Read SKILL.md
# Show loading indicators
Loading indicators reassure users that something is happening—without feedback, users may think the page is broken or click repeatedly, degrading experience and causing duplicate actions.
## Quick Reference
- Show immediate feedback for all async operations
- Use skeletons for content, spinners for actions
- Include ARIA attributes for screen reader accessibility
- Avoid content jumps when loading completes
## Check
Verify that loading states are displayed during async operations with appropriate ARIA attributes for screen readers.local-business
When your agent uses it
Use when auditing a local business website's structured data. Applies to any business that serves customers at a physical location or specific geographic area.
What it loads into context
Frontmatter
82 tokensAlways available to the agent
SKILL.md
489 tokensWhen the skill is activated
Reference documents
1,224 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,353 bytesSKILL.mdcore2,353 bytesreferences/rule.mddoc5,046 bytes
Read SKILL.md
# Add LocalBusiness schema markup
LocalBusiness schema enables Google to show your business details (hours, address, phone, rating) directly in search results and Google Maps, improving local visibility without requiring a click.
## Quick Reference
- Add LocalBusiness JSON-LD schema to your homepage and contact page
- Required properties: @type, name, address (PostalAddress), telephone
- Include openingHours, geo coordinates, and image for richer results
- Use a more specific sub-type when available (Restaurant, DentalClinic, etc.)
## Check
Check the page source for a JSON-LD script block with @type matching 'LocalBusiness' or a sub-type (Restaurant, Store, etc.). Verify the required properties are present: name, address with PostalAddress, telephone, and url. Validate with Google's Rich Results Test.locale-images
When your agent uses it
Use when reviewing image assets, icon libraries, or components that render illustrations to identify culture-specific content that may need locale overrides or replacement with neutral alternatives.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
412 tokensWhen the skill is activated
Reference documents
2,110 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,203 bytesreferences/rule.mddoc9,439 bytes
Read SKILL.md
# Use locale-neutral images and provide cultural overrides when needed
Images that feel natural in one culture can be confusing or offensive in another — a thumbs-up is a vulgar gesture in parts of the Middle East and West Africa, and a checkmark means "wrong" in Japan. Choosing neutral visuals by default and providing targeted overrides avoids unintentional offence and keeps the image management surface small.
## Quick Reference
- Hand gestures, colors, and common symbols carry different meanings across cultures
- Prefer abstract or universally understood icons as the default
- When locale-specific images are required use a lookup map with a neutral fallback
- Never embed text inside images — it cannot be translated or resized
## Check
Identify image assets, SVG icons, and illustration components that use hand gestures, color symbolism, animals, or religious imagery that may carry different meanings across cultures or locales.logical-properties
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS logical properties for i18n and RTL support. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
96 tokensAlways available to the agent
SKILL.md
408 tokensWhen the skill is activated
Reference documents
916 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,106 bytesreferences/rule.mddoc3,818 bytes
Read SKILL.md
# Use CSS logical properties for i18n and RTL support
Physical CSS properties (margin-left, padding-right) are hardcoded to screen directions. In right-to-left languages (Arabic, Hebrew, Persian), what should be margin-left becomes margin-right. Without logical properties, supporting RTL requires maintaining duplicate stylesheets or complex overrides with [dir=rtl] selectors. Logical properties handle this automatically.
## Quick Reference
- Logical properties adapt to writing direction — margin-inline-start is left in LTR, right in RTL
- Replace left/right margin and padding with inline-start/inline-end equivalents
- Replace top/bottom with block-start/block-end equivalents
- Logical properties also work correctly for vertical writing modes
## Check
Find all uses of margin-left, margin-right, padding-left, padding-right, border-left, border-right, left, right (as positioning) that should be converted to logical equivalents.lowercase
When your agent uses it
Use when auditing URL structure or configuring a new site's routing. Applies to any server or framework that allows case-insensitive file systems (Linux servers are case-sensitive by default).
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
429 tokensWhen the skill is activated
Reference documents
926 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,160 bytesreferences/rule.mddoc4,120 bytes
Read SKILL.md
# Use lowercase URLs
Mixed-case URLs can create duplicate content—search engines may index both /Product and /product as separate pages, splitting link equity and diluting rankings.
## Quick Reference
- URLs should be entirely lowercase to prevent duplicate content issues
- Most web servers treat /Page and /page as different URLs, creating duplicates
- Redirect uppercase and mixed-case URLs to their lowercase equivalents with 301
- Apply lowercasing in your server config or framework router, not ad hoc
## Check
Scan the site's internal links and server-side routes for URLs containing uppercase letters. Check HTTP response codes for uppercase variants of key URLs to confirm whether they redirect (301) to lowercase.memory-leaks
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Prevent common memory leak patterns. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
436 tokensWhen the skill is activated
Reference documents
1,334 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,243 bytesSKILL.mdcore2,243 bytesreferences/rule.mddoc6,084 bytes
Read SKILL.md
# Prevent common memory leak patterns
Memory leaks cause applications to consume increasing amounts of memory over time, eventually slowing the browser tab or crashing it. In single-page applications, where users don't reload the page, small leaks in components accumulate with each navigation and can make an app unusable after 30 minutes of use.
## Quick Reference
- Remove event listeners when the element or component is destroyed
- Clear setInterval and setTimeout when they're no longer needed
- Avoid storing DOM references in long-lived objects after elements are removed
- Use WeakMap and WeakSet when storing metadata about objects you don't own
- Use AbortController to cancel stale async requests when UI state changes
## Check
meta-description
When your agent uses it
Use when auditing page metadata or generating descriptions for new pages. Applies to every page that should receive organic search traffic.
What it loads into context
Frontmatter
78 tokensAlways available to the agent
SKILL.md
432 tokensWhen the skill is activated
Reference documents
703 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,057 bytesreferences/rule.mddoc3,211 bytes
Read SKILL.md
# Write a meta description for each page
A compelling meta description acts as organic ad copy in search results—well-written descriptions improve click-through rates even though they are not a direct ranking signal.
## Quick Reference
- Every page should have a unique meta description between 120–160 characters
- Meta descriptions are not a ranking factor but strongly influence click-through rates
- Write descriptions as a call to action that summarises the page value
- Google may override your description with content from the page
## Check
Check the <head> for a <meta name='description'> tag. Verify it is present, unique, and between 120 and 160 characters. Flag pages where it is missing, duplicated, or outside the recommended length.meta-in-body
When your agent uses it
Use when auditing HTML document structure. Applies to any page where meta tags (noindex, canonical-url, description, viewport, OG tags) may have been injected into the body by CMS plugins, widgets, or JavaScript rendering.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
481 tokensWhen the skill is activated
Reference documents
869 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,170 bytesreferences/rule.mddoc3,831 bytes
Read SKILL.md
# Meta Tags in Body
Meta tags placed in the document body are ignored by search engines and most browsers—directives like noindex or canonical-url are silently ineffective, causing pages to be indexed or de-indexed unexpectedly.
## Quick Reference
- All <meta> tags must appear inside <head>, never inside <body>
- Browsers may ignore or move misplaced meta tags, making them ineffective
- Crawlers like Googlebot only process meta tags found in <head>
- Validate with HTML validator or inspect parsed DOM to confirm placement
## Check
Parse the HTML and check whether any <meta> elements appear outside <head>—i.e., inside <body> or after the </head> closing tag. Flag each misplaced tag by name/property.meta-refresh
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid meta refresh redirects. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
338 tokensWhen the skill is activated
Reference documents
528 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,734 bytesreferences/rule.mddoc2,564 bytes
Read SKILL.md
# Avoid meta refresh redirects
Unexpected page refreshes or redirects can be extremely confusing for users with cognitive disabilities and can cause screen readers to restart reading from the beginning.
## Quick Reference
- Avoid using `<meta http-equiv="refresh">` for page redirects
- Use server-side redirects (301 or 302) instead of client-side meta refreshes
- Ensure users have control over page refreshes and redirects
## Check
Check the HTML for any meta tags that use `http-equiv="refresh"` for automatic page redirection.
meta-title
When your agent uses it
Use when auditing page metadata or generating SEO-optimized titles. Applies to every HTML page that should appear in search results.
What it loads into context
Frontmatter
79 tokensAlways available to the agent
SKILL.md
467 tokensWhen the skill is activated
Reference documents
730 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,981 bytesreferences/rule.mddoc3,085 bytes
Read SKILL.md
# Write a descriptive page title
The <title> tag is the most prominent element in search result listings and browser tabs—it directly influences click-through rates and is a confirmed Google ranking signal.
## Quick Reference
- Every page must have a unique <title> tag inside <head>
- Target 50–60 characters to avoid truncation in SERPs
- Put the primary keyword near the beginning of the title
- Avoid duplicate titles across pages
## Check
Check the <head> section for a <title> tag. Verify it is unique (not duplicated on other pages), between 10 and 60 characters, and contains the page's primary keyword.mime-type
When your agent uses it
Use when auditing server configuration or diagnosing broken resources. Applies to any web server serving HTML, CSS, JS, images, fonts, or other static assets.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
473 tokensWhen the skill is activated
Reference documents
967 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,205 bytesreferences/rule.mddoc4,183 bytes
Read SKILL.md
# MIME Type Validation
Incorrect MIME types cause browsers to block stylesheets and scripts (MIME sniffing is disabled by X-Content-Type-Options: nosniff), breaking page rendering and signalling poor site quality to crawlers.
## Quick Reference
- The Content-Type header must match the actual file type being served
- HTML pages must be served as text/html; charset=utf-8
- CSS files must be served as text/css and JavaScript as text/javascript
- Incorrect MIME types cause browsers to block or mishandle resources
## Check
For key pages and their linked resources, inspect the HTTP Content-Type response header. Verify HTML responses use text/html; charset=utf-8, CSS uses text/css, JS uses text/javascript, and images use image/jpeg, image/png, etc.mixed-content
When your agent uses it
Use when reviewing an HTTPS page for resources (scripts, images, stylesheets, iframes) that are loaded over plain HTTP.
What it loads into context
Frontmatter
82 tokensAlways available to the agent
SKILL.md
487 tokensWhen the skill is activated
Reference documents
1,206 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,317 bytesSKILL.mdcore2,317 bytesreferences/rule.mddoc5,365 bytes
Read SKILL.md
# Avoid mixed content on HTTPS pages
Active mixed content (scripts loaded over HTTP into an HTTPS page) gives network attackers the ability to execute arbitrary JavaScript on your page — the same power as XSS, despite the page itself being served over HTTPS.
## Quick Reference
- Active mixed content (scripts, iframes, stylesheets) is blocked outright by all modern browsers
- Passive mixed content (images, audio, video) triggers a security warning and may be upgraded or blocked
- Use `upgrade-insecure-requests` CSP directive to automatically upgrade HTTP sub-resources to HTTPS
- Audit all hardcoded `http://` URLs in HTML, CSS, and JavaScript
- The `Content-Security-Policy: upgrade-insecure-requests` directive is the most practical fix for legacy content
## Check
mobile-testing
When your agent uses it
Use when reviewing CI coverage, automated checks, or test strategy related to Test on real mobile devices and viewports. Focus on whether the rule is continuously verified, not just documented.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
431 tokensWhen the skill is activated
Reference documents
1,032 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,068 bytesreferences/rule.mddoc4,415 bytes
Read SKILL.md
# Test on real mobile devices and viewports
More than 55% of global web traffic comes from mobile devices. Mobile browsers have different rendering engines, different font rendering, limited memory, real touch events that differ from mouse events, and system UI (notch, home indicator, keyboard) that intrudes on your layout. Issues like sticky hover states, touch target sizes, and keyboard layout shifts only appear on real devices.
## Quick Reference
- Desktop DevTools device emulation catches layout issues but not real touch behavior
- Test on at least one Android (Chrome) and one iOS (Safari) real device
- Test common viewport breakpoints: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad)
- Use BrowserStack or similar services for testing on devices you don't own
## Check
Does this project have any mobile-specific test configurations? Check for Playwright device emulation, mobile viewport tests, or notes about mobile testing.mock-best-practices
When your agent uses it
Use when reviewing CI coverage, automated checks, or test strategy related to Follow mocking best practices. Focus on whether the rule is continuously verified, not just documented.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
334 tokensWhen the skill is activated
Reference documents
924 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,701 bytesreferences/rule.mddoc3,989 bytes
Read SKILL.md
# Follow mocking best practices
Proper mocking isolates units under test while keeping tests realistic—over-mocking creates false confidence when tests pass but production breaks.
## Quick Reference
- Mock external dependencies (APIs, databases, file system), not business logic
- Always clean up mocks with jest.restoreAllMocks() in afterEach
- Use MSW for realistic API mocking without coupling to implementation
- Test behavior and outputs, not internal implementation details
## Check
Review this test file for mocking patterns, checking for over-mocking, missing mock cleanup, and proper mock implementation.modal-accessibility
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Make modal dialogs keyboard accessible. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
362 tokensWhen the skill is activated
Reference documents
1,175 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,888 bytesreferences/rule.mddoc5,144 bytes
Read SKILL.md
# Make modal dialogs keyboard accessible
Without proper focus trapping and keyboard handling, modal dialogs are invisible traps for keyboard users—they can't navigate, can't escape, and can't complete tasks.
## Quick Reference
- Use role='dialog' and aria-modal='true' on the modal container
- Trap focus inside the modal—Tab should cycle within modal only
- Close on Escape key press and return focus to trigger element
- Add aria-labelledby pointing to the modal title
## Check
Verify modals have proper ARIA roles, focus trapping, keyboard dismissal (Escape), and return focus on close.modern-array-methods
When your agent uses it
Use when reviewing scripts, client components, bundles, or runtime behavior related to Use modern array and object methods. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
396 tokensWhen the skill is activated
Reference documents
952 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,977 bytesSKILL.mdcore1,977 bytesreferences/rule.mddoc3,716 bytes
Read SKILL.md
# Use modern array and object methods
Modern array and object methods produce code that directly expresses intent — a filter() call self-documents that you're selecting items. Manual for loops obscure the purpose behind implementation details. These methods are also well-optimized by JavaScript engines and support chaining for concise data transformations.
## Quick Reference
- Use map() to transform arrays, filter() to select items, reduce() for aggregation
- Use find() and findIndex() instead of manual loops with break
- Use Object.entries() and Object.fromEntries() to transform objects
- Use structuredClone() for deep copying instead of JSON.parse(JSON.stringify())
## Check
Find loops in this file that could be replaced with modern array methods like map, filter, reduce, find, or flatMap.modern-format
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Use modern image formats (WebP, AVIF). Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
756 tokensWhen the skill is activated
Reference documents
1,415 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,120 bytesSKILL.mdcore3,120 bytesSKILL.mdcore3,120 bytesSKILL.mdcore3,120 bytesSKILL.mdcore3,120 bytesSKILL.mdcore3,120 bytesSKILL.mdcore3,120 bytesreferences/rule.mddoc5,421 bytes
Read SKILL.md
# Use modern image formats (WebP, AVIF)
Images are typically 50%+ of page weight. Switching from JPEG to WebP alone reduces transfer sizes by 25-35% with no visible quality change, directly improving Largest Contentful Paint (LCP) and saving bandwidth for users on mobile data plans. These savings compound across every visitor and every image on the site.
## Quick Reference
- WebP is ~25-35% smaller than JPEG at equivalent quality (per web.dev)
- AVIF is ~40-50% smaller than JPEG at equivalent quality (per web.dev)
- Use `<picture>` with `<source type="image/avif">` and `<source type="image/webp">` plus an `<img>` fallback
- WebP has 97%+ global browser support; AVIF is supported in all modern browsers as of 2023
## Check
Scan all <img> elements and CSS background-image declarations in this codebase. Identify: 1) Any <img src> pointing to .jpg, .jpeg, or .png files (not served via a CDN that auto-negotiates format). 2) Any <picture> elements that lack <source type="image/webp"> or <source type="image/avif"> entries. 3) Any CSS background images using JPEG or PNG when a WebP equivalent could be used. Report each finding with file path and line number.mutation-testing
When your agent uses it
Use when evaluating test quality on modules containing business logic, calculation utilities, or state machines to determine whether the tests provide genuine defect detection.
What it loads into context
Frontmatter
82 tokensAlways available to the agent
SKILL.md
394 tokensWhen the skill is activated
Reference documents
1,685 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,006 bytesreferences/rule.mddoc6,813 bytes
Read SKILL.md
# Use mutation testing to measure how well tests detect bugs
A codebase can have 90% line coverage and still ship critical bugs if tests only execute code without asserting meaningful outcomes. Mutation testing reveals these gaps by proving that your tests can distinguish correct code from subtly broken code — the standard that actually matters in production.
## Quick Reference
- Code coverage tells you which lines were executed; mutation score tells you which bugs were caught
- Stryker injects small code changes (mutations) and checks whether tests fail — if they don't, the tests are weak
- Aim for 80%+ mutation score on critical business logic paths
- Run Stryker on a focused scope (one module) rather than the whole codebase to keep CI times manageable
## Check
Assess whether this module has mutation testing configured and whether the mutation score on critical paths meets the project's quality threshold.naming-conventions
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use consistent CSS naming conventions. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
392 tokensWhen the skill is activated
Reference documents
862 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,924 bytesreferences/rule.mddoc3,633 bytes
Read SKILL.md
# Use consistent CSS naming conventions
Without a naming convention, class names become a guessing game — does .active mean the nav item is active, the button is pressed, or a form field has focus? With BEM or a similar methodology, .button--active is unambiguous. This reduces the time spent searching for existing styles and prevents accidental style conflicts.
## Quick Reference
- BEM (Block__Element--Modifier) is the most widely adopted naming convention
- Consistent naming lets you understand a class's purpose without reading its styles
- Namespace utility classes and JS hooks separately from component styles
- Use kebab-case for class names (not camelCase or snake_case)
## Check
Audit the class names in this CSS file. Are they consistently named? Do they follow a clear convention? Are there any ambiguous names that could conflict?nap-consistency
When your agent uses it
Use when auditing a local business website for local SEO. Applies to any business that has a physical address and wants to appear in local search results or Google Maps.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
501 tokensWhen the skill is activated
Reference documents
989 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,452 bytesreferences/rule.mddoc4,197 bytes
Read SKILL.md
# Keep NAP details consistent
Inconsistent NAP information across a website signals to search engines that the business details are unreliable, which can suppress local rankings and prevent the Knowledge Panel from showing accurate information.
## Quick Reference
- NAP = Name, Address, Phone — must be identical everywhere they appear on the site
- Inconsistencies confuse search engines and hurt local ranking
- Use identical formatting: same abbreviations, same phone format, same suite notation
- Reinforce NAP consistency in LocalBusiness schema markup
## Check
Search the site for all instances of the business name, street address, and phone number. Compare each occurrence for exact consistency in spelling, formatting, and abbreviation (e.g., 'St.' vs 'Street', '555-1234' vs '(555) 123-4567'). Also check JSON-LD LocalBusiness schema against the visible text.navigation-landmark
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Use navigation landmark regions. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
314 tokensWhen the skill is activated
Reference documents
1,962 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,668 bytesSKILL.mdcore1,668 bytesreferences/rule.mddoc7,511 bytes
Read SKILL.md
# Use navigation landmark regions
Navigation landmarks allow screen reader users to quickly jump to and identify different navigation areas—without them, users must tab through every link to find what they need.
## Quick Reference
- Wrap navigation links in nav elements
- Use aria-label to distinguish multiple nav regions
- Provide skip links to bypass repetitive navigation
- Screen reader users navigate by landmarks
## Check
Verify navigation areas use nav elements with aria-label or aria-labelledby to distinguish primary, secondary, and footer navigation.new-tab
When your agent uses it
Use when reviewing HTML or JSX for anchor elements with target='_blank' to verify rel='noopener noreferrer' is present.
What it loads into context
Frontmatter
78 tokensAlways available to the agent
SKILL.md
470 tokensWhen the skill is activated
Reference documents
1,091 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,174 bytesreferences/rule.mddoc4,748 bytes
Read SKILL.md
# External Link Security
A malicious site opened via target='_blank' can use window.opener.location to silently redirect your original tab to a phishing page — the user switches back and sees a fake login screen on what appears to be your domain.
## Quick Reference
- Always add `rel="noopener noreferrer"` to any `<a target="_blank">` link
- `noopener` prevents the new tab from accessing `window.opener` and redirecting your page
- `noreferrer` additionally suppresses the `Referer` header sent to the destination site
- Modern browsers (Chrome 88+, Firefox 79+) implicitly add `noopener` for cross-origin `_blank` links, but explicit markup is required for older browsers and same-origin links
- ESLint rule `jsx-a11y/anchor-is-valid` and `eslint-plugin-security` can enforce this automatically
## Check
no-explicit-any
When your agent uses it
Use when reviewing TypeScript files for type safety regressions, during code review of functions that handle external data, or when the codebase has ESLint warnings for @typescript-eslint/no-explicit-any.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
463 tokensWhen the skill is activated
Reference documents
1,644 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,262 bytesreferences/rule.mddoc7,016 bytes
Read SKILL.md
# Avoid the any type — use unknown, generics, or type guards instead
The any type is a local opt-out that becomes a global problem: a function returning any propagates unchecked types to every caller, silently undermining the type system across the entire codebase. Replacing any with unknown forces type narrowing at the point of use, turning latent runtime errors into compile-time failures where they are cheapest to fix.
## Quick Reference
- any disables all type checking for a value and cascades to callers
- unknown is the safe alternative — it requires a type check before use
- Use generics to express "I accept any type, but it stays consistent"
- At API boundaries, validate with Zod rather than asserting with as Type
## Check
Scan this TypeScript file for uses of the any type (explicit annotations, implicit any from missing types, and type assertions to any). Report each location and suggest a safer alternative.no-unchecked-indexed-access
When your agent uses it
Use when auditing tsconfig.json for missing safety flags, reviewing code that uses array index access in data processing pipelines, or investigating runtime undefined errors that TypeScript did not catch.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
484 tokensWhen the skill is activated
Reference documents
1,526 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,333 bytesreferences/rule.mddoc6,263 bytes
Read SKILL.md
# Enable noUncheckedIndexedAccess to catch out-of-bounds array bugs
TypeScript's default behaviour types `array[0]` as `T`, pretending the access is always safe. In reality, the array might be empty or the index might be out of range, leading to silent `undefined` values that cause downstream crashes. Enabling `noUncheckedIndexedAccess` surfaces these potential failures as type errors at compile time, requiring developers to prove the access is safe before the code runs.
## Quick Reference
- Without the flag, array[0] is typed as T even if the array is empty
- noUncheckedIndexedAccess changes array[n] to return T | undefined
- Forces an explicit check before using any array element accessed by index
- Optional chaining and nullish coalescing handle most false positives cleanly
## Check
Check whether noUncheckedIndexedAccess is enabled in the project's tsconfig.json. If not, scan for array index accesses (arr[0], arr[i]) that could fail if the array is shorter than expected.nofollow-internal
When your agent uses it
Use when auditing internal link structure or reviewing link attributes. Applies to any site using rel=nofollow on links pointing to pages within the same domain.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
508 tokensWhen the skill is activated
Reference documents
970 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,321 bytesSKILL.mdcore2,321 bytesreferences/rule.mddoc4,433 bytes
Read SKILL.md
# Avoid nofollow on internal links
Adding rel=nofollow to internal links prevents PageRank from flowing to those pages—reducing their ability to rank—while providing no benefit over simply omitting the attribute.
## Quick Reference
- rel=nofollow on internal links blocks PageRank flow to your own pages
- Internal nofollow was once used for 'PageRank sculpting' but is no longer effective
- Use nofollow only on outbound links to untrusted or sponsored content
- If you don't want a page crawled or indexed, use noindex on the target page instead
## Check
Scan all internal links (<a href> tags pointing to the same domain) for the presence of rel='nofollow' or rel containing 'nofollow'. List each instance with its source page, anchor text, and target URL.noindex-in-sitemap
When your agent uses it
Use when auditing an XML sitemap or diagnosing indexing issues. Applies to any site where noindex meta tags or X-Robots-Tag headers may be applied to URLs also listed in the sitemap.
What it loads into context
Frontmatter
100 tokensAlways available to the agent
SKILL.md
519 tokensWhen the skill is activated
Reference documents
873 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,330 bytesreferences/rule.mddoc3,757 bytes
Read SKILL.md
# Noindex in Sitemap
Listing noindexed pages in your sitemap sends contradictory signals to Googlebot—it wastes crawl budget and may confuse Google into ignoring the noindex directive or spending crawl time on pages you don't want indexed.
## Quick Reference
- Never include noindexed pages in your XML sitemap
- The sitemap and noindex directive send contradictory signals to crawlers
- Sitemaps should only list canonical-url, indexable, 200-status URLs
- Remove noindexed URLs from sitemap or remove the noindex directive—pick one
## Check
Fetch the XML sitemap(s) and check each listed URL. For each URL, retrieve the page and check for <meta name='robots' content='noindex'> in the <head> or an X-Robots-Tag: noindex HTTP header. Report any URLs present in the sitemap that also carry a noindex directive.noscript-tag
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Provide noscript fallback content. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
419 tokensWhen the skill is activated
Reference documents
5,087 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,213 bytesSKILL.mdcore2,213 bytesreferences/rule.mddoc22,512 bytes
Read SKILL.md
# Provide noscript fallback content
Users with JavaScript disabled, blocked by corporate firewalls, or with failed script loads see blank pages without proper noscript fallbacks.
## Quick Reference
- Add <noscript> with helpful message for JS-dependent features
- Provide alternative content, not just 'Enable JavaScript'
- Use for critical features: analytics fallback, lazy-loaded images
- Consider progressive enhancement: content works without JS
- Important content should be present in the initial HTML, not fetched only after hydration
## Check
nosnippet
When your agent uses it
Use when auditing robots meta tags. Applies to any important landing page, article, or product page that should appear with a description in search results.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
460 tokensWhen the skill is activated
Reference documents
832 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,124 bytesreferences/rule.mddoc3,987 bytes
Read SKILL.md
# Avoid nosnippet on important pages
Pages with nosnippet display without a description in search results, reducing click-through rates and making it harder for users to understand whether the result is relevant to their query.
## Quick Reference
- nosnippet prevents Google from showing a description under your title in search results
- Pages without snippets have significantly lower click-through rates
- Use max-snippet:-1 to explicitly allow unlimited snippet length instead
- Only use nosnippet deliberately on legally sensitive content
## Check
Check the <meta name='robots'> tag and X-Robots-Tag response header for each important page. Flag any that contain 'nosnippet' or 'max-snippet:0'. Confirm these pages intentionally suppress snippets.object-alt
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alternative text for objects. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
325 tokensWhen the skill is activated
Reference documents
582 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,715 bytesreferences/rule.mddoc2,839 bytes
Read SKILL.md
# Provide alternative text for objects
If an object fails to load or the user's browser doesn't support the format, alternative text ensures that the information is still accessible.
## Quick Reference
- Include descriptive alternative text inside every `<object>` element
- The fallback content should serve as a functional equivalent
- Use simple text or other semantic elements as alternative content
## Check
Check all `<object>` elements in the HTML to ensure they contain descriptive fallback content.
offline-fallback
When your agent uses it
Use when adding PWA capabilities, implementing a service worker, or improving the experience for users on unreliable network connections.
What it loads into context
Frontmatter
81 tokensAlways available to the agent
SKILL.md
378 tokensWhen the skill is activated
Reference documents
1,859 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,953 bytesreferences/rule.mddoc7,665 bytes
Read SKILL.md
# Provide an offline fallback page
The browser's default offline error screen ("No internet connection") is confusing and completely outside your brand. A custom offline page maintains the user experience, reinforces trust, and can surface cached content or useful actions — such as enabling users to continue reading a cached article or queuing a form submission for later.
## Quick Reference
- Create a minimal /offline HTML page that works without any network requests
- Pre-cache the offline page during the service worker install event
- Intercept failed navigation requests and serve the offline page instead
- Include helpful guidance so users know what to do while offline
## Check
Check whether the site shows a custom offline fallback page when the network is disconnected and a navigation request cannot be fulfilled.offscreen-lazy
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Lazy load offscreen images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Missing `loading='lazy'` is only a valid finding when you can reasonably tell the image is offscreen or non-critical.
What it loads into context
Frontmatter
122 tokensAlways available to the agent
SKILL.md
729 tokensWhen the skill is activated
Reference documents
1,505 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,376 bytesreferences/rule.mddoc6,202 bytes
Read SKILL.md
# Lazy load offscreen images
Lazy loading eliminates unnecessary image downloads on initial page load. A page with 20 images below the fold may transfer several megabytes of data that users who don't scroll will never see. Deferring these downloads reduces Time to Interactive, improves LCP for above-fold content, and saves bandwidth—particularly impactful for users on metered mobile connections.
## Quick Reference
- Add `loading="lazy"` to all `<img>` elements below the fold
- Never lazy-load the LCP image (hero, first product image)—use `fetchpriority="high"` instead
- Always pair `loading="lazy"` with `width` and `height` attributes to prevent CLS
- Native `loading="lazy"` has universal support in all modern browsers—no JavaScript polyfill needed
- If fold position is unclear from the snippet, do not invent a lazy-loading defect
## Check
og-image-size
When your agent uses it
Use when auditing Open Graph tags or generating og:image assets. Applies to any page that may be shared on social networks or messaging platforms.
What it loads into context
Frontmatter
85 tokensAlways available to the agent
SKILL.md
545 tokensWhen the skill is activated
Reference documents
927 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,299 bytesreferences/rule.mddoc3,773 bytes
Read SKILL.md
# OG Image Size
An incorrectly sized og:image is displayed poorly or not at all on social platforms—Facebook, Twitter/X, LinkedIn each crop or skip images that don't meet their requirements, resulting in blank or distorted link previews.
## Quick Reference
- og:image should be 1200×630 pixels (1.91:1 aspect ratio)
- Minimum size is 600×315 pixels; smaller images may not display
- File size should stay under 5 MB; under 1 MB is preferred
- Use JPEG or PNG; WebP has limited support on older platforms
## Check
Find the og:image meta tag in <head> and fetch the image URL. Check the image dimensions and file size. Flag if width < 1200px, height < 630px, aspect ratio differs significantly from 1.91:1, or file size exceeds 5 MB.og-tags
When your agent uses it
Use when auditing a web page's social sharing metadata. Applies to any page users might share on social networks or messaging apps.
What it loads into context
Frontmatter
81 tokensAlways available to the agent
SKILL.md
457 tokensWhen the skill is activated
Reference documents
938 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,987 bytesreferences/rule.mddoc4,216 bytes
Read SKILL.md
# Open Graph Tags
Open Graph tags control how your pages appear when shared on Facebook, LinkedIn, Slack, and other platforms—missing or incorrect tags result in unappealing link previews that reduce click-through rates.
## Quick Reference
- Include og:title, og:description, og:image, and og:url on every page
- Use absolute URLs for og:image and og:url
- og:image should be at least 1200×630 px for optimal display
- og:type defaults to 'website' if omitted, but setting it explicitly is best practice
## Check
Check the <head> for Open Graph meta tags: og:title, og:description, og:image, og:url, and og:type. Verify all values are non-empty and og:image/og:url use absolute HTTPS URLs.og-url-match
When your agent uses it
Use when auditing Open Graph tags or investigating why social share counts appear low. Applies to any page with both canonical-url and og:url tags.
What it loads into context
Frontmatter
86 tokensAlways available to the agent
SKILL.md
463 tokensWhen the skill is activated
Reference documents
883 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,171 bytesreferences/rule.mddoc3,928 bytes
Read SKILL.md
# OG URL Match
When og:url doesn't match the canonical URL, social platforms track share counts separately for each URL variant—published share counts get split across multiple URLs and appear lower than they actually are.
## Quick Reference
- og:url must exactly match the <link rel='canonical-url'> URL
- Use absolute HTTPS URLs for both og:url and canonical-url
- Mismatched URLs cause social platforms to aggregate share counts on the wrong URL
- og:url should be the clean canonical URL without tracking parameters
## Check
Compare the og:url meta tag value with the <link rel='canonical'> href value. Both must be identical absolute HTTPS URLs. Flag any page where they differ, either in protocol, domain, path, or query string.optimized
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Optimise images for faster loading. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
726 tokensWhen the skill is activated
Reference documents
1,296 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,317 bytesreferences/rule.mddoc5,271 bytes
Read SKILL.md
# Optimise images for faster loading
Unoptimised images are the most prevalent cause of page bloat. A DSLR-quality JPEG with EXIF data can be 8MB; the same image optimised for web delivery is under 200KB with no visible quality difference. Lighthouse's 'Efficiently encode images' audit reports potential savings that, when fixed, directly improve LCP and reduce bandwidth costs.
## Quick Reference
- Strip EXIF metadata from all JPEG/WebP images before deployment—it adds unnecessary bytes
- JPEG: quality 80 with `progressive: true` (mozjpeg); PNG: run pngquant at quality 65-80
- SVG: run through SVGO to remove editor artefacts and reduce file size
- Lighthouse flags images reducible by 4KB+ as 'Efficiently encode images' opportunities
## Check
Audit all image assets in this project for optimisation issues: 1) Run Lighthouse and check the 'Efficiently encode images' audit—it flags images that could be reduced by 4KB or more. 2) Check if JPEG images use progressive encoding (better perceived performance). 3) Check if images retain EXIF/IPTC metadata (adds unnecessary bytes). 4) Check if PNG images could be quantised (pngquant) for smaller files. 5) Check if SVG files contain unnecessary editor metadata, comments, or redundant attributes. Report each image with its current size and estimated savings.organization
When your agent uses it
Use when auditing structured data on a business or brand website homepage. Applies to organisations, companies, non-profits, and publishers that want accurate Knowledge Panel information in Google Search.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
489 tokensWhen the skill is activated
Reference documents
1,102 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,440 bytesreferences/rule.mddoc4,632 bytes
Read SKILL.md
# Add Organization schema markup
Organization schema helps Google understand your brand, populate your Knowledge Panel with accurate information (logo, social links, contact details), and improve brand-related search appearance.
## Quick Reference
- Add Organization JSON-LD schema to your homepage (and only the homepage)
- Required: name, url, logo — all other properties strengthen your Knowledge Panel
- sameAs links to social profiles help Google confirm your brand identity
- Use a persistent logo URL that won't change; it appears in Google's Knowledge Panel
## Check
Check the homepage for a JSON-LD script block with @type 'Organization' or 'Corporation'. Verify it includes: name, url, logo (with @type ImageObject), and sameAs array with social profile URLs. Validate with Google's Rich Results Test.orientation
When your agent uses it
Use when reviewing mobile-first layouts, tablet experiences, fullscreen flows, forms, dashboards, or media interfaces. Check rendered behavior in both portrait and landscape and separate genuine layout constraints from unnecessary orientation assumptions.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
451 tokensWhen the skill is activated
Reference documents
996 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,499 bytesreferences/rule.mddoc4,885 bytes
Read SKILL.md
# Support both portrait and landscape orientation
Many users mount devices to wheelchairs, use tablets on stands, or cannot easily rotate a device. If a site only works in one orientation, these users may lose access to content or critical actions entirely.
## Quick Reference
- Do not lock the interface to portrait-only or landscape-only unless the task truly requires it
- Ensure all core content and controls remain usable after device rotation
- Use responsive layouts that adapt instead of hiding functionality in one orientation
- If a specific orientation is essential, explain why and provide the best available alternative
## Check
Rotate the page between portrait and landscape on mobile and tablet viewports. Verify all primary content, navigation, forms, and interactive controls remain available and usable in both orientations. Flag any use of orientation locks, rotate-device overlays that block content, or layouts that hide essential functionality in one orientation.orphan-pages
When your agent uses it
Use when auditing site architecture or investigating why specific pages have low organic traffic despite good content. Applies to any site with more than ~20 pages.
What it loads into context
Frontmatter
85 tokensAlways available to the agent
SKILL.md
493 tokensWhen the skill is activated
Reference documents
941 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,407 bytesreferences/rule.mddoc4,372 bytes
Read SKILL.md
# Add internal links to orphan pages
Orphan pages receive no PageRank from internal links and are rarely recrawled by Googlebot, which limits their ability to rank even when their content is excellent.
## Quick Reference
- Orphan pages have no internal links pointing to them from other site pages
- Googlebot may never discover or regularly recrawl pages with no internal links
- Add at least one contextually relevant internal link to every important page
- The sitemap alone is not sufficient — internal links are required for PageRank flow
## Check
Using a site crawl (Screaming Frog or similar), identify pages that appear in the sitemap or have been indexed but receive zero inbound internal links. List the URL, page title, and any existing content that could logically link to the orphan page.page-load-time
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Keep page load time under 3 seconds. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
362 tokensWhen the skill is activated
Reference documents
1,006 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,673 bytesreferences/rule.mddoc3,941 bytes
Read SKILL.md
# Keep page load time under 3 seconds
Studies show 53% of mobile users abandon sites that take longer than 3 seconds to load—slow pages directly hurt conversions, engagement, and SEO rankings.
## Quick Reference
- 3 seconds is the threshold where bounce rates spike dramatically
- 53% of mobile users abandon sites taking over 3 seconds
- Focus on Core Web Vitals: LCP, FID/INP, CLS
- Test on throttled 3G to simulate real-world conditions
## Check
Measure the page load time and verify it's under 3 seconds on a standard connection.page-weight
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Keep page weight under 1500KB. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
370 tokensWhen the skill is activated
Reference documents
1,376 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,712 bytesreferences/rule.mddoc4,935 bytes
Read SKILL.md
# Keep page weight under 1500KB
Page weight directly correlates with load time—a 1.5MB page takes 3-5 seconds on 4G mobile. Every 100KB reduction improves user experience, especially on slower networks.
## Quick Reference
- Target under 500KB for optimal performance, max 1500KB
- Images typically account for 50-70% of page weight
- JavaScript bundles are often the second largest contributor
- Monitor with performance budgets in CI/CD
## Check
Analyze the total page weight including all resources. Check if it's under 1500KB (ideally under 500KB).pagination
When your agent uses it
Use when auditing paginated content (blog archives, product category pages, search results). Applies to any site with lists or grids of content split across multiple pages.
What it loads into context
Frontmatter
86 tokensAlways available to the agent
SKILL.md
634 tokensWhen the skill is activated
Reference documents
1,165 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,801 bytesreferences/rule.mddoc5,158 bytes
Read SKILL.md
# Use canonicals on paginated pages
Incorrect pagination canonicalization can prevent pages 2, 3, etc. from being indexed, removing valuable content from search results and breaking user journeys from search queries that match content on later pages.
## Quick Reference
- Each paginated page (/page/2, /page/3) should self-canonicalize to its own URL
- Do NOT canonicalize all paginated pages to page 1 — this is a common mistake
- Google dropped support for rel=prev/next in 2019 — don't rely on it
- Use consistent URL patterns for pagination (?page=2 or /page/2, never both)
- Infinite scroll and load-more UIs still need crawlable paginated URLs or links
## Check
pagination-accessibility
When your agent uses it
Use when reviewing templates, rendered HTML, or shared components related to Make pagination accessible. Validate the final browser-facing markup, not just the source framework abstraction.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
312 tokensWhen the skill is activated
Reference documents
2,066 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,619 bytesSKILL.mdcore1,619 bytesreferences/rule.mddoc8,205 bytes
Read SKILL.md
# Make pagination accessible
Without proper markup, screen reader users cannot understand which page they're on or navigate efficiently through paginated content.
## Quick Reference
- Use nav element with aria-label='Pagination'
- Mark current page with aria-current='page'
- Provide clear labels for previous/next buttons
- Announce page changes to screen readers
## Check
Verify pagination uses nav element with aria-label, indicates current page with aria-current, and is keyboard navigable.parallax-effects
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alternatives to parallax effects. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
102 tokensAlways available to the agent
SKILL.md
401 tokensWhen the skill is activated
Reference documents
1,128 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,093 bytesreferences/rule.mddoc4,965 bytes
Read SKILL.md
# Provide alternatives to parallax effects
Parallax creates a mismatch between what the eyes see and what the inner ear senses—triggering dizziness, nausea, and vertigo for users with vestibular disorders.
## Quick Reference
- Disable parallax when prefers-reduced-motion is set
- Parallax creates depth mismatch triggering vestibular disorders
- Provide user toggle to disable motion effects site-wide
- Ensure essential content is accessible without the effect
## Check
Identify parallax effects where background and foreground move at different speeds. Verify these effects are disabled when prefers-reduced-motion is set, and essential content is accessible without the effect.parameters
When your agent uses it
Use when auditing URL structure or configuring search engine handling of filtered, sorted, or tracked URLs. Applies to e-commerce sites, filtered content directories, and any site appending tracking or session parameters.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
521 tokensWhen the skill is activated
Reference documents
1,025 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,552 bytesreferences/rule.mddoc4,757 bytes
Read SKILL.md
# Limit unnecessary URL parameters
Uncontrolled URL parameters generate duplicate content that wastes crawl budget and splits PageRank across URL variants, reducing the ranking potential of the canonical-url page.
## Quick Reference
- URL parameters can create thousands of duplicate URLs from a single page
- Use canonical tags to consolidate parametric URL variants to a single URL
- Strip tracking parameters (utm_*, fbclid, gclid) before setting the canonical-url
- For critical parameters (page, sort), include them in the canonical URL
## Check
Identify URL parameters in use across the site (filter, sort, color, size, utm_*, page, etc.). For each parameter type, check whether the page has a canonical tag. Verify that tracking-only parameters (utm_source, fbclid, gclid) are excluded from canonical URLs. Identify URLs with 3+ parameters and review for potential crawl budget waste.password-field-security
When your agent uses it
Use when reviewing headers, forms, cookies, or third-party integrations related to Secure password input fields. Validate the effective browser and HTTP behavior in a production-like environment.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
332 tokensWhen the skill is activated
Reference documents
3,450 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,830 bytesreferences/rule.mddoc11,703 bytes
Read SKILL.md
# Secure password input fields
Properly implemented password fields improve security by working with password managers, helping users create strong passwords, and providing accessible controls for all users.
## Quick Reference
- Use type='password' with correct autocomplete attribute
- Provide accessible show/hide toggle for password visibility
- Show password strength indicator with requirements
- Never store or transmit passwords in plain text
- Support password managers with proper input names
## Check
paste-inputs
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Allow pasting into form inputs. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
103 tokensAlways available to the agent
SKILL.md
362 tokensWhen the skill is activated
Reference documents
523 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,769 bytesreferences/rule.mddoc2,642 bytes
Read SKILL.md
# Allow pasting into form inputs
Restricting pasting makes it difficult for users to use password managers or copy-paste long strings of data, which can lead to increased errors and a poor user experience.
## Quick Reference
- Do not block the 'paste' event on any form input
- Ensure password fields and credit card inputs allow pasting from managers
- Remove `onpaste="return false"` from all input elements
## Check
Check the codebase for any JavaScript or HTML attributes that prevent users from pasting into form fields.
pdf-size
When your agent uses it
Use when auditing a site that publishes downloadable PDFs (reports, white papers, legal documents, manuals). Applies to any site where PDFs are linked as indexable content resources.
What it loads into context
Frontmatter
89 tokensAlways available to the agent
SKILL.md
509 tokensWhen the skill is activated
Reference documents
912 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,388 bytesreferences/rule.mddoc3,901 bytes
Read SKILL.md
# Keep linked PDFs under 60 MB
PDFs larger than Googlebot's download threshold are partially crawled or skipped, meaning their content may not appear in search results even when linked from well-indexed pages.
## Quick Reference
- Googlebot truncates files larger than 15 MB for crawling; 60 MB is a documented upper limit
- Large PDFs may be partially indexed or skipped entirely
- Compress PDFs before publishing: use PDF optimisation tools to reduce file size
- Add HTML landing pages alongside PDFs to ensure content is indexable
## Check
Find all <a href='*.pdf'> links on the site. For each linked PDF, perform a HEAD request and check the Content-Length header. Flag any PDF exceeding 10 MB (recommend compression) or 15 MB (likely to be truncated by Googlebot).performance-budget
When your agent uses it
Use when reviewing CI configuration, bundle analysis workflows, or pull requests that add dependencies and assets. Distinguish bundle-size budgets from runtime budgets such as Lighthouse or Core Web Vitals so teams can enforce both.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
432 tokensWhen the skill is activated
Reference documents
1,277 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,188 bytesreferences/rule.mddoc5,126 bytes
Read SKILL.md
# Enforce performance budgets in CI
Without automated enforcement, performance degrades gradually — each PR adds a small library, each feature adds a few KB, and within months the app that loaded in 2 seconds now takes 5. Performance budgets make regressions visible at PR time rather than after user complaints. Catching 'this PR added 200KB to the bundle' in review is far cheaper than debugging a slow production site.
## Quick Reference
- Define specific thresholds: max bundle size, min Lighthouse score, max LCP time
- Fail CI when budgets are exceeded to prevent performance regressions
- Size budgets catch accidental heavy dependencies; Lighthouse budgets catch runtime regressions
- Start with loose budgets and tighten them as you optimize
- Monitor production RUM so regressions are caught after deploy, not only in CI
## Check
performance-resource-hints
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Use resource hints for faster loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
362 tokensWhen the skill is activated
Reference documents
1,544 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,762 bytesreferences/rule.mddoc6,503 bytes
Read SKILL.md
# Use resource hints for faster loading
Resource hints let the browser start fetching critical assets earlier—improving LCP by 100-300ms on average.
## Quick Reference
- Use preload for critical above-the-fold resources (fonts, hero images)
- Use preconnect for third-party origins (CDNs, APIs, analytics)
- Use prefetch for resources likely needed on next navigation
- Use dns-prefetch as a lightweight alternative to preconnect
## Check
Analyze resource hints on this page and verify critical resources use preload/preconnect for optimal loading.permissions-policy
When your agent uses it
Use when reviewing HTTP response headers for defense-in-depth security hardening on any web application.
What it loads into context
Frontmatter
73 tokensAlways available to the agent
SKILL.md
445 tokensWhen the skill is activated
Reference documents
1,388 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,262 bytesreferences/rule.mddoc6,155 bytes
Read SKILL.md
# Set a Permissions-Policy header
A site compromised by XSS that has unrestricted camera and microphone access can silently record the user. Permissions-Policy limits which browser APIs are available, reducing attacker capabilities even after a successful injection.
## Quick Reference
- Use `Permissions-Policy` to disable browser features your site does not use (camera, microphone, geolocation, payment)
- Syntax: `Permissions-Policy: camera=(), microphone=(), geolocation=()` — empty `()` means denied to all
- Previously called `Feature-Policy` — the old syntax is deprecated and only supported in older browsers
- Restricting unused features limits the blast radius if your site is compromised by XSS
- Third-party iframes inherit page restrictions unless you explicitly grant them permissions
## Check
physical-address
When your agent uses it
Use when auditing local business websites, e-commerce sites, or any site where a physical presence affects trust or local search visibility.
What it loads into context
Frontmatter
81 tokensAlways available to the agent
SKILL.md
458 tokensWhen the skill is activated
Reference documents
879 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,297 bytesreferences/rule.mddoc3,771 bytes
Read SKILL.md
# Display a physical business address
A visible physical address builds user trust (especially for e-commerce and YMYL sites), supports local SEO rankings, and is a requirement for compliance in many jurisdictions.
## Quick Reference
- Display a complete physical address on the contact page and footer
- Mark up the address with LocalBusiness schema or HTML microdata
- Consistent address format builds trust and supports local SEO
- Use <address> HTML element for semantic correctness
## Check
Check the contact page and footer for a visible physical address. Verify the address is complete (street, city, state/region, postal code, country). Check whether the address uses the <address> HTML element and whether it is backed by LocalBusiness or PostalAddress schema markup.picture-element
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Use <picture> with an <img> fallback. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
749 tokensWhen the skill is activated
Reference documents
1,509 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,113 bytesSKILL.mdcore3,113 bytesSKILL.mdcore3,113 bytesSKILL.mdcore3,113 bytesreferences/rule.mddoc5,501 bytes
Read SKILL.md
# Use <picture> with an <img> fallback
A `<picture>` without an `<img>` fallback renders nothing in browsers that don't support `<picture>` (IE11) or don't support any of the `<source>` formats. The `<img>` child is also where `alt`, `width`, `height`, `loading`, and `fetchpriority` attributes live—these apply regardless of which source the browser selects.
## Quick Reference
- Every `<picture>` must end with an `<img>` element—it is the required fallback and carries `alt`
- `<source>` elements are evaluated top-to-bottom; the first match wins
- Use `type="image/avif"` and `type="image/webp"` on `<source>` for format selection
- The `<img src>` should point to a JPEG or PNG—the universal fallback for all browsers
## Check
Scan all <picture> elements in this codebase. Verify: 1) Every <picture> has an <img> as its last child (required fallback). 2) The <img> has an alt attribute. 3) The <img> has width and height attributes. 4) <source> elements appear before the <img> child. 5) Each <source> has either a srcset attribute or a media attribute. 6) format-selecting <source> elements have a type attribute (type="image/avif", type="image/webp"). Flag any <picture> missing an <img> child or with <img> not as the last child.plain-language
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Write in plain language. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
98 tokensAlways available to the agent
SKILL.md
372 tokensWhen the skill is activated
Reference documents
1,151 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,971 bytesreferences/rule.mddoc5,074 bytes
Read SKILL.md
# Write in plain language
Plain language helps users with cognitive disabilities, learning differences, attention disorders, non-native speakers, and anyone reading quickly or under stress.
## Quick Reference
- Use short sentences and common words
- Define technical terms when first used
- Write in active voice, not passive
- Target reading level appropriate for your audience (often 8th grade)
## Check
Review content for jargon, complex sentences, and unnecessary technical terms. Verify reading level is appropriate for the audience. Check that instructions are clear and actions are obvious.pluralization
When your agent uses it
Use when reviewing string concatenation involving counts, translation key lookups, or i18n library configurations to check whether plural forms are handled correctly for all target locales.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
455 tokensWhen the skill is activated
Reference documents
2,271 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,214 bytesreferences/rule.mddoc9,148 bytes
Read SKILL.md
# Handle plural forms with Intl.PluralRules or ICU MessageFormat
Pluralization rules vary dramatically across languages — what works as a simple singular/plural branch in English produces grammatically wrong output in Arabic, Russian, Polish, and dozens of other languages. Shipping incorrect plurals signals low translation quality and breaks trust with native speakers in target markets.
## Quick Reference
- English has 2 plural forms but Arabic has 6 and Russian has 3
- Never concatenate a count with a string like '"You have " + count + " items"'
- Use Intl.PluralRules to select the right message key per locale
- ICU MessageFormat in react-intl or i18next handles plural selection automatically
## Check
Find all places in this codebase where a count value is concatenated with a string or where only singular/plural branching is used, without Intl.PluralRules or ICU plural syntax.preconnect
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Use preconnect for critical third-party origins. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
351 tokensWhen the skill is activated
Reference documents
797 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,753 bytesreferences/rule.mddoc3,789 bytes
Read SKILL.md
# Use preconnect for critical third-party origins
Preconnecting to essential origins can shave hundreds of milliseconds off the critical path by handling connection overhead ahead of time.
## Quick Reference
- Establish early connections to important third-party domains (e.g., fonts, APIs)
- Reduce latency by performing DNS lookup, TCP handshake, and TLS negotiation early
- Avoid overusing preconnect; limit to 2-4 most critical origins
## Check
Review the page's head for preconnect hints and identify any missing or unnecessary connections to third-party domains.
privacy-policy
When your agent uses it
Use when reviewing whether a website has a visible, accessible privacy policy link, particularly in the footer navigation.
What it loads into context
Frontmatter
75 tokensAlways available to the agent
SKILL.md
495 tokensWhen the skill is activated
Reference documents
1,102 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,471 bytesreferences/rule.mddoc5,313 bytes
Read SKILL.md
# Link to your privacy policy in the footer
Collecting user data without a publicly accessible privacy policy violates GDPR (EU), CCPA (California), PIPEDA (Canada), and other regulations — even if the policy is technically published but not linked from the site.
## Quick Reference
- Link to a published privacy policy from the footer of every page
- The privacy policy must be written in plain language and accessible to all users
- Required when you collect any personal data: names, emails, IP addresses, cookies, analytics data
- GDPR requires the policy to be easily accessible — a footer link satisfies this requirement
- The link text should be 'Privacy Policy' (or locale equivalent) for SEO and accessibility
- Disclose retention periods and whether analytics, logs, or monitoring receive personal data
## Checkproduct
When your agent uses it
Use when auditing e-commerce product pages or implementing structured data for a shop. Applies to any page selling or describing a specific product.
What it loads into context
Frontmatter
79 tokensAlways available to the agent
SKILL.md
492 tokensWhen the skill is activated
Reference documents
1,439 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,370 bytesreferences/rule.mddoc6,088 bytes
Read SKILL.md
# Add Product schema markup
Product schema enables Google to show price, availability, ratings, and review count directly in search results—rich results have significantly higher click-through rates than standard blue links.
## Quick Reference
- Add Product JSON-LD schema to every product page for rich result eligibility
- Required for rich results: name, image, description, and offers (with price and priceCurrency)
- Include aggregateRating for star ratings in search results
- Prices in schema must match the prices displayed on the page
## Check
Check each product page for a JSON-LD script block with @type 'Product'. Verify it includes: name, image, description, and an offers property with price, priceCurrency, and availability. Check that prices in schema match the visible page prices. Validate with Google's Rich Results Test.progressive-jpeg
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Use progressive JPEG encoding. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
94 tokensAlways available to the agent
SKILL.md
335 tokensWhen the skill is activated
Reference documents
975 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,705 bytesreferences/rule.mddoc4,331 bytes
Read SKILL.md
# Use progressive JPEG encoding
Progressive JPEGs display a low-quality preview immediately rather than loading line-by-line—users see something faster, improving perceived performance even if total load time is similar.
## Quick Reference
- Progressive JPEGs show blurry preview immediately, then sharpen
- Better perceived performance than baseline JPEGs that load top-to-bottom
- Similar file size to baseline JPEG (sometimes slightly smaller)
- Less relevant with modern formats (WebP, AVIF) but still useful for fallbacks
## Check
Check if JPEG images are saved in progressive format for better perceived performance.pwa-installability
When your agent uses it
Use when auditing PWA readiness, adding an install prompt, or preparing a web app for submission to Microsoft Store or Google Play via PWA Builder.
What it loads into context
Frontmatter
88 tokensAlways available to the agent
SKILL.md
385 tokensWhen the skill is activated
Reference documents
1,631 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,805 bytesreferences/rule.mddoc6,672 bytes
Read SKILL.md
# Meet PWA installability criteria
Installable PWAs appear in the browser's address bar install prompt and in app stores, giving users a native-app experience without an app store listing. Studies consistently show that installed PWAs have higher engagement and retention than browser-only equivalents — users who install spend 3× more time in the app on average.
## Quick Reference
- Serve the app over HTTPS (required by browsers)
- Link a valid web app manifest with name, icons, start_url, and display
- Provide a 192×192 and 512×512 icon; add a maskable variant for Android
- Register a service worker that responds with 200 when offline
## Check
Check whether this site meets the PWA installability criteria: HTTPS, valid manifest, service worker, and appropriate icons.quality
When your agent uses it
Use when evaluating content pages for SEO quality. Applies to blog posts, product descriptions, landing pages, or any page expected to receive organic search traffic.
What it loads into context
Frontmatter
84 tokensAlways available to the agent
SKILL.md
540 tokensWhen the skill is activated
Reference documents
1,054 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,629 bytesreferences/rule.mddoc5,276 bytes
Read SKILL.md
# Publish high-quality content
Google's Search Quality Rater Guidelines and Helpful Content system reward pages that demonstrate genuine expertise and fully satisfy user intent—low-quality pages are algorithmically suppressed site-wide.
## Quick Reference
- Content quality is Google's primary ranking differentiator—E-E-A-T applies to every page
- Thin content (low word count, generic text) is a leading cause of ranking loss
- Each page must have a clear primary purpose and fully satisfy user intent
- First-hand experience, expert authorship, and cited sources raise quality signals
## Check
Evaluate this page's content for E-E-A-T signals: Does it demonstrate first-hand experience or expertise? Does it fully answer the apparent search intent? Is the information accurate, specific, and supported by evidence? Is there meaningful depth beyond what competitors cover? Identify specific quality gaps.reading-level
When your agent uses it
Use when reviewing content pages for user experience and SEO. Applies to blog posts, landing pages, how-to guides, and any long-form content intended for a broad audience.
What it loads into context
Frontmatter
90 tokensAlways available to the agent
SKILL.md
504 tokensWhen the skill is activated
Reference documents
963 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,459 bytesreferences/rule.mddoc4,391 bytes
Read SKILL.md
# Write at a clear reading level
Content written beyond the reading level of the target audience increases bounce rates and reduces time-on-page—both engagement signals that correlate with search rankings.
## Quick Reference
- Target a Flesch Reading Ease score of 60–70 for general audiences (Grade 8–10)
- Use short sentences (15–20 words average) and common vocabulary
- Passive voice, jargon, and long paragraphs reduce readability
- Simple writing increases dwell time and reduces bounce rate
## Check
Analyse this page's content for readability. Calculate or estimate the Flesch-Kincaid Grade Level. Identify sentences longer than 25 words, paragraphs longer than 4 sentences, instances of passive voice, and domain jargon that could be simplified. Report the estimated reading grade level.redirect-chain
When your agent uses it
Use when auditing site redirects after URL migrations, domain changes, or CMS upgrades. Applies to any site that has had multiple rounds of structural changes over time.
What it loads into context
Frontmatter
87 tokensAlways available to the agent
SKILL.md
522 tokensWhen the skill is activated
Reference documents
1,223 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,402 bytesSKILL.mdcore2,402 bytesSKILL.mdcore2,402 bytesSKILL.mdcore2,402 bytesreferences/rule.mddoc5,098 bytes
Read SKILL.md
# Avoid multi-hop redirect chains
Redirect chains waste crawl budget, reduce PageRank flow to destination pages, and add latency that harms user experience—Googlebot may abandon long chains entirely, leaving destination pages undiscovered.
## Quick Reference
- A redirect chain is A→B→C — Googlebot may stop following after 5 hops
- Each hop loses PageRank and adds page load latency
- Flatten chains by pointing A directly to C with a single 301
- Audit after every URL migration to catch newly created chains
## Check
Follow all redirect rules configured on the site. Identify any URL where the redirect target itself also redirects (chain of 2+ hops). Report the full chain (URL A → URL B → URL C → final), the number of hops, and the HTTP response code at each step.redirect-chains
When your agent uses it
Use when auditing internal link structure after a URL migration, domain change, or site rebuild. Applies to any site that has had redirects in place for more than a month.
What it loads into context
Frontmatter
92 tokensAlways available to the agent
SKILL.md
534 tokensWhen the skill is activated
Reference documents
1,084 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,578 bytesSKILL.mdcore2,578 bytesSKILL.mdcore2,578 bytesSKILL.mdcore2,578 bytesreferences/rule.mddoc5,003 bytes
Read SKILL.md
# Link directly to final destination URLs
Internal links that point to redirect URLs add latency, waste crawl budget, and pass less PageRank to the destination than a direct link would—reducing the ranking potential of linked pages.
## Quick Reference
- Internal links should point directly to the final destination URL, not to a URL that redirects
- Each redirect in a chain dilutes the PageRank passed through it
- Update internal links after URL migrations to point to the new URLs
- Use 301 redirects for permanent moves, but then update source links
## Check
Crawl internal links across the site. For each <a href='...'> tag, follow the URL and check the HTTP response code. Flag any internal link that resolves to a 301 or 302 redirect rather than a direct 200 response. Report the source page, linked URL, and the final destination URL after following the redirect.reduced-motion
When your agent uses it
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Respect reduced motion preferences. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What it loads into context
Frontmatter
99 tokensAlways available to the agent
SKILL.md
402 tokensWhen the skill is activated
Reference documents
808 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,138 bytesreferences/rule.mddoc3,621 bytes
Read SKILL.md
# Respect reduced motion preferences
Animations can trigger vestibular disorders, migraines, and seizures—respecting motion preferences makes your site usable for millions of affected users.
## Quick Reference
- Use prefers-reduced-motion media query to disable non-essential animations
- Never flash content more than 3 times per second (seizure risk)
- Replace motion with opacity/color transitions when reduced motion is enabled
- Provide user controls to pause or disable animations
## Check
Verify that animations respect prefers-reduced-motion, no content flashes more than 3 times per second, parallax and scrolljacking effects have alternatives, and motion warnings appear before pages with excessive animation.redundant-entry
When your agent uses it
Use when reviewing any process that spans multiple screens, steps, or modal stages. Follow the real user journey and compare fields across steps instead of reviewing screens in isolation.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
414 tokensWhen the skill is activated
Reference documents
1,039 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,080 bytesreferences/rule.mddoc4,858 bytes
Read SKILL.md
# Avoid redundant entry in the same process
Re-entering the same information increases cognitive load, slows task completion, and introduces avoidable typing errors. Users with cognitive, motor, or speech-input limitations are affected first, but everyone benefits from fewer repeated fields.
## Quick Reference
- Do not ask users to retype information already provided earlier in the same flow
- Auto-populate repeated fields or offer a clear selection such as "same as billing"
- Review checkout, signup, onboarding, and support flows step by step
- Password confirmation can be a valid security exception, but general profile data is not
## Check
Review this multi-step flow for information that is requested more than once in the same process. Flag fields that should be auto-populated or selectable from previously entered data.referrer-policy
When your agent uses it
Use when reviewing HTTP response headers for privacy hardening on any website that handles authentication, session state, or sensitive URL parameters.
What it loads into context
Frontmatter
81 tokensAlways available to the agent
SKILL.md
511 tokensWhen the skill is activated
Reference documents
1,050 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore2,401 bytesreferences/rule.mddoc4,645 bytes
Read SKILL.md
# Set a Referrer-Policy header
[Credential-related source omitted]
## Quick Reference
- Use `Referrer-Policy: strict-origin-when-cross-origin` — the recommended modern default
- `strict-origin-when-cross-origin` sends the full URL for same-origin requests, only the origin for cross-origin HTTPS, and nothing for HTTPS→HTTP
- Never use `unsafe-url` — it sends the full URL including path and query string to every external site
- Can be set via HTTP header, `<meta>` tag, or the `referrerpolicy` attribute on individual `<a>` and `<img>` elements
- Sensitive URLs (reset tokens, private IDs) in query strings can be exposed via the Referer header if policy is too permissive
## Check
render-blocking
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Eliminate render-blocking resources. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
356 tokensWhen the skill is activated
Reference documents
990 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,719 bytesreferences/rule.mddoc4,577 bytes
Read SKILL.md
# Eliminate render-blocking resources
Render-blocking resources prevent the browser from painting anything on the screen, leading to a "white screen" effect and poor user experience.
## Quick Reference
- Load non-critical CSS and JS asynchronously using `defer`, `async`, or media queries
- Inline critical CSS to allow the page to start rendering immediately
- Avoid `@import` in CSS as it creates serial request chains
## Check
Review the page's resources and identify any CSS or JavaScript files that are blocking the initial render of the page.
reset-css
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use a CSS reset or normalize stylesheet. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
91 tokensAlways available to the agent
SKILL.md
326 tokensWhen the skill is activated
Reference documents
6,646 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,659 bytesreferences/rule.mddoc26,042 bytes
Read SKILL.md
# Use a CSS reset or normalize stylesheet
CSS resets eliminate browser default inconsistencies—ensuring your designs look identical across Chrome, Firefox, Safari, and Edge.
## Quick Reference
- Choose normalize.css for preservation or modern reset for clean slate
- Install with pnpm: `pnpm add normalize.css`
- Import before your custom styles
- Check if your CSS framework includes a built-in reset
## Check
Verify that a CSS reset or normalization is implemented to ensure consistent styling across different browsers and devices.resource-hints
When your agent uses it
Use when auditing slow page loads, heavy assets, or rendering delays related to Use resource hints for faster loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
What it loads into context
Frontmatter
97 tokensAlways available to the agent
SKILL.md
355 tokensWhen the skill is activated
Reference documents
1,544 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,720 bytesreferences/rule.mddoc6,503 bytes
Read SKILL.md
# Use resource hints for faster loading
Resource hints let the browser start fetching critical assets earlier—improving LCP by 100-300ms on average.
## Quick Reference
- Use preload for critical above-the-fold resources (fonts, hero images)
- Use preconnect for third-party origins (CDNs, APIs, analytics)
- Use prefetch for resources likely needed on next navigation
- Use dns-prefetch as a lightweight alternative to preconnect
## Check
Analyze resource hints on this page and verify critical resources use preload/preconnect for optimal loading.responsive-images
When your agent uses it
Use when reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints. Check both the markup and the CSS layout because an incorrect `sizes` attribute can negate a perfectly good `srcset`.
What it loads into context
Frontmatter
101 tokensAlways available to the agent
SKILL.md
330 tokensWhen the skill is activated
Reference documents
1,281 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,611 bytesreferences/rule.mddoc4,637 bytes
Read SKILL.md
# Implement responsive images with srcset
Serving a 2000px image to a 400px phone screen wastes bandwidth and slows loading—srcset lets the browser download only the size it needs.
## Quick Reference
- Use srcset to provide multiple image sizes
- Use sizes attribute to tell browser which size to download
- Browser selects optimal size based on viewport and DPR
- Can save 50-70% bandwidth on mobile devices
## Check
Verify that images use srcset and sizes attributes for responsive delivery.responsive-size
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Serve images at the correct display size. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
728 tokensWhen the skill is activated
Reference documents
1,423 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore3,227 bytesreferences/rule.mddoc5,474 bytes
Read SKILL.md
# Serve images at the correct display size
A single oversized hero image can add several megabytes to a page load unnecessarily. On mobile devices with 375px screens, serving a 1600px image downloads 4x the data users need. The 'Properly size images' Lighthouse audit consistently identifies this as one of the highest-impact performance opportunities on most websites.
## Quick Reference
- Serving a 1600px image in a 400px container wastes ~16x the necessary bandwidth
- Use `srcset` with width descriptors and `sizes` with actual layout widths
- The `sizes` attribute is critical—without it the browser assumes `100vw` and picks the largest image
- Lighthouse 'Properly size images' audit reports estimated savings per oversized image
## Check
Audit images in this codebase for oversizing. Use Lighthouse 'Properly size images' audit results as the primary signal. For each <img> in the HTML: 1) Compare the image file's intrinsic width to the element's rendered CSS width (check CSS rules, container constraints). 2) Flag any image where the intrinsic width is more than 2x the rendered width at any common viewport size. 3) Check for srcset usage—images over 200px wide should have srcset variants. 4) Check sizes attribute accuracy—does it reflect the actual CSS layout?responsive-units
When your agent uses it
Use when reviewing stylesheets, component styles, and responsive behavior related to Use relative units for responsive layouts. Check the rendered layout across breakpoints and interaction states before proposing a fix.
What it loads into context
Frontmatter
93 tokensAlways available to the agent
SKILL.md
371 tokensWhen the skill is activated
Reference documents
871 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,893 bytesreferences/rule.mddoc3,379 bytes
Read SKILL.md
# Use relative units for responsive layouts
Fixed pixel values override user browser preferences, making your site inaccessible to users who increase their default font size (a common accommodation for low vision). Relative units also reduce the number of breakpoints needed — elements naturally adapt to available space rather than requiring explicit overrides at every viewport width.
## Quick Reference
- Use rem for font sizes — it respects user browser font size preferences
- Use % or flex/grid for widths — they adapt to the parent container
- Use em for component-relative spacing (padding, border-radius)
- Use clamp() for fluid typography that scales smoothly between breakpoints
## Check
Find all px-based font-size, width, and padding values in this CSS file that should use relative units instead.retina-display
When your agent uses it
Use when reviewing image assets, markup, and CDN or build transforms related to Support high-DPI retina displays. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.
What it loads into context
Frontmatter
95 tokensAlways available to the agent
SKILL.md
334 tokensWhen the skill is activated
Reference documents
1,208 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- Quick Reference
- Check
- Fix
- Explain
- Code Review
Files
SKILL.mdcore1,552 bytesreferences/rule.mddoc4,362 bytes
Read SKILL.md
# Support high-DPI retina displays
Standard images look blurry on retina displays (2x, 3x pixel density)—high-resolution assets ensure sharp visuals on modern devices.
## Quick Reference
- Provide 2x and 3x images for high-DPI displays
- Use srcset with x descriptors for fixed-size images
- Use srcset with w descriptors for responsive images
- CSS background-image: use image-set() or media queries
## Check
Check if high-resolution images are provided for retina displays (2x, 3x).Skills included
- frontendchecklist
- frontend-checklist-global
- 404-page
- about-page
- accessibility-testing
- accessible-authentication
- accessible-notifications
- accessible-tables
- accessible-tooltips
- accesskeys
- accordion-accessibility
- affiliate-disclosure
- ai-content
- all-noindex-pages
- alt-text
- anchor-smooth-scroll
- anchor-text
- animated-content
- animation-performance
- aria-allowed-attr
- aria-command-name
- aria-deprecated-role
- aria-dialog-name
- aria-hidden-body
- aria-hidden-focus
- aria-input-field-name
- aria-labels
- aria-live-regions
- aria-meter-name
- aria-progressbar-name
- aria-required-attr
- aria-required-children
- aria-required-parent
- aria-roles
- aria-text
- aria-toggle-field-name
- aria-tooltip-name
- aria-treeitem-name
- aria-valid-attr
- aria-valid-attr-value
- article
- article-links
- audio-descriptions
- author-byline
- author-expertise
- author-info
- autofocus-avoidance
- autoplay-media
- avif-format
- avoid-eval
- back-forward-cache
- blocked-links
- breadcrumb
- breadcrumb-navigation
- broken-external-links
- broken-html
- broken-images
- broken-links
- browser-caching
- browser-required
- button-name
- canonical-chain
- canonical-header
- canonical-url
- carousel-accessibility
- cascade-layers
- cdn
- charset
- citations
- clean-up-comments
- code-splitting
- color-contrast
- color-oklch
- compression
- consent-mode
- consistent-help
- console-cleanup
- const-let
- contact-page
- container-queries
- content-dates
- content-security-policy
- content-without-css
- contract-testing
- cookie-consent
- critical-images
- critical-request-chains
- cross-browser-testing
- cross-origin-isolation
- cross-origin-security
- css-at-property
- css-containment
- css-critical
- css-custom-properties
- css-file-size
- css-grid
- css-minification
- css-non-blocking
- css-order
- css-print
- cumulative-layout-shift
- currency-formatting
- custom-element-accessibility
- dark-mode-css
- data-minimisation
- dead-end-pages
- debounce-throttle
- decorative-elements
- defer-async
- definition-list
- dependency-audit
- dimensions
- direction-attribute
- disclaimers
- dlitem
- doctype
- dom-performance
- dom-size
- draggable-accessibility
- duplicate-description
- duplicate-id-active
- duplicate-id-aria
- duplicate-js
- e2e-testing
- editorial-policy
- element-hiding
- embedded-or-inline-css
- empty-heading
- empty-links
- error-handling
- error-images
- error-monitoring
- es-modules
- event-delegation
- external-links
- faq
- favicon
- favicons
- fetchpriority-attribute
- figure-figcaption
- file-upload-accessibility
- filename-quality
- find-npm-packages
- first-contentful-paint
- flashing-content
- flexbox-patterns
- focus-management
- focus-not-obscured
- focus-order
- focus-styles
- font-loading
- font-size
- form-captcha
- form-field-multiple-labels
- form-https
- form-labels
- form-validation
- frame-title
- freshness
- frontend-checklist-global
- geo-meta
- gtm-present
- h1
- has-selector
- heading-hierarchy
- heading-order
- horizontal-scroll
- hreflang
- hsts
- html-resource-hints
- html-size
- html-xml-lang-mismatch
- html5-semantic-elements
- http-requests
- http-to-https
- http2
- https
- https-downgrade
- hyphens
- identical-links-same-purpose
- image-cdn
- image-compression
- image-file-size
- image-optimization
- image-redundant-alt
- immutable-patterns
- import-on-interaction
- import-on-visibility
- improve-rule
- inclusive-language
- indexability
- indexability-conflicts
- input-image-alt
- input-types
- integration-testing
- interaction-to-next-paint
- internal-links
- interstitials
- invalid-links
- javascript-inline
- javascript-linter
- javascript-minification
- js-file-size
- js-libraries
- js-redirects
- json-ld-valid
- json-safety
- keyboard-navigation
- keyword-stuffing
- label-content-name-mismatch
- landmark-one-main
- landmark-regions
- lang-attribute
- largest-contentful-paint
- lazy-above-fold
- lazy-loading
- leaked-secrets
- legacy-js
- length
- link-checker
- link-in-text-block
- link-text
- list-structure
- list-virtualization
- listitem
- llm-parsability
- llms-txt
- loading-indicators
- local-business
- locale-images
- logical-properties
- lowercase
- memory-leaks
- meta-description
- meta-in-body
- meta-refresh
- meta-title
- mime-type
- mixed-content
- mobile-testing
- mock-best-practices
- modal-accessibility
- modern-array-methods
- modern-format
- mutation-testing
- naming-conventions
- nap-consistency
- navigation-landmark
- new-tab
- no-explicit-any
- no-unchecked-indexed-access
- nofollow-internal
- noindex-in-sitemap
- noscript-tag
- nosnippet
- object-alt
- offline-fallback
- offscreen-lazy
- og-image-size
- og-tags
- og-url-match
- optimized
- organization
- orientation
- orphan-pages
- page-load-time
- page-weight
- pagination
- pagination-accessibility
- parallax-effects
- parameters
- password-field-security
- paste-inputs
- pdf-size
- performance-budget
- performance-resource-hints
- permissions-policy
- physical-address
- picture-element
- plain-language
- pluralization
- preconnect
- privacy-policy
- product
- progressive-jpeg
- pwa-installability
- quality
- reading-level
- redirect-chain
- redirect-chains
- reduced-motion
- redundant-entry
- referrer-policy
- render-blocking
- reset-css
- resource-hints
- responsive-images
- responsive-size
- responsive-units
- retina-display
Showing 300 of 393 skills. See GitHub for the complete repository.
Repository facts
- License
- MIT
- Created
- Oct 16, 2017
- Last pushed
- Oct 31, 2026
- Forks
- 6,784
- Open issues
- 5
- Project activity
- Active
Rank over the last 12 weeks
Now #23 · best #17 · down 3 in 30 days
- #19 from Sep 30 to Oct 2
- #20 from Oct 3 to Oct 12
- #21 on Oct 13
- #22 from Oct 14 to Oct 24
- #24 on Oct 25
- #23 since Oct 28
3 earlier periods
- #16 on Aug 2
- #17 from Aug 8 to Sep 1
- #18 from Sep 2 to Sep 29
Before you install
Network or broad shellAutomated signals, not a guarantee
Checked Nov 2, 2026
Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.
Show 116 notes
skills/404-page/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/about-page/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/accessible-notifications/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/accessible-tooltips/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/accordion-accessibility/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/affiliate-disclosure/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/ai-content/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/all-noindex-pages/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/anchor-text/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/aria-treeitem-name/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/article/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/article-links/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/author-byline/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/author-expertise/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/author-info/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/avoid-eval/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/blocked-links/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/breadcrumb/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/breadcrumb-navigation/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedskills/broken-external-links/SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzed
- No broad tool permissions
- 29 dangerous shell commandsin 5 files: clean-up-comments/references/rule.md:378 avoid-eval/references/rule.md:8 avoid-eval/SKILL.md:15 and 2 more
- 3,517 network referencesin 656 files: link-checker/references/rule.md:17 sitemap/references/rule.md:13 structured-data/references/rule.md:13 and 653 more
- No hidden or obfuscated text
- No instruction overrides
- 11 executable scriptsin 11 files: cli/package.json:1 cli/scripts/build.ts:1 cli/src/args.ts:1 and 8 more
- 54 references to secretsin 32 files: token-storage-security/references/rule.md:8 leaked-secrets/references/rule.md:38 webpagetest/references/rule.md:263 and 29 more
- No requests to vote in Hot
Show all 3,611 signals by file
.claude-plugin/marketplace.json
- Network accessline 3
"owner": { "name": "David Dias", "url": "https://thedaviddias.com" - Network accessline 4
"name": "David Dias", "url": "https://thedaviddias.com" }, - Network accessline 5
"url": "https://thedaviddias.com" - Network accessline 14
"description": "Review frontend code and live pages against 386 quality-gated rules for accessibility, performance, SEO, security, and HTML/CSS/JS best practices.", "category": "development", "homepage": "https://frontendcheckli - Network accessline 15
"category": "development", "homepage": "https://frontendchecklist.io/mcp" } - Network accessline 16
"homepage": "https://frontendchecklist.io/mcp"
packages/cli/README.md
- Network accessline 3
The [Front-End Checklist](https://frontendchecklist.io) from the command line: review local code, - Network accessline 15
frontendchecklist review src/ index.html # files and directories (node_modules, dist skipped) git diff --cached | frontendchecklist review - # stdin frontendchecklist audit https://example.com # public https pages only - Network accessline 16
git diff --cached | frontendchecklist review - # stdin frontendchecklist audit https://example.com # public https pages only frontendchecklist search "image formats" -n 5 - Network accessline 17
frontendchecklist audit https://example.com # public https pages only - Network accessline 48
Prefer MCP? The same rules and tools are available at `https://mcp.frontendchecklist.io` - Network accessline 49
(see [frontendchecklist.io/en/mcp](https://frontendchecklist.io/en/mcp)). - Network accessline 54
pnpm --filter @frontendchecklist/cli build # dist/index.js + dist/content.json snapshot node packages/cli/dist/index.js review src/ pnpm audit:url https://example.com # build + audit shortcut - Network accessline 55
node packages/cli/dist/index.js review src/ pnpm audit:url https://example.com # build + audit shortcut pnpm --filter @frontendchecklist/cli test - Network accessline 56
pnpm audit:url https://example.com # build + audit shortcut
packages/cli/SKILL.md
- Network accessline 16
- After writing or editing frontend files: `frontendchecklist review <paths>`. - Before committing: `git diff --cached | frontendchecklist review -`. - When the user asks to audit a deployed page: `frontendchecklist audit https://...`. - Network accessline 17
- Before committing: `git diff --cached | frontendchecklist review -`. - When the user asks to audit a deployed page: `frontendchecklist audit https://...`. - When you need the authoritative guidance for a topic: `frontendchecklist search < - Network accessline 18
- When the user asks to audit a deployed page: `frontendchecklist audit https://...`.
packages/cli/package.json
- Executable scriptline 1
Executable file - Network accessline 14
"ai-agents" ], "homepage": "https://frontendchecklist.io", - Network accessline 15
], "homepage": "https://frontendchecklist.io", "repository": { - Network accessline 16
"homepage": "https://frontendchecklist.io", - Network accessline 17
"repository": { "type": "git", "url": "git+https://github.com/thedaviddias/Front-End-Checklist.git", - Network accessline 18
"type": "git", "url": "git+https://github.com/thedaviddias/Front-End-Checklist.git", "directory": "packages/cli" - Network accessline 19
"url": "git+https://github.com/thedaviddias/Front-End-Checklist.git",
packages/cli/scripts/build.ts
- Executable scriptline 1
Executable file
packages/cli/src/args.ts
- Executable scriptline 1
Executable file
packages/cli/src/commands/audit.ts
- Executable scriptline 1
Executable file - Network accessline 15
const baseUrl = process.env.FRONTENDCHECKLIST_BASE_URL ?? SITE_URL try { const response = await fetch(`${baseUrl}/api/audits`, { - Network accessline 16
try { const response = await fetch(`${baseUrl}/api/audits`, { method: 'POST', - Network accessline 17
const response = await fetch(`${baseUrl}/api/audits`, { - Network accessline 40
const url = options.positionals[0] if (!url) throw new UsageError('audit needs a URL, e.g. `frontendchecklist audit https://example.com`') - Network accessline 42
throw new UsageError('audit needs a URL, e.g. `frontendchecklist audit https://example.com`')
packages/cli/src/commands/lookup.ts
- Executable scriptline 1
Executable file
packages/cli/src/commands/review.ts
- Executable scriptline 1
Executable file
packages/cli/src/content.ts
- Executable scriptline 1
Executable file
packages/cli/src/index.ts
- Executable scriptline 1
Executable file
packages/cli/src/output.ts
- Executable scriptline 1
Executable file
packages/cli/src/spec.ts
- Executable scriptline 1
Executable file - Network accessline 29
summary: 'Fetch a public https page and review its HTML. Private/localhost addresses are refused.', examples: ['frontendchecklist audit https://example.com --fail-on critical'] - Network accessline 30
'Fetch a public https page and review its HTML. Private/localhost addresses are refused.', examples: ['frontendchecklist audit https://example.com --fail-on critical'] }, - Network accessline 31
examples: ['frontendchecklist audit https://example.com --fail-on critical']
packages/cli/tests/cli.test.mjs
- Executable scriptline 1
Executable file
plugins/front-end-checklist/.claude-plugin/plugin.json
- Network accessline 5
"author": { "name": "David Dias", "url": "https://thedaviddias.com" - Network accessline 6
"name": "David Dias", "url": "https://thedaviddias.com" }, - Network accessline 7
"url": "https://thedaviddias.com" - Network accessline 8
}, "homepage": "https://frontendchecklist.io/mcp", "privacyPolicyUrl": "https://frontendchecklist.io/privacy", - Network accessline 9
"homepage": "https://frontendchecklist.io/mcp", - Network accessline 10
"privacyPolicyUrl": "https://frontendchecklist.io/privacy", - Network accessline 11
"termsOfServiceUrl": "https://frontendchecklist.io/terms", - Network accessline 12
"supportUrl": "https://github.com/thedaviddias/Front-End-Checklist/issues", - Network accessline 13
"documentationUrl": "https://frontendchecklist.io/mcp", - Network accessline 14
"repository": "https://github.com/thedaviddias/Front-End-Checklist",
plugins/front-end-checklist/skills/frontend-checklist-global/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/mcp - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/mcp --- - Network accessline 10
url: https://frontendchecklist.io/mcp - Network accessline 193
MCP docs: https://frontendchecklist.io/mcp
plugins/front-end-checklist/skills/frontend-checklist-global/references/categories.md
skills/404-page/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/404-page - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/404-page --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/404-page - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/404-page
skills/404-page/references/rule.md
skills/about-page/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/about-page - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/about-page --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/about-page - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/about-page
skills/accessibility-testing/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/accessibility-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/accessibility-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/accessibility-testing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/accessibility-testing
skills/accessible-authentication/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/accessible-authentication - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/accessible-authentication --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/accessible-authentication - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/accessible-authentication
skills/accessible-notifications/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/accessible-notifications - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/accessible-notifications --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/accessible-notifications - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/accessible-notifications
skills/accessible-tables/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/accessible-tables - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/accessible-tables --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/accessible-tables - Network accessline 47
Rule page: https://frontendchecklist.io/rules/accessibility/accessible-tables
skills/accessible-tooltips/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/accessible-tooltips - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/accessible-tooltips --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/accessible-tooltips - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/accessible-tooltips
skills/accesskeys/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/accesskeys - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/accesskeys --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/accesskeys - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/accesskeys
skills/accordion-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/accordion-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/accordion-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/accordion-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/accordion-accessibility
skills/affiliate-disclosure/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/affiliate-disclosure - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/affiliate-disclosure --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/affiliate-disclosure - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/affiliate-disclosure
skills/ai-content/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/ai-content - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/ai-content --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/ai-content - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/ai-content
skills/ai-content/references/rule.md
- Network accessline 7
--- While 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-qua - Network accessline 8
While 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 - Network accessline 30
- **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 insigh
skills/all-noindex-pages/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/all-noindex-pages - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/all-noindex-pages --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/all-noindex-pages - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/all-noindex-pages
skills/alt-text/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/alt-text - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/alt-text --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/alt-text - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/alt-text
skills/alt-text/references/rule.md
- Network accessline 10
Use the [W3C alt decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to determine the correct alt value for any image type. - Network accessline 57
<!-- ❌ Bad: Describes appearance, not destination --> <a href="https://twitter.com/example"> - Network accessline 58
<a href="https://twitter.com/example"> - Network accessline 62
<!-- ✅ Good: Describes the link destination --> <a href="https://twitter.com/example"> - Network accessline 63
<a href="https://twitter.com/example">
skills/anchor-smooth-scroll/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/anchor-smooth-scroll
skills/anchor-text/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/anchor-text - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/anchor-text --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/anchor-text - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/anchor-text
skills/animated-content/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/animated-content - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/animated-content --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/animated-content - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/animated-content
skills/animated-content/references/rule.md
- Network accessline 45
Favor [browser-native video delivery guidance from web.dev](https://web.dev/learn/performance) when deciding whether an animation should stay a GIF at all, because the biggest wins usually come from eliminating heavy animated assets rather - Network accessline 57
- [FFmpeg](https://ffmpeg.org/): Command-line tool for converting GIFs to video. - Network accessline 58
- [Cloudinary/Imgix](https://cloudinary.com/): Automated media optimization services. - Network accessline 59
- [Lighthouse](https://developers.google.com/web/tools/lighthouse): Checks for large GIFs and suggests video alternatives.
skills/animation-performance/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/animation-performance - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/animation-performance --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/animation-performance - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/animation-performance
skills/aria-allowed-attr/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-allowed-attr - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-allowed-attr --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-allowed-attr - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-allowed-attr
skills/aria-command-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-command-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-command-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-command-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-command-name
skills/aria-deprecated-role/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-deprecated-role - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-deprecated-role --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-deprecated-role - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-deprecated-role
skills/aria-dialog-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-dialog-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-dialog-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-dialog-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-dialog-name
skills/aria-hidden-body/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-hidden-body - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-hidden-body --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-hidden-body - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-hidden-body
skills/aria-hidden-focus/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-hidden-focus - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-hidden-focus --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-hidden-focus - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-hidden-focus
skills/aria-hidden-focus/references/rule.md
- Network accessline 7
--- When an element is marked with `aria-hidden="true"`, it is removed from the accessibility tree, but it is **not** removed from the keyboard tab order. [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) makes that distinction explicit, - Network accessline 8
When an element is marked with `aria-hidden="true"`, it is removed from the accessibility tree, but it is **not** removed from the keyboard tab order. [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) makes that distinction explicit, whic
skills/aria-input-field-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-input-field-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-input-field-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-input-field-name - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/aria-input-field-name
skills/aria-input-field-name/references/rule.md
- Network accessline 7
--- Form inputs must be clearly labeled so that users of assistive technology know what information they are expected to provide. [WCAG 2.1 SC 4.1.2](https://www.w3.org/TR/WCAG21/#name-role-value) and the accessible-name computation model b - Network accessline 8
Form inputs must be clearly labeled so that users of assistive technology know what information they are expected to provide. [WCAG 2.1 SC 4.1.2](https://www.w3.org/TR/WCAG21/#name-role-value) and the accessible-name computation model both
skills/aria-labels/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-labels - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-labels --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-labels - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-labels
skills/aria-labels/references/rule.md
- Network accessline 7
--- Every interactive element on a page must communicate its purpose to assistive technologies. [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) treats accessible naming as foundational for buttons, links, and widgets, which is why this - Network accessline 8
Every interactive element on a page must communicate its purpose to assistive technologies. [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) treats accessible naming as foundational for buttons, links, and widgets, which is why this rule
skills/aria-live-regions/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-live-regions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-live-regions --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-live-regions - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/aria-live-regions
skills/aria-meter-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-meter-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-meter-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-meter-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-meter-name
skills/aria-progressbar-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-progressbar-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-progressbar-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-progressbar-name - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/aria-progressbar-name
skills/aria-required-attr/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-required-attr - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-required-attr --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-required-attr - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-required-attr
skills/aria-required-children/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-required-children - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-required-children --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-required-children - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/aria-required-children
skills/aria-required-children/references/rule.md
- Network accessline 7
--- Complex ARIA widgets often require a specific nesting structure where a parent role must contain children with specific roles. The WAI-ARIA spec calls these [required owned elements](https://www.w3.org/TR/wai-aria-1.2/#mustContain), and - Network accessline 8
Complex ARIA widgets often require a specific nesting structure where a parent role must contain children with specific roles. The WAI-ARIA spec calls these [required owned elements](https://www.w3.org/TR/wai-aria-1.2/#mustContain), and get
skills/aria-required-parent/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-required-parent - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-required-parent --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-required-parent - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-required-parent
skills/aria-roles/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-roles - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-roles --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-roles - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/aria-roles
skills/aria-text/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-text - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-text --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-text - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-text
skills/aria-text/references/rule.md
- Network accessline 7
--- The `role="text"` attribute, used mainly in VoiceOver-specific edge cases, should only be applied to static text containers. [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) is clear that flattening a subtree this way becomes dangero - Network accessline 8
The `role="text"` attribute, used mainly in VoiceOver-specific edge cases, should only be applied to static text containers. [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) is clear that flattening a subtree this way becomes dangerous o
skills/aria-toggle-field-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-toggle-field-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-toggle-field-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-toggle-field-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-toggle-field-name
skills/aria-tooltip-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-tooltip-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-tooltip-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-tooltip-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-tooltip-name
skills/aria-treeitem-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-treeitem-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-treeitem-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-treeitem-name - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/aria-treeitem-name
skills/aria-treeitem-name/references/rule.md
- Network accessline 7
--- Tree items within a tree widget must have accessible names to allow users to navigate complex hierarchies. The [treeitem role definition](https://www.w3.org/TR/wai-aria-1.2/#treeitem) and the tree-view authoring pattern both depend on t - Network accessline 8
Tree items within a tree widget must have accessible names to allow users to navigate complex hierarchies. The [treeitem role definition](https://www.w3.org/TR/wai-aria-1.2/#treeitem) and the tree-view authoring pattern both depend on those
skills/aria-valid-attr-value/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-valid-attr-value - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-valid-attr-value --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-valid-attr-value - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-valid-attr-value
skills/aria-valid-attr/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-valid-attr - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/aria-valid-attr --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/aria-valid-attr - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/aria-valid-attr
skills/aria-valid-attr/references/rule.md
skills/article-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/article-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/article-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/article-links - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/article-links
skills/article-links/references/rule.md
- Network accessline 13
<article> <p>According to a recent study by <a href="https://example-authority.com/study" rel="noopener noreferrer" target="_blank">Industry Research Group</a>, 70% of users prefer mobile-friendly websites.</p> - Network accessline 14
<p>According to a recent study by <a href="https://example-authority.com/study" rel="noopener noreferrer" target="_blank">Industry Research Group</a>, 70% of users prefer mobile-friendly websites.</p>
skills/article/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/article - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/article --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/article - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/article
skills/article/references/rule.md
- Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "BlogPosting", - Network accessline 15
"@context": "https://schema.org", - Network accessline 16
"@type": "BlogPosting", "headline": "10 SEO Tips for 2024", "image": ["https://example.com/photos/16x9/photo.jpg"], - Network accessline 17
"headline": "10 SEO Tips for 2024", "image": ["https://example.com/photos/16x9/photo.jpg"], "datePublished": "2024-01-05T08:00:00+08:00", - Network accessline 18
"image": ["https://example.com/photos/16x9/photo.jpg"], - Network accessline 22
"@type": "Person", "name": "Jane Doe", "url": "https://example.com/profile/janedoe" - Network accessline 23
"name": "Jane Doe", "url": "https://example.com/profile/janedoe" }] - Network accessline 24
"url": "https://example.com/profile/janedoe"
skills/audio-descriptions/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/audio-descriptions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/audio-descriptions --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/audio-descriptions - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/audio-descriptions
skills/author-byline/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/author-byline - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/author-byline --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/author-byline - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/author-byline
skills/author-expertise/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/author-expertise - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/author-expertise --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/author-expertise - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/author-expertise
skills/author-expertise/references/rule.md
- Network accessline 18
</p> <nav class="author-social" aria-label="Author social links"> <a href="https://linkedin.com/in/janesmith" target="_blank" rel="noopener noreferrer">LinkedIn</a> - Network accessline 19
<nav class="author-social" aria-label="Author social links"> <a href="https://linkedin.com/in/janesmith" target="_blank" rel="noopener noreferrer">LinkedIn</a> <a href="https://twitter.com/janesmith" target="_blank" rel="noopener no - Network accessline 20
<a href="https://linkedin.com/in/janesmith" target="_blank" rel="noopener noreferrer">LinkedIn</a> - Network accessline 21
<a href="https://twitter.com/janesmith" target="_blank" rel="noopener noreferrer">Twitter</a>
skills/author-info/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/author-info - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/author-info --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/author-info - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/author-info
skills/author-info/references/rule.md
- Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "Person", - Network accessline 15
"@context": "https://schema.org", - Network accessline 17
"name": "Jane Smith", "jobTitle": "Senior Security Researcher", "url": "https://example.com/authors/jane-smith", - Network accessline 18
"jobTitle": "Senior Security Researcher", "url": "https://example.com/authors/jane-smith", "sameAs": [ - Network accessline 19
"url": "https://example.com/authors/jane-smith", - Network accessline 20
"sameAs": [ "https://www.linkedin.com/in/janesmith", "https://twitter.com/janesmith" - Network accessline 21
"https://www.linkedin.com/in/janesmith", - Network accessline 22
"https://twitter.com/janesmith"
skills/autofocus-avoidance/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/autofocus-avoidance - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/autofocus-avoidance --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/autofocus-avoidance - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/autofocus-avoidance
skills/autoplay-media/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/autoplay-media - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/autoplay-media --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/autoplay-media - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/autoplay-media
skills/avif-format/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/avif-format - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/avif-format --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/avif-format - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/avif-format
skills/avif-format/references/rule.md
- Network accessline 179
<!-- Cloudinary auto format --> <img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/sample.jpg"> - Network accessline 180
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/sample.jpg"> - Network accessline 183
<!-- Imgix auto format --> <img src="https://example.imgix.net/image.jpg?auto=format"> - Network accessline 184
<img src="https://example.imgix.net/image.jpg?auto=format">
skills/avoid-eval/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/avoid-eval - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/avoid-eval --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/avoid-eval - Dangerous shell operationline 15
eval() and its equivalents are the root cause of some of the most severe XSS vulnerabilities. If any user-controlled string reaches eval(), an attacker can execute arbitrary JavaScript in your users' browsers — stealing sessions, making req - Dangerous shell operationline 19
- eval() executes arbitrary strings as code — any user input passed to it is a critical security hole - Dangerous shell operationline 22
- Use JSON.parse() instead of eval() for parsing JSON - Dangerous shell operationline 26
Search this codebase for any use of eval(), new Function(), or setTimeout/setInterval with string arguments. - Dangerous shell operationline 30
Replace eval() calls with safe alternatives: JSON.parse for data, object lookups for dynamic dispatch, and Function references for timers. - Dangerous shell operationline 34
Explain why eval() is dangerous, how it enables XSS attacks, and what safe alternatives exist for each use case. - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/avoid-eval
skills/avoid-eval/references/rule.md
- Network accessline 7
--- [`eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) and similar dynamic code execution functions such as the [`Function()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScrip - Dangerous shell operationline 8
[`eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) and similar dynamic code execution functions such as the [`Function()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re - Network accessline 8
[`eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) and similar dynamic code execution functions such as the [`Function()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re - Dangerous shell operationline 14
eval(userInput) // Executes arbitrary code - Dangerous shell operationline 24
const data = eval('(' + jsonString + ')') - Dangerous shell operationline 29
eval() and its equivalents are the root cause of some of the most severe XSS vulnerabilities. If any user-controlled string reaches eval(), an attacker can execute arbitrary JavaScript in your users' browsers — stealing sessions, making req - Dangerous shell operationline 51
const value = eval(`user.${property}`) - Dangerous shell operationline 67
eval(`${actionName}Document()`) - Network accessline 93
Use [ESLint's `no-eval` rule](https://eslint.org/docs/rules/no-eval) together with `no-new-func` and `no-implied-eval` so these patterns fail in code review and CI rather than in production. - Dangerous shell operationline 113
Without `'unsafe-eval'`, `eval()` and `new Function()` will be blocked by the browser.
skills/back-forward-cache/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/back-forward-cache - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/back-forward-cache --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/back-forward-cache - Network accessline 46
Rule page: https://frontendchecklist.io/rules/performance/back-forward-cache
skills/blocked-links/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/blocked-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/blocked-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/blocked-links - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/blocked-links
skills/blocked-links/references/rule.md
- Network accessline 7
--- Adblocker filter lists such as [EasyList](https://easylist.to/) and [uBlock Origin's static filters](https://github.com/gorhill/uBlock/wiki/Static-filter-syntax) work at two levels: element hiding (CSS) and network blocking (URLs). Doma - Network accessline 8
Adblocker filter lists such as [EasyList](https://easylist.to/) and [uBlock Origin's static filters](https://github.com/gorhill/uBlock/wiki/Static-filter-syntax) work at two levels: element hiding (CSS) and network blocking (URLs). Domain-l - Network accessline 46
❌ May be blocked — redirects through tracking.example.com <a href="https://click.tracking.example.com/?url=https://dest.com&utm=abc"> - Network accessline 47
<a href="https://click.tracking.example.com/?url=https://dest.com&utm=abc"> - Network accessline 51
✅ Direct link with UTM parameters — not blocked <a href="https://dest.com?utm_source=email&utm_campaign=spring"> - Network accessline 52
<a href="https://dest.com?utm_source=email&utm_campaign=spring"> - Network accessline 59
For truly first-party functionality, [self-hosting critical scripts and fonts](https://web.dev/articles/font-best-practices) on your own domain avoids the most common domain-level block rules while keeping essential flows reachable. - Network accessline 68
# Nginx proxy for GTM location /gtm/ { proxy_pass https://www.googletagmanager.com/; - Network accessline 69
location /gtm/ { proxy_pass https://www.googletagmanager.com/; proxy_set_header Host www.googletagmanager.com; - Network accessline 70
proxy_pass https://www.googletagmanager.com/; - Network accessline 89
// Send to GA Measurement Protocol (server-to-server, not blocked) await fetch('https://www.google-analytics.com/mp/collect', { - Network accessline 90
await fetch('https://www.google-analytics.com/mp/collect', { - Network accessline 109
<!-- Plausible — served from plausible.io but usually not blocked --> <script defer data-domain="example.com" src="https://plausible.io/js/script.js"></script> - Network accessline 110
<script defer data-domain="example.com" src="https://plausible.io/js/script.js"></script>
skills/breadcrumb-navigation/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/breadcrumb-navigation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/breadcrumb-navigation --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/breadcrumb-navigation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/breadcrumb-navigation
skills/breadcrumb-navigation/references/rule.md
skills/breadcrumb/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/breadcrumb - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/breadcrumb --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/breadcrumb - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/breadcrumb
skills/breadcrumb/references/rule.md
- Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "BreadcrumbList", - Network accessline 15
"@context": "https://schema.org", - Network accessline 19
"position": 1, "name": "Blog", "item": "https://example.com/blog" - Network accessline 20
"name": "Blog", "item": "https://example.com/blog" },{ - Network accessline 21
"item": "https://example.com/blog" - Network accessline 24
"position": 2, "name": "SEO Tips", "item": "https://example.com/blog/seo-tips" - Network accessline 25
"name": "SEO Tips", "item": "https://example.com/blog/seo-tips" }] - Network accessline 26
"item": "https://example.com/blog/seo-tips"
skills/broken-external-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/broken-external-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/broken-external-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/broken-external-links - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/broken-external-links
skills/broken-external-links/references/rule.md
- Network accessline 15
<p> <!-- ✅ Good: Updated link to a live resource --> Learn more in the <a href="https://modern-docs.com/guide">latest documentation</a>. - Network accessline 17
Learn more in the <a href="https://modern-docs.com/guide">latest documentation</a>. - Network accessline 19
<!-- ❌ Bad: Linking to a known broken or archived resource without context --> Read this <a href="https://dead-site.com/old-post">old post</a>. - Network accessline 20
Read this <a href="https://dead-site.com/old-post">old post</a>.
skills/broken-html/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/broken-html - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/broken-html --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/broken-html - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/broken-html
skills/broken-images/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/broken-images - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/broken-images --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/broken-images - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/broken-images
skills/broken-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/broken-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/broken-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/broken-links - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/broken-links
skills/browser-caching/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/browser-caching - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/browser-caching --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/browser-caching - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/browser-caching
skills/browser-caching/references/rule.md
- Network accessline 170
event.respondWith( caches.match(event.request).then(cached => { const fetchPromise = fetch(event.request).then(response => { - Network accessline 171
caches.match(event.request).then(cached => { const fetchPromise = fetch(event.request).then(response => { // Update cache - Network accessline 172
const fetchPromise = fetch(event.request).then(response => { - Network accessline 190
// Check cache headers in browser async function verifyCaching(url) { const response = await fetch(url, { method: 'HEAD' }) - Network accessline 192
const response = await fetch(url, { method: 'HEAD' })
skills/browser-required/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/browser-required - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/browser-required --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/browser-required - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/browser-required
skills/browser-required/references/rule.md
- Network accessline 21
# Run an audit on a URL lighthouse https://example.com --view --chrome-flags="--headless" - Network accessline 22
lighthouse https://example.com --view --chrome-flags="--headless" - Network accessline 44
await page.goto('https://example.com'); - Network accessline 61
Use a real browser pass alongside [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) so layout shifts, main-thread work, and interaction delays are measured in an environment that actually executes the page. - Network accessline 73
- [Lighthouse](https://developers.google.com/web/tools/lighthouse): The industry standard for browser-based auditing. - Network accessline 74
- [WebPageTest](https://www.webpagetest.org/): Provides deep waterfall analysis and multi-location testing. - Network accessline 75
- [PageSpeed Insights](https://pagespeed.web.dev/): Combines lab data from Lighthouse with real-world field data. - Network accessline 76
- [Playwright](https://playwright.dev/): Modern browser automation for custom performance scripts.
skills/button-name/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/button-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/button-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/button-name - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/button-name
skills/button-name/references/rule.md
skills/canonical-chain/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/canonical-chain - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/canonical-chain --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/canonical-chain - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/canonical-chain
skills/canonical-chain/references/rule.md
- Network accessline 13
<!-- ❌ Bad: Canonical points to a URL that redirects --> <!-- http://example.com/page-a (Redirects) -> http://example.com/page-b (Final) --> - Network accessline 14
<!-- http://example.com/page-a (Redirects) -> http://example.com/page-b (Final) --> - Network accessline 15
<link rel="canonical" href="http://example.com/page-a"> - Network accessline 17
<!-- ✅ Good: Canonical points directly to the final destination --> <link rel="canonical" href="http://example.com/page-b"> - Network accessline 18
<link rel="canonical" href="http://example.com/page-b">
skills/canonical-header/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/canonical-header - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/canonical-header --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/canonical-header - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/canonical-header
skills/canonical-header/references/rule.md
- Network accessline 15
# HTTP Response Header: # Link: <https://example.com/target-page>; rel="canonical" - Network accessline 16
# Link: <https://example.com/target-page>; rel="canonical" - Network accessline 18
# HTML <head> section: # <link rel="canonical" href="https://example.com/target-page"> - Network accessline 19
# <link rel="canonical" href="https://example.com/target-page"> - Network accessline 24
- **Signal Reliability**: Consistent signals ensure that search engines trust and follow your canonicalization instructions. - **Duplicate Content**: Prevents different versions of a page from competing with each other in search results. - - Network accessline 25
- **Duplicate Content**: Prevents different versions of a page from competing with each other in search results. - **Technical Integrity**: Reduces the likelihood of "canonical-url mismatch" errors in [Google Search Console](https://search. - Network accessline 26
- **Technical Integrity**: Reduces the likelihood of "canonical-url mismatch" errors in [Google Search Console](https://search.google.com/search-console/about) reports.
skills/canonical-url/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/canonical-url - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/canonical-url --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/canonical-url - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/canonical-url
skills/canonical-url/references/rule.md
- Network accessline 7
--- Canonical URLs prevent duplicate content issues by specifying the preferred page version. [Google's canonicalization guidance](https://developers.google.com/search/docs/fundamentals/seo-starter-guide) works best when URL normalization r - Network accessline 8
Canonical URLs prevent duplicate content issues by specifying the preferred page version. [Google's canonicalization guidance](https://developers.google.com/search/docs/fundamentals/seo-starter-guide) works best when URL normalization rules - Network accessline 13
<head> <link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 14
<link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 25
|----------|---------|--------------| | URL parameters | `?sort=price&page=1` | Base URL | | HTTP vs HTTPS | `http://` and `https://` | HTTPS version | - Network accessline 26
| URL parameters | `?sort=price&page=1` | Base URL | | HTTP vs HTTPS | `http://` and `https://` | HTTPS version | | www vs non-www | Both exist | Preferred version | - Network accessline 27
| HTTP vs HTTPS | `http://` and `https://` | HTTPS version | - Network accessline 41
return { alternates: { canonical: `https://example.com/products/${params.slug}`, - Network accessline 42
alternates: { canonical: `https://example.com/products/${params.slug}`, }, - Network accessline 43
canonical: `https://example.com/products/${params.slug}`, - Network accessline 52
const router = useRouter() const canonicalUrl = `https://example.com${router.asPath.split('?')[0]}` - Network accessline 53
const canonicalUrl = `https://example.com${router.asPath.split('?')[0]}` - Network accessline 66
// Handle pagination and filters function getCanonicalUrl(path: string, page?: number): string { const baseUrl = 'https://example.com' - Network accessline 68
const baseUrl = 'https://example.com' - Network accessline 88
<!-- ✅ Good: Absolute URL --> <link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 89
<link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 91
<!-- ❌ Bad: Wrong protocol --> <link rel="canonical" href="http://example.com/products/widget" /> - Network accessline 92
<link rel="canonical" href="http://example.com/products/widget" /> - Network accessline 94
<!-- ✅ Good: HTTPS protocol --> <link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 95
<link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 97
<!-- ❌ Bad: Includes tracking parameters --> <link rel="canonical" href="https://example.com/products/widget?utm_source=google" /> - Network accessline 98
<link rel="canonical" href="https://example.com/products/widget?utm_source=google" /> - Network accessline 100
<!-- ✅ Good: Clean URL --> <link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 101
<link rel="canonical" href="https://example.com/products/widget" /> - Network accessline 107
// Every page should have a canonical-url, even if self-referencing function PageHead({ path }: { path: string }) { const canonicalUrl = `https://example.com${path}` - Network accessline 109
const canonicalUrl = `https://example.com${path}` - Network accessline 122
<!-- When content is syndicated to partner sites --> <!-- On partner site: --> <link rel="canonical" href="https://original-site.com/article" /> - Network accessline 124
<link rel="canonical" href="https://original-site.com/article" /> - Network accessline 148
- View page source—verify canonical tag is present - Check that canonical URL is absolute with HTTPS - Use [Google Search Console](https://search.google.com/search-console/about) URL Inspection - Network accessline 149
- Check that canonical URL is absolute with HTTPS - Use [Google Search Console](https://search.google.com/search-console/about) URL Inspection - Test with [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) or a similar crawler - Network accessline 150
- Use [Google Search Console](https://search.google.com/search-console/about) URL Inspection - Network accessline 151
- Test with [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) or a similar crawler
skills/carousel-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/carousel-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/carousel-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/carousel-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/carousel-accessibility
skills/cascade-layers/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/cascade-layers - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/cascade-layers --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/cascade-layers - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/cascade-layers
skills/cascade-layers/references/rule.md
- Network accessline 7
--- [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) give you a new dimension of cascade control that sits above specificity. The [web.dev guide](https://web.dev/articles/cascade-layers) is a good mental model h - Network accessline 8
[CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) give you a new dimension of cascade control that sits above specificity. The [web.dev guide](https://web.dev/articles/cascade-layers) is a good mental model here: - Network accessline 200
[`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is supported in all modern browsers (Chrome 99+, Firefox 97+, Safari 15.4+). The [Chrome rollout notes](https://developer.chrome.com/blog/cascade-layers) are a useful remin - Network accessline 206
Use the [MDN `@layer` reference](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) while checking DevTools so you are verifying the declared layer order and not just the final visual result.
skills/cdn/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/cdn - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/cdn --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/cdn - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/cdn
skills/cdn/references/rule.md
- Network accessline 77
// Serve static assets from cache if (url.pathname.startsWith('/static/')) { const response = await fetch(request) - Network accessline 78
if (url.pathname.startsWith('/static/')) { const response = await fetch(request) const headers = new Headers(response.headers) - Network accessline 79
const response = await fetch(request) - Network accessline 85
return fetch(request) - Network accessline 126
// Environment variables // .env.production // NEXT_PUBLIC_CDN_URL=https://cdn.example.com - Network accessline 128
// NEXT_PUBLIC_CDN_URL=https://cdn.example.com
skills/charset/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/charset - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/charset --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/charset - Network accessline 44
Rule page: https://frontendchecklist.io/rules/html/charset
skills/charset/references/rule.md
skills/citations/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/citations - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/citations --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/citations - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/citations
skills/citations/references/rule.md
- Network accessline 14
<p> According to the latest report from the <a href="https://www.who.int/publications" target="_blank" rel="noopener noreferrer">World Health Organization</a>, - Network accessline 15
According to the latest report from the <a href="https://www.who.int/publications" target="_blank" rel="noopener noreferrer">World Health Organization</a>, urban air quality has become a primary concern for public health in 2024. - Network accessline 16
<a href="https://www.who.int/publications" target="_blank" rel="noopener noreferrer">World Health Organization</a>,
skills/clean-up-comments/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/clean-up-comments - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/clean-up-comments --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/clean-up-comments - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/clean-up-comments
skills/clean-up-comments/references/rule.md
- Dangerous shell operationline 378
find . -name "*.debug.js" -delete - Dangerous shell operationline 379
find . -name "*.test.js" -delete - Dangerous shell operationline 380
find . -name "*.spec.js" -delete - Dangerous shell operationline 383
rm -rf .storybook/ - Dangerous shell operationline 384
rm -rf __tests__/ - Dangerous shell operationline 385
rm -rf coverage/ - Dangerous shell operationline 388
rm -f .env.local - Dangerous shell operationline 389
rm -f .env.development - Dangerous shell operationline 390
rm -f webpack.dev.js - Access to secretsline 502
[Credential-related source omitted] - Access to secretsline 508
[Credential-related source omitted]
skills/code-splitting/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/code-splitting - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/code-splitting --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/code-splitting - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/code-splitting
skills/code-splitting/references/rule.md
- Network accessline 7
--- Code splitting uses [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) and route boundaries to divide your JavaScript application into separate chunks that load on demand rather than all at - Network accessline 8
Code splitting uses [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) and route boundaries to divide your JavaScript application into separate chunks that load on demand rather than all at once - Network accessline 23
A 500 KB JavaScript bundle blocks page interactivity for 3–5 seconds on a mid-range mobile device even after the bytes arrive — JS must be parsed and compiled before execution. The [web.dev dynamic imports guide](https://web.dev/articles/co - Network accessline 101
A first pass with [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) or [Bundlephobia](https://bundlephobia.com) usually shows which dependency or route should move behind `import()`. - Network accessline 118
- Compare the before/after output from your bundle visualizer and confirm the initial chunk shrinks meaningfully; [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) should move real code out of
skills/color-contrast/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/color-contrast - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/color-contrast --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/color-contrast - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/color-contrast
skills/color-contrast/references/rule.md
- Network accessline 42
The thresholds in [WCAG 1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [WCAG 1.4.11 Non-text Contrast](https://www.w3.org/TR/WCAG21/#non-text-contrast) are not aesthetic preferences; they are readability requi - Network accessline 68
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Network accessline 69
- [Colour Contrast Analyser (TPGi)](https://www.tpgi.com/color-contrast-checker/) - Network accessline 70
- [WhoCanUse](https://whocanuse.com/) — simulates how different users perceive your colors
skills/color-oklch/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/color-oklch - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/color-oklch --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/color-oklch - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/color-oklch
skills/color-oklch/references/rule.md
- Network accessline 157
Use the [oklch.com](https://oklch.com/) picker to see the APCA or WCAG contrast ratio as you adjust colours. - Network accessline 175
Use the [MDN `oklch()` reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) or [oklch.com](https://oklch.com/) while checking ramps so you are evaluating perceptual spacing, not just whether the token syntax parses
skills/compression/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/compression - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/compression --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/compression - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/compression
skills/compression/references/rule.md
- Network accessline 49
Compression guidance from [web.dev](https://web.dev/learn/performance) is useful here because transfer savings only solve the network side of the problem; parsing and execution cost still remain on the client after the bytes arrive. - Network accessline 60
Validate transfer savings in [PageSpeed Insights](https://pagespeed.web.dev/) after enabling Brotli or Gzip so you can confirm the smaller payloads translate into better route-level delivery rather than just a config checkbox. - Network accessline 73
- **Chrome DevTools**: Check the "Network" tab, look for the `Content-Encoding` header in resource responses. - [Check GZIP compression](https://www.giftofspeed.com/gzip-test/): Online tool to verify if compression is enabled. - Network accessline 74
- [Check GZIP compression](https://www.giftofspeed.com/gzip-test/): Online tool to verify if compression is enabled. - Network accessline 75
- [Brotli Test](https://tools.keycdn.com/brotli-test): Verify Brotli support for a specific URL.
skills/consent-mode/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/consent-mode - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/consent-mode --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/consent-mode - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/consent-mode
skills/consent-mode/references/rule.md
- Network accessline 56
Validate the implementation with [Google Tag Assistant](https://tagassistant.google.com/) so you can confirm the consent state actually changes the requests sent after a user decision, not just the values stored in the page. - Network accessline 68
- [Google Tag Assistant](https://tagassistant.google.com/): Debugging tool to verify consent signals. - Network accessline 70
- [Tag Manager Debug Mode](https://support.google.com/tagmanager/answer/6107056): View consent state changes in real-time.
skills/consistent-help/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/consistent-help - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/consistent-help --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/consistent-help - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/consistent-help
skills/console-cleanup/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/console-cleanup - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/console-cleanup --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/console-cleanup - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/console-cleanup
skills/const-let/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/const-let - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/const-let --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/const-let - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/const-let
skills/const-let/references/rule.md
- Network accessline 43
// ✅ Use const when a binding won't be reassigned const MAX_RETRIES = 3 const apiUrl = 'https://api.example.com' - Network accessline 44
const MAX_RETRIES = 3 const apiUrl = 'https://api.example.com' const user = fetchUser() // the binding is constant, not the object - Network accessline 45
const apiUrl = 'https://api.example.com'
skills/contact-page/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/contact-page - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/contact-page --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/contact-page - Network accessline 44
Rule page: https://frontendchecklist.io/rules/seo/contact-page
skills/container-queries/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/container-queries - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/container-queries --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/container-queries - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/container-queries
skills/content-dates/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/content-dates - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/content-dates --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/content-dates - Network accessline 59
Rule page: https://frontendchecklist.io/rules/seo/content-dates
skills/content-dates/references/rule.md
- Network accessline 7
--- Showing when content was published and last updated is a trust signal for readers and a freshness signal for search engines. [Google's Article structured data guidance](https://developers.google.com/search/docs/appearance/structured-dat - Network accessline 8
Showing when content was published and last updated is a trust signal for readers and a freshness signal for search engines. [Google's Article structured data guidance](https://developers.google.com/search/docs/appearance/structured-data/ar - Network accessline 37
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 38
{ "@context": "https://schema.org", "@type": "Article", - Network accessline 39
"@context": "https://schema.org", - Network accessline 58
- **Freshness ranking**: Google rewards fresh content for time-sensitive queries. Accurate `dateModified` helps Google assess how current your content is, especially when it matches the same freshness signals surfaced in [Schema.org's `date - Network accessline 73
3. Update your Article JSON-LD template to include `datePublished` and `dateModified`. 4. Ensure your CMS stores and exposes both dates, and that `dateModified` updates on substantive edits. 5. Validate with [Google's Rich Results Test](htt - Network accessline 75
5. Validate with [Google's Rich Results Test](https://search.google.com/test/rich-results).
skills/content-security-policy/SKILL.md
- Network accessline 8
estimatedTime: "45" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/content-security-policy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/content-security-policy --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/content-security-policy - Access to secretsline 41
[Credential-related source omitted] - Network accessline 48
Rule page: https://frontendchecklist.io/rules/security/content-security-policy
skills/content-security-policy/references/rule.md
- Network accessline 68
`img-src 'self' data: https:`, `font-src 'self'`, `connect-src 'self' https://api.example.com`, - Network accessline 69
`font-src 'self'`, `connect-src 'self' https://api.example.com`, `frame-ancestors 'none'`, - Network accessline 70
`connect-src 'self' https://api.example.com`, - Network accessline 195
Content-Security-Policy: default-src 'self'; script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com; - Network accessline 196
default-src 'self'; script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; - Network accessline 197
script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com; - Network accessline 198
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; - Network accessline 199
font-src 'self' https://fonts.gstatic.com; - Network accessline 200
img-src 'self' data: https://www.google-analytics.com; - Network accessline 201
connect-src 'self' https://www.google-analytics.com; - Network accessline 202
frame-src https://www.youtube.com https://www.youtube-nocookie.com; - Network accessline 313
# Check CSP header curl -I https://example.com | grep -i content-security-policy - Network accessline 314
curl -I https://example.com | grep -i content-security-policy - Network accessline 323
- [CSP Evaluator (Google)](https://csp-evaluator.withgoogle.com/) - Network accessline 324
- [Security Headers](https://securityheaders.com/) - Network accessline 325
- [Mozilla Observatory](https://observatory.mozilla.org/)
skills/content-without-css/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/content-without-css - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/content-without-css --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/content-without-css - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/content-without-css
skills/content-without-css/references/rule.md
- Network accessline 7
--- Users should still be able to read, understand, and complete the main task when your stylesheet fails to load or when they replace it with their own. The easiest way to achieve that resilience is to start with [semantic HTML](https://de - Network accessline 8
Users should still be able to read, understand, and complete the main task when your stylesheet fails to load or when they replace it with their own. The easiest way to achieve that resilience is to start with [semantic HTML](https://develo - Network accessline 103
When CSS is disabled, replaced, or partially broken, the browser falls back to the DOM order and native HTML semantics. That is exactly the scenario covered by [WCAG 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/ - Network accessline 112
Think about this section as a practical application of [MDN's semantic HTML guidance](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML): if the meaning survives without presentation, the markup is probably doing its job. - Network accessline 203
- Run [Nu Html Checker](https://validator.w3.org/nu/) and fix structural issues that often signal CSS-dependent meaning, such as broken heading hierarchy, missing labels, or invalid list and table markup.
skills/contract-testing/SKILL.md
- Network accessline 8
estimatedTime: "120" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/contract-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/contract-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/contract-testing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/contract-testing
skills/contract-testing/references/rule.md
- Network accessline 187
const res = await fetch(`${baseUrl}/users/${id}`, { - Access to secretsline 216
[Credential-related source omitted] - Network accessline 249
it('validates the expectations of the frontend consumer', async () => { const verifier = new Verifier({ providerBaseUrl: 'http://localhost:4000', - Network accessline 250
const verifier = new Verifier({ providerBaseUrl: 'http://localhost:4000', pactBrokerUrl: process.env.PACT_BROKER_URL!, - Network accessline 251
providerBaseUrl: 'http://localhost:4000', - Access to secretsline 253
[Credential-related source omitted]
skills/cookie-consent/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/cookie-consent - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/cookie-consent --- - Network accessline 10
url: https://frontendchecklist.io/rules/privacy/cookie-consent - Access to secretsline 40
[Credential-related source omitted] - Network accessline 47
Rule page: https://frontendchecklist.io/rules/privacy/cookie-consent
skills/cookie-consent/references/rule.md
- Network accessline 24
<!-- Do NOT load analytics before consent --> <!-- ❌ Wrong: loads before consent --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script> - Network accessline 26
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script> - Network accessline 86
function loadGoogleAnalytics() { const script = document.createElement('script') script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX' - Network accessline 87
const script = document.createElement('script') script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX' script.async = true - Network accessline 88
script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX'
skills/critical-images/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/critical-images - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/critical-images --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/critical-images - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/critical-images
skills/critical-request-chains/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/critical-request-chains - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/critical-request-chains --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/critical-request-chains - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/critical-request-chains
skills/critical-request-chains/references/rule.md
- Network accessline 60
Use a real request waterfall in [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) or WebPageTest to verify that critical assets are discovered earlier after the change, because this rule is about dependency order, not jus - Network accessline 72
- [Lighthouse](https://developers.google.com/web/tools/lighthouse): Specifically lists "Critical Request Chains" in the Performance report. - Network accessline 73
- [WebPageTest](https://www.webpagetest.org/): Use the "Request Waterfall" to visually identify chains.
skills/cross-browser-testing/SKILL.md
- Network accessline 8
estimatedTime: "60" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/cross-browser-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/cross-browser-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/cross-browser-testing - Network accessline 46
Rule page: https://frontendchecklist.io/rules/testing/cross-browser-testing
skills/cross-browser-testing/references/rule.md
- Access to secretsline 250
[Credential-related source omitted]
skills/cross-origin-isolation/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/cross-origin-isolation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/cross-origin-isolation --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/cross-origin-isolation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/security/cross-origin-isolation
skills/cross-origin-security/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/cross-origin-security - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/cross-origin-security --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/cross-origin-security - Network accessline 46
Rule page: https://frontendchecklist.io/rules/javascript/cross-origin-security
skills/cross-origin-security/references/rule.md
- Network accessline 19
// ✅ Always validate the origin const ALLOWED_ORIGINS = ['https://app.example.com', 'https://admin.example.com'] - Network accessline 20
const ALLOWED_ORIGINS = ['https://app.example.com', 'https://admin.example.com'] - Network accessline 39
iframe.contentWindow.postMessage( JSON.stringify({ type: 'AUTH_SUCCESS', token }), 'https://embedded.example.com' // Don't use '*' for sensitive data - Network accessline 40
JSON.stringify({ type: 'AUTH_SUCCESS', token }), 'https://embedded.example.com' // Don't use '*' for sensitive data ) - Network accessline 41
'https://embedded.example.com' // Don't use '*' for sensitive data - Network accessline 59
app.use(cors({ origin: (origin, callback) => { const allowed = ['https://app.example.com', 'https://admin.example.com'] - Network accessline 60
origin: (origin, callback) => { const allowed = ['https://app.example.com', 'https://admin.example.com'] if (!origin || allowed.includes(origin)) { - Network accessline 61
const allowed = ['https://app.example.com', 'https://admin.example.com'] - Network accessline 78
// Include cookies in cross-origin requests (requires CORS allow-credentials) const response = await fetch('https://api.example.com/user', { - Network accessline 79
const response = await fetch('https://api.example.com/user', { - Network accessline 100
await fetch('/api/submit', { - Network accessline 141
3. Test the primary user flow and one edge case triggered by the changed script path. 4. Confirm the code still behaves correctly when the feature is delayed, lazy-loaded, or fails. 5. Try a malicious external redirect target such as `?next - Network accessline 143
5. Try a malicious external redirect target such as `?next=https://attacker.example` and confirm the app rejects or rewrites it.
skills/css-at-property/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-at-property - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-at-property --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-at-property - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-at-property
skills/css-at-property/references/rule.md
- Network accessline 7
--- CSS custom properties (variables) are string substitutions by default. The browser does not know whether `--brand-color` is a color, a length, or a number, which is why [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@pro - Network accessline 8
CSS custom properties (variables) are string substitutions by default. The browser does not know whether `--brand-color` is a color, a length, or a number, which is why [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@propert - Network accessline 21
CSS custom properties are powerful but limited by default: they are untyped string substitutions that the browser cannot interpolate during transitions or animations. The [web.dev @property article](https://web.dev/articles/at-property) sho - Network accessline 190
Use the [MDN `@property` reference](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) and the [Properties & Values API spec](https://www.w3.org/TR/css-properties-values-api-1/) as the baseline for what counts as a valid registrati
skills/css-containment/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-containment - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-containment --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-containment - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-containment
skills/css-critical/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-critical - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-critical --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-critical - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-critical
skills/css-critical/references/rule.md
skills/css-custom-properties/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-custom-properties - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-custom-properties --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-custom-properties - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-custom-properties
skills/css-file-size/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/css-file-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/css-file-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/css-file-size - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/css-file-size
skills/css-file-size/references/rule.md
- Network accessline 61
Use [PageSpeed Insights](https://pagespeed.web.dev/) or the browser coverage view after trimming CSS so you can confirm the route is actually shipping less render-blocking code instead of just reorganizing styles. - Network accessline 73
- [PurgeCSS](https://purgecss.com/): Remove unused CSS from your bundles. - Network accessline 74
- [CSSNano](https://cssnano.co/): A modular minifier based on PostCSS. - Network accessline 76
- [Lighthouse](https://developers.google.com/web/tools/lighthouse): Warns about large CSS files and unused CSS rules.
skills/css-grid/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-grid - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-grid --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-grid - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-grid
skills/css-minification/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-minification - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-minification --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-minification - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-minification
skills/css-minification/references/rule.md
- Network accessline 638
auditCSS('http://localhost:3000')
skills/css-non-blocking/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-non-blocking - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-non-blocking --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-non-blocking - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-non-blocking
skills/css-non-blocking/references/rule.md
- Network accessline 181
<head> <!-- Preconnect to font/CDN domains --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 182
<!-- Preconnect to font/CDN domains --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://cdn.jsdelivr.net"> - Network accessline 183
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 184
<link rel="preconnect" href="https://cdn.jsdelivr.net"> - Network accessline 199
event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) - Network accessline 200
caches.match(event.request) .then(response => response || fetch(event.request)) ) - Network accessline 201
.then(response => response || fetch(event.request)) - Network accessline 263
- [loadCSS by Filament Group](https://github.com/filamentgroup/loadCSS) - Network accessline 264
- [Critical CSS Generator](https://github.com/addyosmani/critical) - Network accessline 265
- [PurgeCSS](https://purgecss.com/) - Remove unused CSS - Network accessline 266
- [CSS Tree Shaking](https://webpack.js.org/guides/tree-shaking/) in Webpack
skills/css-order/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-order - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-order --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-order - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-order
skills/css-order/references/rule.md
- Network accessline 283
<!-- CSS files first --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 284
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 285
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"> - Network accessline 529
// Usage analyzeCriticalPath('https://example.com').then(analysis => { - Network accessline 530
analyzeCriticalPath('https://example.com').then(analysis => {
skills/css-print/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-print - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/css-print --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/css-print - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/css-print
skills/css-print/references/rule.md
- Network accessline 334
<div className="print-only"> <p>Visit our website at: https://example.com</p> - Network accessline 335
<p>Visit our website at: https://example.com</p> - Network accessline 827
// Usage const tester = new PrintStyleTester() tester.testPrintStyles('https://example.com').then(results => { - Network accessline 828
const tester = new PrintStyleTester() tester.testPrintStyles('https://example.com').then(results => { console.log('Print Style Analysis:', results) - Network accessline 829
tester.testPrintStyles('https://example.com').then(results => { - Network accessline 890
// Usage testPrintStyles('https://example.com').then(results => { - Network accessline 891
testPrintStyles('https://example.com').then(results => {
skills/cumulative-layout-shift/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/cumulative-layout-shift - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/cumulative-layout-shift --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/cumulative-layout-shift - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/cumulative-layout-shift
skills/currency-formatting/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/currency-formatting - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/currency-formatting --- - Network accessline 10
url: https://frontendchecklist.io/rules/i18n/currency-formatting - Network accessline 46
Rule page: https://frontendchecklist.io/rules/i18n/currency-formatting
skills/custom-element-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "60" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/custom-element-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/custom-element-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/custom-element-accessibility - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/custom-element-accessibility
skills/dark-mode-css/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/dark-mode-css - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/dark-mode-css --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/dark-mode-css - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/dark-mode-css
skills/data-minimisation/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/data-minimisation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/data-minimisation --- - Network accessline 10
url: https://frontendchecklist.io/rules/privacy/data-minimisation - Network accessline 46
Rule page: https://frontendchecklist.io/rules/privacy/data-minimisation
skills/data-minimisation/references/rule.md
skills/dead-end-pages/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/dead-end-pages - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/dead-end-pages --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/dead-end-pages - Network accessline 50
Rule page: https://frontendchecklist.io/rules/seo/dead-end-pages
skills/dead-end-pages/references/rule.md
- Network accessline 7
--- Every page on your site should connect to at least a few other pages. [Google's crawler overview](https://developers.google.com/search/docs/crawling-indexing/overview-google-crawlers) makes dead-end pages a crawl and UX problem, especia - Network accessline 8
Every page on your site should connect to at least a few other pages. [Google's crawler overview](https://developers.google.com/search/docs/crawling-indexing/overview-google-crawlers) makes dead-end pages a crawl and UX problem, especially - Network accessline 63
- **Crawl coverage**: Googlebot navigates by following `<a href>` links. A dead-end page means the crawler cannot reach other pages from that starting point during that session, which is part of the broader crawl flow described in [Google's
skills/debounce-throttle/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/debounce-throttle - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/debounce-throttle --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/debounce-throttle - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/debounce-throttle
skills/decorative-elements/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/decorative-elements - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/decorative-elements --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/decorative-elements - Network accessline 47
Rule page: https://frontendchecklist.io/rules/accessibility/decorative-elements
skills/defer-async/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/defer-async - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/defer-async --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/defer-async - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/defer-async
skills/defer-async/references/rule.md
- Network accessline 49
<!-- ✅ async: independent scripts that don't need DOM or other scripts --> <!-- Analytics, chat widgets, social share buttons --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script> - Network accessline 51
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script>
skills/definition-list/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/definition-list - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/definition-list --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/definition-list - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/definition-list
skills/definition-list/references/rule.md
skills/dependency-audit/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/dependency-audit - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/dependency-audit --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/dependency-audit - Network accessline 45
Rule page: https://frontendchecklist.io/rules/security/dependency-audit
skills/dependency-audit/references/rule.md
- Network accessline 38
│ Patched in: >=4.17.21 │ │ Dependency of: your-project > some-lib > lodash │ │ More info: https://npmjs.com/advisories/1523 │ - Network accessline 39
│ Dependency of: your-project > some-lib > lodash │ │ More info: https://npmjs.com/advisories/1523 │ └─────────────────────────────────────────────────────────────────┘ - Network accessline 40
│ More info: https://npmjs.com/advisories/1523 │ - Network accessline 149
[Snyk](https://snyk.io/) provides deeper analysis than `npm audit`, including:
skills/dimensions/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/dimensions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/dimensions --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/dimensions - Network accessline 47
Rule page: https://frontendchecklist.io/rules/images/dimensions
skills/direction-attribute/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/direction-attribute - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/direction-attribute --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/direction-attribute - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/direction-attribute
skills/disclaimers/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/disclaimers - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/disclaimers --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/disclaimers - Network accessline 51
Rule page: https://frontendchecklist.io/rules/seo/disclaimers
skills/disclaimers/references/rule.md
- Network accessline 7
--- Sensitive content — medical advice, financial guidance, legal information, affiliate recommendations — requires clear disclaimers. [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guidelines.raterhub.com/en - Network accessline 8
Sensitive content — medical advice, financial guidance, legal information, affiliate recommendations — requires clear disclaimers. [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guidelines.raterhub.com/en//se - Network accessline 51
<h1>Best Project Management Tools in 2024</h1> <p>We recommend <a href="https://example.com/?ref=affiliate">ToolName</a> - Network accessline 52
<p>We recommend <a href="https://example.com/?ref=affiliate">ToolName</a> - Network accessline 59
- **E-E-A-T Trustworthiness**: Google's quality raters mark pages without appropriate disclaimers as untrustworthy, which suppresses rankings for YMYL topics. - **Legal compliance**: FTC rules (US), ASA guidelines (UK), and GDPR (EU) requir - Network accessline 60
- **Legal compliance**: FTC rules (US), ASA guidelines (UK), and GDPR (EU) require specific disclosures for affiliate content, advertising, and data collection, which is why [FTC disclosure guidance](https://www.ftc.gov/sites/default/files/
skills/dlitem/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/dlitem - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/dlitem --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/dlitem - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/dlitem
skills/dlitem/references/rule.md
skills/doctype/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/doctype - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/doctype --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/doctype - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/doctype
skills/doctype/references/rule.md
- Network accessline 33
<!-- ❌ Incorrect: old XHTML 1.0 doctype --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Network accessline 35
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Network accessline 37
<!-- ❌ Incorrect: HTML 4.01 Strict doctype --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - Network accessline 39
"http://www.w3.org/TR/html4/strict.dtd">
skills/dom-performance/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/dom-performance - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/dom-performance --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/dom-performance - Network accessline 47
Rule page: https://frontendchecklist.io/rules/javascript/dom-performance
skills/dom-size/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/dom-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/dom-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/dom-size - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/dom-size
skills/dom-size/references/rule.md
- Network accessline 91
- [Lighthouse](https://developers.google.com/web/tools/lighthouse): Audits the "DOM size" and provides specific counts for nodes and depth.
skills/draggable-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "35" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/draggable-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/draggable-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/draggable-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/draggable-accessibility
skills/duplicate-description/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/duplicate-description - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/duplicate-description --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/duplicate-description - Network accessline 51
Rule page: https://frontendchecklist.io/rules/seo/duplicate-description
skills/duplicate-description/references/rule.md
- Network accessline 7
--- Every page should tell search engines and users what makes it unique. When multiple pages share the same meta description, [Google's snippet guidance](https://developers.google.com/search/docs/appearance/snippet) often leads Google to r - Network accessline 8
Every page should tell search engines and users what makes it unique. When multiple pages share the same meta description, [Google's snippet guidance](https://developers.google.com/search/docs/appearance/snippet) often leads Google to rewri - Network accessline 51
- **Snippet quality**: Google uses the meta description as the search snippet when it considers it relevant. Unique descriptions mean more useful snippets, and [MDN's description-meta reference](https://developer.mozilla.org/en-US/docs/Web/ - Network accessline 66
1. Run a site crawl with [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/), Sitebulb, or Google Search Console's Page Indexing report to identify duplicates.
skills/duplicate-id-active/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/duplicate-id-active - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/duplicate-id-active --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/duplicate-id-active - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/duplicate-id-active
skills/duplicate-id-active/references/rule.md
skills/duplicate-id-aria/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/duplicate-id-aria - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/duplicate-id-aria --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/duplicate-id-aria - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/duplicate-id-aria
skills/duplicate-id-aria/references/rule.md
skills/duplicate-js/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/duplicate-js - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/duplicate-js --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/duplicate-js - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/duplicate-js
skills/duplicate-js/references/rule.md
- Network accessline 55
Start with [Bundlephobia](https://bundlephobia.com/) or your local bundle analyzer before deduping packages, because the real problem is usually one duplicated heavyweight dependency rather than every shared utility in the tree. - Network accessline 67
- [Bundlephobia](https://bundlephobia.com/): Check the cost of adding a new dependency. - Network accessline 68
- [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer): Visualizes the size of webpack output files with an interactive zoomable treemap. - Network accessline 69
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/): Specifically flags "duplicate modules in JavaScript bundles." - Network accessline 70
- [JSHint](https://jshint.com/): Can help identify global variable collisions.
skills/e2e-testing/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/e2e-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/e2e-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/e2e-testing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/e2e-testing
skills/e2e-testing/references/rule.md
- Network accessline 10
Teams that want natural-language, black-box user-flow coverage can use [Agent QA](https://github.com/vostride/agent-qa) alongside code-level Playwright or Cypress suites; it complements rather than replaces their framework-level assertions.
skills/editorial-policy/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/editorial-policy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/editorial-policy --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/editorial-policy - Network accessline 53
Rule page: https://frontendchecklist.io/rules/seo/editorial-policy
skills/editorial-policy/references/rule.md
- Network accessline 7
--- An editorial policy page documents how your site creates, reviews, and maintains content. [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guidelines.raterhub.com/en//searchqualityevaluatorguidelines.pdf) a - Network accessline 8
An editorial policy page documents how your site creates, reviews, and maintains content. [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guidelines.raterhub.com/en//searchqualityevaluatorguidelines.pdf) and s - Network accessline 84
- **E-E-A-T**: Google's quality raters explicitly look for editorial standards when evaluating Trustworthiness. A published policy is direct evidence, especially when it aligns with Google's guidance on [helpful, reliable, people-first cont
skills/element-hiding/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/element-hiding - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/element-hiding --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/element-hiding - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/element-hiding
skills/element-hiding/references/rule.md
- Network accessline 7
--- Adblockers use filter lists such as [EasyList](https://easylist.to/) and [uBlock Origin's static syntax](https://github.com/gorhill/uBlock/wiki/Static-filter-syntax) to identify and hide advertising elements. Those rules match against e - Network accessline 8
Adblockers use filter lists such as [EasyList](https://easylist.to/) and [uBlock Origin's static syntax](https://github.com/gorhill/uBlock/wiki/Static-filter-syntax) to identify and hide advertising elements. Those rules match against eleme - Network accessline 25
If your cookie consent banner has class `.cookie-banner` or ID `#consent-popup`, adblockers may hide it. Because the [HTML `class` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) is exactly what those s
skills/embedded-or-inline-css/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/embedded-or-inline-css - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/embedded-or-inline-css --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/embedded-or-inline-css - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/embedded-or-inline-css
skills/empty-heading/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/empty-heading - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/empty-heading --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/empty-heading - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/empty-heading
skills/empty-heading/references/rule.md
skills/empty-links/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/empty-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/empty-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/empty-links - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/empty-links
skills/empty-links/references/rule.md
skills/error-handling/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/error-handling - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/error-handling --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/error-handling - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/error-handling
skills/error-handling/references/rule.md
- Network accessline 16
// ❌ No error handling async function fetchUser(id) { const response = await fetch(`/api/users/${id}`) - Network accessline 17
async function fetchUser(id) { const response = await fetch(`/api/users/${id}`) return response.json() - Network accessline 18
const response = await fetch(`/api/users/${id}`) - Network accessline 23
async function fetchUser(id) { try { const response = await fetch(`/api/users/${id}`) - Network accessline 25
const response = await fetch(`/api/users/${id}`) - Network accessline 41
async function fetchUserWithFallback(id) { try { const response = await fetch(`/api/users/${id}`) - Network accessline 42
try { const response = await fetch(`/api/users/${id}`) return await response.json() - Network accessline 43
const response = await fetch(`/api/users/${id}`) - Network accessline 67
// ❌ Unhandled promise rejection fetch('/api/data') - Network accessline 68
fetch('/api/data') - Network accessline 72
// ✅ With error handling fetch('/api/data') - Network accessline 73
fetch('/api/data')
skills/error-images/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/error-images - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/error-images --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/error-images - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/error-images
skills/error-monitoring/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/error-monitoring - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/error-monitoring --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/error-monitoring - Network accessline 46
Rule page: https://frontendchecklist.io/rules/testing/error-monitoring
skills/error-monitoring/references/rule.md
skills/es-modules/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/es-modules - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/es-modules --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/es-modules - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/es-modules
skills/event-delegation/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/event-delegation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/event-delegation --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/event-delegation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/event-delegation
skills/external-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/external-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/external-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/external-links - Network accessline 33
5. Avoid linking to competitor sites for their main commercial pages; prefer linking to neutral third parties. Example: Replace "Studies show 60% of users abandon slow pages" with: "According to <a href="https://web.dev/performance/" rel="n - Network accessline 35
"According to <a href="https://web.dev/performance/" rel="noopener noreferrer">Google's web.dev research</a>, 60% of users abandon pages that take over 3 seconds to load." - Network accessline 51
Rule page: https://frontendchecklist.io/rules/seo/external-links
skills/external-links/references/rule.md
- Network accessline 7
--- Linking out to authoritative external sources is a mark of quality content. It supports your claims, helps users verify information, and reinforces the same trust expectations covered in [content citations](/en/rules/seo/citations) and - Network accessline 8
Linking out to authoritative external sources is a mark of quality content. It supports your claims, helps users verify information, and reinforces the same trust expectations covered in [content citations](/en/rules/seo/citations) and [Goo - Network accessline 24
<a href="https://example.com/research">View the research</a> - Network accessline 31
<p>According to the <a href="https://webaim.org/projects/million/" - Network accessline 32
<a href="https://webaim.org/projects/million/" - Network accessline 40
<p>We recommend <a href="https://partner.example.com/" - Network accessline 41
<a href="https://partner.example.com/" - Network accessline 48
- **Trust signals**: Google's quality guidelines identify citation of credible sources as evidence of E-E-A-T. Unsupported claims lower trust scores, particularly on informational pages that need the same credibility signals as [trust-signa - Network accessline 50
- **Link equity**: Outbound links to reputable sites do not drain your PageRank. Google treats responsible external linking positively, and [MDN's `rel` reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) helps clar
skills/faq/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/faq - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/faq --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/faq - Network accessline 32
{ "@context": "https://schema.org", - Network accessline 33
"@context": "https://schema.org", - Network accessline 47
3. Validate the markup using Google's Rich Results Test at https://search.google.com/test/rich-results. - Network accessline 64
Rule page: https://frontendchecklist.io/rules/seo/faq
skills/faq/references/rule.md
- Network accessline 28
{ "@context": "https://schema.org", - Network accessline 29
"@context": "https://schema.org", - Network accessline 44
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 45
{ "@context": "https://schema.org", "@type": "FAQPage", - Network accessline 46
"@context": "https://schema.org", - Network accessline 73
// Generate FAQPage JSON-LD from your content const faqSchema = { '@context': 'https://schema.org', - Network accessline 74
const faqSchema = { '@context': 'https://schema.org', '@type': 'FAQPage', - Network accessline 75
'@context': 'https://schema.org', - Network accessline 115
- Do not add FAQPage schema to pages where Q&A is behind a tab, accordion hidden from initial load, or requires interaction — Google must be able to see the content. - Do not use FAQPage for advertising purposes or to answer questions that - Network accessline 117
- Validate with the [Rich Results Test](https://search.google.com/test/rich-results) before deploying.
skills/favicon/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/favicon - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/favicon --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/favicon - Network accessline 58
Rule page: https://frontendchecklist.io/rules/seo/favicon
skills/favicon/references/rule.md
- Network accessline 54
<!-- favicon.svg --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> - Network accessline 55
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> - Network accessline 75
- The favicon must be accessible to Googlebot (not blocked by robots.txt) - The image must be at least 48×48px (Google scales it to 16×16 for display) - The favicon must follow Google's [safe search policies](https://developers.google.com/s - Network accessline 76
- The image must be at least 48×48px (Google scales it to 16×16 for display) - The favicon must follow Google's [safe search policies](https://developers.google.com/search/docs/appearance/favicon-in-search) - A new favicon may take several - Network accessline 77
- The favicon must follow Google's [safe search policies](https://developers.google.com/search/docs/appearance/favicon-in-search)
skills/favicons/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/favicons - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/favicons --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/favicons - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/favicons
skills/favicons/references/rule.md
- Network accessline 75
<!-- favicon.svg - Modern scalable favicon --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> - Network accessline 76
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> - Network accessline 98
<!-- animated-favicon.svg --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> - Network accessline 99
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
skills/fetchpriority-attribute/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/fetchpriority-attribute - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/fetchpriority-attribute --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/fetchpriority-attribute - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/fetchpriority-attribute
skills/fetchpriority-attribute/references/rule.md
- Network accessline 123
<!-- Non-critical analytics — load after critical resources --> <script src="https://cdn.example.com/analytics.js" - Network accessline 124
<script src="https://cdn.example.com/analytics.js" defer - Network accessline 125
src="https://cdn.example.com/analytics.js" - Network accessline 175
Use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) or a real waterfall trace to confirm the hint changes request order, because `fetchpriority` only helps when the browser actually promotes the right resource.
skills/figure-figcaption/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/figure-figcaption - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/figure-figcaption --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/figure-figcaption - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/figure-figcaption
skills/file-upload-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/file-upload-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/file-upload-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/file-upload-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/file-upload-accessibility
skills/file-upload-accessibility/references/rule.md
skills/filename-quality/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/filename-quality - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/filename-quality --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/filename-quality - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/filename-quality
skills/find-npm-packages/SKILL.md
- Network accessline 54
Use `https://www.npmjs.com/search?q={keywords}` and knowledge of the ecosystem to find candidates. - Network accessline 66
# Metadata curl https://registry.npmjs.org/{package}/latest | jq '{name, version, description}' - Network accessline 67
curl https://registry.npmjs.org/{package}/latest | jq '{name, version, description}' - Network accessline 69
# Weekly downloads curl https://api.npmjs.org/downloads/point/last-week/{package} | jq '.downloads' - Network accessline 70
curl https://api.npmjs.org/downloads/point/last-week/{package} | jq '.downloads'
skills/first-contentful-paint/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/first-contentful-paint - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/first-contentful-paint --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/first-contentful-paint - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/first-contentful-paint
skills/first-contentful-paint/references/rule.md
- Network accessline 64
<head> <!-- Establish early connections --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 65
<!-- Establish early connections --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 66
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 67
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 68
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - Network accessline 70
<!-- DNS prefetch for less critical origins --> <link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 71
<link rel="dns-prefetch" href="https://analytics.example.com">
skills/flashing-content/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/flashing-content - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/flashing-content --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/flashing-content - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/flashing-content
skills/flashing-content/references/rule.md
- Network accessline 7
--- Flashing content can trigger seizures, which is why [WCAG 2.3.1](https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold) treats it as a hard safety limit rather than a design preference. - Network accessline 8
Flashing content can trigger seizures, which is why [WCAG 2.3.1](https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold) treats it as a hard safety limit rather than a design preference. - Network accessline 10
[WCAG 2.3.1](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html) is a Level A requirement. Content that flashes more than 3 times per second and exceeds size thresholds fails accessibility compliance and poses - Network accessline 39
Flashing content between 3-60 Hz can trigger seizures in people with photosensitive epilepsy. [MDN's accessibility guidance](https://developer.mozilla.org/en-US/docs/Web/Accessibility) frames this correctly as a health and safety requiremen
skills/flexbox-patterns/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/flexbox-patterns - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/flexbox-patterns --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/flexbox-patterns - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/flexbox-patterns
skills/focus-management/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/focus-management - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/focus-management --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/focus-management - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/focus-management
skills/focus-not-obscured/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/focus-not-obscured - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/focus-not-obscured --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/focus-not-obscured - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/focus-not-obscured
skills/focus-order/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/focus-order - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/focus-order --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/focus-order - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/focus-order
skills/focus-styles/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/focus-styles - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/focus-styles --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/focus-styles - Network accessline 47
Rule page: https://frontendchecklist.io/rules/css/focus-styles
skills/font-loading/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/font-loading - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/font-loading --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/font-loading - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/font-loading
skills/font-loading/references/rule.md
- Network accessline 60
Verify the font waterfall in [PageSpeed Insights](https://pagespeed.web.dev/) or DevTools after each change, because good font loading is about earlier discovery and stable fallback metrics rather than just flipping `font-display: swap`. - Network accessline 72
- Google Fonts Helper can speed up self-hosting work when you need a quick export of font files and matching CSS. - [FontSubsetter](https://font-subsetter.com/): Reduce font file size by removing unused characters. - Network accessline 73
- [FontSubsetter](https://font-subsetter.com/): Reduce font file size by removing unused characters. - Network accessline 74
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/): Checks if "All text remains visible during webfont loads." - Network accessline 75
- [Web Font Configurator](https://wakamaifondue.com/): Analyze what's inside your font files.
skills/font-size/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/font-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/font-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/font-size - Network accessline 46
Rule page: https://frontendchecklist.io/rules/css/font-size
skills/form-captcha/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/form-captcha - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/form-captcha --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/form-captcha - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/form-captcha
skills/form-captcha/references/rule.md
- Network accessline 7
--- Automated bots constantly probe public web forms for weaknesses. Without bot protection, a single form can generate thousands of spam submissions, enable account takeover through [credential stuffing](https://cheatsheetseries.owasp.org/ - Network accessline 8
Automated bots constantly probe public web forms for weaknesses. Without bot protection, a single form can generate thousands of spam submissions, enable account takeover through [credential stuffing](https://cheatsheetseries.owasp.org/chea - Network accessline 13
## [Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/) (Recommended) - Network accessline 18
<!-- 1. Include the script --> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> - Network accessline 19
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> - Network accessline 42
// Verify with Cloudflare const verifyResponse = await fetch( - Network accessline 43
const verifyResponse = await fetch( - Network accessline 44
'https://challenges.cloudflare.com/turnstile/v0/siteverify', - Access to secretsline 49
[Credential-related source omitted] - Network accessline 67
### Google [reCAPTCHA v3](https://developers.google.com/recaptcha/docs/v3) (Invisible) - Network accessline 72
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script> - Network accessline 89
await fetch('/submit', { method: 'POST', body: formData }) - Network accessline 95
// Server-side validation const verifyResponse = await fetch( - Network accessline 96
const verifyResponse = await fetch( - Network accessline 97
`https://www.google.com/recaptcha/api/siteverify`, - Access to secretsline 101
[Credential-related source omitted] - Network accessline 140
CAPTCHA tokens verified only in the browser (client-side) provide no protection. Bots can bypass client-side checks by directly calling your API, which is why [OWASP's automated threats guidance](https://owasp.org/www-project-automated-thre
skills/form-field-multiple-labels/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/form-field-multiple-labels - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/form-field-multiple-labels --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/form-field-multiple-labels - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/form-field-multiple-labels
skills/form-field-multiple-labels/references/rule.md
skills/form-https/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/form-https - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/form-https --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/form-https - Network accessline 19
- Every `<form action>` URL must use `https://` — never `http://` - Forms without an explicit `action` attribute submit to the current page URL — ensure the page itself is on HTTPS - Check `fetch()` and `XMLHttpRequest` calls in JavaScript - Network accessline 20
- Forms without an explicit `action` attribute submit to the current page URL — ensure the page itself is on HTTPS - Check `fetch()` and `XMLHttpRequest` calls in JavaScript — data posted to `http://` endpoints is unencrypted - Browsers sho - Network accessline 21
- Check `fetch()` and `XMLHttpRequest` calls in JavaScript — data posted to `http://` endpoints is unencrypted - Network accessline 27
Scan all HTML form elements for action attributes pointing to http:// URLs. Check all JavaScript fetch() and XMLHttpRequest calls for http:// endpoints. Verify the current page URL is HTTPS so forms without an explicit action submit securel - Network accessline 31
Replace all http:// form action URLs with https:// equivalents. Ensure the web server redirects HTTP to HTTPS (301) so that forms on the page also benefit. For JavaScript API calls, update all endpoint URLs to use https://. - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/form-https
skills/form-https/references/rule.md
- Network accessline 7
--- Every form that collects user input, whether login, registration, contact, payment, or search, must submit its data over HTTPS. Both [MDN's form submission guidance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensi - Network accessline 8
Every form that collects user input, whether login, registration, contact, payment, or search, must submit its data over HTTPS. Both [MDN's form submission guidance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/ - Network accessline 12
A login form posting to an `http://` endpoint transmits: - Network accessline 26
A login form that posts credentials to an HTTP endpoint sends usernames and passwords as plain text over the network. The [OWASP transport cheat sheet](https://cheatsheetseries.owasp.org/cheatsheets/Transport_Layer_Protection_Cheat_Sheet.ht - Network accessline 35
❌ Insecure — credentials sent in plain text <form method="POST" action="http://example.com/login"> - Network accessline 36
<form method="POST" action="http://example.com/login"> - Network accessline 42
✅ Secure — data encrypted by TLS <form method="POST" action="https://example.com/login"> - Network accessline 43
<form method="POST" action="https://example.com/login"> - Network accessline 58
❌ Insecure const response = await fetch('http://api.example.com/login', { - Network accessline 59
const response = await fetch('http://api.example.com/login', { - Network accessline 64
✅ Secure const response = await fetch('https://api.example.com/login', { - Network accessline 65
const response = await fetch('https://api.example.com/login', { - Network accessline 106
A server that redirects a `POST` from an `http://` login endpoint to the HTTPS version does not protect the credentials. The original HTTP request containing the plaintext password was already made, so forms must submit securely from the st
skills/form-labels/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/form-labels - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/form-labels --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/form-labels - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/form-labels
skills/form-labels/references/rule.md
- Network accessline 7
--- Every form control must have a label that is programmatically associated with it to ensure it is accessible to all users. [MDN's `<label>` reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) and WCAG form guidanc - Network accessline 8
Every form control must have a label that is programmatically associated with it to ensure it is accessible to all users. [MDN's `<label>` reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) and WCAG form guidance bo
skills/form-validation/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/form-validation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/form-validation --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/form-validation - Network accessline 47
Rule page: https://frontendchecklist.io/rules/html/form-validation
skills/frame-title/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/frame-title - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/frame-title --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/frame-title - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/frame-title
skills/frame-title/references/rule.md
- Network accessline 7
--- Iframes and frames must have a `title` attribute that describes their purpose or content so assistive technologies can identify them. This is one of the quickest ways to make embedded content navigable, especially when the frame contain - Network accessline 8
Iframes and frames must have a `title` attribute that describes their purpose or content so assistive technologies can identify them. This is one of the quickest ways to make embedded content navigable, especially when the frame contains a - Network accessline 13
<iframe title="Map of our office location" src="https://maps.google.com/..."></iframe> - Network accessline 15
<iframe title="Tutorial video: How to use our product" src="https://youtube.com/..."></iframe> - Network accessline 20
<!-- No title provided --> <iframe src="https://example.com/ad"></iframe> - Network accessline 21
<iframe src="https://example.com/ad"></iframe> - Network accessline 23
<!-- Generic or unhelpful title --> <iframe title="frame" src="https://example.com/content"></iframe> - Network accessline 24
<iframe title="frame" src="https://example.com/content"></iframe>
skills/freshness/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/freshness - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/freshness --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/freshness - Network accessline 54
Rule page: https://frontendchecklist.io/rules/seo/freshness
skills/freshness/references/rule.md
- Network accessline 7
--- Content freshness is a ranking factor for time-sensitive queries. [Google's ranking systems guide](https://developers.google.com/search/docs/appearance/ranking-systems-guide) and the visible date patterns in [content-date markup](/en/ru - Network accessline 8
Content freshness is a ranking factor for time-sensitive queries. [Google's ranking systems guide](https://developers.google.com/search/docs/appearance/ranking-systems-guide) and the visible date patterns in [content-date markup](/en/rules/ - Network accessline 31
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 32
{ "@context": "https://schema.org", "@type": "Article", - Network accessline 33
"@context": "https://schema.org",
skills/frontend-checklist-global/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/mcp - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/mcp --- - Network accessline 10
url: https://frontendchecklist.io/mcp - Network accessline 193
MCP docs: https://frontendchecklist.io/mcp
skills/frontend-checklist-global/references/categories.md
skills/geo-meta/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/geo-meta - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/geo-meta --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/geo-meta - Network accessline 54
Rule page: https://frontendchecklist.io/rules/seo/geo-meta
skills/geo-meta/references/rule.md
- Network accessline 70
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 71
{ "@context": "https://schema.org", "@type": "LocalBusiness", - Network accessline 72
"@context": "https://schema.org", - Network accessline 92
While Google does not officially support geo meta tags, Bing and other search engines may use them for geographic targeting. [Bing Webmaster Tools](https://learn.microsoft.com/bingwebmaster/) make them more relevant there, while Google-focu - Network accessline 97
- Use **hreflang** for language/regional variants - Use **LocalBusiness JSON-LD** for local business signals - Use **Google Search Console's International Targeting** settings for country targeting, alongside the broader [international targ - Network accessline 99
- Use **Google Search Console's International Targeting** settings for country targeting, alongside the broader [international targeting documentation](https://developers.google.com/search/docs/specialty/international/managing-multi-regiona
skills/gtm-present/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/gtm-present - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/gtm-present --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/gtm-present - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/gtm-present
skills/gtm-present/references/rule.md
- Network accessline 20
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); - Network accessline 21
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');</script> - Network accessline 22
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); - Network accessline 41
Measure GTM in [PageSpeed Insights](https://pagespeed.web.dev/) or a performance trace after every tagging change, because the real cost comes from the specific tags and triggers you ship rather than the container script by itself. - Network accessline 50
Use [Google Tag Assistant](https://tagassistant.google.com/) alongside your performance trace so you can map each firing tag to the extra requests and long tasks it introduces. - Network accessline 63
- [GTM Debug Mode](https://support.google.com/tagmanager/answer/6107056): See which tags are firing and when. - Network accessline 64
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/): Check the "Reduce the impact of third-party code" section. - Network accessline 65
- [Tag Inspector](https://taginspector.com/): Scan your site to see all tags being loaded and their performance impact.
skills/h1/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/h1 - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/h1 --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/h1 - Network accessline 52
Rule page: https://frontendchecklist.io/rules/seo/h1
skills/h1/references/rule.md
- Network accessline 7
--- The `<h1>` element is the primary heading of a page. [Google's heading guidance](https://developers.google.com/search/docs/appearance/title-link) and the page's [title strategy](/en/rules/seo/meta-title) should reinforce the same topic, - Network accessline 8
The `<h1>` element is the primary heading of a page. [Google's heading guidance](https://developers.google.com/search/docs/appearance/title-link) and the page's [title strategy](/en/rules/seo/meta-title) should reinforce the same topic, so - Network accessline 69
- **On-page SEO**: Google uses headings to understand page structure and topical relevance. The H1 is weighted most heavily, and [MDN's heading-element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) i - Network accessline 87
3. For pages with multiple H1s: choose the most topically specific one, demote the rest, and keep it aligned with the page title strategy. 4. For brand-name-only H1s: incorporate the page topic alongside or replace the brand name. 5. Verify - Network accessline 89
5. Verify the fix by inspecting the rendered DOM (not just source), as JavaScript frameworks may alter heading structure, and compare the final output against [MDN's heading element reference](https://developer.mozilla.org/en-US/docs/Web/HT
skills/has-selector/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/has-selector - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/has-selector --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/has-selector - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/has-selector
skills/has-selector/references/rule.md
- Network accessline 7
--- The [`:has()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) selects an element if any selector passed as an argument matches a descendant or related element. The [web.dev guide](https://web.dev/articles/css-has) i - Network accessline 8
The [`:has()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) selects an element if any selector passed as an argument matches a descendant or related element. The [web.dev guide](https://web.dev/articles/css-has) is wh - Network accessline 158
Use [`Can I Use`](https://caniuse.com/css-has) and `@supports selector(:has(*))` to provide a fallback for older environments: - Network accessline 177
Check the result against [`Can I Use`](https://caniuse.com/css-has) and the [MDN `:has()` reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) so you confirm both dynamic behavior and fallback coverage.
skills/heading-hierarchy/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/heading-hierarchy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/heading-hierarchy --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/heading-hierarchy - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/heading-hierarchy
skills/heading-order/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/heading-order - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/heading-order --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/heading-order - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/heading-order
skills/horizontal-scroll/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/horizontal-scroll - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/horizontal-scroll --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/horizontal-scroll - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/horizontal-scroll
skills/hreflang/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/hreflang - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/hreflang --- - Network accessline 10
url: https://frontendchecklist.io/rules/i18n/hreflang - Network accessline 45
Rule page: https://frontendchecklist.io/rules/i18n/hreflang
skills/hreflang/references/rule.md
- Network accessline 33
<head> <!-- Current page is English (US) --> <link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> - Network accessline 34
<!-- Current page is English (US) --> <link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> <link rel="alternate" hreflang="es-ES" href="https://example.com/es/sobre" /> - Network accessline 35
<link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> - Network accessline 36
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/sobre" /> - Network accessline 37
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/a-propos" /> - Network accessline 38
<link rel="alternate" hreflang="x-default" href="https://example.com/about" /> - Network accessline 88
<!-- On English page (/en/about): --> <link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> - Network accessline 89
<link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> - Network accessline 90
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/sobre" /> - Network accessline 92
<!-- On Spanish page (/es/sobre): --> <link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> - Network accessline 93
<link rel="alternate" hreflang="en-US" href="https://example.com/en/about" /> - Network accessline 94
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/sobre" /> - Network accessline 102
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" - Network accessline 103
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" - Network accessline 104
xmlns:xhtml="http://www.w3.org/1999/xhtml"> - Network accessline 105
<url> <loc>https://example.com/en/about</loc> <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en/about"/> - Network accessline 106
<loc>https://example.com/en/about</loc> - Network accessline 107
<xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en/about"/> - Network accessline 108
<xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/sobre"/> - Network accessline 109
<xhtml:link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/a-propos"/> - Network accessline 110
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/about"/> - Network accessline 111
</url> <url> <loc>https://example.com/es/sobre</loc> - Network accessline 112
<url> <loc>https://example.com/es/sobre</loc> <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en/about"/> - Network accessline 113
<loc>https://example.com/es/sobre</loc> - Network accessline 114
<xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en/about"/> - Network accessline 115
<xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/sobre"/> - Network accessline 116
<xhtml:link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/a-propos"/> - Network accessline 117
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/about"/> - Network accessline 137
<!-- ❌ Bad: Different domains without proper setup --> <link rel="alternate" hreflang="de" href="https://example.de/about" /> - Network accessline 138
<link rel="alternate" hreflang="de" href="https://example.de/about" />
skills/hsts/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/hsts - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/hsts --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/hsts - Network accessline 31
Add a Strict-Transport-Security header with max-age=31536000 and includeSubDomains to all HTTPS responses. Configure your web server or CDN to send this header, and validate it with curl or securityheaders.com. - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/hsts
skills/hsts/references/rule.md
- Network accessline 7
--- [HTTP Strict Transport Security](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) (HSTS) instructs browsers to always use HTTPS for your domain, even if the user types an `http://` URL or clicks an un - Network accessline 8
[HTTP Strict Transport Security](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) (HSTS) instructs browsers to always use HTTPS for your domain, even if the user types an `http://` URL or clicks an unencr - Network accessline 28
Without HSTS, the first visit to the HTTP version of your site triggers a redirect to HTTPS. An attacker performing a man-in-the-middle (MITM) attack can intercept that first HTTP request and strip TLS, which is the classic SSL-stripping pr - Network accessline 96
The `preload` directive plus submission to the browser preload list extends the [RFC 6797](https://www.rfc-editor.org/info/rfc6797/) behavior even further by hardcoding your domain into shipping browsers. This means browsers **never** make
skills/html-resource-hints/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/en/rules/html/html-resource-hints - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/en/rules/html/html-resource-hints --- - Network accessline 10
url: https://frontendchecklist.io/en/rules/html/html-resource-hints - Network accessline 45
Rule page: https://frontendchecklist.io/en/rules/html/html-resource-hints
skills/html-resource-hints/references/rule.md
- Network accessline 19
<!-- preconnect: establish connection early (DNS + TCP + TLS) --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 20
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 21
<link rel="preconnect" href="https://api.example.com" crossorigin> - Network accessline 23
<!-- dns-prefetch: DNS lookup only (lighter than preconnect) --> <link rel="dns-prefetch" href="https://www.googletagmanager.com"> - Network accessline 24
<link rel="dns-prefetch" href="https://www.googletagmanager.com"> - Network accessline 25
<link rel="dns-prefetch" href="https://cdn.example.com"> - Network accessline 57
<!-- Critical third-party resources: use preconnect --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 58
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 59
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 61
<!-- Analytics and tag managers: dns-prefetch is enough --> <link rel="dns-prefetch" href="https://www.googletagmanager.com"> - Network accessline 62
<link rel="dns-prefetch" href="https://www.googletagmanager.com"> - Network accessline 63
<link rel="dns-prefetch" href="https://www.google-analytics.com">
skills/html-size/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/html-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/html-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/html-size - Network accessline 29
1. Measure: `curl -so /dev/null -w '%{size_download}' https://yoursite.com/page | awk '{print $1/1024 " KB"}'` - Network accessline 52
Rule page: https://frontendchecklist.io/rules/seo/html-size
skills/html-size/references/rule.md
- Network accessline 44
<!-- 200KB SVG inlined directly in HTML --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500"> - Network accessline 45
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500"> - Network accessline 79
# Measure uncompressed HTML size curl -so /dev/null -w '%{size_download}\n' https://yoursite.com/page - Network accessline 80
curl -so /dev/null -w '%{size_download}\n' https://yoursite.com/page - Network accessline 82
# Measure with Accept-Encoding to see what Googlebot receives curl -H 'Accept-Encoding: gzip, br' -so /dev/null -w '%{size_download}\n' https://yoursite.com/page - Network accessline 83
curl -H 'Accept-Encoding: gzip, br' -so /dev/null -w '%{size_download}\n' https://yoursite.com/page
skills/html-xml-lang-mismatch/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/html-xml-lang-mismatch - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/html-xml-lang-mismatch --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/html-xml-lang-mismatch - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/html-xml-lang-mismatch
skills/html-xml-lang-mismatch/references/rule.md
- Network accessline 7
--- When using both `lang` and `xml:lang` on the same element, they must have the exact same value. The [HTML Living Standard](https://html.spec.whatwg.org/multipage/dom.html#attr-lang) and [W3C language declaration guidance](https://www.w3 - Network accessline 8
When using both `lang` and `xml:lang` on the same element, they must have the exact same value. The [HTML Living Standard](https://html.spec.whatwg.org/multipage/dom.html#attr-lang) and [W3C language declaration guidance](https://www.w3.org - Network accessline 32
- **Screen Readers**: Conflicting attributes can cause the wrong speech synthesis language profile to be selected. - **Translation Tools**: Browser auto-translate features rely on `lang` to detect the source language. - **WCAG Compliance**: - Network accessline 34
- **WCAG Compliance**: [SC 3.1.1 Language of Page](https://www.w3.org/TR/WCAG21/#language-of-page) requires the page language to be programmatically determinable, and [BCP 47](https://www.rfc-editor.org/info/rfc5646/) defines the language t
skills/html5-semantic-elements/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/html5-semantic-elements - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/html5-semantic-elements --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/html5-semantic-elements - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/html5-semantic-elements
skills/html5-semantic-elements/references/rule.md
- Network accessline 460
<article itemscope itemtype="http://schema.org/Article"> - Network accessline 464
January 15, 2024 </time> <address itemprop="author" itemscope itemtype="http://schema.org/Person"> - Network accessline 465
</time> <address itemprop="author" itemscope itemtype="http://schema.org/Person"> By <span itemprop="name">Author Name</span> - Network accessline 466
<address itemprop="author" itemscope itemtype="http://schema.org/Person"> - Network accessline 534
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> - Network accessline 535
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
skills/http-requests/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/http-requests - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/http-requests --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/http-requests - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/http-requests
skills/http-requests/references/rule.md
- Network accessline 70
/* Inline small images as data URIs */ .icon-small { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L2 7l10 5 10-5-10-5z"/%3E%3C/svg%3E'); - Network accessline 71
.icon-small { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L2 7l10 5 10-5-10-5z"/%3E%3C/svg%3E'); } - Network accessline 72
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L2 7l10 5 10-5-10-5z"/%3E%3C/svg%3E');
skills/http-to-https/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/http-to-https - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/http-to-https --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/http-to-https - Network accessline 15
Without an HTTP-to-HTTPS redirect, users who type the domain without `https://` or follow old links land on the insecure version of the site, exposing session cookies and form data to network attackers. - Network accessline 19
- Redirect `http://example.com` to `https://example.com` with HTTP 301 (permanent redirect) - Preserve the full path and query string in the redirect: `https://$host$request_uri` - Use 301 (not 302) so browsers and search engines cache the - Network accessline 20
- Preserve the full path and query string in the redirect: `https://$host$request_uri` - Use 301 (not 302) so browsers and search engines cache the redirect and future requests go directly to HTTPS - Configure redirects at the server/CDN le - Network accessline 27
Test whether http://example.com redirects to https://example.com with a 301 status code. Check that the full URL path and query string are preserved in the redirect Location header. - Network accessline 31
Configure the web server to redirect all HTTP requests to HTTPS with a 301 status code, preserving the full request path. Verify the redirect with curl -I http://example.com. - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/http-to-https
skills/http-to-https/references/rule.md
- Network accessline 7
--- Redirecting HTTP to HTTPS ensures that any user who arrives at your site over plain HTTP is immediately upgraded to an encrypted connection. [HTTP redirections](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections) belong at t - Network accessline 8
Redirecting HTTP to HTTPS ensures that any user who arrives at your site over plain HTTP is immediately upgraded to an encrypted connection. [HTTP redirections](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections) belong at the s - Network accessline 21
# Redirect all HTTP to HTTPS, preserving path and query return 301 https://$host$request_uri; - Network accessline 22
return 301 https://$host$request_uri; - Network accessline 31
ServerName example.com RewriteEngine On RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] - Network accessline 33
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] - Network accessline 37
ServerName example.com Redirect permanent / https://example.com/ - Network accessline 38
Redirect permanent / https://example.com/ - Network accessline 47
http://example.com { - Network accessline 48
redir https://{host}{uri} permanent - Network accessline 68
Without an HTTP-to-HTTPS redirect, users who type the domain without `https://` or follow old links land on the insecure version of the site, exposing session cookies and form data to network attackers. - Network accessline 84
❌ Bad: http://example.com → http://www.example.com → https://www.example.com - Network accessline 85
✅ Good: http://example.com → https://example.com - Network accessline 90
Never rely on JavaScript (`window.location.href = 'https://...'`) for security redirects. JavaScript runs after the HTTP response is received — the insecure request has already been made. - Network accessline 94
Once HTTPS and redirects are verified and stable, add the `Strict-Transport-Security` header to eliminate future HTTP requests entirely. The [OWASP transport guidance](https://cheatsheetseries.owasp.org/cheatsheets/Transport_Layer_Protectio
skills/http2/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/http2 - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/http2 --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/http2 - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/http2
skills/http2/references/rule.md
- Network accessline 44
Confirm the protocol in a real browser trace or [PageSpeed Insights](https://pagespeed.web.dev/), because the practical benefit comes from how the live edge actually negotiates the connection, not just from a server config line. - Network accessline 56
- [HTTP/2 Test](https://tools.keycdn.com/http2-test): Online tool to check if your server supports HTTP/2. - Network accessline 57
- [HTTP/3 Check](https://http3check.net/): Verify if your site is ready for the next generation of HTTP. - Network accessline 59
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/): Checks if the page "Does not use HTTP/2 for all of its resources."
skills/https-downgrade/SKILL.md
- Network accessline 1
--- name: https-downgrade description: "Use when auditing a site's internal and external links for protocol consistency, migrating a site from HTTP to HTTPS, or reviewing hardcoded URLs in a codebase that may use `http://` instead of `https - Network accessline 2
name: https-downgrade description: "Use when auditing a site's internal and external links for protocol consistency, migrating a site from HTTP to HTTPS, or reviewing hardcoded URLs in a codebase that may use `http://` instead of `https://` - Network accessline 3
description: "Use when auditing a site's internal and external links for protocol consistency, migrating a site from HTTP to HTTPS, or reviewing hardcoded URLs in a codebase that may use `http://` instead of `https://`." - Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/https-downgrade - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/https-downgrade --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/https-downgrade - Network accessline 19
- All internal links on an HTTPS page must point to HTTPS URLs — HTTP links trigger mixed content warnings - External links to HTTP destinations break the security chain and may be blocked by browsers - Use protocol-relative URLs (`//exampl - Network accessline 21
- Use protocol-relative URLs (`//example.com`) or absolute HTTPS URLs — never hardcode `http://` for internal links - Network accessline 25
On pages served over HTTPS, scan all `<a href>` attributes for URLs starting with `http://` (not `https://`). Flag: (1) Internal links using `http://` that should use `https://` or a relative path. (2) External links to third-party sites st - Network accessline 29
1. Audit all `<a href>` values in templates and content for `http://` links. - Network accessline 30
2. For internal links: change `http://yourdomain.com/path` to `/path` (relative) or `https://yourdomain.com/path`. - Network accessline 31
3. For external links: check if the destination supports HTTPS; update to `https://` if so. - Network accessline 32
4. For resource links (scripts, styles, images): always use `https://` or protocol-relative `//`. - Network accessline 44
Parse all `<a href>`, `<img src>`, `<script src>`, and `<link href>` attributes. Flag any value starting with `http://` (not `https://` or a relative path). In JavaScript frameworks, also check for `http://` in `fetch()`, `axios`, or router - Network accessline 51
Rule page: https://frontendchecklist.io/rules/seo/https-downgrade
skills/https-downgrade/references/rule.md
- Network accessline 7
--- When a page is served over HTTPS, every link and resource on that page should also use HTTPS. [Google's HTTPS guidance](https://developers.google.com/search/blog/2014/08/https-as-ranking-signal) and [MDN's mixed-content reference](https - Network accessline 8
When a page is served over HTTPS, every link and resource on that page should also use HTTPS. [Google's HTTPS guidance](https://developers.google.com/search/blog/2014/08/https-as-ranking-signal) and [MDN's mixed-content reference](https://d - Network accessline 17
<!-- Page served at https://yoursite.com --> - Network accessline 18
<a href="http://yoursite.com/about">About Us</a> - Network accessline 21
<a href="http://partner.example.com/offer">View Offer</a> - Network accessline 28
<!-- These will be blocked by modern browsers --> <script src="http://cdn.example.com/analytics.js"></script> - Network accessline 29
<script src="http://cdn.example.com/analytics.js"></script> - Network accessline 30
<img src="http://images.example.com/logo.png" alt="Logo"> - Network accessline 39
<!-- Internal links: use absolute HTTPS if needed --> <a href="https://yoursite.com/about">About Us</a> - Network accessline 40
<a href="https://yoursite.com/about">About Us</a> - Network accessline 42
<!-- External links: verify the destination supports HTTPS --> <a href="https://partner.example.com/offer" rel="noopener noreferrer">View Offer</a> - Network accessline 43
<a href="https://partner.example.com/offer" rel="noopener noreferrer">View Offer</a> - Network accessline 45
<!-- Resources: always HTTPS --> <script src="https://cdn.example.com/analytics.js"></script> - Network accessline 46
<script src="https://cdn.example.com/analytics.js"></script> - Network accessline 47
<img src="https://images.example.com/logo.png" alt="Logo"> - Network accessline 67
| Resource type | Risk level | Browser behaviour | |---|---|---| | `<script src="http://...">` | Critical | Blocked silently | - Network accessline 68
|---|---|---| | `<script src="http://...">` | Critical | Blocked silently | | `<link href="http://...">` (CSS) | Critical | Blocked silently | - Network accessline 69
| `<script src="http://...">` | Critical | Blocked silently | - Network accessline 70
| `<link href="http://...">` (CSS) | Critical | Blocked silently | - Network accessline 71
| `<img src="http://...">` | Warning | Blocked in strict mode | - Network accessline 72
| `<a href="http://...">` (navigation) | Warning | Redirected (if target has HTTPS) |
skills/https/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/https - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/https --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/https - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/https
skills/https/references/rule.md
- Network accessline 7
--- [HTTPS](https://web.dev/articles/why-https-matters) (HTTP over TLS) encrypts all traffic between the browser and your server, providing confidentiality, integrity, and authentication. [MDN's transport security guidance](https://develope - Network accessline 8
[HTTPS](https://web.dev/articles/why-https-matters) (HTTP over TLS) encrypts all traffic between the browser and your server, providing confidentiality, integrity, and authentication. [MDN's transport security guidance](https://developer.mo - Dangerous shell operationline 18
sudo apt install certbot python3-certbot-nginx # Debian/Ubuntu - Dangerous shell operationline 19
sudo yum install certbot python3-certbot-nginx # RHEL/CentOS - Dangerous shell operationline 22
sudo certbot --nginx -d example.com -d www.example.com - Dangerous shell operationline 26
sudo certbot renew --dry-run - Network accessline 54
listen 80; server_name example.com www.example.com; return 301 https://$host$request_uri; - Network accessline 55
server_name example.com www.example.com; return 301 https://$host$request_uri; } - Network accessline 56
return 301 https://$host$request_uri; - Network accessline 74
ServerName example.com Redirect permanent / https://example.com/ - Network accessline 75
Redirect permanent / https://example.com/ - Network accessline 85
Both [MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Transport_Layer_Security) and [web.dev](https://web.dev/articles/why-https-matters) treat these as secure-context features, so they are a practical way to spot pages that stil
skills/hyphens/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/hyphens - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/hyphens --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/hyphens - Network accessline 52
Rule page: https://frontendchecklist.io/rules/seo/hyphens
skills/identical-links-same-purpose/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/identical-links-same-purpose - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/identical-links-same-purpose --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/identical-links-same-purpose - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/identical-links-same-purpose
skills/identical-links-same-purpose/references/rule.md
- Network accessline 7
--- Links that have the same text but different destinations can be confusing for all users, but especially for those using assistive technology. [WCAG's link purpose guidance](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-con - Network accessline 8
Links that have the same text but different destinations can be confusing for all users, but especially for those using assistive technology. [WCAG's link purpose guidance](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context - Network accessline 34
This is ultimately a [link purpose](https://www.w3.org/TR/WCAG21/#link-purpose-in-context) problem: when the same words point to different places, users cannot predict what each link will do from the text alone.
skills/image-cdn/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-cdn - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-cdn --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/image-cdn - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/image-cdn
skills/image-cdn/references/rule.md
- Network accessline 13
<!-- Cloudinary: resize, format, quality --> <img src="https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill,f_auto,q_auto/sample.jpg"> - Network accessline 14
<img src="https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill,f_auto,q_auto/sample.jpg"> - Network accessline 16
<!-- Imgix: responsive with fit and format --> <img src="https://example.imgix.net/image.jpg?w=400&h=300&fit=crop&auto=format,compress"> - Network accessline 17
<img src="https://example.imgix.net/image.jpg?w=400&h=300&fit=crop&auto=format,compress"> - Network accessline 19
<!-- Cloudflare Images: variants --> <img src="https://imagedelivery.net/account/image-id/public"> - Network accessline 20
<img src="https://imagedelivery.net/account/image-id/public"> - Network accessline 75
function getCloudinaryUrl(publicId: string, options: TransformOptions) { const { width, height, format = 'auto', quality = 'auto' } = options return `https://res.cloudinary.com/${CLOUD_NAME}/image/upload/w_${width},h_${height},c_fill,f_ - Network accessline 76
const { width, height, format = 'auto', quality = 'auto' } = options return `https://res.cloudinary.com/${CLOUD_NAME}/image/upload/w_${width},h_${height},c_fill,f_${format},q_${quality}/${publicId}` } - Network accessline 77
return `https://res.cloudinary.com/${CLOUD_NAME}/image/upload/w_${width},h_${height},c_fill,f_${format},q_${quality}/${publicId}` - Network accessline 102
function getCdnUrl(src: string, options: { width: number }) { // Cloudinary example return `https://res.cloudinary.com/demo/image/upload/w_${options.width},f_auto,q_auto/${src}` - Network accessline 103
// Cloudinary example return `https://res.cloudinary.com/demo/image/upload/w_${options.width},f_auto,q_auto/${src}` } - Network accessline 104
return `https://res.cloudinary.com/demo/image/upload/w_${options.width},f_auto,q_auto/${src}`
skills/image-compression/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-compression - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-compression --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/image-compression - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/image-compression
skills/image-file-size/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-file-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-file-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/image-file-size - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/image-file-size
skills/image-file-size/references/rule.md
- Network accessline 47
According to [web.dev](https://web.dev/articles/serve-images-webp):
skills/image-optimization/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-optimization - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/image-optimization --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/image-optimization - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/image-optimization
skills/image-optimization/references/rule.md
- Network accessline 7
--- Image optimization is crucial for web performance. Properly optimized images can reduce page weight by 50-80% without visible quality loss, directly improving [Largest Contentful Paint (LCP)](https://web.dev/lcp/) and user experience. - Network accessline 8
Image optimization is crucial for web performance. Properly optimized images can reduce page weight by 50-80% without visible quality loss, directly improving [Largest Contentful Paint (LCP)](https://web.dev/lcp/) and user experience.
skills/image-redundant-alt/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/image-redundant-alt - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/image-redundant-alt --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/image-redundant-alt - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/image-redundant-alt
skills/image-redundant-alt/references/rule.md
- Network accessline 7
--- Alt text should be concise and descriptive. The [WAI images tutorial](https://www.w3.org/WAI/tutorials/images/decision-tree/) and the [`<img>` element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) - Network accessline 8
Alt text should be concise and descriptive. The [WAI images tutorial](https://www.w3.org/WAI/tutorials/images/decision-tree/) and the [`<img>` element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) both
skills/immutable-patterns/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/immutable-patterns - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/immutable-patterns --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/immutable-patterns - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/immutable-patterns
skills/immutable-patterns/references/rule.md
- Network accessline 79
// ✅ Freeze configuration objects to prevent accidental mutation const CONFIG = Object.freeze({ apiUrl: 'https://api.example.com', - Network accessline 80
const CONFIG = Object.freeze({ apiUrl: 'https://api.example.com', maxRetries: 3, - Network accessline 81
apiUrl: 'https://api.example.com', - Network accessline 86
CONFIG.apiUrl = 'https://evil.com' // TypeError in strict mode, silent in sloppy
skills/import-on-interaction/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/import-on-interaction - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/import-on-interaction --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/import-on-interaction - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/import-on-interaction
skills/import-on-interaction/references/rule.md
- Network accessline 94
Use [Chrome DevTools Coverage](https://developer.chrome.com/docs/devtools/coverage/) or a waterfall trace to confirm the deferred module is actually absent from the initial path, not just moved to a different eager bundle.
skills/import-on-visibility/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/import-on-visibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/import-on-visibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/import-on-visibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/import-on-visibility
skills/import-on-visibility/references/rule.md
- Network accessline 7
--- Import-on-visibility starts loading code when an offscreen section is close enough to matter. [Patterns.dev's import-on-visibility pattern](https://www.patterns.dev/vanilla/import-on-visibility/) and [Intersection Observer](https://deve - Network accessline 8
Import-on-visibility starts loading code when an offscreen section is close enough to matter. [Patterns.dev's import-on-visibility pattern](https://www.patterns.dev/vanilla/import-on-visibility/) and [Intersection Observer](https://develope - Network accessline 72
- Start with a `rootMargin` between `300px` and `1000px` for heavier modules, then tune it based on asset weight and scroll speed. - Disconnect the observer after loading so the import runs once. - Keep accessibility intact: headings, landm - Network accessline 74
- Keep accessibility intact: headings, landmarks, and focus order should still make sense before the module hydrates, and [PageSpeed Insights](https://pagespeed.web.dev/) is a good way to verify the route-level impact afterward. - Network accessline 78
Use the [Chrome DevTools Performance panel](https://developer.chrome.com/docs/devtools/performance/) or a throttled waterfall trace to confirm the deferred code leaves the initial path and then arrives early enough during scroll.
skills/improve-rule/SKILL.md
- Network accessline 5
category: meta source: frontendchecklist.io url: https://frontendchecklist.io - Network accessline 6
source: frontendchecklist.io url: https://frontendchecklist.io --- - Network accessline 7
url: https://frontendchecklist.io - Network accessline 118
See `references/scoring-rubric.md` for the full scoring specification. Rule page: https://frontendchecklist.io - Network accessline 119
Rule page: https://frontendchecklist.io
skills/inclusive-language/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/inclusive-language - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/inclusive-language --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/inclusive-language - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/inclusive-language
skills/indexability-conflicts/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/indexability-conflicts - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/indexability-conflicts --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/indexability-conflicts - Network accessline 53
Rule page: https://frontendchecklist.io/rules/seo/indexability-conflicts
skills/indexability-conflicts/references/rule.md
- Network accessline 7
--- Indexability signals such as robots.txt, meta robots, `X-Robots-Tag` headers, and canonicals each control a different part of crawling and indexing. [Google's robots-meta documentation](https://developers.google.com/search/docs/crawling - Network accessline 8
Indexability signals such as robots.txt, meta robots, `X-Robots-Tag` headers, and canonicals each control a different part of crawling and indexing. [Google's robots-meta documentation](https://developers.google.com/search/docs/crawling-ind - Network accessline 73
- **Blocked + noindex = unresolvable**: If robots.txt blocks a URL, the `noindex` tag on that page is never read. Google knows the URL but can neither confirm nor deny it should be excluded. - **Canonical to noindex**: Canonicalising to a ` - Network accessline 75
- **Crawl budget waste**: Conflicting signals cause Google to repeatedly attempt to resolve the conflict by re-crawling the page, which is why the [robots.txt specification](https://developers.google.com/search/docs/crawling-indexing/robots
skills/indexability/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/indexability - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/indexability --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/indexability - Network accessline 55
Rule page: https://frontendchecklist.io/rules/seo/indexability
skills/indexability/references/rule.md
- Network accessline 7
--- For a page to appear in Google Search, it must be crawlable and indexable. [Google's indexing controls guide](https://developers.google.com/search/docs/crawling-indexing/block-indexing) and your broader [robots meta strategy](/en/rules/ - Network accessline 8
For a page to appear in Google Search, it must be crawlable and indexable. [Google's indexing controls guide](https://developers.google.com/search/docs/crawling-indexing/block-indexing) and your broader [robots meta strategy](/en/rules/seo/ - Network accessline 72
# Check X-Robots-Tag header curl -I https://yoursite.com/important-page | grep -i 'x-robots' - Network accessline 73
curl -I https://yoursite.com/important-page | grep -i 'x-robots' - Network accessline 75
# Check meta robots in HTML curl -s https://yoursite.com/important-page | grep -i 'robots' - Network accessline 76
curl -s https://yoursite.com/important-page | grep -i 'robots' - Network accessline 81
- **No index = no ranking**: A page with `noindex` cannot appear in search results under any circumstances. - **Common accidents**: CMS platforms often default new pages to `noindex` (e.g., draft mode, staging environments accidentally prom - Network accessline 83
- **Silent failure**: Indexing blocks cause no visible errors on the frontend. Only [Google Search Console](https://search.google.com/search-console/about) or log analysis reliably surfaces the problem, and those same checks help uncover [i
skills/input-image-alt/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/input-image-alt - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/input-image-alt --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/input-image-alt - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/input-image-alt
skills/input-image-alt/references/rule.md
- Network accessline 7
--- When an image is used as a form button, it must have alternative text that describes the action the button performs. Both [WCAG 1.1.1](https://www.w3.org/TR/WCAG21/#non-text-content) and the [`<input type="image">` reference](https://de - Network accessline 8
When an image is used as a form button, it must have alternative text that describes the action the button performs. Both [WCAG 1.1.1](https://www.w3.org/TR/WCAG21/#non-text-content) and the [`<input type="image">` reference](https://develo
skills/input-types/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/input-types - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/input-types --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/input-types - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/input-types
skills/integration-testing/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/integration-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/integration-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/integration-testing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/integration-testing
skills/interaction-to-next-paint/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/interaction-to-next-paint - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/interaction-to-next-paint --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/interaction-to-next-paint - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/interaction-to-next-paint
skills/internal-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/internal-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/internal-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/internal-links - Network accessline 51
Rule page: https://frontendchecklist.io/rules/seo/internal-links
skills/internal-links/references/rule.md
- Network accessline 7
--- Internal links do two things: they help Googlebot discover and navigate your site, and they pass PageRank from one page to another. [Google's crawlable-link guidance](https://developers.google.com/search/docs/crawling-indexing/links-cra - Network accessline 8
Internal links do two things: they help Googlebot discover and navigate your site, and they pass PageRank from one page to another. [Google's crawlable-link guidance](https://developers.google.com/search/docs/crawling-indexing/links-crawlab - Network accessline 67
- **PageRank distribution**: Every internal link passes a portion of the source page's authority to the target. Pages with more links from high-authority pages rank better, which is why [Google's explanation of crawling and ranking](https:/
skills/interstitials/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/interstitials - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/interstitials --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/interstitials - Network accessline 46
Rule page: https://frontendchecklist.io/rules/css/interstitials
skills/invalid-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/invalid-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/invalid-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/invalid-links - Network accessline 54
Rule page: https://frontendchecklist.io/rules/seo/invalid-links
skills/invalid-links/references/rule.md
- Network accessline 7
--- Not all `<a>` elements are crawlable by Googlebot. [Google's crawlable-link documentation](https://developers.google.com/search/docs/crawling-indexing/links-crawlable) requires a valid `href`, so malformed anchors break discovery in the - Network accessline 8
Not all `<a>` elements are crawlable by Googlebot. [Google's crawlable-link documentation](https://developers.google.com/search/docs/crawling-indexing/links-crawlable) requires a valid `href`, so malformed anchors break discovery in the sam - Network accessline 45
<a href="/products">Products</a> <a href="https://example.com/about">About Us</a> - Network accessline 46
<a href="https://example.com/about">About Us</a> - Network accessline 89
// This is not crawlable; use ` elements may never be discovered by Googlebot, even if the route exists in your frontend router. - **PageRank blocking**: Invalid links cannot pass PageRank to destination pages. - **Accessibility**: Invalid - Network accessline 91
- **Accessibility**: Invalid links also fail accessibility checks — screen readers and keyboard users cannot navigate them, and the underlying HTML behavior is covered in [MDN's anchor element reference](https://developer.mozilla.org/en-US/
skills/javascript-inline/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/javascript-inline - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/javascript-inline --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/javascript-inline - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/javascript-inline
skills/javascript-inline/references/rule.md
- Network accessline 7
--- Avoid mixing JavaScript code with HTML markup by using external [`<script>` files](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script), [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/Eve - Network accessline 8
Avoid mixing JavaScript code with HTML markup by using external [`<script>` files](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script), [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTa - Dangerous shell operationline 817
// No eval(), no Function(), no inline event handlers - Dangerous shell operationline 843
// Define actions as methods instead of eval() or Function() - Network accessline 882
// Load configuration from external source instead of inline try { const response = await fetch('/api/config') - Network accessline 883
try { const response = await fetch('/api/config') const config = await response.json() - Network accessline 884
const response = await fetch('/api/config') - Dangerous shell operationline 894
// Apply configuration without using eval() - Network accessline 1019
Build around external scripts, [`data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-%2A), and event listeners so the HTML stays semantic even when the JavaScript needs to evolve independently.
skills/javascript-linter/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/javascript-linter - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/javascript-linter --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/javascript-linter - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/javascript-linter
skills/javascript-linter/references/rule.md
- Network accessline 7
--- JavaScript linting tools such as [ESLint](https://eslint.org/docs/latest/use/getting-started), [Biome](https://biomejs.dev/linter/), and [typescript-eslint](https://typescript-eslint.io/getting-started/) catch syntax errors, enforce cod - Network accessline 8
JavaScript linting tools such as [ESLint](https://eslint.org/docs/latest/use/getting-started), [Biome](https://biomejs.dev/linter/), and [typescript-eslint](https://typescript-eslint.io/getting-started/) catch syntax errors, enforce coding - Network accessline 1116
Start from the official [ESLint getting started guide](https://eslint.org/docs/latest/use/getting-started) or the [typescript-eslint starter setup](https://typescript-eslint.io/getting-started/) instead of inventing a rule stack from scratc
skills/javascript-minification/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/javascript-minification - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/javascript-minification --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/javascript-minification - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/javascript-minification
skills/javascript-minification/references/rule.md
- Network accessline 38
async login(email, password) { try { const response = await fetch(`${this.apiBaseUrl}/auth/login`, { - Network accessline 39
try { const response = await fetch(`${this.apiBaseUrl}/auth/login`, { method: 'POST', - Network accessline 40
const response = await fetch(`${this.apiBaseUrl}/auth/login`, { - Network accessline 89
// Initialize authenticator const auth = new UserAuthenticator('https://api.example.com', { - Network accessline 90
const auth = new UserAuthenticator('https://api.example.com', { - Network accessline 99
[Credential-related source omitted] - Access to secretsline 671
[Credential-related source omitted] - Access to secretsline 720
[Credential-related source omitted]
skills/js-file-size/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/js-file-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/js-file-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/js-file-size - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/js-file-size
skills/js-file-size/references/rule.md
skills/js-libraries/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/js-libraries - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/js-libraries --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/js-libraries - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/js-libraries
skills/js-libraries/references/rule.md
- Network accessline 46
Run [npm audit](https://docs.npmjs.com/cli/v10/commands/npm-audit) or an equivalent scan before replacing libraries, because the biggest wins usually come from removing one outdated or oversized dependency rather than blindly rotating packa - Network accessline 55
- [npm-audit](https://docs.npmjs.com/cli/v7/commands/npm-audit) - Network accessline 56
- [Snyk](https://snyk.io/) - Network accessline 57
- [BundlePhobia](https://bundlephobia.com/) - Network accessline 58
- [Dependabot](https://github.com/dependabot)
skills/js-redirects/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/js-redirects - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/js-redirects --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/js-redirects - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/js-redirects
skills/js-redirects/references/rule.md
- Network accessline 39
<!-- ⚠<U+FE0F> Avoid if possible, but better than JS --> <meta http-equiv="refresh" content="0; url=https://example.com/"> - Network accessline 40
<meta http-equiv="refresh" content="0; url=https://example.com/"> - Network accessline 45
Server-side redirects are the baseline because [web.dev's performance guidance](https://web.dev/learn/performance) and crawler behavior both reward fewer client-side hops before the final content is visible. - Network accessline 60
- Browser DevTools Network tab to check for 3xx responses. - Use `curl -I "$ORIGIN"` or the live target URL to see the redirect headers. - Network accessline 61
- Use `curl -I "$ORIGIN"` or the live target URL to see the redirect headers. - Network accessline 62
- [Ahrefs Redirect Checker](https://ahrefs.com/redirect-checker) - Network accessline 63
- [HTTP Status Code Checker](https://httpstatus.io/)
skills/json-ld-valid/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/json-ld-valid - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/json-ld-valid --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/json-ld-valid - Network accessline 19
- JSON-LD must be valid JSON, reference `@context: 'https://schema.org'`, and include all required properties for the chosen `@type` - Network accessline 25
Find all `<script type='application/ld+json'>` elements on the page. For each: (1) Attempt to parse the content as JSON — flag syntax errors. (2) Verify `@context` is set to `'https://schema.org'`. (3) Verify `@type` is a valid schema.org t - Network accessline 29
1. Parse the JSON-LD with `JSON.parse()` — fix any syntax errors (trailing commas, single quotes, missing brackets). 2. Ensure `@context` is exactly `"https://schema.org"` (not `"http://schema.org"` or omitted). - Network accessline 30
2. Ensure `@context` is exactly `"https://schema.org"` (not `"http://schema.org"` or omitted). - Network accessline 35
- FAQPage: mainEntity array with Question and acceptedAnswer - BreadcrumbList: itemListElement array with ListItem, position, name, item 5. Validate at https://search.google.com/test/rich-results - Network accessline 36
- BreadcrumbList: itemListElement array with ListItem, position, name, item 5. Validate at https://search.google.com/test/rich-results 6. Validate JSON syntax at https://jsonlint.com - Network accessline 37
5. Validate at https://search.google.com/test/rich-results - Network accessline 38
6. Validate JSON syntax at https://jsonlint.com - Network accessline 47
Extract all `<script type='application/ld+json'>` element contents. Run `JSON.parse()` on each — catch and report parse errors. Validate that `@context` equals `'https://schema.org'`. Check `@type` against a whitelist of common valid types. - Network accessline 54
Rule page: https://frontendchecklist.io/rules/seo/json-ld-valid
skills/json-ld-valid/references/rule.md
- Network accessline 17
{ "@context": "https://schema.org", - Network accessline 18
"@context": "https://schema.org", - Network accessline 31
{ "@context": "https://schema.org", - Network accessline 32
"@context": "https://schema.org", - Network accessline 41
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 42
{ "@context": "https://schema.org", "@type": "Article", - Network accessline 43
"@context": "https://schema.org", - Network accessline 47
"@type": "Person", "name": "Jane Smith", "url": "https://example.com/authors/jane-smith" - Network accessline 48
"name": "Jane Smith", "url": "https://example.com/authors/jane-smith" }, - Network accessline 49
"url": "https://example.com/authors/jane-smith" - Network accessline 56
"logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" - Network accessline 57
"@type": "ImageObject", "url": "https://example.com/logo.png" } - Network accessline 58
"url": "https://example.com/logo.png" - Network accessline 68
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 69
{ "@context": "https://schema.org", "@type": "BreadcrumbList", - Network accessline 70
"@context": "https://schema.org", - Network accessline 75
"position": 1, "name": "Home", "item": "https://example.com/" - Network accessline 76
"name": "Home", "item": "https://example.com/" }, - Network accessline 77
"item": "https://example.com/" - Network accessline 81
"position": 2, "name": "Blog", "item": "https://example.com/blog/" - Network accessline 82
"name": "Blog", "item": "https://example.com/blog/" }, - Network accessline 83
"item": "https://example.com/blog/" - Network accessline 98
// Always use JSON.stringify — never manually write JSON-LD strings const schema = { '@context': 'https://schema.org', - Network accessline 99
const schema = { '@context': 'https://schema.org', '@type': 'Article', - Network accessline 100
'@context': 'https://schema.org', - Network accessline 117
- **Rich results eligibility**: Valid structured data is required to appear as rich results (star ratings, FAQs, recipes, etc.) in Google Search, and [Google's structured data introduction](https://developers.google.com/search/docs/appearan - Network accessline 133
- [Google Rich Results Test](https://search.google.com/test/rich-results) — validates against Google's requirements - Network accessline 134
- [Schema Markup Validator](https://validator.schema.org/) — validates against schema.org specification - Network accessline 135
- [JSONLint](https://jsonlint.com) — validates JSON syntax only
skills/json-safety/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/json-safety - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/json-safety --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/json-safety - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/json-safety
skills/json-safety/references/rule.md
skills/keyboard-navigation/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/keyboard-navigation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/keyboard-navigation --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/keyboard-navigation - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/keyboard-navigation
skills/keyword-stuffing/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/keyword-stuffing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/keyword-stuffing --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/keyword-stuffing - Network accessline 51
Rule page: https://frontendchecklist.io/rules/seo/keyword-stuffing
skills/keyword-stuffing/references/rule.md
- Network accessline 7
--- Keyword stuffing is the practice of overloading page content with target keywords to manipulate search rankings. [Google's keyword-stuffing spam policy](https://developers.google.com/search/policies/quality-guidelines/spam-policies#keyw - Network accessline 8
Keyword stuffing is the practice of overloading page content with target keywords to manipulate search rankings. [Google's keyword-stuffing spam policy](https://developers.google.com/search/policies/quality-guidelines/spam-policies#keyword-
skills/label-content-name-mismatch/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/label-content-name-mismatch - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/label-content-name-mismatch --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/label-content-name-mismatch - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/label-content-name-mismatch
skills/label-content-name-mismatch/references/rule.md
- Network accessline 7
--- For users of speech recognition software, the accessible name of a control must contain the text that is visible on the screen. [WCAG 2.5.3 Label in Name](https://www.w3.org/TR/WCAG21/#label-in-name) exists specifically so voice users c - Network accessline 8
For users of speech recognition software, the accessible name of a control must contain the text that is visible on the screen. [WCAG 2.5.3 Label in Name](https://www.w3.org/TR/WCAG21/#label-in-name) exists specifically so voice users can s
skills/landmark-one-main/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/landmark-one-main - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/landmark-one-main --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/landmark-one-main - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/landmark-one-main
skills/landmark-one-main/references/rule.md
- Network accessline 7
--- The [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main) or [`role="main"`](https://www.w3.org/TR/wai-aria-1.2/#main) designates the primary content of the document. Having more than one can conf - Network accessline 8
The [`<main>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main) or [`role="main"`](https://www.w3.org/TR/wai-aria-1.2/#main) designates the primary content of the document. Having more than one can confuse
skills/landmark-regions/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/landmark-regions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/landmark-regions --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/landmark-regions - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/landmark-regions
skills/lang-attribute/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/lang-attribute - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/lang-attribute --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/lang-attribute - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/lang-attribute
skills/largest-contentful-paint/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/largest-contentful-paint - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/largest-contentful-paint --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/largest-contentful-paint - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/largest-contentful-paint
skills/largest-contentful-paint/references/rule.md
- Network accessline 43
useEffect(() => { fetch('/api/hero').then((response) => response.json()).then(setData) - Network accessline 44
fetch('/api/hero').then((response) => response.json()).then(setData) - Network accessline 122
Start with [PageSpeed Insights](https://pagespeed.web.dev/) or a field trace to identify the real LCP candidate, because the wrong fix is easy to apply when the largest element is not the one you expected.
skills/lazy-above-fold/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/lazy-above-fold - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/lazy-above-fold --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/lazy-above-fold - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/lazy-above-fold
skills/lazy-above-fold/references/rule.md
- Network accessline 33
Use [PageSpeed Insights](https://pagespeed.web.dev/) or Lighthouse to confirm which image is actually the LCP element before removing lazy loading, because the first visible asset is not always the real bottleneck. - Network accessline 49
- [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahmapmhookcmichpkccnnbabaccndpjg) - Network accessline 50
- [PageSpeed Insights](https://pagespeed.web.dev/) - Network accessline 51
- [Lighthouse](https://developers.google.com/web/tools/lighthouse) - Network accessline 52
- [WebPageTest](https://www.webpagetest.org/)
skills/lazy-loading/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/lazy-loading - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/lazy-loading --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/lazy-loading - Network accessline 46
Rule page: https://frontendchecklist.io/rules/performance/lazy-loading
skills/lazy-loading/references/rule.md
- Network accessline 7
--- Lazy loading is a prioritization tool, not a blanket rule. [web.dev's performance guidance](https://web.dev/learn/performance) treats it as a way to defer genuinely offscreen work, and it pairs naturally with [import-on-visibility](/en/ - Network accessline 8
Lazy loading is a prioritization tool, not a blanket rule. [web.dev's performance guidance](https://web.dev/learn/performance) treats it as a way to defer genuinely offscreen work, and it pairs naturally with [import-on-visibility](/en/rule - Network accessline 26
<!-- Good: heavy embed kept off the critical path --> <iframe src="https://www.youtube.com/embed/..." - Network accessline 27
<iframe src="https://www.youtube.com/embed/..." loading="lazy" - Network accessline 28
src="https://www.youtube.com/embed/..." - Network accessline 63
- **Better resource ordering**: the browser can spend its early bandwidth on current-route content instead of speculative content lower on the page. - **Less wasted work**: many users never scroll to the bottom of the route. - **Easy to mis - Network accessline 65
- **Easy to misuse**: lazy-loading the wrong asset can make LCP worse instead of better, which is why [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) and field measurements should confirm the change. - Network accessline 98
Validate the final scroll behavior in [PageSpeed Insights](https://pagespeed.web.dev/) or a throttled waterfall trace, because the goal is not just fewer initial requests but offscreen media that still appears ready when users reach it.
skills/leaked-secrets/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/leaked-secrets - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/leaked-secrets --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/leaked-secrets - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/leaked-secrets
skills/leaked-secrets/references/rule.md
- Network accessline 7
--- Any secret placed in client-side JavaScript, HTML, or any file served to browsers is effectively public. Attackers routinely scan public sites and repositories for leaked credentials, and platforms like [GitHub secret scanning](https:// - Network accessline 8
Any secret placed in client-side JavaScript, HTML, or any file served to browsers is effectively public. Attackers routinely scan public sites and repositories for leaked credentials, and platforms like [GitHub secret scanning](https://docs - Network accessline 25
In Next.js, `NEXT_PUBLIC_` variables are inlined into the JavaScript bundle. Only publishable/public keys belong there, which is the same separation described in the [OWASP Secrets Management Cheat Sheet](https://cheatsheetseries.owasp.org/ - Network accessline 30
[Credential-related source omitted] - Network accessline 31
[Credential-related source omitted] - Network accessline 32
fetch(`https://api.stripe.com/v1/charges`, { - Access to secretsline 38
[Credential-related source omitted] - Access to secretsline 45
[Credential-related source omitted] - Access to secretsline 50
[Credential-related source omitted] - Access to secretsline 90
[Credential-related source omitted] - Access to secretsline 115
[Credential-related source omitted] - Network accessline 130
1. **Rotate immediately** — assume it is compromised the moment it was committed or deployed, because [cryptographic failures](https://owasp.org/Top10/A02_2021-Cryptographic_Failures/) often start with exposed material that teams leave acti
skills/legacy-js/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/legacy-js - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/legacy-js --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/legacy-js - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/legacy-js
skills/legacy-js/references/rule.md
- Network accessline 55
Use [PageSpeed Insights](https://pagespeed.web.dev/) or your bundle report before changing build targets, because the practical win usually comes from verifying which legacy polyfills or transpiled chunks modern browsers are still downloadi - Network accessline 57
- Browserslist can help verify the actual modern-browser target. - Polyfill.io should be used cautiously when you still need selective legacy support. - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) can highlight `leg - Network accessline 58
- Polyfill.io should be used cautiously when you still need selective legacy support. - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) can highlight `legacy-javascript` on the route. - Bundle analyzers are useful when - Network accessline 59
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) can highlight `legacy-javascript` on the route.
skills/length/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/length - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/length --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/length - Network accessline 53
Rule page: https://frontendchecklist.io/rules/seo/length
skills/length/references/rule.md
- Network accessline 7
--- URL length and structure affect readability, shareability, and how easily crawlers navigate your site. [Google's URL structure guidance](https://developers.google.com/search/docs/crawling-indexing/url-structure) favors short, descriptiv - Network accessline 8
URL length and structure affect readability, shareability, and how easily crawlers navigate your site. [Google's URL structure guidance](https://developers.google.com/search/docs/crawling-indexing/url-structure) favors short, descriptive pa
skills/link-checker/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/link-checker - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/link-checker --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/link-checker - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/link-checker
skills/link-checker/references/rule.md
- Network accessline 17
<nav> <a href="/about">About Us</a> <!-- Internal link --> <a href="https://example.com">External Site</a> <!-- External link --> - Network accessline 18
<a href="/about">About Us</a> <!-- Internal link --> <a href="https://example.com">External Site</a> <!-- External link --> <a href="mailto:contact@example.com">Contact</a> <!-- Email link --> - Network accessline 19
<a href="https://example.com">External Site</a> <!-- External link --> - Network accessline 26
<!-- Common problematic patterns --> <a href="http://old-domain.com">Might redirect</a> - Network accessline 27
<a href="http://old-domain.com">Might redirect</a> - Network accessline 29
<a href="https://external-site.com/old-path">External might change</a> - Network accessline 45
# Check single page linkchecker https://example.com - Network accessline 46
linkchecker https://example.com - Network accessline 48
# Check entire site linkchecker --recursive https://example.com - Network accessline 49
linkchecker --recursive https://example.com - Network accessline 51
# Check with output file linkchecker --output=csv --file-output=csv/results.csv https://example.com - Network accessline 52
linkchecker --output=csv --file-output=csv/results.csv https://example.com - Network accessline 54
# Check specific file patterns linkchecker --ignore-url=".*\.(jpg|jpeg|png|gif)$" https://example.com - Network accessline 55
linkchecker --ignore-url=".*\.(jpg|jpeg|png|gif)$" https://example.com - Network accessline 58
linkchecker --recursive --threads=10 --timeout=30 --user-agent="LinkChecker Bot" --output=html --file-output=html/report.html https://example.com - Network accessline 63
--output=html \ --file-output=html/report.html \ https://example.com - Network accessline 65
https://example.com - Network accessline 76
# Check website lychee https://example.com - Network accessline 77
lychee https://example.com - Network accessline 79
# Check with configuration lychee --config lychee.toml https://example.com - Network accessline 80
lychee --config lychee.toml https://example.com - Network accessline 100
# Exclude patterns exclude = [ "https://linkedin.com/.*", - Network accessline 101
exclude = [ "https://linkedin.com/.*", "https://twitter.com/.*", - Network accessline 102
"https://linkedin.com/.*", - Network accessline 103
"https://twitter.com/.*", - Network accessline 130
# Check single page blc https://example.com - Network accessline 131
blc https://example.com - Network accessline 133
# Check entire site recursively blc https://example.com --recursive --ordered - Network accessline 134
blc https://example.com --recursive --ordered - Network accessline 136
# With detailed output blc https://example.com --recursive --verbose - Network accessline 137
blc https://example.com --recursive --verbose - Network accessline 139
# Filter by status codes blc https://example.com --filter-level=3 --recursive - Network accessline 140
blc https://example.com --filter-level=3 --recursive - Network accessline 338
// Run checker if (require.main === module) { const siteUrl = process.argv[2] || 'https://example.com' - Network accessline 339
if (require.main === module) { const siteUrl = process.argv[2] || 'https://example.com' checkSite(siteUrl).catch(console.error) - Network accessline 340
const siteUrl = process.argv[2] || 'https://example.com' - Network accessline 574
uses: ruzickap/action-my-broken-link-checker@v2 with: url: https://your-site.com - Network accessline 575
with: url: https://your-site.com pages_path: ./dist - Network accessline 576
url: https://your-site.com - Network accessline 631
script: - echo "Checking internal links..." - blc http://localhost:8000 --recursive --ordered || echo "Some internal links broken" - Network accessline 632
- echo "Checking internal links..." - blc http://localhost:8000 --recursive --ordered || echo "Some internal links broken" - echo "Checking external links..." - Network accessline 633
- blc http://localhost:8000 --recursive --ordered || echo "Some internal links broken" - Network accessline 716
setLoading(true) try { const response = await fetch('/api/check-links', { - Network accessline 717
try { const response = await fetch('/api/check-links', { method: 'POST', - Network accessline 718
const response = await fetch('/api/check-links', { - Network accessline 927
{ name: 'Production Site', url: 'https://example.com', - Network accessline 928
name: 'Production Site', url: 'https://example.com', alerts: 'admin@example.com' - Network accessline 929
url: 'https://example.com', - Network accessline 932
{ name: 'Staging Site', url: 'https://staging.example.com', - Network accessline 933
name: 'Staging Site', url: 'https://staging.example.com', alerts: 'dev@example.com' - Network accessline 934
url: 'https://staging.example.com',
skills/link-in-text-block/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/link-in-text-block - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/link-in-text-block --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/link-in-text-block - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/link-in-text-block
skills/link-in-text-block/references/rule.md
- Network accessline 7
--- Links embedded within paragraphs or text blocks must be identifiable without relying solely on color. [WCAG 1.4.1 Use of Color](https://www.w3.org/TR/WCAG21/#use-of-color), [Technique G183](https://www.w3.org/WAI/WCAG21/Techniques/gener - Network accessline 8
Links embedded within paragraphs or text blocks must be identifiable without relying solely on color. [WCAG 1.4.1 Use of Color](https://www.w3.org/TR/WCAG21/#use-of-color), [Technique G183](https://www.w3.org/WAI/WCAG21/Techniques/general/G - Network accessline 54
This is not just a styling preference. [Failure F73](https://www.w3.org/WAI/WCAG21/Techniques/failures/F73) documents exactly what happens when links are only different by color and nothing else cues users that the text is interactive.
skills/link-text/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/link-text - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/link-text --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/link-text - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/link-text
skills/link-text/references/rule.md
skills/list-structure/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/list-structure - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/list-structure --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/list-structure - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/list-structure
skills/list-structure/references/rule.md
- Network accessline 7
--- HTML list elements such as [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul) and `<ol>` have a specific requirement: their only direct children must be `<li>` elements (or `<script>` and `<template>` elem - Network accessline 8
HTML list elements such as [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul) and `<ol>` have a specific requirement: their only direct children must be `<li>` elements (or `<script>` and `<template>` elements
skills/list-virtualization/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/list-virtualization - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/list-virtualization --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/list-virtualization - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/list-virtualization
skills/list-virtualization/references/rule.md
- Network accessline 78
Cross-check the result against [react-window guidance on virtualized lists](https://web.dev/articles/virtualize-long-lists-react-window) so the DOM stays small without breaking keyboard or assistive-technology expectations.
skills/listitem/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/listitem - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/listitem --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/listitem - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/listitem
skills/listitem/references/rule.md
- Network accessline 7
--- List items such as [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) are semantic elements that must exist within a list context. The [HTML Living Standard](https://html.spec.whatwg.org/multipage/grouping-content.ht - Network accessline 8
List items such as [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) are semantic elements that must exist within a list context. The [HTML Living Standard](https://html.spec.whatwg.org/multipage/grouping-content.html#t
skills/llm-parsability/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/llm-parsability - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/llm-parsability --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/llm-parsability - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/llm-parsability
skills/llm-parsability/references/rule.md
- Network accessline 7
--- LLMs and answer engines such as [Google AI Overviews](https://developers.google.com/search/docs/appearance/ai-overviews), Bing Copilot, and Perplexity extract content from web pages and synthesize answers. Pages structured for LLM parsa - Network accessline 8
LLMs and answer engines such as [Google AI Overviews](https://developers.google.com/search/docs/appearance/ai-overviews), Bing Copilot, and Perplexity extract content from web pages and synthesize answers. Pages structured for LLM parsabili - Network accessline 59
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 60
{ "@context": "https://schema.org", "@type": "FAQPage", - Network accessline 61
"@context": "https://schema.org", - Network accessline 88
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 89
{ "@context": "https://schema.org", "@type": "HowTo", - Network accessline 90
"@context": "https://schema.org",
skills/llms-txt/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/llms-txt - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/llms-txt --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/llms-txt - Network accessline 15
Documentation portals often bury the most important pages behind dense navigation, search UIs, or framework-specific layouts. A curated `llms.txt` gives AI tools a cleaner entry point without replacing the normal crawl and indexing mechanis - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/llms-txt
skills/llms-txt/references/rule.md
- Network accessline 19
- [Getting Started](https://docs.example.com/getting-started): Setup, authentication, and your first request. - Network accessline 20
- [Concepts](https://docs.example.com/concepts): Core mental model, resources, and lifecycle concepts. - Network accessline 21
- [API Reference](https://docs.example.com/api): Endpoint-by-endpoint request and response details. - Network accessline 22
- [Examples](https://docs.example.com/examples): Copy-paste examples for common integration patterns. - Network accessline 26
- [Full Reference](https://docs.example.com/llms-full.txt): Expanded documentation index for tools that can handle larger context files. - Network accessline 32
- [Home](https://example.com/) - Network accessline 33
- [Blog](https://example.com/blog) - Network accessline 34
- [Pricing](https://example.com/pricing) - Network accessline 35
- [Login](https://example.com/login) - Network accessline 36
- [Random changelog entry](https://example.com/changelog/2024-01-11) - Network accessline 74
- [Getting Started](https://docs.example.com/getting-started): Setup and first steps. - Network accessline 75
- [API Reference](https://docs.example.com/api): Request and response details. - Network accessline 79
- [Full Reference](https://docs.example.com/llms-full.txt): Expanded docs index. - Network accessline 93
- Fetch `/llms.txt` on the production domain and confirm it returns HTTP 200. - Spot-check every listed URL and remove links that redirect, 404, or require authentication. - Compare `llms.txt` against your sitemap and docs IA to make sure i - Network accessline 94
- Spot-check every listed URL and remove links that redirect, 404, or require authentication. - Compare `llms.txt` against your sitemap and docs IA to make sure it highlights the most useful public docs rather than duplicating everything, a - Network accessline 95
- Compare `llms.txt` against your sitemap and docs IA to make sure it highlights the most useful public docs rather than duplicating everything, and check the overall shape against the [llms.txt convention](https://llmstxt.org/). - Network accessline 116
- Fetch [the live `/llms.txt` file](https://llmstxt.org/) and confirm your production version returns HTTP 200 from the exact root path.
skills/loading-indicators/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/loading-indicators - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/loading-indicators --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/loading-indicators - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/loading-indicators
skills/local-business/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/local-business - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/local-business --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/local-business - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/local-business
skills/local-business/references/rule.md
- Network accessline 7
--- `LocalBusiness` schema is JSON-LD structured data that tells search engines the key facts about a physical business: name, address, phone, hours, and location. [Google's local business structured data documentation](https://developers.g - Network accessline 8
`LocalBusiness` schema is JSON-LD structured data that tells search engines the key facts about a physical business: name, address, phone, hours, and location. [Google's local business structured data documentation](https://developers.googl - Network accessline 14
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 15
{ "@context": "https://schema.org", "@type": "Restaurant", - Network accessline 16
"@context": "https://schema.org", - Network accessline 17
"@type": "Restaurant", "name": "Mario's Pizzeria", "url": "https://mariospizzeria.com", - Network accessline 18
"name": "Mario's Pizzeria", "url": "https://mariospizzeria.com", "telephone": "+1-555-123-4567", - Network accessline 19
"url": "https://mariospizzeria.com", - Network accessline 20
"telephone": "+1-555-123-4567", "image": "https://mariospizzeria.com/images/storefront.jpg", "priceRange": "$$", - Network accessline 21
"image": "https://mariospizzeria.com/images/storefront.jpg", - Network accessline 38
"Sa-Su 12:00-23:00" ], "hasMap": "https://maps.google.com/?cid=1234567890" - Network accessline 39
], "hasMap": "https://maps.google.com/?cid=1234567890" } - Network accessline 40
"hasMap": "https://maps.google.com/?cid=1234567890" - Network accessline 47
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 48
{ "@context": "https://schema.org", "@type": "LocalBusiness", - Network accessline 49
"@context": "https://schema.org", - Network accessline 58
LocalBusiness schema enables Google to show your business details (hours, address, phone, rating) directly in search results and Google Maps, improving local visibility without requiring a click. The underlying vocabulary comes from [Schema - Network accessline 66
| `address` | PostalAddress | see below | | `telephone` | Text | `"+1-555-123-4567"` | | `url` | URL | `"https://example.com"` | - Network accessline 68
| `url` | URL | `"https://example.com"` | - Network accessline 93
Full list: [Schema.org LocalBusiness hierarchy](https://schema.org/LocalBusiness) - Network accessline 100
const schema = { '@context': 'https://schema.org', - Network accessline 101
'@context': 'https://schema.org', - Network accessline 111
}, telephone: '+1-555-000-0000', url: 'https://example.com', - Network accessline 112
telephone: '+1-555-000-0000', url: 'https://example.com', } - Network accessline 113
url: 'https://example.com', - Network accessline 130
Use [Google's Rich Results Test](https://search.google.com/test/rich-results) to confirm the schema is valid and eligible for rich results.
skills/locale-images/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/locale-images - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/locale-images --- - Network accessline 10
url: https://frontendchecklist.io/rules/i18n/locale-images - Network accessline 45
Rule page: https://frontendchecklist.io/rules/i18n/locale-images
skills/locale-images/references/rule.md
- Network accessline 168
function BadgeSvg({ label }: BadgeSvgProps) { return ( <svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg"> - Network accessline 169
return ( <svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="40" rx="8" fill="#3b82f6" /> - Network accessline 170
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
skills/logical-properties/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/logical-properties - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/logical-properties --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/logical-properties - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/logical-properties
skills/lowercase/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/lowercase - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/lowercase --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/lowercase - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/lowercase
skills/lowercase/references/rule.md
- Network accessline 7
--- URL paths on the web are case-sensitive by specification in [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986#section-6.2.2.1). While many servers normalize case for you, inconsistent casing creates duplicate pages that split Pag - Network accessline 8
URL paths on the web are case-sensitive by specification in [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986#section-6.2.2.1). While many servers normalize case for you, inconsistent casing creates duplicate pages that split PageRan - Network accessline 15
https://example.com/Products/shoes → 200 OK ← duplicate - Network accessline 16
https://example.com/products/shoes → 200 OK ← canonical-url - Network accessline 23
Mixed-case URLs can create duplicate content. Search engines may index both `/Product` and `/product` as separate pages, splitting link equity and diluting rankings, which is why [Google's URL structure best practices](https://developers.go - Network accessline 28
✅ https://example.com/products/running-shoes - Network accessline 29
✅ https://example.com/blog/how-to-pick-shoes - Network accessline 30
✅ https://example.com/about-us - Network accessline 32
❌ https://example.com/Products/Running-Shoes - Network accessline 33
❌ https://example.com/Blog/How-To-Pick-Shoes - Network accessline 34
❌ https://example.com/About-Us - Network accessline 85
After enforcing lowercase URLs, audit with [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) or an equivalent crawler:
skills/memory-leaks/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/memory-leaks - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/memory-leaks --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/memory-leaks - Network accessline 46
Rule page: https://frontendchecklist.io/rules/javascript/memory-leaks
skills/memory-leaks/references/rule.md
skills/meta-description/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/meta-description - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/meta-description --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/meta-description - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/meta-description
skills/meta-in-body/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/meta-in-body - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/meta-in-body --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/meta-in-body - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/meta-in-body
skills/meta-in-body/references/rule.md
- Network accessline 20
<meta name="description" content="Page description here." /> <meta property="og:title" content="Page Title" /> <link rel="canonical" href="https://example.com/page" /> - Network accessline 21
<meta property="og:title" content="Page Title" /> <link rel="canonical" href="https://example.com/page" /> <title>Page Title</title> - Network accessline 22
<link rel="canonical" href="https://example.com/page" /> - Network accessline 79
# Check rendered HTML for meta tags outside <head> # Look for <meta> tags that appear after </head> or inside <body> curl -s https://example.com/ | grep -o '<body.*<meta[^>]*>' | head - Network accessline 81
curl -s https://example.com/ | grep -o '<body.*<meta[^>]*>' | head - Network accessline 84
Use the [W3C Markup Validator](https://validator.w3.org/) or browser DevTools → Elements tab to inspect where meta tags are actually rendered in the DOM.
skills/meta-refresh/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/meta-refresh - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/meta-refresh --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/meta-refresh - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/meta-refresh
skills/meta-refresh/references/rule.md
- Network accessline 7
--- The [`http-equiv="refresh"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta) pattern on a `<meta>` tag is often used to refresh a page or redirect a user to a new location. [WCAG timing guidance](https://www.w - Network accessline 8
The [`http-equiv="refresh"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta) pattern on a `<meta>` tag is often used to refresh a page or redirect a user to a new location. [WCAG timing guidance](https://www.w3.or - Network accessline 12
<!-- Incorrect: Automatic redirect after 5 seconds --> <head> <meta http-equiv="refresh" content="5; url=https://example.com/new-page"> - Network accessline 13
<head> <meta http-equiv="refresh" content="5; url=https://example.com/new-page"> </head> - Network accessline 14
<meta http-equiv="refresh" content="5; url=https://example.com/new-page"> - Network accessline 17
<!-- Better: Provide a clear link instead --> <body> <p>This page has moved. Please <a href="https://example.com/new-page">visit the new location</a>.</p> - Network accessline 18
<body> <p>This page has moved. Please <a href="https://example.com/new-page">visit the new location</a>.</p> </body> - Network accessline 19
<p>This page has moved. Please <a href="https://example.com/new-page">visit the new location</a>.</p>
skills/meta-title/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/meta-title - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/meta-title --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/meta-title - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/meta-title
skills/meta-title/references/rule.md
skills/mime-type/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/mime-type - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/mime-type --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/mime-type - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/mime-type
skills/mime-type/references/rule.md
- Network accessline 7
--- The `Content-Type` HTTP response header tells the browser and search crawlers what type of content is in the response body. [MDN's MIME type reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types) and the IANA registry - Network accessline 8
The `Content-Type` HTTP response header tells the browser and search crawlers what type of content is in the response body. [MDN's MIME type reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types) and the IANA registry both - Network accessline 13
# Check a page's Content-Type header curl -I https://example.com/page - Network accessline 14
curl -I https://example.com/page - Network accessline 16
# Check a CSS file curl -I https://example.com/styles/main.css - Network accessline 17
curl -I https://example.com/styles/main.css - Network accessline 20
# Check a JS file curl -I https://example.com/js/app.js - Network accessline 21
curl -I https://example.com/js/app.js - Network accessline 27
Incorrect MIME types cause browsers to block stylesheets and scripts, especially when [`X-Content-Type-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options) disables sniffing. That turns a server-header
skills/mixed-content/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/mixed-content - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/mixed-content --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/mixed-content - Network accessline 20
- Passive mixed content (images, audio, video) triggers a security warning and may be upgraded or blocked - Use `upgrade-insecure-requests` CSP directive to automatically upgrade HTTP sub-resources to HTTPS - Audit all hardcoded `http://` U - Network accessline 21
- Use `upgrade-insecure-requests` CSP directive to automatically upgrade HTTP sub-resources to HTTPS - Audit all hardcoded `http://` URLs in HTML, CSS, and JavaScript - The `Content-Security-Policy: upgrade-insecure-requests` directive is t - Network accessline 22
- Audit all hardcoded `http://` URLs in HTML, CSS, and JavaScript - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/mixed-content
skills/mixed-content/references/rule.md
- Network accessline 18
- `<script src="http://...">` - Network accessline 19
- `<link rel="stylesheet" href="http://...">` - `<iframe src="http://...">` - `XMLHttpRequest` / `fetch()` to `http://` URLs - Network accessline 20
- `<iframe src="http://...">` - `XMLHttpRequest` / `fetch()` to `http://` URLs - `<object data="http://...">` - Network accessline 21
- `XMLHttpRequest` / `fetch()` to `http://` URLs - Network accessline 22
- `<object data="http://...">` - Network accessline 25
❌ Blocked — attacker can inject scripts into your HTTPS page <script src="http://cdn.example.com/analytics.js"></script> - Network accessline 26
<script src="http://cdn.example.com/analytics.js"></script> - Network accessline 28
✅ Correct <script src="https://cdn.example.com/analytics.js"></script> - Network accessline 29
<script src="https://cdn.example.com/analytics.js"></script> - Network accessline 36
- `<img src="http://...">` - Network accessline 37
- `<audio src="http://...">` - Network accessline 38
- `<video src="http://...">` - Network accessline 41
⚠<U+FE0F> Will be upgraded to HTTPS by Chrome (blocked if no HTTPS version exists) <img src="http://example.com/photo.jpg" alt="Photo"> - Network accessline 42
<img src="http://example.com/photo.jpg" alt="Photo"> - Network accessline 44
✅ Correct <img src="https://example.com/photo.jpg" alt="Photo"> - Network accessline 45
<img src="https://example.com/photo.jpg" alt="Photo"> - Network accessline 60
# Focus on resource attributes grep -rE 'src="http://|href="http://|url\(http://' ./src - Network accessline 61
grep -rE 'src="http://|href="http://|url\(http://' ./src - Network accessline 117
Open Chrome or Firefox DevTools in the Console tab. [MDN's mixed content guide](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) and [web.dev's remediation guide](https://web.dev/articles/fixing-mixed-content) both show - Network accessline 120
Mixed Content: The page at 'https://example.com' was loaded over HTTPS, - Network accessline 121
but requested an insecure resource 'http://cdn.example.com/script.js'. - Network accessline 132
# Lighthouse CLI npx lighthouse https://example.com --only-categories=best-practices --output=json \ - Network accessline 133
npx lighthouse https://example.com --only-categories=best-practices --output=json \
skills/mobile-testing/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/mobile-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/mobile-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/mobile-testing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/mobile-testing
skills/mock-best-practices/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/mock-best-practices - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/mock-best-practices --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/mock-best-practices - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/mock-best-practices
skills/modal-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/modal-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/modal-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/modal-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/modal-accessibility
skills/modern-array-methods/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/modern-array-methods - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/modern-array-methods --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/modern-array-methods - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/modern-array-methods
skills/modern-format/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/modern-format - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/modern-format --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/modern-format - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/modern-format
skills/modern-format/references/rule.md
- Network accessline 53
Source: [web.dev — Serve images in modern formats](https://web.dev/articles/serve-images-webp)
skills/mutation-testing/SKILL.md
- Network accessline 8
estimatedTime: "120" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/mutation-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/mutation-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/mutation-testing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/mutation-testing
skills/naming-conventions/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/naming-conventions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/naming-conventions --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/naming-conventions - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/naming-conventions
skills/nap-consistency/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/nap-consistency - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/nap-consistency --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/nap-consistency - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/nap-consistency
skills/nap-consistency/references/rule.md
- Network accessline 7
--- NAP stands for **Name, Address, Phone**. These three pieces of information must be identical across every page of your website, your [Google Business Profile](https://business.google.com), and external directory listings, especially whe - Network accessline 8
NAP stands for **Name, Address, Phone**. These three pieces of information must be identical across every page of your website, your [Google Business Profile](https://business.google.com), and external directory listings, especially when th - Network accessline 23
Inconsistent NAP information across a website signals to search engines that the business details are unreliable. That inconsistency can suppress local rankings and undermine the same entity confidence described in [Schema.org PostalAddress
skills/navigation-landmark/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/navigation-landmark - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/navigation-landmark --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/navigation-landmark - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/navigation-landmark
skills/new-tab/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/new-tab - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/new-tab --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/new-tab - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/new-tab
skills/new-tab/references/rule.md
- Network accessline 7
--- When a link opens a new browser tab with `target="_blank"`, the new page receives a reference to the opener's `window` object via `window.opener`. A malicious destination can exploit that behavior in a [reverse tabnapping](https://owasp - Network accessline 8
When a link opens a new browser tab with `target="_blank"`, the new page receives a reference to the opener's `window` object via `window.opener`. A malicious destination can exploit that behavior in a [reverse tabnapping](https://owasp.org - Network accessline 12
1. User is on bank.example.com 2. User clicks a link to malicious.com (opens in new tab) 3. malicious.com runs: window.opener.location = 'https://fake-bank.example.com/login' - Network accessline 13
2. User clicks a link to malicious.com (opens in new tab) 3. malicious.com runs: window.opener.location = 'https://fake-bank.example.com/login' 4. User switches back to the original tab - Network accessline 14
3. malicious.com runs: window.opener.location = 'https://fake-bank.example.com/login' - Network accessline 26
❌ Vulnerable to reverse tabnapping <a href="https://example.com" target="_blank">Visit Example</a> - Network accessline 27
<a href="https://example.com" target="_blank">Visit Example</a> - Network accessline 29
✅ Safe — no access to window.opener <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a> - Network accessline 30
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a> - Network accessline 38
❌ Vulnerable <a href="https://external.com" target="_blank">External Link</a> - Network accessline 39
<a href="https://external.com" target="_blank">External Link</a> - Network accessline 41
✅ Safe <a href="https://external.com" target="_blank" rel="noopener noreferrer"> - Network accessline 42
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
skills/no-explicit-any/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/no-explicit-any - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/no-explicit-any --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/no-explicit-any - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/no-explicit-any
skills/no-explicit-any/references/rule.md
- Network accessline 7
--- [`any`](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any) is TypeScript's escape hatch — it tells the compiler to stop type-checking a value entirely. Every property access, method call, and assignment on an `any` - Network accessline 8
[`any`](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any) is TypeScript's escape hatch — it tells the compiler to stop type-checking a value entirely. Every property access, method call, and assignment on an `any` valu - Network accessline 125
The [`@typescript-eslint/no-explicit-any`](https://typescript-eslint.io/rules/no-explicit-any/) rule is the practical way to keep this standard from drifting during code review. - Network accessline 159
async function fetchUser(id: string): Promise { const response = await fetch(`/api/users/${id}`) - Network accessline 160
const response = await fetch(`/api/users/${id}`) - Network accessline 168
1. Run `pnpm exec eslint --rule '{"@typescript-eslint/no-explicit-any": "error"}' src/` and confirm zero violations, or check that the rule is already in your ESLint config with `"error"` severity. 2. Search the codebase for `: any` and `as - Network accessline 169
2. Search the codebase for `: any` and `as any` — every remaining instance should either be enforced by [`@typescript-eslint/no-explicit-any`](https://typescript-eslint.io/rules/no-explicit-any/) or have a comment explaining why it is inten
skills/no-unchecked-indexed-access/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/no-unchecked-indexed-access - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/no-unchecked-indexed-access --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/no-unchecked-indexed-access - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/no-unchecked-indexed-access
skills/no-unchecked-indexed-access/references/rule.md
- Network accessline 7
--- TypeScript's type system makes an optimistic assumption about array index access: `array[0]` is typed as `T`, not `T | undefined`. The [`noUncheckedIndexedAccess` flag](https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess) a - Network accessline 8
TypeScript's type system makes an optimistic assumption about array index access: `array[0]` is typed as `T`, not `T | undefined`. The [`noUncheckedIndexedAccess` flag](https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess) and t - Network accessline 148
1. Confirm `"noUncheckedIndexedAccess": true` is present in `tsconfig.json` under `compilerOptions`. The [TSConfig reference](https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess) is explicit that this flag is not enabled by `"s
skills/nofollow-internal/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/nofollow-internal - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/nofollow-internal --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/nofollow-internal - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/nofollow-internal
skills/nofollow-internal/references/rule.md
- Network accessline 7
--- `rel="nofollow"` was introduced to tell search engines not to follow a link or pass PageRank through it. [Google's rel-attribute guidance](https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links) applies to ou - Network accessline 8
`rel="nofollow"` was introduced to tell search engines not to follow a link or pass PageRank through it. [Google's rel-attribute guidance](https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links) applies to outbou - Network accessline 19
<!-- ✅ OK: nofollow on an external, untrusted link --> <a href="https://untrusted-source.com/article" rel="nofollow">Source</a> - Network accessline 20
<a href="https://untrusted-source.com/article" rel="nofollow">Source</a> - Network accessline 25
Adding `rel="nofollow"` to internal links prevents PageRank from flowing to those pages while providing no benefit over simply omitting the attribute. Google’s 2019 note on [evolving nofollow](https://developers.google.com/search/blog/2019/ - Network accessline 48
## Audit Command ([Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/))
skills/noindex-in-sitemap/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/noindex-in-sitemap - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/noindex-in-sitemap --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/noindex-in-sitemap - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/noindex-in-sitemap
skills/noindex-in-sitemap/references/rule.md
- Network accessline 7
--- An XML sitemap tells search engines which pages to prioritise for crawling and indexing. A `noindex` directive tells them not to index a page. [Google's sitemap guidance](https://developers.google.com/search/docs/crawling-indexing/sitem - Network accessline 8
An XML sitemap tells search engines which pages to prioritise for crawling and indexing. A `noindex` directive tells them not to index a page. [Google's sitemap guidance](https://developers.google.com/search/docs/crawling-indexing/sitemaps/ - Network accessline 14
<urlset> <url> <loc>https://example.com/thank-you</loc> - Network accessline 15
<url> <loc>https://example.com/thank-you</loc> </url> - Network accessline 16
<loc>https://example.com/thank-you</loc> - Network accessline 49
<!-- ✅ Good: Only indexable, canonical-url, 200 URLs --> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 50
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 51
<url> <loc>https://example.com/products/shoes</loc> <changefreq>weekly</changefreq> - Network accessline 52
<loc>https://example.com/products/shoes</loc> - Network accessline 68
Use [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) or a similar crawler: - Network accessline 83
.filter(page => !page.noindex) .map(page => ({ url: `https://example.com${page.path}`, - Network accessline 84
.map(page => ({ url: `https://example.com${page.path}`, lastModified: page.updatedAt, - Network accessline 85
url: `https://example.com${page.path}`,
skills/noscript-tag/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/noscript-tag - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/noscript-tag --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/noscript-tag - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/noscript-tag
skills/noscript-tag/references/rule.md
- Network accessline 270
e.preventDefault() try { const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`) - Network accessline 271
try { const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`) const data = await response.json() - Network accessline 272
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`) - Network accessline 406
try { const response = await fetch('/api/contact', { - Network accessline 407
const response = await fetch('/api/contact', { - Network accessline 737
await page.goto('http://localhost:3000');
skills/nosnippet/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/nosnippet - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/nosnippet --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/nosnippet - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/nosnippet
skills/nosnippet/references/rule.md
- Network accessline 7
--- The `nosnippet` robots directive prevents search engines from showing a description under your page title in results. [Google's robots-meta documentation](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#direc - Network accessline 8
The `nosnippet` robots directive prevents search engines from showing a description under your page title in results. [Google's robots-meta documentation](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#directive - Network accessline 80
Use [Google Search Console URL Inspection](https://search.google.com/search-console/inspect) to see what Google reads for any specific URL.
skills/object-alt/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/object-alt - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/object-alt --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/object-alt - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/object-alt
skills/object-alt/references/rule.md
- Network accessline 7
--- The [`<object>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object) is used to embed external resources like multimedia or other web pages. The [HTML standard](https://html.spec.whatwg.org/multipage/iframe-embed-o - Network accessline 8
The [`<object>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object) is used to embed external resources like multimedia or other web pages. The [HTML standard](https://html.spec.whatwg.org/multipage/iframe-embed-objec
skills/offline-fallback/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/offline-fallback - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/offline-fallback --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/offline-fallback - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/offline-fallback
skills/offline-fallback/references/rule.md
- Network accessline 7
--- When a user visits your site without a network connection, the browser normally shows its own generic error page. A custom [offline fallback page](https://web.dev/articles/offline-fallback-page) keeps users within your experience, and a - Network accessline 8
When a user visits your site without a network connection, the browser normally shows its own generic error page. A custom [offline fallback page](https://web.dev/articles/offline-fallback-page) keeps users within your experience, and a [se - Network accessline 138
try { // Always try the network first for navigation const networkResponse = await fetch(request) - Network accessline 140
const networkResponse = await fetch(request) - Network accessline 203
If you use [Workbox](https://developer.chrome.com/docs/workbox), the `offlineFallback` plugin handles this automatically:
skills/offscreen-lazy/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/offscreen-lazy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/offscreen-lazy --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/offscreen-lazy - Network accessline 46
Rule page: https://frontendchecklist.io/rules/images/offscreen-lazy
skills/offscreen-lazy/references/rule.md
- Network accessline 165
Per the [HTML spec](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading), the exact threshold is implementation-defined. Chromium's thresholds range from 1250px on a slow connection to 2500px on a fast connection.
skills/og-image-size/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/og-image-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/og-image-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/og-image-size - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/og-image-size
skills/og-image-size/references/rule.md
- Network accessline 13
<!-- ✅ Good: Correct size, absolute URL, explicit dimensions --> <head> <meta property="og:image" content="https://example.com/og/home.jpg" /> - Network accessline 14
<head> <meta property="og:image" content="https://example.com/og/home.jpg" /> <meta property="og:image:width" content="1200" /> - Network accessline 15
<meta property="og:image" content="https://example.com/og/home.jpg" /> - Network accessline 80
images: [ { url: `https://example.com/og?title=${encodeURIComponent(post.title)}`, - Network accessline 81
{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}`, width: 1200, - Network accessline 82
url: `https://example.com/og?title=${encodeURIComponent(post.title)}`, - Network accessline 112
- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) — shows exact image dimensions and warnings - Network accessline 113
- [X Cards Getting Started](https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started) - Network accessline 114
- [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
skills/og-tags/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/og-tags - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/og-tags --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/og-tags - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/og-tags
skills/og-tags/references/rule.md
- Network accessline 15
<meta property="og:title" content="How to Bake Sourdough Bread" /> <meta property="og:description" content="A step-by-step guide to making sourdough bread at home, from starter to scoring." /> <meta property="og:image" content="https:// - Network accessline 16
<meta property="og:description" content="A step-by-step guide to making sourdough bread at home, from starter to scoring." /> <meta property="og:image" content="https://example.com/images/sourdough-og.jpg" /> <meta property="og:url" con - Network accessline 17
<meta property="og:image" content="https://example.com/images/sourdough-og.jpg" /> - Network accessline 18
<meta property="og:url" content="https://example.com/blog/sourdough-bread" /> - Network accessline 53
title: post.title, description: post.excerpt, url: `https://example.com/blog/${params.slug}`, - Network accessline 54
description: post.excerpt, url: `https://example.com/blog/${params.slug}`, images: [ - Network accessline 55
url: `https://example.com/blog/${params.slug}`, - Network accessline 56
images: [ { url: `https://example.com/og/${params.slug}.jpg`, - Network accessline 57
{ url: `https://example.com/og/${params.slug}.jpg`, width: 1200, - Network accessline 58
url: `https://example.com/og/${params.slug}.jpg`, - Network accessline 76
<!-- ✅ Good: Absolute HTTPS URL --> <meta property="og:image" content="https://example.com/images/og.png" /> - Network accessline 77
<meta property="og:image" content="https://example.com/images/og.png" /> - Network accessline 79
<!-- ❌ Bad: og:url doesn't match canonical-url --> <meta property="og:url" content="https://example.com/blog/post?utm_source=share" /> - Network accessline 80
<meta property="og:url" content="https://example.com/blog/post?utm_source=share" /> - Network accessline 82
<!-- ✅ Good: og:url matches the canonical URL --> <meta property="og:url" content="https://example.com/blog/post" /> - Network accessline 83
<meta property="og:url" content="https://example.com/blog/post" /> - Network accessline 88
- Use the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) to inspect and refresh cached OG data - Network accessline 89
- Use the [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) for LinkedIn previews
skills/og-url-match/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/og-url-match - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/og-url-match --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/og-url-match - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/og-url-match
skills/og-url-match/references/rule.md
- Network accessline 15
User A shares: https://example.com/blog/post?utm_source=twitter → 45 shares - Network accessline 16
User B shares: https://example.com/blog/post → 23 shares - Network accessline 17
User C shares: https://www.example.com/blog/post → 12 shares - Network accessline 29
<!-- ✅ Good: og:url matches canonical-url exactly --> <head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 30
<head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> <meta property="og:url" content="https://example.com/blog/sourdough-recipe" /> - Network accessline 31
<link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 32
<meta property="og:url" content="https://example.com/blog/sourdough-recipe" /> - Network accessline 37
<!-- ❌ Bad: og:url has tracking params that canonical-url doesn't --> <head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 38
<head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> <meta property="og:url" content="https://example.com/blog/sourdough-recipe?utm_source=homepage" /> - Network accessline 39
<link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 40
<meta property="og:url" content="https://example.com/blog/sourdough-recipe?utm_source=homepage" /> - Network accessline 43
<!-- ❌ Bad: og:url uses www, canonical-url doesn't --> <head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 44
<head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> <meta property="og:url" content="https://www.example.com/blog/sourdough-recipe" /> - Network accessline 45
<link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 46
<meta property="og:url" content="https://www.example.com/blog/sourdough-recipe" /> - Network accessline 49
<!-- ❌ Bad: og:url uses HTTP, canonical-url uses HTTPS --> <head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 50
<head> <link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> <meta property="og:url" content="http://example.com/blog/sourdough-recipe" /> - Network accessline 51
<link rel="canonical" href="https://example.com/blog/sourdough-recipe" /> - Network accessline 52
<meta property="og:url" content="http://example.com/blog/sourdough-recipe" /> - Network accessline 61
const post = await getPost(params.slug) const canonicalUrl = `https://example.com/blog/${params.slug}` - Network accessline 62
const canonicalUrl = `https://example.com/blog/${params.slug}` - Network accessline 79
| Check | Expected | |-------|----------| | Protocol | Both use `https://` | - Network accessline 80
|-------|----------| | Protocol | Both use `https://` | | Domain | Both use same domain (www or non-www) | - Network accessline 81
| Protocol | Both use `https://` | - Network accessline 103
- View page source — compare `og:url` content and `canonical` href manually - Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) — shows the resolved og:url - Network accessline 104
- Use [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) — shows the resolved og:url
skills/optimized/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/optimized - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/optimized --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/optimized - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/optimized
skills/organization/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/organization - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/organization --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/organization - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/organization
skills/organization/references/rule.md
- Network accessline 14
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 15
{ "@context": "https://schema.org", "@type": "Organization", - Network accessline 16
"@context": "https://schema.org", - Network accessline 17
"@type": "Organization", "name": "Acme Corporation", "url": "https://acme.com", - Network accessline 18
"name": "Acme Corporation", "url": "https://acme.com", "logo": { - Network accessline 19
"url": "https://acme.com", - Network accessline 20
"logo": { "@type": "ImageObject", "url": "https://acme.com/images/logo.png", - Network accessline 21
"@type": "ImageObject", "url": "https://acme.com/images/logo.png", "width": 200, - Network accessline 22
"url": "https://acme.com/images/logo.png", - Network accessline 41
}, "sameAs": [ "https://www.linkedin.com/company/acme", - Network accessline 42
"sameAs": [ "https://www.linkedin.com/company/acme", "https://twitter.com/acme", - Network accessline 43
"https://www.linkedin.com/company/acme", - Network accessline 44
"https://twitter.com/acme", - Network accessline 45
"https://www.facebook.com/acme", - Network accessline 46
"https://www.youtube.com/@acme", - Network accessline 47
"https://en.wikipedia.org/wiki/Acme_Corporation" - Network accessline 55
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 56
{ "@context": "https://schema.org", "@type": "Organization", - Network accessline 57
"@context": "https://schema.org", - Network accessline 72
| `@type` | Text | `"Organization"` or `"Corporation"` | | `name` | Text | `"Acme Corporation"` | | `url` | URL | `"https://acme.com"` | - Network accessline 73
| `name` | Text | `"Acme Corporation"` | | `url` | URL | `"https://acme.com"` | | `logo` | ImageObject | see below | - Network accessline 74
| `url` | URL | `"https://acme.com"` | - Network accessline 101
const orgSchema = { '@context': 'https://schema.org', - Network accessline 102
'@context': 'https://schema.org', - Network accessline 103
'@type': 'Organization', name: 'Acme Corporation', url: 'https://acme.com', - Network accessline 104
name: 'Acme Corporation', url: 'https://acme.com', logo: { - Network accessline 105
url: 'https://acme.com', - Network accessline 106
logo: { '@type': 'ImageObject', url: 'https://acme.com/logo.png', - Network accessline 107
'@type': 'ImageObject', url: 'https://acme.com/logo.png', width: 200, - Network accessline 108
url: 'https://acme.com/logo.png', - Network accessline 111
}, sameAs: [ 'https://www.linkedin.com/company/acme', - Network accessline 112
sameAs: [ 'https://www.linkedin.com/company/acme', 'https://twitter.com/acme', - Network accessline 113
'https://www.linkedin.com/company/acme', - Network accessline 114
'https://twitter.com/acme', - Network accessline 136
Test with [Google's Rich Results Test](https://search.google.com/test/rich-results) to confirm valid markup.
skills/orientation/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/orientation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/orientation --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/orientation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/orientation
skills/orientation/references/rule.md
- Network accessline 7
--- Users must be able to access the same core content and complete the same core tasks in both portrait and landscape unless the activity itself truly depends on one orientation. [WCAG 1.3.4 Orientation](https://www.w3.org/TR/WCAG21/#orien - Network accessline 8
Users must be able to access the same core content and complete the same core tasks in both portrait and landscape unless the activity itself truly depends on one orientation. [WCAG 1.3.4 Orientation](https://www.w3.org/TR/WCAG21/#orientati - Network accessline 66
The [Understanding document for Orientation](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html) focuses on exactly this problem: many users cannot simply rotate a mounted or assistive-device setup to satisfy an arbitrary layout a - Network accessline 99
Use the [orientation understanding guide](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html) while testing so you are verifying the actual task, not just whether the layout technically rotates.
skills/orphan-pages/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/orphan-pages - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/orphan-pages --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/orphan-pages - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/orphan-pages
skills/orphan-pages/references/rule.md
- Network accessline 7
--- An orphan page is a page that exists on your site but receives no internal links from other pages. [Google's crawlable-links guidance](https://developers.google.com/search/docs/crawling-indexing/links-crawlable) explains why discovery t - Network accessline 8
An orphan page is a page that exists on your site but receives no internal links from other pages. [Google's crawlable-links guidance](https://developers.google.com/search/docs/crawling-indexing/links-crawlable) explains why discovery throu - Network accessline 26
**Method 1: [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/)** - Network accessline 34
**Method 3: [Google Search Console](https://search.google.com/search-console)**
skills/page-load-time/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/page-load-time - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/page-load-time --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/page-load-time - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/page-load-time
skills/page-load-time/references/rule.md
- Network accessline 19
<head> <!-- Preconnect to critical origins --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 20
<!-- Preconnect to critical origins --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://cdn.example.com" crossorigin> - Network accessline 21
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 22
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
skills/page-weight/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/page-weight - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/page-weight --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/page-weight - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/page-weight
skills/pagination-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/pagination-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/pagination-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/pagination-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/pagination-accessibility
skills/pagination/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/pagination - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/pagination --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/pagination - Network accessline 31
Update canonical tags so each paginated page self-references. For /category?page=2, set <link rel='canonical' href='https://example.com/category?page=2' />. Remove any canonical pointing paginated pages to the first page unless those pages - Network accessline 46
Rule page: https://frontendchecklist.io/rules/seo/pagination
skills/pagination/references/rule.md
- Network accessline 13
<!-- ❌ WRONG: Paginated pages all canonicalize to page 1 --> <!-- On /products?page=2: --> <link rel="canonical" href="https://example.com/products" /> - Network accessline 15
<link rel="canonical" href="https://example.com/products" /> - Network accessline 17
<!-- On /products?page=3: --> <link rel="canonical" href="https://example.com/products" /> - Network accessline 18
<link rel="canonical" href="https://example.com/products" /> - Network accessline 25
Incorrect pagination canonicalization can prevent pages 2, 3, and later pages from being indexed. [Google's pagination guidance](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls#use-case-pagination) mak - Network accessline 32
<!-- On /products (page 1): --> <link rel="canonical" href="https://example.com/products" /> - Network accessline 33
<link rel="canonical" href="https://example.com/products" /> - Network accessline 35
<!-- On /products?page=2: --> <link rel="canonical" href="https://example.com/products?page=2" /> - Network accessline 36
<link rel="canonical" href="https://example.com/products?page=2" /> - Network accessline 38
<!-- On /products?page=3: --> <link rel="canonical" href="https://example.com/products?page=3" /> - Network accessline 39
<link rel="canonical" href="https://example.com/products?page=3" /> - Network accessline 62
const page = parseInt(searchParams.page || '1') const canonicalUrl = page === 1 ? 'https://example.com/blog' - Network accessline 63
const canonicalUrl = page === 1 ? 'https://example.com/blog' : `https://example.com/blog?page=${page}` - Network accessline 64
? 'https://example.com/blog' - Network accessline 65
: `https://example.com/blog?page=${page}` - Network accessline 77
Google announced in March 2019 that they no longer use `rel="prev"` and `rel="next"` link tags as a hint for pagination. The deprecation note in [Google's Search blog](https://developers.google.com/search/blog/2019/09/google-no-longer-suppo - Network accessline 80
<!-- Google ignores these since 2019, but other crawlers may still use them --> <link rel="prev" href="https://example.com/blog?page=1" /> - Network accessline 81
<link rel="prev" href="https://example.com/blog?page=1" /> - Network accessline 82
<link rel="next" href="https://example.com/blog?page=3" />
skills/parallax-effects/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/parallax-effects - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/parallax-effects --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/parallax-effects - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/parallax-effects
skills/parameters/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/parameters - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/parameters --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/parameters - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/parameters
skills/parameters/references/rule.md
- Network accessline 19
<!-- ✅ Canonical strips tracking params --> <link rel="canonical" href="https://example.com/products" /> - Network accessline 20
<link rel="canonical" href="https://example.com/products" /> - Network accessline 28
<!-- ✅ Canonical points to base category page --> <link rel="canonical" href="https://example.com/shoes" /> - Network accessline 29
<link rel="canonical" href="https://example.com/shoes" /> - Network accessline 31
<!-- OR self-canonicalize if filtered content is indexable --> <link rel="canonical" href="https://example.com/shoes?color=red&size=10" /> - Network accessline 32
<link rel="canonical" href="https://example.com/shoes?color=red&size=10" /> - Network accessline 40
<!-- ✅ Each page self-references --> <link rel="canonical" href="https://example.com/blog?page=3" /> - Network accessline 41
<link rel="canonical" href="https://example.com/blog?page=3" /> - Network accessline 55
Uncontrolled URL parameters generate duplicate content that wastes crawl budget and splits PageRank across URL variants. [Google's URL parameter guidance](https://developers.google.com/search/docs/crawling-indexing/url-parameters) is the ma - Network accessline 91
1. Use Google Search Console → Legacy tools → URL Parameters (if available) 2. Use [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/): Configuration → Spider → Crawl within subfolder, check URLs containing `?` - Network accessline 92
2. Use [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/): Configuration → Spider → Crawl within subfolder, check URLs containing `?`
skills/password-field-security/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/password-field-security - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/password-field-security --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/password-field-security - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/password-field-security
skills/password-field-security/references/rule.md
skills/paste-inputs/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/paste-inputs - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/paste-inputs --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/paste-inputs - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/paste-inputs
skills/paste-inputs/references/rule.md
- Network accessline 7
--- Preventing a user from pasting into an input field is a common but harmful practice. [WCAG's accessible authentication requirement](https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum) and the [MDN paste event reference](htt - Network accessline 8
Preventing a user from pasting into an input field is a common but harmful practice. [WCAG's accessible authentication requirement](https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum) and the [MDN paste event reference](https:/
skills/pdf-size/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/pdf-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/pdf-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/pdf-size - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/pdf-size
skills/pdf-size/references/rule.md
skills/performance-budget/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/performance-budget - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/performance-budget --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/performance-budget - Network accessline 46
Rule page: https://frontendchecklist.io/rules/testing/performance-budget
skills/performance-budget/references/rule.md
- Network accessline 67
"ci": { "collect": { "url": ["http://localhost:3000", "http://localhost:3000/about"], - Network accessline 68
"collect": { "url": ["http://localhost:3000", "http://localhost:3000/about"], "numberOfRuns": 3 - Network accessline 69
"url": ["http://localhost:3000", "http://localhost:3000/about"],
skills/performance-resource-hints/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/en/rules/performance/performance-resource-hints - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/en/rules/performance/performance-resource-hints --- - Network accessline 10
url: https://frontendchecklist.io/en/rules/performance/performance-resource-hints - Network accessline 45
Rule page: https://frontendchecklist.io/en/rules/performance/performance-resource-hints
skills/performance-resource-hints/references/rule.md
- Network accessline 7
--- Resource hints are useful when the browser would otherwise discover something too late. [web.dev's performance guidance](https://web.dev/learn/performance) and [Patterns.dev preload/prefetch guidance](https://www.patterns.dev/vanilla/pr - Network accessline 8
Resource hints are useful when the browser would otherwise discover something too late. [web.dev's performance guidance](https://web.dev/learn/performance) and [Patterns.dev preload/prefetch guidance](https://www.patterns.dev/vanilla/preloa - Network accessline 54
<head> <!-- Good: fonts are used in the first viewport --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 55
<!-- Good: fonts are used in the first viewport --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 56
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 57
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 59
<!-- Good: image CDN serves the hero media --> <link rel="preconnect" href="https://images.example-cdn.com" crossorigin> - Network accessline 60
<link rel="preconnect" href="https://images.example-cdn.com" crossorigin> - Network accessline 62
<!-- Better than preconnect for speculative vendors --> <link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 63
<link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 79
<!-- Bad: speculative origins do not deserve early socket setup --> <link rel="preconnect" href="https://chat.example.com"> - Network accessline 80
<link rel="preconnect" href="https://chat.example.com"> - Network accessline 81
<link rel="preconnect" href="https://ads.example.com"> - Network accessline 82
<link rel="preconnect" href="https://social.example.com"> - Network accessline 89
- **Fewer wasted round-trips**: Preconnect can remove DNS, TCP, and TLS setup from the critical path for a small number of known external origins. - **Smoother follow-up actions**: Prefetch can make the next likely route or interaction feel - Network accessline 91
- **Misuse is expensive**: Every unnecessary preload, prefetch, or preconnect competes with more important work for bandwidth, sockets, and parser attention, which is why [PageSpeed Insights](https://pagespeed.web.dev/) is worth checking af - Network accessline 95
The decision rules matter because [Patterns.dev's prefetch guidance](https://www.patterns.dev/vanilla/prefetch/) and real-world waterfall data both show that hinting the wrong asset early can be worse than adding no hint at all. - Network accessline 107
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 113
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 119
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
skills/permissions-policy/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/permissions-policy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/permissions-policy --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/permissions-policy - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/permissions-policy
skills/permissions-policy/references/rule.md
- Network accessline 7
--- [`Permissions-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy) (formerly `Feature-Policy`) is an HTTP response header that controls access to browser features and APIs. It applies to the page itself - Network accessline 8
[`Permissions-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy) (formerly `Feature-Policy`) is an HTTP response header that controls access to browser features and APIs. It applies to the page itself and - Network accessline 17
| `()` | Feature denied for all origins | | `(self)` | Feature allowed only for same-origin | | `("https://trusted.com")` | Feature allowed for this specific origin | - Network accessline 18
| `(self)` | Feature allowed only for same-origin | | `("https://trusted.com")` | Feature allowed for this specific origin | | `(self "https://trusted.com")` | Feature allowed for same-origin and trusted.com | - Network accessline 19
| `("https://trusted.com")` | Feature allowed for this specific origin | - Network accessline 20
| `(self "https://trusted.com")` | Feature allowed for same-origin and trusted.com | - Network accessline 47
The `interest-cohort=()` directive opts your site out of Google's deprecated FLoC tracking API, and [OWASP's security headers guidance](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Headers_Cheat_Sheet.html) is a good cross-check for - Network accessline 112
<!-- Deny all features to this iframe (default with Permissions-Policy: camera=()) --> <iframe src="https://example.com/widget"></iframe> - Network accessline 113
<iframe src="https://example.com/widget"></iframe> - Network accessline 115
<!-- Explicitly allow camera for a video call widget --> <iframe src="https://video.example.com" - Network accessline 116
<iframe src="https://video.example.com" allow="camera 'self' https://video.example.com; microphone 'self' https://video.example.com" - Network accessline 117
src="https://video.example.com" - Network accessline 118
allow="camera 'self' https://video.example.com; microphone 'self' https://video.example.com" - Network accessline 121
<!-- Allow fullscreen for a video player --> <iframe src="https://player.example.com/embed/123" - Network accessline 122
<iframe src="https://player.example.com/embed/123" allow="fullscreen" - Network accessline 123
src="https://player.example.com/embed/123"
skills/physical-address/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/physical-address - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/physical-address --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/physical-address - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/physical-address
skills/physical-address/references/rule.md
- Network accessline 47
<div itemscope itemtype="https://schema.org/LocalBusiness"> - Network accessline 48
<span itemprop="name">Acme Corporation</span> <address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"> <span itemprop="streetAddress">123 Main Street, Suite 4</span><br /> - Network accessline 49
<address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"> - Network accessline 63
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 64
{ "@context": "https://schema.org", "@type": "LocalBusiness", - Network accessline 65
"@context": "https://schema.org",
skills/picture-element/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/picture-element - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/picture-element --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/picture-element - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/picture-element
skills/plain-language/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/plain-language - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/plain-language --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/plain-language - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/plain-language
skills/pluralization/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/pluralization - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/pluralization --- - Network accessline 10
url: https://frontendchecklist.io/rules/i18n/pluralization - Network accessline 45
Rule page: https://frontendchecklist.io/rules/i18n/pluralization
skills/pluralization/references/rule.md
- Network accessline 89
[react-intl](https://formatjs.io/) uses ICU MessageFormat syntax, which handles plural selection declaratively inside the message string itself. Define all plural variants in the translation file and let the library pick the right one:
skills/preconnect/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/preconnect - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/preconnect --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/preconnect - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/preconnect
skills/preconnect/references/rule.md
- Network accessline 17
<!-- Good: first-screen fonts rely on these origins --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 18
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 19
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 21
<!-- Good: hero media comes from a third-party CDN --> <link rel="preconnect" href="https://images.example-cdn.com" crossorigin> - Network accessline 22
<link rel="preconnect" href="https://images.example-cdn.com" crossorigin> - Network accessline 28
<!-- Better than full preconnect when the origin may be used later --> <link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 29
<link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 30
<link rel="dns-prefetch" href="https://chat.example.com"> - Network accessline 36
<!-- Bad: too many early sockets for vendors not needed in the first view --> <link rel="preconnect" href="https://chat.example.com"> - Network accessline 37
<link rel="preconnect" href="https://chat.example.com"> - Network accessline 38
<link rel="preconnect" href="https://reviews.example.com"> - Network accessline 39
<link rel="preconnect" href="https://ads.example.com"> - Network accessline 40
<link rel="preconnect" href="https://social.example.com"> - Network accessline 65
- [Lighthouse](https://developers.google.com/web/tools/lighthouse) (check for "preconnect-to-required-origins") - [PageSpeed Insights](https://pagespeed.web.dev/) - Browser DevTools Performance panel (check for early socket connections) - Network accessline 66
- [PageSpeed Insights](https://pagespeed.web.dev/) - Browser DevTools Performance panel (check for early socket connections) - [WebPageTest](https://www.webpagetest.org/) (check the Waterfall chart for early DNS/TCP/TLS) - Network accessline 68
- [WebPageTest](https://www.webpagetest.org/) (check the Waterfall chart for early DNS/TCP/TLS)
skills/privacy-policy/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/privacy-policy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/privacy-policy --- - Network accessline 10
url: https://frontendchecklist.io/rules/privacy/privacy-policy - Access to secretsline 40
[Credential-related source omitted] - Network accessline 47
Rule page: https://frontendchecklist.io/rules/privacy/privacy-policy
skills/privacy-policy/references/rule.md
- Network accessline 103
https://example.com/privacy - Network accessline 104
https://example.com/privacy-policy - Network accessline 105
https://example.com/legal/privacy - Access to secretsline 120
[Credential-related source omitted] - Network accessline 127
- [iubenda Privacy Policy Generator](https://www.iubenda.com/) — generates compliant policies - Network accessline 128
- [PrivacyPolicies.com](https://privacypolicies.com/) — free generator
skills/product/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/product - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/product --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/product - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/product
skills/product/references/rule.md
- Network accessline 7
--- Product schema markup enables Google to display rich results for your product pages, showing price, availability, ratings, and images directly in search results. [Google's product structured data guide](https://developers.google.com/sea - Network accessline 8
Product schema markup enables Google to display rich results for your product pages, showing price, availability, ratings, and images directly in search results. [Google's product structured data guide](https://developers.google.com/search/ - Network accessline 14
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 15
{ "@context": "https://schema.org", "@type": "Product", - Network accessline 16
"@context": "https://schema.org", - Network accessline 18
"name": "Cast Iron Dutch Oven 5.5 Qt", "image": [ "https://example.com/images/dutch-oven-front.jpg", - Network accessline 19
"image": [ "https://example.com/images/dutch-oven-front.jpg", "https://example.com/images/dutch-oven-top.jpg" - Network accessline 20
"https://example.com/images/dutch-oven-front.jpg", - Network accessline 21
"https://example.com/images/dutch-oven-top.jpg" - Network accessline 30
"offers": { "@type": "Offer", "url": "https://example.com/products/dutch-oven", - Network accessline 31
"@type": "Offer", "url": "https://example.com/products/dutch-oven", "priceCurrency": "USD", - Network accessline 32
"url": "https://example.com/products/dutch-oven", - Network accessline 34
"price": 49.99, "priceValidUntil": "2026-12-31", "itemCondition": "https://schema.org/NewCondition", - Network accessline 35
"priceValidUntil": "2026-12-31", "itemCondition": "https://schema.org/NewCondition", "availability": "https://schema.org/InStock", - Network accessline 36
"itemCondition": "https://schema.org/NewCondition", - Network accessline 37
"availability": "https://schema.org/InStock", - Network accessline 87
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 88
{ "@context": "https://schema.org", "@type": "Product", - Network accessline 89
"@context": "https://schema.org", - Network accessline 98
Product schema enables Google to show price, availability, ratings, and review count directly in search results. The vocabulary itself comes from [Schema.org Product](https://schema.org/Product), but the page still needs matching visible pr - Network accessline 112
|----------|------|---------| | `name` | Text | `"Cast Iron Dutch Oven 5.5 Qt"` | | `image` | URL or Array | `["https://example.com/oven.jpg"]` | - Network accessline 113
| `name` | Text | `"Cast Iron Dutch Oven 5.5 Qt"` | | `image` | URL or Array | `["https://example.com/oven.jpg"]` | | `description` | Text | Product description | - Network accessline 114
| `image` | URL or Array | `["https://example.com/oven.jpg"]` | - Network accessline 117
| `offers.price` | Number | `49.99` | | `offers.priceCurrency` | Text | `"USD"` | | `offers.availability` | URL | `"https://schema.org/InStock"` | - Network accessline 119
| `offers.availability` | URL | `"https://schema.org/InStock"` | - Network accessline 124
https://schema.org/InStock - Network accessline 125
https://schema.org/OutOfStock - Network accessline 126
https://schema.org/PreOrder - Network accessline 127
https://schema.org/BackOrder - Network accessline 128
https://schema.org/Discontinued - Network accessline 138
const schema = { '@context': 'https://schema.org', - Network accessline 139
'@context': 'https://schema.org', - Network accessline 147
priceCurrency: 'USD', availability: product.inStock ? 'https://schema.org/InStock' - Network accessline 148
availability: product.inStock ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock', - Network accessline 149
? 'https://schema.org/InStock' - Network accessline 150
: 'https://schema.org/OutOfStock',
skills/progressive-jpeg/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/progressive-jpeg - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/progressive-jpeg --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/progressive-jpeg - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/progressive-jpeg
skills/progressive-jpeg/references/rule.md
- Network accessline 24
// Browser check using canvas async function isProgressiveJPEG(url: string): Promise<boolean> { const response = await fetch(url) - Network accessline 25
async function isProgressiveJPEG(url: string): Promise<boolean> { const response = await fetch(url) const buffer = await response.arrayBuffer() - Network accessline 26
const response = await fetch(url) - Network accessline 134
<!-- Cloudinary --> <img src="https://res.cloudinary.com/demo/image/upload/fl_progressive/sample.jpg"> - Network accessline 135
<img src="https://res.cloudinary.com/demo/image/upload/fl_progressive/sample.jpg"> - Network accessline 137
<!-- Imgix --> <img src="https://example.imgix.net/image.jpg?fm=pjpg"> - Network accessline 138
<img src="https://example.imgix.net/image.jpg?fm=pjpg">
skills/pwa-installability/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/pwa-installability - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/pwa-installability --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/pwa-installability - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/pwa-installability
skills/pwa-installability/references/rule.md
- Network accessline 117
Use [Maskable.app](https://maskable.app/editor) to preview how your icon looks under each Android shape. - Network accessline 187
- Open DevTools → **Application** → **Manifest** and confirm all required fields are green with no warnings. - Run a **Lighthouse** PWA audit and check that "Installable" criteria all pass. - Use [PWABuilder](https://docs.pwabuilder.com/#/h - Network accessline 189
- Use [PWABuilder](https://docs.pwabuilder.com/#/home/getting-started) to get a detailed installability report and generate store-ready packages.
skills/quality/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/quality - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/quality --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/quality - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/quality
skills/quality/references/rule.md
- Network accessline 7
--- Content quality is the most significant long-term SEO factor. [Google's people-first content guidance](https://developers.google.com/search/docs/fundamentals/creating-helpful-content) evaluates whether pages provide genuine value to use - Network accessline 8
Content quality is the most significant long-term SEO factor. [Google's people-first content guidance](https://developers.google.com/search/docs/fundamentals/creating-helpful-content) evaluates whether pages provide genuine value to users, - Network accessline 81
Per [Google's people-first content guidance](https://developers.google.com/search/docs/fundamentals/creating-helpful-content), ask:
skills/reading-level/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/reading-level - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/reading-level --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/reading-level - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/reading-level
skills/redirect-chain/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/redirect-chain - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/redirect-chain --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/redirect-chain - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/redirect-chain
skills/redirect-chain/references/rule.md
- Network accessline 25
Redirect chains waste crawl budget, reduce PageRank flow to destination pages, and add latency that harms user experience. [Google's redirect guidance](https://developers.google.com/search/docs/crawling-indexing/301-redirects) is the best b - Network accessline 38
# -L follows redirects; -I shows headers only; shows each hop curl -L -I -v https://example.com/old-url 2>&1 | grep -E "< HTTP|< Location" - Network accessline 39
curl -L -I -v https://example.com/old-url 2>&1 | grep -E "< HTTP|< Location" - Network accessline 41
# Example chain output: # < HTTP/1.1 301 Moved Permanently # < Location: https://example.com/interim - Network accessline 42
# < HTTP/1.1 301 Moved Permanently # < Location: https://example.com/interim # < HTTP/1.1 301 Moved Permanently - Network accessline 43
# < Location: https://example.com/interim - Network accessline 44
# < HTTP/1.1 301 Moved Permanently # < Location: https://example.com/final # < HTTP/1.1 200 OK - Network accessline 45
# < Location: https://example.com/final - Network accessline 49
**Using [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/):** - Network accessline 113
# Confirm single-hop redirect curl -I https://example.com/products/shoes - Network accessline 114
curl -I https://example.com/products/shoes - Network accessline 116
# Expected output (single hop): # HTTP/1.1 301 Moved Permanently # Location: https://example.com/footwear/shoes - Network accessline 118
# Location: https://example.com/footwear/shoes - Network accessline 120
# Then: curl -I https://example.com/footwear/shoes - Network accessline 121
curl -I https://example.com/footwear/shoes
skills/redirect-chains/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/redirect-chains - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/redirect-chains --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/redirect-chains - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/redirect-chains
skills/redirect-chains/references/rule.md
- Network accessline 26
Internal links that point to redirect URLs add latency, waste crawl budget, and pass less PageRank to the destination than a direct link would. [Google's redirect guidance](https://developers.google.com/search/docs/crawling-indexing/301-red - Network accessline 30
**Using [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/):** - Network accessline 37
# Follow redirects and show each hop curl -L -I https://example.com/old-url 2>&1 | grep -E "HTTP|Location" - Network accessline 38
curl -L -I https://example.com/old-url 2>&1 | grep -E "HTTP|Location" - Network accessline 43
# Problem URL (redirect chain): # HTTP/2 301 # Location: https://example.com/intermediate - Network accessline 44
# HTTP/2 301 # Location: https://example.com/intermediate # HTTP/2 301 - Network accessline 45
# Location: https://example.com/intermediate - Network accessline 46
# HTTP/2 301 # Location: https://example.com/new-url # HTTP/2 200 - Network accessline 47
# Location: https://example.com/new-url - Network accessline 76
<!-- ❌ Bad: Sitemap entry points to redirect URL --> <url> <loc>https://example.com/old-category/shoes</loc> - Network accessline 77
<url> <loc>https://example.com/old-category/shoes</loc> </url> - Network accessline 78
<loc>https://example.com/old-category/shoes</loc> - Network accessline 81
<!-- ✅ Good: Sitemap entry points to final URL --> <url> <loc>https://example.com/shoes</loc> - Network accessline 82
<url> <loc>https://example.com/shoes</loc> </url> - Network accessline 83
<loc>https://example.com/shoes</loc>
skills/reduced-motion/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/reduced-motion - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/reduced-motion --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/reduced-motion - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/reduced-motion
skills/redundant-entry/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/redundant-entry - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/redundant-entry --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/redundant-entry - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/redundant-entry
skills/referrer-policy/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/referrer-policy - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/referrer-policy --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/referrer-policy - Network accessline 15
[Credential-related source omitted] - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/referrer-policy
skills/referrer-policy/references/rule.md
- Network accessline 96
<!-- No referrer for this external link --> <a href="https://external.com" referrerpolicy="no-referrer">External</a> - Network accessline 97
<a href="https://external.com" referrerpolicy="no-referrer">External</a> - Network accessline 99
<!-- Send full URL only to same origin --> <a href="https://partner.com/track" referrerpolicy="origin">Partner</a> - Network accessline 100
<a href="https://partner.com/track" referrerpolicy="origin">Partner</a> - Network accessline 102
<!-- No referrer for this image request --> <img src="https://analytics.example.com/pixel.gif" referrerpolicy="no-referrer"> - Network accessline 103
<img src="https://analytics.example.com/pixel.gif" referrerpolicy="no-referrer"> - Network accessline 108
[Credential-related source omitted] - Network accessline 111
[Credential-related source omitted]
skills/render-blocking/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/render-blocking - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/render-blocking --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/render-blocking - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/render-blocking
skills/render-blocking/references/rule.md
- Network accessline 88
The waterfall matters more than the source code here, so validate the route in [PageSpeed Insights](https://pagespeed.web.dev/) or a browser trace after any change to asset ordering. - Network accessline 90
- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) (check for "eliminate-render-blocking-resources") - Network accessline 91
- [PageSpeed Insights](https://pagespeed.web.dev/)
skills/reset-css/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/reset-css - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/reset-css --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/reset-css - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/reset-css
skills/reset-css/references/rule.md
- Network accessline 7
--- A CSS reset or normalization eliminates browser default styles and provides a consistent foundation for custom styling across all browsers and devices. In practice that usually means reaching for [normalize.css](https://github.com/necol - Network accessline 8
A CSS reset or normalization eliminates browser default styles and provides a consistent foundation for custom styling across all browsers and devices. In practice that usually means reaching for [normalize.css](https://github.com/necolas/n - Network accessline 13
/* http://meyerweb.com/eric/tools/css/reset/ - Network accessline 424
/* Modern CSS Reset by Andy Bell */ /* https://piccalil.li/blog/a-modern-css-reset */ - Network accessline 425
/* https://piccalil.li/blog/a-modern-css-reset */ - Network accessline 498
/* CSS Remedy - A fresh approach to CSS resets */ /* https://github.com/mozdevs/cssremedy */ - Network accessline 499
/* https://github.com/mozdevs/cssremedy */ - Network accessline 679
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" /> - Network accessline 1204
// Usage const tester = new CSSResetTester() tester.testReset('https://example.com').then(results => { - Network accessline 1205
const tester = new CSSResetTester() tester.testReset('https://example.com').then(results => { const validation = tester.validateReset(results) - Network accessline 1206
tester.testReset('https://example.com').then(results => { - Network accessline 1225
Choose between [normalize.css](https://github.com/necolas/normalize.css) and [CSS Remedy](https://github.com/jensimmons/cssremedy) based on how much browser default behavior you want to preserve versus flatten.
skills/resource-hints/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/resource-hints - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/resource-hints --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/resource-hints - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/resource-hints
skills/resource-hints/references/rule.md
- Network accessline 7
--- Resource hints are useful when the browser would otherwise discover something too late. [web.dev's performance guidance](https://web.dev/learn/performance) and [Patterns.dev preload/prefetch guidance](https://www.patterns.dev/vanilla/pr - Network accessline 8
Resource hints are useful when the browser would otherwise discover something too late. [web.dev's performance guidance](https://web.dev/learn/performance) and [Patterns.dev preload/prefetch guidance](https://www.patterns.dev/vanilla/preloa - Network accessline 54
<head> <!-- Good: fonts are used in the first viewport --> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 55
<!-- Good: fonts are used in the first viewport --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 56
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 57
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 59
<!-- Good: image CDN serves the hero media --> <link rel="preconnect" href="https://images.example-cdn.com" crossorigin> - Network accessline 60
<link rel="preconnect" href="https://images.example-cdn.com" crossorigin> - Network accessline 62
<!-- Better than preconnect for speculative vendors --> <link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 63
<link rel="dns-prefetch" href="https://analytics.example.com"> - Network accessline 79
<!-- Bad: speculative origins do not deserve early socket setup --> <link rel="preconnect" href="https://chat.example.com"> - Network accessline 80
<link rel="preconnect" href="https://chat.example.com"> - Network accessline 81
<link rel="preconnect" href="https://ads.example.com"> - Network accessline 82
<link rel="preconnect" href="https://social.example.com"> - Network accessline 89
- **Fewer wasted round-trips**: Preconnect can remove DNS, TCP, and TLS setup from the critical path for a small number of known external origins. - **Smoother follow-up actions**: Prefetch can make the next likely route or interaction feel - Network accessline 91
- **Misuse is expensive**: Every unnecessary preload, prefetch, or preconnect competes with more important work for bandwidth, sockets, and parser attention, which is why [PageSpeed Insights](https://pagespeed.web.dev/) is worth checking af - Network accessline 95
The decision rules matter because [Patterns.dev's prefetch guidance](https://www.patterns.dev/vanilla/prefetch/) and real-world waterfall data both show that hinting the wrong asset early can be worse than adding no hint at all. - Network accessline 107
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 113
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 119
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
skills/responsive-images/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/responsive-images - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/responsive-images --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/responsive-images - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/responsive-images
skills/responsive-size/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/responsive-size - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/responsive-size --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/responsive-size - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/responsive-size
skills/responsive-units/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/responsive-units - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/responsive-units --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/responsive-units - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/responsive-units
skills/retina-display/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/retina-display - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/retina-display --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/retina-display - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/retina-display
skills/review/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/review - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/review --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/review - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/review
skills/review/references/rule.md
- Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "Product", - Network accessline 15
"@context": "https://schema.org", - Network accessline 16
"@type": "Product", "name": "Wireless Noise-Cancelling Headphones", "image": "https://example.com/headphones.jpg", - Network accessline 17
"name": "Wireless Noise-Cancelling Headphones", "image": "https://example.com/headphones.jpg", "description": "Premium headphones with 30-hour battery life.", - Network accessline 18
"image": "https://example.com/headphones.jpg", - Network accessline 38
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 39
{ "@context": "https://schema.org", "@type": "Review", - Network accessline 40
"@context": "https://schema.org", - Network accessline 95
Use [Google's Rich Results Test](https://search.google.com/test/rich-results) to confirm:
skills/right-to-erasure/SKILL.md
- Network accessline 8
estimatedTime: "60" source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/right-to-erasure - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/right-to-erasure --- - Network accessline 10
url: https://frontendchecklist.io/rules/privacy/right-to-erasure - Network accessline 45
Rule page: https://frontendchecklist.io/rules/privacy/right-to-erasure
skills/right-to-erasure/references/rule.md
skills/robots-meta-conflict/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/robots-meta-conflict - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/robots-meta-conflict --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/robots-meta-conflict - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/robots-meta-conflict
skills/robots-meta-conflict/references/rule.md
- Network accessline 7
--- A robots.txt `Disallow` rule and a `noindex` meta tag serve different purposes. [Google's robots-meta documentation](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag) makes that distinction explicit, which is - Network accessline 8
A robots.txt `Disallow` rule and a `noindex` meta tag serve different purposes. [Google's robots-meta documentation](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag) makes that distinction explicit, which is why - Network accessline 27
Pages that appear in search results despite your intention to deindex them are usually blocked in robots.txt. Google cannot read the noindex directive it cannot fetch, so [Google Search Console](https://search.google.com/search-console/abou
skills/robots-meta/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/robots-meta - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/robots-meta --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/robots-meta - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/robots-meta
skills/robots-meta/references/rule.md
- Network accessline 7
--- The robots meta tag gives per-page control over indexing and link following, unlike `robots.txt` which operates at the URL path level. [Google's robots-meta guide](https://developers.google.com/search/docs/crawling-indexing/robots-meta- - Network accessline 8
The robots meta tag gives per-page control over indexing and link following, unlike `robots.txt` which operates at the URL path level. [Google's robots-meta guide](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag) - Network accessline 30
An accidental `noindex` on a key landing page silently removes it from search results. Auditing those directives in [Google Search Console](https://search.google.com/search-console/about) is often the quickest way to confirm whether a disap
skills/robots-txt/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/robots-txt - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/robots-txt --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/robots-txt - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/robots-txt
skills/robots-txt/references/rule.md
- Network accessline 18
Sitemap: https://www.example.com/sitemap.xml - Network accessline 59
Sitemap: https://www.example.com/sitemap.xml - Network accessline 86
- Use [Google Search Console](https://search.google.com/search-console/about) → Settings → Robots.txt tester - Fetch `/robots.txt` directly in a browser on the production domain - Network accessline 88
- Use `curl -I "$ORIGIN/robots.txt"` against the live host to confirm the production file returns HTTP 200
skills/runtime-validation/SKILL.md
- Network accessline 1
--- name: runtime-validation description: "Use when reviewing code that calls fetch(), reads from localStorage, accesses process.env, or processes form submissions without explicitly validating the incoming data shape." - Network accessline 2
name: runtime-validation description: "Use when reviewing code that calls fetch(), reads from localStorage, accesses process.env, or processes form submissions without explicitly validating the incoming data shape." metadata: - Network accessline 3
description: "Use when reviewing code that calls fetch(), reads from localStorage, accesses process.env, or processes form submissions without explicitly validating the incoming data shape." - Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/runtime-validation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/runtime-validation --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/runtime-validation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/runtime-validation
skills/runtime-validation/references/rule.md
- Network accessline 7
--- TypeScript types are a compile-time tool. When your code runs in the browser or on a server, every type annotation is gone, which is why libraries like [Zod](https://zod.dev) and [Valibot](https://valibot.dev) exist to validate runtime - Network accessline 8
TypeScript types are a compile-time tool. When your code runs in the browser or on a server, every type annotation is gone, which is why libraries like [Zod](https://zod.dev) and [Valibot](https://valibot.dev) exist to validate runtime data - Network accessline 20
// ❌ Unsafe: we cast the response to our type without checking async function fetchProduct(id: string): Promise { const res = await fetch(`/api/products/${id}`) - Network accessline 21
async function fetchProduct(id: string): Promise { const res = await fetch(`/api/products/${id}`) const data = await res.json() - Network accessline 22
const res = await fetch(`/api/products/${id}`) - Network accessline 34
TypeScript gives you confidence at compile time, but data from the network, user input, and storage arrives at runtime as raw, untyped values. A backend schema change, a misconfigured API, or malicious input can produce data that does not m - Network accessline 53
// 3. Validate at the boundary async function fetchProduct(id: string): Promise { const res = await fetch(`/api/products/${id}`) - Network accessline 54
async function fetchProduct(id: string): Promise { const res = await fetch(`/api/products/${id}`) if (!res.ok) { - Network accessline 55
const res = await fetch(`/api/products/${id}`) - Network accessline 69
async function fetchProducts(): Promise { const res = await fetch('/api/products') - Network accessline 70
const res = await fetch('/api/products') - Network accessline 188
1. Search for every `fetch()` call, `JSON.parse()`, and `localStorage.getItem()` in the codebase and confirm each one passes the result through a Zod `.parse()` or `.safeParse()` call before the data is used. - Network accessline 189
2. Verify that TypeScript types for external data are derived with `z.infer<typeof Schema>` or the equivalent [Valibot](https://valibot.dev) output types rather than written separately — duplicate type definitions drift apart over time.
skills/scheduler-yield/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/scheduler-yield - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/scheduler-yield --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/scheduler-yield - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/scheduler-yield
skills/scheduler-yield/references/rule.md
- Network accessline 66
The [RAIL performance model](https://web.dev/articles/rail) and the INP metric both treat 50 ms as the budget for a single main-thread task. Tasks that exceed 50 ms appear in the Performance panel as "Long Tasks" (red bar) and directly cont - Network accessline 105
A starting point of **50 items per chunk** works well for lightweight per-item work (e.g. DOM reads, object transformations). For heavier per-item work, reduce to 10–20. Measure in the [Chrome DevTools Performance panel](https://developer.c
skills/schema-noindex-conflict/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/schema-noindex-conflict - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/schema-noindex-conflict --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/schema-noindex-conflict - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/schema-noindex-conflict
skills/schema-noindex-conflict/references/rule.md
- Network accessline 34
Investing in rich result schema on pages that are blocked from indexing wastes development effort. [Google's structured data policies](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) make it clear that rich - Network accessline 62
<!-- /products/headphones?color=red --> <link rel="canonical" href="https://example.com/products/headphones"> - Network accessline 63
<link rel="canonical" href="https://example.com/products/headphones"> - Network accessline 72
<!-- Page is indexable: no noindex, not blocked, self-canonical-url --> <head> <link rel="canonical" href="https://example.com/products/headphones"> - Network accessline 73
<head> <link rel="canonical" href="https://example.com/products/headphones"> <!-- No noindex meta tag --> - Network accessline 74
<link rel="canonical" href="https://example.com/products/headphones"> - Network accessline 78
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 79
{ "@context": "https://schema.org", "@type": "Product", - Network accessline 80
"@context": "https://schema.org", - Network accessline 116
- Google Search Console → Rich Results: schema-carrying pages should appear here if indexed - [Google Rich Results Test](https://search.google.com/test/rich-results): run it on the live URL. If the tool reports "not indexable," no rich resu - Network accessline 117
- [Google Rich Results Test](https://search.google.com/test/rich-results): run it on the live URL. If the tool reports "not indexable," no rich result will be generated
skills/screen-reader-testing/SKILL.md
- Network accessline 8
estimatedTime: "60" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/screen-reader-testing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/screen-reader-testing --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/screen-reader-testing - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/screen-reader-testing
skills/screen-reader-testing/references/rule.md
- Network accessline 7
--- Automated accessibility testing catches structural issues in the accessibility tree, but cannot verify whether a page is actually usable by someone relying on a screen reader. [WebAIM's testing guide](https://webaim.org/articles/screenr - Network accessline 8
Automated accessibility testing catches structural issues in the accessibility tree, but cannot verify whether a page is actually usable by someone relying on a screen reader. [WebAIM's testing guide](https://webaim.org/articles/screenreade - Network accessline 20
The [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) is useful for expected widget behavior, but only a real screen reader session can tell you whether that implementation is actually announced and navigable in context.
skills/scrolljacking/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/scrolljacking - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/scrolljacking --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/scrolljacking - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/scrolljacking
skills/search-input/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/search-input - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/search-input --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/search-input - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/search-input
skills/select-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/select-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/select-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/select-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/select-name
skills/semantic-lists/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/semantic-lists - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/semantic-lists --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/semantic-lists - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/semantic-lists
skills/sensory-instructions/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/sensory-instructions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/sensory-instructions --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/sensory-instructions - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/sensory-instructions
skills/service-area/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/service-area - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/service-area --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/service-area - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/service-area
skills/service-area/references/rule.md
- Network accessline 7
--- Service-area pages help businesses rank for location-based searches in cities where they operate but have no physical address. [Google's doorway-page policy](https://developers.google.com/search/docs/essentials/spam-policies#doorway-pag - Network accessline 8
Service-area pages help businesses rank for location-based searches in cities where they operate but have no physical address. [Google's doorway-page policy](https://developers.google.com/search/docs/essentials/spam-policies#doorway-pages) - Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "Plumber", - Network accessline 15
"@context": "https://schema.org", - Network accessline 16
"@type": "Plumber", "name": "Acme Plumbing", "url": "https://acmeplumbing.com", - Network accessline 17
"name": "Acme Plumbing", "url": "https://acmeplumbing.com", "telephone": "+15121234567", - Network accessline 18
"url": "https://acmeplumbing.com", - Network accessline 48
Service-area pages allow businesses to rank for geo-modified queries in areas where they have no physical storefront, but thin templated pages are penalised as doorway pages. [Schema.org's `areaServed`](https://schema.org/areaServed) helps
skills/service-worker/SKILL.md
- Network accessline 8
estimatedTime: "60" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/service-worker - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/service-worker --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/service-worker - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/service-worker
skills/service-worker/references/rule.md
- Network accessline 13
Registration → Download → Install (pre-cache) → Activate (cleanup) → Fetch (intercept) - Network accessline 144
async function cacheFirst(request: Request): Promise { try { const response = await fetch(request) - Network accessline 145
try { const response = await fetch(request) const cache = await caches.open(DYNAMIC_CACHE) - Network accessline 146
const response = await fetch(request) - Network accessline 173
[Workbox](https://developer.chrome.com/docs/workbox) eliminates boilerplate and handles cache versioning, expiration, and background sync automatically.
skills/session-cookie-flags/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/session-cookie-flags - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/session-cookie-flags --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/session-cookie-flags - Network accessline 45
Rule page: https://frontendchecklist.io/rules/security/session-cookie-flags
skills/session-cookie-flags/references/rule.md
- Access to secretsline 82
[Credential-related source omitted] - Access to secretsline 162
[Credential-related source omitted] - Network accessline 183
# Check cookie flags via curl curl -I -s https://example.com/api/login -d '{"email":"test"}' \ - Network accessline 184
curl -I -s https://example.com/api/login -d '{"email":"test"}' \ - Network accessline 208
- Run `curl -I` on the login endpoint and verify the `Set-Cookie` header includes all three flags. - Network accessline 209
- Use [Mozilla Observatory](https://observatory.mozilla.org/) to scan the site and verify the cookie security score. - Access to secretsline 214
[Credential-related source omitted]
skills/session-timeout-recovery/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/session-timeout-recovery - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/session-timeout-recovery --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/session-timeout-recovery - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/session-timeout-recovery
skills/session-timeout-recovery/references/rule.md
- Network accessline 7
--- Authenticated flows should not silently erase work. The [WCAG guidance for timing-adjustable content](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html) treats warning, recovery, and state preservation as part of the sa - Network accessline 8
Authenticated flows should not silently erase work. The [WCAG guidance for timing-adjustable content](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html) treats warning, recovery, and state preservation as part of the same u - Network accessline 55
// Good: preserve work before redirecting to re-authenticate async function submitProtectedDraft(formData: Record<string, string>) { const response = await fetch('/api/secure-submit', { - Network accessline 56
async function submitProtectedDraft(formData: Record<string, string>) { const response = await fetch('/api/secure-submit', { method: 'POST', - Network accessline 57
const response = await fetch('/api/secure-submit', { - Network accessline 72
async function resumeDraftAfterLogin(draftId: string) { const response = await fetch(`/api/drafts/${draftId}`) - Network accessline 73
const response = await fetch(`/api/drafts/${draftId}`) - Network accessline 80
This is not just a convenience issue. The [WCAG guidance around time limits](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html) is about preventing users from losing the context and data they need to complete a task. - Network accessline 102
[Technique G105](https://www.w3.org/WAI/WCAG21/Techniques/general/G105) is a practical recovery pattern when a session expires during a long task. - Network accessline 144
The [timeouts understanding document](https://www.w3.org/WAI/WCAG21/Understanding/timeouts) is a useful baseline here: the policy reason for a timeout may be legitimate, but that does not remove the need to preserve user control where possi - Network accessline 153
Use the [re-authentication guidance](https://www.w3.org/WAI/WCAG22/Understanding/re-authenticating.html) to verify both the warning behavior and the recovery flow, not just the logout timer itself.
skills/share-buttons/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/share-buttons - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/share-buttons --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/share-buttons - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/share-buttons
skills/share-buttons/references/rule.md
- Network accessline 7
--- Social sharing buttons give readers a one-click way to share content to their networks, extending reach beyond organic search. The share endpoints for [X/Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/o - Network accessline 8
Social sharing buttons give readers a one-click way to share content to their networks, extending reach beyond organic search. The share endpoints for [X/Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overv - Network accessline 15
<!-- X (Twitter) --> <a href="https://twitter.com/intent/tweet?text=Article+Title&url=https%3A%2F%2Fexample.com%2Farticle" - Network accessline 16
<a href="https://twitter.com/intent/tweet?text=Article+Title&url=https%3A%2F%2Fexample.com%2Farticle" target="_blank" - Network accessline 17
href="https://twitter.com/intent/tweet?text=Article+Title&url=https%3A%2F%2Fexample.com%2Farticle" - Network accessline 24
<!-- LinkedIn --> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Farticle" - Network accessline 25
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Farticle" target="_blank" - Network accessline 26
href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Farticle" - Network accessline 33
<!-- Facebook --> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle" - Network accessline 34
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle" target="_blank" - Network accessline 35
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle" - Network accessline 42
<!-- WhatsApp --> <a href="https://wa.me/?text=Check%20this%20out%3A%20https%3A%2F%2Fexample.com%2Farticle" - Network accessline 43
<a href="https://wa.me/?text=Check%20this%20out%3A%20https%3A%2F%2Fexample.com%2Farticle" target="_blank" - Network accessline 44
href="https://wa.me/?text=Check%20this%20out%3A%20https%3A%2F%2Fexample.com%2Farticle" - Network accessline 62
const shareLinks = { twitter: `https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageUrl}`, - Network accessline 63
twitter: `https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageUrl}`, - Network accessline 64
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`, - Network accessline 65
facebook: `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`, - Network accessline 84
<meta property="og:title" content="Article Title"> <meta property="og:description" content="A brief description."> <meta property="og:image" content="https://example.com/article-cover.jpg"> - Network accessline 85
<meta property="og:description" content="A brief description."> <meta property="og:image" content="https://example.com/article-cover.jpg"> <meta property="og:url" content="https://example.com/article"> - Network accessline 86
<meta property="og:image" content="https://example.com/article-cover.jpg"> - Network accessline 87
<meta property="og:url" content="https://example.com/article">
skills/sitemap-4xx/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-4xx - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-4xx --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/sitemap-4xx - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/sitemap-4xx
skills/sitemap-4xx/references/rule.md
- Network accessline 7
--- A sitemap is a promise to search engines that the listed URLs are live, canonical-url, and indexable. [Google's sitemap best practices](https://developers.google.com/search/docs/crawling-indexing/sitemaps/best-practices) and your broade - Network accessline 8
A sitemap is a promise to search engines that the listed URLs are live, canonical-url, and indexable. [Google's sitemap best practices](https://developers.google.com/search/docs/crawling-indexing/sitemaps/best-practices) and your broader [s - Network accessline 13
<!-- sitemap.xml still references deleted blog posts --> <url><loc>https://example.com/blog/old-post-deleted</loc></url> - Network accessline 14
<url><loc>https://example.com/blog/old-post-deleted</loc></url> - Network accessline 15
<url><loc>https://example.com/blog/moved-to-new-section</loc></url> - Network accessline 22
Including 4XX URLs in a sitemap signals poor site maintenance to Google, wastes crawl budget on non-existent pages, and generates errors in [Google Search Console](https://search.google.com/search-console/about) that can mask real indexing
skills/sitemap-coverage/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-coverage - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-coverage --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/sitemap-coverage - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/sitemap-coverage
skills/sitemap-coverage/references/rule.md
- Network accessline 7
--- Sitemap coverage measures how well your sitemap represents the pages you want indexed. [Google's sitemap best practices](https://developers.google.com/search/docs/crawling-indexing/sitemaps/best-practices) and your [noindex-in-sitemap p - Network accessline 8
Sitemap coverage measures how well your sitemap represents the pages you want indexed. [Google's sitemap best practices](https://developers.google.com/search/docs/crawling-indexing/sitemaps/best-practices) and your [noindex-in-sitemap polic - Network accessline 13
<!-- sitemap.xml includes a noindex page — wrong --> <url> <loc>https://example.com/thank-you</loc> - Network accessline 14
<url> <loc>https://example.com/thank-you</loc> </url> - Network accessline 15
<loc>https://example.com/thank-you</loc> - Network accessline 28
Pages absent from the sitemap rely entirely on crawl discovery via links, which can delay indexing of new content, especially on large sites or pages with few inbound links. [Google Search Console](https://search.google.com/search-console/a - Network accessline 54
const posts = await fetchPublishedPosts() // Only published posts return posts.map(post => ({ url: `https://example.com/blog/${post.slug}`, - Network accessline 55
return posts.map(post => ({ url: `https://example.com/blog/${post.slug}`, lastModified: post.updatedAt, - Network accessline 56
url: `https://example.com/blog/${post.slug}`,
skills/sitemap-domain/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-domain - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-domain --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/sitemap-domain - Network accessline 19
- Every `<loc>` URL must use the same domain and protocol (`https://www.example.com`) as the sitemap file itself - Network accessline 20
- Cross-domain URLs in a sitemap are ignored by Google - Mixing `http://` and `https://` URLs in one sitemap creates conflicting signals - Mixing `www` and non-`www` variants indicates a canonicalization issue to fix first - Network accessline 21
- Mixing `http://` and `https://` URLs in one sitemap creates conflicting signals - Network accessline 30
Update all `<loc>` URLs to use the canonical-url protocol and hostname. If the site is on `https://www.example.com`, every sitemap URL must start with `https://www.example.com/`. Regenerate and resubmit the sitemap. - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/sitemap-domain
skills/sitemap-domain/references/rule.md
- Network accessline 14
<url> <loc>https://old-domain.com/page</loc> <!-- Wrong domain — ignored --> - Network accessline 15
<loc>https://old-domain.com/page</loc> <!-- Wrong domain — ignored --> - Network accessline 16
</url> <url> <loc>http://www.example.com/page</loc> <!-- Wrong protocol — inconsistent --> - Network accessline 17
<url> <loc>http://www.example.com/page</loc> <!-- Wrong protocol — inconsistent --> </url> - Network accessline 18
<loc>http://www.example.com/page</loc> <!-- Wrong protocol — inconsistent --> - Network accessline 19
</url> <url> <loc>https://example.com/page</loc> <!-- Missing www — canonicalization issue --> - Network accessline 20
<url> <loc>https://example.com/page</loc> <!-- Missing www — canonicalization issue --> </url> - Network accessline 21
<loc>https://example.com/page</loc> <!-- Missing www — canonicalization issue --> - Network accessline 31
- All `<loc>` values must match the domain of the sitemap file itself - All URLs must use the same protocol (`https://`) - Network accessline 32
- All URLs must use the same protocol (`https://`) - Network accessline 38
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 39
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 40
<url> <loc>https://www.example.com/</loc> </url> - Network accessline 41
<loc>https://www.example.com/</loc> - Network accessline 42
</url> <url> <loc>https://www.example.com/about</loc> - Network accessline 43
<url> <loc>https://www.example.com/about</loc> </url> - Network accessline 44
<loc>https://www.example.com/about</loc> - Network accessline 45
</url> <url> <loc>https://www.example.com/blog/my-post</loc> - Network accessline 46
<url> <loc>https://www.example.com/blog/my-post</loc> </url> - Network accessline 47
<loc>https://www.example.com/blog/my-post</loc> - Network accessline 74
module.exports = { env: { NEXT_PUBLIC_SITE_URL: 'https://www.example.com', - Network accessline 75
env: { NEXT_PUBLIC_SITE_URL: 'https://www.example.com', }, - Network accessline 76
NEXT_PUBLIC_SITE_URL: 'https://www.example.com',
skills/sitemap-valid/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-valid - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap-valid --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/sitemap-valid - Network accessline 26
Fetch the sitemap and validate it against the sitemaps.org schema. Check that the `xmlns` attribute is `http://www.sitemaps.org/schemas/sitemap/0.9`, all `<loc>` values are absolute URLs, no file exceeds 50,000 URLs or 50 MB, and special ch - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/sitemap-valid
skills/sitemap-valid/references/rule.md
- Network accessline 13
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 14
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 15
<url> <loc>https://www.example.com/page/</loc> <lastmod>2025-03-01</lastmod> - Network accessline 16
<loc>https://www.example.com/page/</loc> - Network accessline 49
<!-- Correct --> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 50
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 56
<!-- Wrong — XML parse error --> <loc>https://example.com/search?q=shoes&color=red</loc> - Network accessline 57
<loc>https://example.com/search?q=shoes&color=red</loc> - Network accessline 59
<!-- Correct --> <loc>https://example.com/search?q=shoes&color=red</loc> - Network accessline 60
<loc>https://example.com/search?q=shoes&color=red</loc> - Network accessline 69
<!-- Correct --> <loc>https://www.example.com/about</loc> - Network accessline 70
<loc>https://www.example.com/about</loc> - Network accessline 78
<?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 79
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 80
<sitemap> <loc>https://www.example.com/sitemap-1.xml</loc> </sitemap> - Network accessline 81
<loc>https://www.example.com/sitemap-1.xml</loc> - Network accessline 82
</sitemap> <sitemap> <loc>https://www.example.com/sitemap-2.xml</loc> - Network accessline 83
<sitemap> <loc>https://www.example.com/sitemap-2.xml</loc> </sitemap> - Network accessline 84
<loc>https://www.example.com/sitemap-2.xml</loc> - Network accessline 91
- [Google Search Console](https://search.google.com/search-console/about) → Sitemaps (shows processing errors) - Network accessline 92
- [XML Sitemap Validator](https://www.xml-sitemaps.com/validate-xml-sitemap.html)
skills/sitemap/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/sitemap --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/sitemap - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/sitemap
skills/sitemap/references/rule.md
- Network accessline 13
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 14
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 15
<url> <loc>https://example.com/</loc> <lastmod>2024-01-15</lastmod> - Network accessline 16
<loc>https://example.com/</loc> - Network accessline 20
</url> <url> <loc>https://example.com/about</loc> - Network accessline 21
<url> <loc>https://example.com/about</loc> <lastmod>2024-01-10</lastmod> - Network accessline 22
<loc>https://example.com/about</loc> - Network accessline 48
const baseUrl = 'https://example.com' - Network accessline 88
<?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 89
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> - Network accessline 90
<sitemap> <loc>https://example.com/sitemap-pages.xml</loc> <lastmod>2024-01-15</lastmod> - Network accessline 91
<loc>https://example.com/sitemap-pages.xml</loc> - Network accessline 93
</sitemap> <sitemap> <loc>https://example.com/sitemap-products.xml</loc> - Network accessline 94
<sitemap> <loc>https://example.com/sitemap-products.xml</loc> <lastmod>2024-01-14</lastmod> - Network accessline 95
<loc>https://example.com/sitemap-products.xml</loc> - Network accessline 97
</sitemap> <sitemap> <loc>https://example.com/sitemap-blog.xml</loc> - Network accessline 98
<sitemap> <loc>https://example.com/sitemap-blog.xml</loc> <lastmod>2024-01-13</lastmod> - Network accessline 99
<loc>https://example.com/sitemap-blog.xml</loc> - Network accessline 116
id: number }): Promise ({ url: `https://example.com/products/${product.slug}`, - Network accessline 117
}): Promise ({ url: `https://example.com/products/${product.slug}`, lastModified: product.updatedAt, - Network accessline 118
url: `https://example.com/products/${product.slug}`, - Network accessline 141
Sitemap: https://example.com/sitemap.xml - Network accessline 147
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" - Network accessline 148
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" - Network accessline 149
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> - Network accessline 150
<url> <loc>https://example.com/products/widget</loc> <image:image> - Network accessline 151
<loc>https://example.com/products/widget</loc> - Network accessline 152
<image:image> <image:loc>https://example.com/images/widget.jpg</image:loc> <image:title>Widget Product Photo</image:title> - Network accessline 153
<image:loc>https://example.com/images/widget.jpg</image:loc> - Network accessline 155
</image:image> <image:image> <image:loc>https://example.com/images/widget-side.jpg</image:loc> - Network accessline 156
<image:image> <image:loc>https://example.com/images/widget-side.jpg</image:loc> <image:title>Widget Side View</image:title> - Network accessline 157
<image:loc>https://example.com/images/widget-side.jpg</image:loc> - Network accessline 167
# Google Search Console # 1. Go to https://search.google.com/search-console - Network accessline 168
# 1. Go to https://search.google.com/search-console - Network accessline 173
# Bing Webmaster Tools # 1. Go to https://www.bing.com/webmasters - Network accessline 174
# 1. Go to https://www.bing.com/webmasters - Network accessline 177
# Programmatic submission (ping) curl "https://www.google.com/ping?sitemap=https://example.com/sitemap.xml" - Network accessline 178
curl "https://www.google.com/ping?sitemap=https://example.com/sitemap.xml" - Network accessline 179
curl "https://www.bing.com/ping?sitemap=https://example.com/sitemap.xml"
skills/skip-link/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/skip-link - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/skip-link --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/skip-link - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/skip-link
skills/skip-navigation/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/skip-navigation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/skip-navigation --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/skip-navigation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/skip-navigation
skills/slug-keywords/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/slug-keywords - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/slug-keywords --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/slug-keywords - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/slug-keywords
skills/slug-keywords/references/rule.md
- Network accessline 21
Descriptive URL slugs help users and search engines understand page content before visiting. [Google's URL structure guidance](https://developers.google.com/search/docs/crawling-indexing/url-structure) treats those words as a lightweight re
skills/social-profiles/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/social-profiles - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/social-profiles --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/social-profiles - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/social-profiles
skills/social-profiles/references/rule.md
- Network accessline 7
--- Linking to your organization's social media profiles helps search engines connect your website to your brand entity across the web. [Schema.org's `sameAs`](https://schema.org/sameAs) and [Organization structured data](https://developers - Network accessline 8
Linking to your organization's social media profiles helps search engines connect your website to your brand entity across the web. [Schema.org's `sameAs`](https://schema.org/sameAs) and [Organization structured data](https://developers.goo - Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "Organization", - Network accessline 15
"@context": "https://schema.org", - Network accessline 16
"@type": "Organization", "name": "Acme Inc.", "url": "https://www.acme.com", - Network accessline 17
"name": "Acme Inc.", "url": "https://www.acme.com", "logo": "https://www.acme.com/logo.png", - Network accessline 18
"url": "https://www.acme.com", - Network accessline 19
"logo": "https://www.acme.com/logo.png", - Network accessline 20
"sameAs": [ "https://www.linkedin.com/company/acme-inc", "https://twitter.com/AcmeInc", - Network accessline 21
"https://www.linkedin.com/company/acme-inc", - Network accessline 22
"https://twitter.com/AcmeInc", - Network accessline 23
"https://www.facebook.com/AcmeInc", - Network accessline 24
"https://www.youtube.com/@AcmeInc", - Network accessline 25
"https://github.com/acme-inc" - Network accessline 38
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 39
{ "@context": "https://schema.org", "@type": "Person", - Network accessline 40
"@context": "https://schema.org", - Network accessline 41
"@type": "Person", "name": "Jane Smith", "url": "https://janesmith.dev", - Network accessline 42
"name": "Jane Smith", "url": "https://janesmith.dev", "sameAs": [ - Network accessline 43
"url": "https://janesmith.dev", - Network accessline 44
"sameAs": [ "https://twitter.com/janesmith", "https://www.linkedin.com/in/janesmith", - Network accessline 45
"https://twitter.com/janesmith", - Network accessline 46
"https://www.linkedin.com/in/janesmith", - Network accessline 47
"https://github.com/janesmith" - Network accessline 56
<footer> <nav aria-label="Social media profiles"> <a href="https://www.linkedin.com/company/acme" rel="noopener" target="_blank"> - Network accessline 57
<nav aria-label="Social media profiles"> <a href="https://www.linkedin.com/company/acme" rel="noopener" target="_blank"> LinkedIn - Network accessline 58
<a href="https://www.linkedin.com/company/acme" rel="noopener" target="_blank"> - Network accessline 59
LinkedIn </a> <a href="https://twitter.com/AcmeInc" rel="noopener" target="_blank"> - Network accessline 60
</a> <a href="https://twitter.com/AcmeInc" rel="noopener" target="_blank"> X (Twitter) - Network accessline 61
<a href="https://twitter.com/AcmeInc" rel="noopener" target="_blank"> - Network accessline 62
X (Twitter) </a> <a href="https://www.facebook.com/AcmeInc" rel="noopener" target="_blank"> - Network accessline 63
</a> <a href="https://www.facebook.com/AcmeInc" rel="noopener" target="_blank"> Facebook - Network accessline 64
<a href="https://www.facebook.com/AcmeInc" rel="noopener" target="_blank">
skills/source-maps/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/source-maps - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/source-maps --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/source-maps - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/source-maps
skills/source-maps/references/rule.md
- Network accessline 54
Keep source-map verification tied to the real error-reporting path, because [Sentry’s source map docs](https://docs.sentry.io/platforms/javascript/sourcemaps/) or your tracker’s upload flow matter more than whether the map file exists local - Network accessline 56
- [Sentry Source Map Documentation](https://docs.sentry.io/platforms/javascript/sourcemaps/)
skills/special-chars/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/special-chars - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/special-chars --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/special-chars - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/special-chars
skills/special-chars/references/rule.md
- Network accessline 7
--- URL characters fall into two categories in [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986): **unreserved** characters are safe as-is, while **reserved** characters have special meaning and must be encoded when used literally i - Network accessline 8
URL characters fall into two categories in [RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986): **unreserved** characters are safe as-is, while **reserved** characters have special meaning and must be encoded when used literally in pa - Network accessline 18
Special characters in URL paths cause inconsistent crawling, broken links when shared, and canonicalization failures when different systems encode them differently. [MDN's percent-encoding reference](https://developer.mozilla.org/en-US/docs
skills/specificity-management/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/specificity-management - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/specificity-management --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/specificity-management - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/specificity-management
skills/speculation-rules/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/speculation-rules - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/speculation-rules --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/speculation-rules - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/speculation-rules
skills/speculation-rules/references/rule.md
- Network accessline 201
Keep speculation conservative and follow [MDN's Speculation Rules API guidance](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API), because prerendering the wrong destination can waste bandwidth or trigger side effects
skills/sprite-generation/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/sprite-generation - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/sprite-generation --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/sprite-generation - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/sprite-generation
skills/sprite-generation/references/rule.md
- Network accessline 56
<!-- SVG sprite file (icons.svg) --> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - Network accessline 57
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - Network accessline 139
return ( <svg xmlns="http://www.w3.org/2000/svg" - Network accessline 140
<svg xmlns="http://www.w3.org/2000/svg" style={{ position: 'absolute', width: 0, height: 0 }} - Network accessline 141
xmlns="http://www.w3.org/2000/svg"
skills/srcset/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/srcset - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/srcset --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/srcset - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/srcset
skills/srcset/references/rule.md
- Network accessline 182
- Run Lighthouse — "Use responsive images" and "Properly size images" audits flag missing srcset - Use [RespImageLint](https://ausi.github.io/respimagelint/) bookmarklet — reports which srcset candidate the browser selected vs what was opti - Network accessline 183
- Use [RespImageLint](https://ausi.github.io/respimagelint/) bookmarklet — reports which srcset candidate the browser selected vs what was optimal
skills/stack-trace-exposure/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/stack-trace-exposure - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/stack-trace-exposure --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/stack-trace-exposure - Network accessline 45
Rule page: https://frontendchecklist.io/rules/security/stack-trace-exposure
skills/stack-trace-exposure/references/rule.md
- Network accessline 7
--- When something goes wrong on the server, the full error detail is essential for debugging, but the [OWASP Error Handling Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Error_Handling_Cheat_Sheet.html) is explicit that it be - Network accessline 8
When something goes wrong on the server, the full error detail is essential for debugging, but the [OWASP Error Handling Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Error_Handling_Cheat_Sheet.html) is explicit that it belong - Network accessline 30
Stack traces reveal file paths, function names, library versions, and sometimes database schema or configuration details. An attacker uses this information to identify the exact version of a framework or ORM, look up known CVEs for that ver - Network accessline 254
1. Trigger a deliberate 500 error in production (or a production-like staging environment) and confirm the response body contains only a generic message and a correlation ID — no stack, no file paths. 2. Search the codebase for patterns lik - Network accessline 255
2. Search the codebase for patterns like `res.json(error)`, `res.send(err.stack)`, and `JSON.stringify(error)` in route handlers, and confirm each is guarded in the way the [OWASP Error Handling Cheat Sheet](https://cheatsheetseries.owasp.o
skills/stop-words/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/stop-words - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/stop-words --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/stop-words - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/stop-words
skills/stop-words/references/rule.md
- Network accessline 7
--- Stop words are common function words that carry little semantic weight: articles (a, an, the), prepositions (of, in, for, to, on), and conjunctions (and, but, or). In URL slugs, they add length without improving relevance signals, so th - Network accessline 8
Stop words are common function words that carry little semantic weight: articles (a, an, the), prepositions (of, in, for, to, on), and conjunctions (and, but, or). In URL slugs, they add length without improving relevance signals, so this r
skills/streaming-html/SKILL.md
- Network accessline 8
estimatedTime: "45" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/streaming-html - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/streaming-html --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/streaming-html - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/streaming-html
skills/streaming-html/references/rule.md
- Network accessline 224
Use [WebPageTest](https://www.webpagetest.org/) or an equivalent waterfall trace to confirm the shell HTML actually arrives before the slow data completes, because streaming only helps when the browser receives and starts parsing that first
skills/structured-data/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/structured-data - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/structured-data --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/structured-data - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/structured-data
skills/structured-data/references/rule.md
- Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "Product", - Network accessline 15
"@context": "https://schema.org", - Network accessline 17
"name": "Executive Widget", "description": "Premium quality widget for professionals", "image": "https://example.com/images/widget.jpg", - Network accessline 18
"description": "Premium quality widget for professionals", "image": "https://example.com/images/widget.jpg", "offers": { - Network accessline 19
"image": "https://example.com/images/widget.jpg", - Network accessline 22
"price": "49.99", "priceCurrency": "USD", "availability": "https://schema.org/InStock" - Network accessline 23
"priceCurrency": "USD", "availability": "https://schema.org/InStock" } - Network accessline 24
"availability": "https://schema.org/InStock" - Network accessline 67
}: ArticleSchemaProps) { const schema = { '@context': 'https://schema.org', - Network accessline 68
const schema = { '@context': 'https://schema.org', '@type': 'Article', - Network accessline 69
'@context': 'https://schema.org', - Network accessline 83
logo: { '@type': 'ImageObject', url: 'https://example.com/logo.png', - Network accessline 84
'@type': 'ImageObject', url: 'https://example.com/logo.png', }, - Network accessline 85
url: 'https://example.com/logo.png', - Network accessline 129
}: ProductSchemaProps) { const schema: any = { '@context': 'https://schema.org', - Network accessline 130
const schema: any = { '@context': 'https://schema.org', '@type': 'Product', - Network accessline 131
'@context': 'https://schema.org', - Network accessline 140
price: price.toFixed(2), priceCurrency: currency, availability: `https://schema.org/${availability}`, - Network accessline 141
priceCurrency: currency, availability: `https://schema.org/${availability}`, }, - Network accessline 142
availability: `https://schema.org/${availability}`, - Network accessline 171
const schema = { '@context': 'https://schema.org', - Network accessline 172
'@context': 'https://schema.org', - Network accessline 201
const schema = { '@context': 'https://schema.org', - Network accessline 202
'@context': 'https://schema.org', - Network accessline 225
const schema = { '@context': 'https://schema.org', - Network accessline 226
'@context': 'https://schema.org', - Network accessline 227
'@type': 'Organization', name: 'Example Company', url: 'https://example.com', - Network accessline 228
name: 'Example Company', url: 'https://example.com', logo: 'https://example.com/logo.png', - Network accessline 229
url: 'https://example.com', - Network accessline 230
logo: 'https://example.com/logo.png', - Network accessline 235
}, sameAs: [ 'https://twitter.com/example', - Network accessline 236
sameAs: [ 'https://twitter.com/example', 'https://www.linkedin.com/company/example', - Network accessline 237
'https://twitter.com/example', - Network accessline 238
'https://www.linkedin.com/company/example', - Network accessline 239
'https://github.com/example', - Network accessline 284
- Use [Google Rich Results Test](https://search.google.com/test/rich-results)
skills/styles-lint/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/styles-lint - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/styles-lint --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/styles-lint - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/styles-lint
skills/subgrid/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/subgrid - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/subgrid --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/subgrid - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/subgrid
skills/subgrid/references/rule.md
- Network accessline 7
--- [CSS subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) allows a nested grid container to inherit the track definitions of its parent grid. The [web.dev subgrid guide](https://web.dev/articles/css-subgrid - Network accessline 8
[CSS subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) allows a nested grid container to inherit the track definitions of its parent grid. The [web.dev subgrid guide](https://web.dev/articles/css-subgrid) is - Network accessline 181
Use [`Can I Use`](https://caniuse.com/css-subgrid) and `@supports` to provide a fallback for older environments if needed: - Network accessline 208
Use the [MDN subgrid guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) and [`Can I Use`](https://caniuse.com/css-subgrid) as the baseline when checking alignment across browsers.
skills/subresource-integrity/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/subresource-integrity - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/subresource-integrity --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/subresource-integrity - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/subresource-integrity
skills/subresource-integrity/references/rule.md
- Network accessline 12
<!-- ✅ Script with SRI --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" - Network accessline 13
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs" - Network accessline 14
src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" - Network accessline 20
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" - Network accessline 21
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXholtQVC+W5F5HFE2H7seCPUZOHkG8J0g==" - Network accessline 22
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" - Network accessline 40
# Or from a URL curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A - Network accessline 41
curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A - Network accessline 50
<!-- Provide multiple hashes for forward compatibility --> <script src="https://cdn.example.com/app.js" - Network accessline 51
<script src="https://cdn.example.com/app.js" integrity="sha256-abc123... sha384-xyz789..." - Network accessline 52
src="https://cdn.example.com/app.js" - Network accessline 92
<!-- From cdnjs.cloudflare.com — hash provided by the CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" - Network accessline 93
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" - Network accessline 94
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
skills/svg-inline/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/svg-inline - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/svg-inline --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/svg-inline - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/svg-inline
skills/svg-inline/references/rule.md
- Network accessline 12
<!-- ❌ Bad: Unoptimised inline SVG with editor artefacts --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - Network accessline 13
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - Network accessline 22
<!-- ✅ Good: SVGO-optimised inline SVG --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> - Network accessline 23
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> - Network accessline 69
<!-- sprites.svg — referenced once, hidden from view --> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - Network accessline 70
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
skills/svg-optimization/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/svg-optimization - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/svg-optimization --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/svg-optimization - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/svg-optimization
skills/svg-optimization/references/rule.md
- Network accessline 151
1. Go to https://jakearchibald.github.io/svgomg/ - Network accessline 162
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 26.0.0 --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" - Network accessline 163
<!-- Generator: Adobe Illustrator 26.0.0 --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - Network accessline 164
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" - Network accessline 165
xmlns:xlink="http://www.w3.org/1999/xlink" - Network accessline 175
<!-- After: Optimized --> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - Network accessline 176
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
skills/tabindex/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/tabindex - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/tabindex --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/tabindex - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/tabindex
skills/table-duplicate-name/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/table-duplicate-name - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/table-duplicate-name --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/table-duplicate-name - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/table-duplicate-name
skills/table-headers/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/table-headers - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/table-headers --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/table-headers - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/table-headers
skills/tabs-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/tabs-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/tabs-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/tabs-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/tabs-accessibility
skills/td-headers-attr/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/td-headers-attr - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/td-headers-attr --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/td-headers-attr - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/td-headers-attr
skills/tel-mailto/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/tel-mailto - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/tel-mailto --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/tel-mailto - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/tel-mailto
skills/tel-mailto/references/rule.md
- Network accessline 7
--- The `tel:` and `mailto:` URI schemes are standard HTML link types that invoke native device capabilities such as the phone dialer and email client. [RFC 3966](https://www.rfc-editor.org/info/rfc3966/) defines the `tel:` syntax, and the - Network accessline 8
The `tel:` and `mailto:` URI schemes are standard HTML link types that invoke native device capabilities such as the phone dialer and email client. [RFC 3966](https://www.rfc-editor.org/info/rfc3966/) defines the `tel:` syntax, and the same - Network accessline 45
On mobile devices, `tel:` and `mailto:` links trigger the native phone dialer and email client with one tap; plain-text contact info forces copy-paste and measurably reduces contact conversion rates. [MDN's tel-link reference](https://devel
skills/terms-of-service/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/terms-of-service - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/terms-of-service --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/terms-of-service - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/terms-of-service
skills/terms-of-service/references/rule.md
- Network accessline 7
--- Terms of Service (ToS), also called Terms and Conditions or Terms of Use, define the legal relationship between your service and its users. They sit alongside disclosures users reasonably need before acting, which is why both the [FTC d - Network accessline 8
Terms of Service (ToS), also called Terms and Conditions or Terms of Use, define the legal relationship between your service and its users. They sit alongside disclosures users reasonably need before acting, which is why both the [FTC discl - Network accessline 99
https://example.com/terms - Network accessline 100
https://example.com/terms-of-service - Network accessline 101
https://example.com/legal/terms
skills/test-coverage/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/test-coverage - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/test-coverage --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/test-coverage - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/test-coverage
skills/text-expansion/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/text-expansion - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/i18n/text-expansion --- - Network accessline 10
url: https://frontendchecklist.io/rules/i18n/text-expansion - Network accessline 46
Rule page: https://frontendchecklist.io/rules/i18n/text-expansion
skills/text-in-images/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/text-in-images - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/text-in-images --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/text-in-images - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/text-in-images
skills/text-resizing/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/text-resizing - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/text-resizing --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/text-resizing - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/text-resizing
skills/text-resizing/references/rule.md
- Network accessline 7
--- Text must be resizable to 200% without loss of content or functionality for users with low vision. [WCAG 1.4.4 Resize Text](https://www.w3.org/TR/WCAG21/#resize-text), its [Understanding document](https://www.w3.org/WAI/WCAG21/Understan - Network accessline 8
Text must be resizable to 200% without loss of content or functionality for users with low vision. [WCAG 1.4.4 Resize Text](https://www.w3.org/TR/WCAG21/#resize-text), its [Understanding document](https://www.w3.org/WAI/WCAG21/Understanding
skills/th-has-data-cells/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/th-has-data-cells - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/th-has-data-cells --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/th-has-data-cells - Network accessline 44
Rule page: https://frontendchecklist.io/rules/accessibility/th-has-data-cells
skills/third-party-cookies/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/third-party-cookies - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/privacy/third-party-cookies --- - Network accessline 10
url: https://frontendchecklist.io/rules/privacy/third-party-cookies - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/privacy/third-party-cookies
skills/third-party-cookies/references/rule.md
- Access to secretsline 15
[Credential-related source omitted] - Network accessline 43
### curl Audit - Network accessline 46
# Check for Set-Cookie headers from a page's resources curl -sI https://tracker.example.com/pixel.gif | grep -i set-cookie - Network accessline 47
curl -sI https://tracker.example.com/pixel.gif | grep -i set-cookie - Network accessline 77
<!-- Plausible Analytics — no cookies, no cross-site tracking --> <script defer data-domain="example.com" src="https://plausible.io/js/script.js"></script> - Network accessline 78
<script defer data-domain="example.com" src="https://plausible.io/js/script.js"></script> - Network accessline 80
<!-- Fathom Analytics — GDPR compliant, no cookies --> <script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script> - Network accessline 81
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script> - Network accessline 87
❌ Sets third-party tracking cookies <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe> - Network accessline 88
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe> - Network accessline 90
✅ Privacy-enhanced mode — no tracking cookies until play <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"></iframe> - Network accessline 91
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"></iframe>
skills/third-party-scripts/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/third-party-scripts - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/third-party-scripts --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/third-party-scripts - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/third-party-scripts
skills/third-party-scripts/references/rule.md
- Network accessline 16
<!-- Bad: parser-blocking third parties --> <head> <script src="https://analytics.example.com/track.js"></script> - Network accessline 17
<head> <script src="https://analytics.example.com/track.js"></script> <script src="https://chat.example.com/widget.js"></script> - Network accessline 18
<script src="https://analytics.example.com/track.js"></script> - Network accessline 19
<script src="https://chat.example.com/widget.js"></script> - Network accessline 20
<script src="https://reviews.example.com/embed.js"></script> - Network accessline 23
<!-- Better: independent scripts do not block parsing --> <head> <script src="https://analytics.example.com/track.js" async></script> - Network accessline 24
<head> <script src="https://analytics.example.com/track.js" async></script> <script src="https://reviews.example.com/embed.js" defer></script> - Network accessline 25
<script src="https://analytics.example.com/track.js" async></script> - Network accessline 26
<script src="https://reviews.example.com/embed.js" defer></script> - Network accessline 42
const script = document.createElement('script') script.src = 'https://chat.example.com/widget.js' - Network accessline 43
script.src = 'https://chat.example.com/widget.js' - Network accessline 62
iframe.width = '560' iframe.height = '315' iframe.src = `https://www.youtube.com/embed/${target.dataset.videoId}?autoplay=1` - Network accessline 63
iframe.height = '315' iframe.src = `https://www.youtube.com/embed/${target.dataset.videoId}?autoplay=1` iframe.title = 'Product demo' - Network accessline 64
iframe.src = `https://www.youtube.com/embed/${target.dataset.videoId}?autoplay=1` - Network accessline 109
Use [PageSpeed Insights](https://pagespeed.web.dev/) or a trace to decide which vendors really belong in the initial route, because the right strategy depends on the measured cost of each script, not just on how important the integration fe - Network accessline 150
Re-check the page with [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) or a third-party-code trace after every vendor change so you can confirm the route actually got lighter.
skills/title-unique/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/title-unique - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/title-unique --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/title-unique - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/title-unique
skills/title-unique/references/rule.md
- Network accessline 7
--- The `<title>` tag is the primary on-page signal for what a page is about. [Google's title link guidance](https://developers.google.com/search/docs/appearance/title-link) makes it clear that duplicate titles tell search engines multiple - Network accessline 8
The `<title>` tag is the primary on-page signal for what a page is about. [Google's title link guidance](https://developers.google.com/search/docs/appearance/title-link) makes it clear that duplicate titles tell search engines multiple page - Network accessline 28
Duplicate titles prevent Google from determining which page is the authoritative result for a given query, splitting ranking signals and reducing total organic visibility. They also make it harder to write a strong [page title strategy](/en
skills/token-storage-security/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/token-storage-security - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/token-storage-security --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/token-storage-security - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/token-storage-security
skills/token-storage-security/references/rule.md
- Network accessline 7
--- Where you store authentication credentials determines your entire XSS attack surface. [HTTP cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and browser storage APIs do not offer the same guarantees, and the [OWASP Se - Network accessline 8
[Credential-related source omitted] - Access to secretsline 8
[Credential-related source omitted] - Network accessline 11
[Credential-related source omitted] - Access to secretsline 11
[Credential-related source omitted] - Access to secretsline 33
[Credential-related source omitted] - Access to secretsline 59
[Credential-related source omitted] - Access to secretsline 107
[Credential-related source omitted] - Access to secretsline 126
[Credential-related source omitted] - Access to secretsline 140
[Credential-related source omitted] - Access to secretsline 189
[Credential-related source omitted] - Network accessline 206
await fetch('/api/transfer', { - Access to secretsline 231
[Credential-related source omitted]
skills/touch-targets/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/touch-targets - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/touch-targets --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/touch-targets - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/touch-targets
skills/touch-targets/references/rule.md
- Network accessline 7
--- Touch targets are the portions of the screen that respond to user input. [WCAG 2.2 Target Size (Minimum)](https://www.w3.org/TR/WCAG22/#target-size-minimum), the older [WCAG 2.5.5 target size guidance](https://www.w3.org/TR/WCAG21/#targ - Network accessline 8
Touch targets are the portions of the screen that respond to user input. [WCAG 2.2 Target Size (Minimum)](https://www.w3.org/TR/WCAG22/#target-size-minimum), the older [WCAG 2.5.5 target size guidance](https://www.w3.org/TR/WCAG21/#target-s - Network accessline 72
This pattern still needs to satisfy [WCAG 2.5.8 Target Size (Minimum)](https://www.w3.org/TR/WCAG22/#target-size-minimum), so the stretched clickable area should be intentional rather than visually implied.
skills/trailing-slash/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/trailing-slash - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/trailing-slash --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/trailing-slash - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/trailing-slash
skills/trailing-slash/references/rule.md
- Network accessline 71
<!-- On https://example.com/about (preferred) --> - Network accessline 72
<link rel="canonical" href="https://example.com/about"> - Network accessline 74
<!-- If the trailing slash version also serves: --> <!-- On https://example.com/about/ --> - Network accessline 75
<!-- On https://example.com/about/ --> - Network accessline 76
<link rel="canonical" href="https://example.com/about"> - Network accessline 82
<!-- Canonical points to trailing slash but all internal links omit it --> <link rel="canonical" href="https://example.com/about/"> - Network accessline 83
<link rel="canonical" href="https://example.com/about/"> - Network accessline 86
<!-- Sitemap mixes conventions --> <loc>https://example.com/about</loc> - Network accessline 87
<loc>https://example.com/about</loc> - Network accessline 88
<loc>https://example.com/contact/</loc> - Network accessline 94
curl -I https://example.com/about - Network accessline 95
curl -I https://example.com/about/
skills/translation-strings/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/translation-strings - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/translation-strings --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/translation-strings - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/translation-strings
skills/translation-strings/references/rule.md
- Network accessline 7
--- Internationalised strings are more than translated text — they are message templates that the i18n library fills with runtime values. [ICU MessageFormat](https://unicode-org.github.io/icu/userguide/format_parse/messages/) and [`Intl.Plu - Network accessline 8
Internationalised strings are more than translated text — they are message templates that the i18n library fills with runtime values. [ICU MessageFormat](https://unicode-org.github.io/icu/userguide/format_parse/messages/) and [`Intl.PluralR - Network accessline 102
### [react-i18next](https://react.i18next.com/) (i18next plurals) - Network accessline 228
1. Search the codebase for patterns like `t('key') + ` or `` `${t('key')}` `` — all occurrences should be replaced with placeholder interpolation as described by [ICU MessageFormat](https://unicode-org.github.io/icu/userguide/format_parse/m
skills/trust-signals/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/trust-signals - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/trust-signals --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/trust-signals - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/trust-signals
skills/trust-signals/references/rule.md
- Network accessline 7
--- Trust signals are visible cues that demonstrate your organization's credibility, expertise, and reliability. [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guidelines.raterhub.com/en//searchqualityevaluat - Network accessline 8
Trust signals are visible cues that demonstrate your organization's credibility, expertise, and reliability. [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guidelines.raterhub.com/en//searchqualityevaluatorgu - Network accessline 19
<img src="/icons/google-stars.svg" alt="Google Reviews"> <span>4.8/5 from 312 Google Reviews</span> <a href="https://g.page/your-business/review">Read reviews</a> - Network accessline 20
<span>4.8/5 from 312 Google Reviews</span> <a href="https://g.page/your-business/review">Read reviews</a> </div> - Network accessline 21
<a href="https://g.page/your-business/review">Read reviews</a> - Network accessline 38
<div class="certifications"> <a href="https://certification-body.com/verify/your-cert-id" rel="noopener"> - Network accessline 39
<a href="https://certification-body.com/verify/your-cert-id" rel="noopener"> - Network accessline 40
<img src="/badges/iso-27001.png" alt="ISO 27001 Certified"> </a> <a href="https://another-body.com/member/your-id" rel="noopener"> - Network accessline 41
</a> <a href="https://another-body.com/member/your-id" rel="noopener"> <img src="/badges/bbb-accredited.png" alt="BBB Accredited Business"> - Network accessline 42
<a href="https://another-body.com/member/your-id" rel="noopener"> - Network accessline 63
Google's Quality Rater Guidelines explicitly evaluate trustworthiness as a core page quality signal; pages lacking visible trust evidence score lower in manual quality assessments that influence ranking systems. In practice, that usually me - Network accessline 67
Google's Quality Rater Guidelines (Section 3) describe four dimensions of quality, and [Google's E-E-A-T overview](https://developers.google.com/search/docs/fundamentals/creating-helpful-content#what-is-eeeat) is a useful companion referenc
skills/ttfb/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/ttfb - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/ttfb --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/ttfb - Network accessline 44
Rule page: https://frontendchecklist.io/rules/performance/ttfb
skills/ttfb/references/rule.md
- Network accessline 55
- [Lighthouse](https://developers.google.com/web/tools/lighthouse) (check for "server-response-time") - Network accessline 56
- [PageSpeed Insights](https://pagespeed.web.dev/) - Network accessline 57
- Browser DevTools Network tab (look at the "TTFB" in the timing breakdown) - [WebPageTest](https://www.webpagetest.org/) - [KeyCDN TTFB Checker](https://tools.keycdn.com/performance) - Network accessline 58
- [WebPageTest](https://www.webpagetest.org/) - Network accessline 59
- [KeyCDN TTFB Checker](https://tools.keycdn.com/performance)
skills/twitter-cards/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/twitter-cards - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/twitter-cards --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/twitter-cards - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/twitter-cards
skills/twitter-cards/references/rule.md
- Network accessline 40
<meta name="twitter:title" content="How to Improve Core Web Vitals"> <meta name="twitter:description" content="Practical steps to improve LCP, CLS, and INP for better search ranking."> <meta name="twitter:image" content="https://example - Network accessline 41
<meta name="twitter:description" content="Practical steps to improve LCP, CLS, and INP for better search ranking."> <meta name="twitter:image" content="https://example.com/images/article-cover.jpg"> <meta name="twitter:image:alt" conten - Network accessline 42
<meta name="twitter:image" content="https://example.com/images/article-cover.jpg">
skills/type-coercion/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/type-coercion - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/type-coercion --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/type-coercion - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/type-coercion
skills/type-only-imports/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/type-only-imports - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/type-only-imports --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/type-only-imports - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/type-only-imports
skills/type-only-imports/references/rule.md
- Network accessline 7
--- TypeScript's [`import type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) syntax explicitly marks an import as type-only, guaranteeing that the compiler erases it completel - Network accessline 8
TypeScript's [`import type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) syntax explicitly marks an import as type-only, guaranteeing that the compiler erases it completely fr - Network accessline 73
With [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) enabled, this becomes a compiler error: - Network accessline 85
Add the [`consistent-type-imports` rule](https://typescript-eslint.io/rules/consistent-type-imports/) to enforce `import type` via your linter, independently of TypeScript version: - Network accessline 131
The [TypeScript 3.8 type-only import notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) and the [`consistent-type-imports` rule](https://typescript-eslint.io/rules/consistent-
skills/typescript-strict-mode/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/typescript-strict-mode - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/typescript-strict-mode --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/typescript-strict-mode - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/typescript-strict-mode
skills/typescript-strict-mode/references/rule.md
- Network accessline 7
--- TypeScript's [`strict`](https://www.typescriptlang.org/tsconfig#strict) mode is a single flag that enables a group of compile-time checks covering the most common sources of runtime errors. Enabling it from the start of a project costs - Network accessline 8
TypeScript's [`strict`](https://www.typescriptlang.org/tsconfig#strict) mode is a single flag that enables a group of compile-time checks covering the most common sources of runtime errors. Enabling it from the start of a project costs almo - Network accessline 53
Without strict mode, TypeScript allows implicit `any` types, ignores possible `null` or `undefined` values, and silently accepts unsound function assignments — meaning the type system gives a false sense of safety. The [TSConfig strict refe - Network accessline 198
Use the [TSConfig strict reference](https://www.typescriptlang.org/tsconfig#strict) as the source of truth for which checks the compiler should enforce, and keep the [typed-linting guidance](https://typescript-eslint.io/troubleshooting/type
skills/unique-id/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/unique-id - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/unique-id --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/unique-id - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/unique-id
skills/unique-id/references/rule.md
skills/unit-tests/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/unit-tests - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/unit-tests --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/unit-tests - Network accessline 46
Rule page: https://frontendchecklist.io/rules/testing/unit-tests
skills/unit-tests/references/rule.md
skills/unused-css/SKILL.md
- Network accessline 8
estimatedTime: "25" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/unused-css - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/unused-css --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/unused-css - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/unused-css
skills/unused-css/references/rule.md
- Network accessline 92
// Navigate through pages await page.goto('https://example.com') - Network accessline 93
await page.goto('https://example.com') - Network accessline 95
await page.goto('https://example.com/about') - Network accessline 189
# CLI usage uncss index.html > cleaned.css uncss http://localhost:3000 > cleaned.css - Network accessline 191
uncss http://localhost:3000 > cleaned.css - Network accessline 492
const dynamicPurge = new DynamicPurgeCSS({ pages: [ 'http://localhost:3000', - Network accessline 493
pages: [ 'http://localhost:3000', 'http://localhost:3000/about', - Network accessline 494
'http://localhost:3000', - Network accessline 495
'http://localhost:3000/about', - Network accessline 496
'http://localhost:3000/contact'
skills/video-accessibility/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/video-accessibility - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/video-accessibility --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/video-accessibility - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/video-accessibility
skills/video-accessibility/references/rule.md
skills/video-captions/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/video-captions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/video-captions --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/video-captions - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/video-captions
skills/video-captions/references/rule.md
- Network accessline 7
--- Captions provide a synchronized text-based representation of all audio content in a video. [WCAG 1.2.2 Captions (Prerecorded)](https://www.w3.org/TR/WCAG21/#captions-prerecorded), [WCAG 1.2.4 Captions (Live)](https://www.w3.org/TR/WCAG2 - Network accessline 8
Captions provide a synchronized text-based representation of all audio content in a video. [WCAG 1.2.2 Captions (Prerecorded)](https://www.w3.org/TR/WCAG21/#captions-prerecorded), [WCAG 1.2.4 Captions (Live)](https://www.w3.org/TR/WCAG21/#c - Network accessline 56
The distinction between captions, subtitles, and transcripts matters because [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) and [WebAIM's media guidance](https://webaim.org/techniques/captions/) expect captions to inc
skills/video-optimization/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/video-optimization - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/video-optimization --- - Network accessline 10
url: https://frontendchecklist.io/rules/performance/video-optimization - Network accessline 45
Rule page: https://frontendchecklist.io/rules/performance/video-optimization
skills/video-thumbnail/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/video-thumbnail - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/video-thumbnail --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/video-thumbnail - Network accessline 46
Rule page: https://frontendchecklist.io/rules/html/video-thumbnail
skills/video/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/video - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/video --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/video - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/video
skills/video/references/rule.md
- Network accessline 13
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 14
{ "@context": "https://schema.org", "@type": "VideoObject", - Network accessline 15
"@context": "https://schema.org", - Network accessline 17
"name": "How to Build a Next.js App from Scratch", "description": "A step-by-step tutorial covering Next.js 14 App Router, data fetching, and deployment.", "thumbnailUrl": "https://example.com/images/nextjs-tutorial-thumb.jpg", - Network accessline 18
"description": "A step-by-step tutorial covering Next.js 14 App Router, data fetching, and deployment.", "thumbnailUrl": "https://example.com/images/nextjs-tutorial-thumb.jpg", "uploadDate": "2025-02-15T10:00:00+00:00" - Network accessline 19
"thumbnailUrl": "https://example.com/images/nextjs-tutorial-thumb.jpg", - Network accessline 32
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 33
{ "@context": "https://schema.org", "@type": "VideoObject", - Network accessline 34
"@context": "https://schema.org", - Network accessline 37
"description": "A step-by-step tutorial covering Next.js 14 App Router, data fetching, and deployment to Vercel.", "thumbnailUrl": [ "https://example.com/images/nextjs-tutorial-thumb.jpg" - Network accessline 38
"thumbnailUrl": [ "https://example.com/images/nextjs-tutorial-thumb.jpg" ], - Network accessline 39
"https://example.com/images/nextjs-tutorial-thumb.jpg" - Network accessline 41
"uploadDate": "2025-02-15T10:00:00+00:00", "duration": "PT12M30S", "contentUrl": "https://example.com/videos/nextjs-tutorial.mp4", - Network accessline 42
"duration": "PT12M30S", "contentUrl": "https://example.com/videos/nextjs-tutorial.mp4", "embedUrl": "https://www.youtube.com/embed/dQw4w9WgXcQ", - Network accessline 43
"contentUrl": "https://example.com/videos/nextjs-tutorial.mp4", - Network accessline 44
"embedUrl": "https://www.youtube.com/embed/dQw4w9WgXcQ", - Network accessline 79
<!-- Page with embedded YouTube video --> <iframe src="https://www.youtube.com/embed/VIDEO_ID" - Network accessline 80
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="How to Build a Next.js App" - Network accessline 81
src="https://www.youtube.com/embed/VIDEO_ID" - Network accessline 86
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 87
{ "@context": "https://schema.org", "@type": "VideoObject", - Network accessline 88
"@context": "https://schema.org", - Network accessline 90
"name": "How to Build a Next.js App", "description": "Complete tutorial...", "thumbnailUrl": "https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg", - Network accessline 91
"description": "Complete tutorial...", "thumbnailUrl": "https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg", "uploadDate": "2025-02-15", - Network accessline 92
"thumbnailUrl": "https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg", - Network accessline 93
"uploadDate": "2025-02-15", "embedUrl": "https://www.youtube.com/embed/VIDEO_ID" } - Network accessline 94
"embedUrl": "https://www.youtube.com/embed/VIDEO_ID" - Network accessline 103
1. [Google Rich Results Test](https://search.google.com/test/rich-results) — check for VideoObject eligibility
skills/view-transitions/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/view-transitions - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/view-transitions --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/view-transitions - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/view-transitions
skills/view-transitions/references/rule.md
- Network accessline 7
--- The [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) provides a two-step mechanism: capture a screenshot of the current state, update the DOM to the new state, then animate between the two sc - Network accessline 8
The [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) provides a two-step mechanism: capture a screenshot of the current state, update the DOM to the new state, then animate between the two screen
skills/viewport-zoom/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/viewport-zoom - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/viewport-zoom --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/viewport-zoom - Network accessline 46
Rule page: https://frontendchecklist.io/rules/accessibility/viewport-zoom
skills/viewport/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/viewport - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/viewport --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/viewport - Network accessline 44
Rule page: https://frontendchecklist.io/rules/html/viewport
skills/viewport/references/rule.md
- Network accessline 182
- **Chrome DevTools**: Device simulation mode - **Firefox DevTools**: Responsive design mode - **Mobile-Friendly Test**: [Google's Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) - Network accessline 183
- **Firefox DevTools**: Responsive design mode - **Mobile-Friendly Test**: [Google's Mobile-Friendly Test](https://search.google.com/test/mobile-friendly) - **Real Device Testing**: Always test on actual devices - Network accessline 184
- **Mobile-Friendly Test**: [Google's Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
skills/visual-regression/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/visual-regression - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/testing/visual-regression --- - Network accessline 10
url: https://frontendchecklist.io/rules/testing/visual-regression - Network accessline 45
Rule page: https://frontendchecklist.io/rules/testing/visual-regression
skills/w3c-compliant/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/w3c-compliant - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/w3c-compliant --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/w3c-compliant - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/w3c-compliant
skills/w3c-compliant/references/rule.md
- Network accessline 16
# Online validator # Visit: https://validator.w3.org/ - Network accessline 17
# Visit: https://validator.w3.org/ - Network accessline 144
.pipe(htmlValidator({ format: 'json', validator: 'https://validator.w3.org/nu/' - Network accessline 145
format: 'json', validator: 'https://validator.w3.org/nu/' })) - Network accessline 146
validator: 'https://validator.w3.org/nu/' - Network accessline 371
- html-validate dist/**/*.html - | curl -H "Content-Type: text/html; charset=utf-8" \ - Network accessline 372
- | curl -H "Content-Type: text/html; charset=utf-8" \ --data-binary @dist/index.html \ - Network accessline 373
curl -H "Content-Type: text/html; charset=utf-8" \ - Network accessline 375
https://validator.w3.org/nu/?out=json - Network accessline 397
- id: w3c-validate name: W3C HTML Validator entry: bash -c 'for file in "$@"; do curl -H "Content-Type: text/html; charset=utf-8" --data-binary "@$file" "https://validator.w3.org/nu/?out=text" | grep -q "Error" && exit 1; do - Network accessline 398
name: W3C HTML Validator entry: bash -c 'for file in "$@"; do curl -H "Content-Type: text/html; charset=utf-8" --data-binary "@$file" "https://validator.w3.org/nu/?out=text" | grep -q "Error" && exit 1; done' -- language: sy - Network accessline 399
entry: bash -c 'for file in "$@"; do curl -H "Content-Type: text/html; charset=utf-8" --data-binary "@$file" "https://validator.w3.org/nu/?out=text" | grep -q "Error" && exit 1; done' -- - Network accessline 580
cy.request({ method: 'POST', url: 'https://validator.w3.org/nu/?out=json', - Network accessline 581
method: 'POST', url: 'https://validator.w3.org/nu/?out=json', headers: { - Network accessline 582
url: 'https://validator.w3.org/nu/?out=json',
skills/weak-internal-links/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/weak-internal-links - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/weak-internal-links --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/weak-internal-links - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/weak-internal-links
skills/weak-internal-links/references/rule.md
- Network accessline 7
--- Internal links serve two purposes: they help search engines discover pages through crawling, and they distribute ranking authority (PageRank) across the site. Pages that receive few internal links are both harder to discover and treated - Network accessline 8
Internal links serve two purposes: they help search engines discover pages through crawling, and they distribute ranking authority (PageRank) across the site. Pages that receive few internal links are both harder to discover and treated as - Network accessline 24
Internal links are how search engines discover pages and how PageRank flows through a site — pages with few internal links are effectively demoted in the crawl priority queue. Google's overview of [how crawling works](https://developers.goo
skills/web-app-manifest/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/web-app-manifest - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/web-app-manifest --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/web-app-manifest - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/web-app-manifest
skills/web-storage/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/web-storage - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/javascript/web-storage --- - Network accessline 10
url: https://frontendchecklist.io/rules/javascript/web-storage - Network accessline 45
Rule page: https://frontendchecklist.io/rules/javascript/web-storage
skills/webfont-format/SKILL.md
- Network accessline 8
estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/webfont-format - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/css/webfont-format --- - Network accessline 10
url: https://frontendchecklist.io/rules/css/webfont-format - Network accessline 45
Rule page: https://frontendchecklist.io/rules/css/webfont-format
skills/webfont-format/references/rule.md
skills/webp-format/SKILL.md
- Network accessline 8
estimatedTime: "15" source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/webp-format - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/images/webp-format --- - Network accessline 10
url: https://frontendchecklist.io/rules/images/webp-format - Network accessline 45
Rule page: https://frontendchecklist.io/rules/images/webp-format
skills/webpagetest/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/webpagetest - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/webpagetest --- - Network accessline 10
url: https://frontendchecklist.io/rules/html/webpagetest - Network accessline 45
Rule page: https://frontendchecklist.io/rules/html/webpagetest
skills/webpagetest/references/rule.md
- Network accessline 16
# Public WebPageTest (free) # Visit: https://www.webpagetest.org/ - Network accessline 17
# Visit: https://www.webpagetest.org/ - Network accessline 178
// Check for uncompressed resources const uncompressed = firstView.requests.filter(req => - Network accessline 179
const uncompressed = firstView.requests.filter(req => - Access to secretsline 263
[Credential-related source omitted] - Network accessline 396
plugins: [ new PerformanceBudgetPlugin({ url: 'https://your-deployed-site.com', - Network accessline 397
[Credential-related source omitted] - Network accessline 398
url: 'https://your-deployed-site.com', - Access to secretsline 399
[Credential-related source omitted] - Access to secretsline 453
[Credential-related source omitted] - Network accessline 454
run: | npm install -g webpagetest node scripts/webpagetest-runner.js https://staging.your-site.com - Network accessline 456
node scripts/webpagetest-runner.js https://staging.your-site.com - Network accessline 534
// Build request dependency map this.requests.forEach(request => { - Network accessline 535
this.requests.forEach(request => { - Network accessline 581
// Find requests without caching const uncached = this.requests.filter(req => - Network accessline 582
const uncached = this.requests.filter(req => - Network accessline 601
const analysis = { totalRequests: this.requests.length, totalBytes: this.requests.reduce((sum, req) => sum + req.bytesIn, 0), - Network accessline 602
totalRequests: this.requests.length, totalBytes: this.requests.reduce((sum, req) => sum + req.bytesIn, 0), resourceTypes: {}, - Network accessline 603
totalBytes: this.requests.reduce((sum, req) => sum + req.bytesIn, 0), - Network accessline 614
// Group by content type this.requests.forEach(request => { - Network accessline 615
this.requests.forEach(request => { - Access to secretsline 809
[Credential-related source omitted] - Network accessline 945
start() { this.app.listen(this.port, () => { console.log(`Performance dashboard running on http://localhost:${this.port}`) - Network accessline 946
this.app.listen(this.port, () => { console.log(`Performance dashboard running on http://localhost:${this.port}`) }) - Network accessline 947
console.log(`Performance dashboard running on http://localhost:${this.port}`) - Access to secretsline 954
[Credential-related source omitted] - Network accessline 957
{ name: 'production', url: 'https://example.com', - Network accessline 958
name: 'production', url: 'https://example.com', location: 'Dulles:Chrome', - Network accessline 959
url: 'https://example.com', - Network accessline 963
{ name: 'staging', url: 'https://staging.example.com', - Network accessline 964
name: 'staging', url: 'https://staging.example.com', location: 'London:Chrome', - Network accessline 965
url: 'https://staging.example.com', - Network accessline 990
// Identify critical rendering path issues function analyzeCriticalPath(waterfallData) { const criticalResources = waterfallData.requests.filter(req => - Network accessline 991
function analyzeCriticalPath(waterfallData) { const criticalResources = waterfallData.requests.filter(req => req.contentType?.includes('text/html') || - Network accessline 992
const criticalResources = waterfallData.requests.filter(req => - Network accessline 1015
// Analyze image optimization opportunities function analyzeImageOptimization(waterfallData) { const images = waterfallData.requests.filter(req => - Network accessline 1016
function analyzeImageOptimization(waterfallData) { const images = waterfallData.requests.filter(req => req.contentType?.startsWith('image/') - Network accessline 1017
const images = waterfallData.requests.filter(req =>
skills/website-search/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/website-search - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/website-search --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/website-search - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/website-search
skills/website-search/references/rule.md
- Network accessline 15
Wikipedia https://www.wikipedia.org - Network accessline 16
https://www.wikipedia.org - Network accessline 29
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 30
{ "@context": "https://schema.org", "@type": "WebSite", - Network accessline 31
"@context": "https://schema.org", - Network accessline 32
"@type": "WebSite", "name": "My Site", "url": "https://www.example.com", - Network accessline 33
"name": "My Site", "url": "https://www.example.com", "potentialAction": { - Network accessline 34
"url": "https://www.example.com", - Network accessline 37
"target": { "@type": "EntryPoint", "urlTemplate": "https://www.example.com/search?q={search_term_string}" - Network accessline 38
"@type": "EntryPoint", "urlTemplate": "https://www.example.com/search?q={search_term_string}" }, - Network accessline 39
"urlTemplate": "https://www.example.com/search?q={search_term_string}" - Network accessline 52
https://www.example.com/search?q={search_term_string} - Network accessline 53
https://www.example.com/search/{search_term_string}/ - Network accessline 62
{ "@type": "SearchAction", "target": "https://example.com/search?q={search_term_string}" - Network accessline 63
"@type": "SearchAction", "target": "https://example.com/search?q={search_term_string}" } - Network accessline 64
"target": "https://example.com/search?q={search_term_string}" - Network accessline 78
1. [Google's Rich Results Test](https://search.google.com/test/rich-results) → test your homepage URL
skills/word-count/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/word-count - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/word-count --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/word-count - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/word-count
skills/word-count/references/rule.md
- Network accessline 7
--- Thin content refers to pages that provide little unique value relative to the user's search intent. Google's guidance on [helpful, reliable, people-first content](https://developers.google.com/search/docs/fundamentals/creating-helpful-c - Network accessline 8
Thin content refers to pages that provide little unique value relative to the user's search intent. Google's guidance on [helpful, reliable, people-first content](https://developers.google.com/search/docs/fundamentals/creating-helpful-conte - Network accessline 21
Google's quality systems penalise pages that provide little original value — thin pages on important topics lose rankings to competitors with more comprehensive, useful content. The [thin content spam policy](https://developers.google.com/s - Network accessline 25
Google's [spam policies](https://developers.google.com/search/docs/essentials/spam-policies#thin-content) identify these as thin content patterns:
skills/x-content-type/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/x-content-type - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/x-content-type --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/x-content-type - Network accessline 31
Add X-Content-Type-Options: nosniff to all HTTP responses. Configure it at the web server level (Nginx, Apache) or in your application framework, and verify with curl -I https://example.com. - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/x-content-type
skills/x-content-type/references/rule.md
- Network accessline 7
--- [`X-Content-Type-Options: nosniff`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options) is a simple, one-line security header that prevents browsers from interpreting files differently from the `Content-Typ - Network accessline 8
[`X-Content-Type-Options: nosniff`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options) is a simple, one-line security header that prevents browsers from interpreting files differently from the `Content-Type` d - Network accessline 42
With `nosniff`, the browser strictly enforces the declared `Content-Type` and refuses to execute the file as script, which lines up with the [Fetch standard's MIME-type blocking rules](https://fetch.spec.whatwg.org/#should-response-to-reque
skills/x-frame-options/SKILL.md
- Network accessline 8
estimatedTime: "5" source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/x-frame-options - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/security/x-frame-options --- - Network accessline 10
url: https://frontendchecklist.io/rules/security/x-frame-options - Access to secretsline 39
[Credential-related source omitted] - Network accessline 46
Rule page: https://frontendchecklist.io/rules/security/x-frame-options
skills/x-frame-options/references/rule.md
- Network accessline 7
--- [Clickjacking](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html), also called UI redressing, is an attack where a malicious page embeds your application in a hidden or transparent iframe and tricks us - Network accessline 8
[Clickjacking](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html), also called UI redressing, is an attack where a malicious page embeds your application in a hidden or transparent iframe and tricks users - Network accessline 108
The [`Content-Security-Policy: frame-ancestors`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive supersedes `X-Frame-Options` and is more flexible: - Network accessline 117
# Allow specific trusted domains (not possible with X-Frame-Options) Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com - Network accessline 118
Content-Security-Policy: frame-ancestors 'self' https://trusted-partner.com
skills/ymyl-detection/SKILL.md
- Network accessline 8
estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/ymyl-detection - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/seo/ymyl-detection --- - Network accessline 10
url: https://frontendchecklist.io/rules/seo/ymyl-detection - Network accessline 45
Rule page: https://frontendchecklist.io/rules/seo/ymyl-detection
skills/ymyl-detection/references/rule.md
- Network accessline 7
--- YMYL (Your Money or Your Life) is Google's term for content that could significantly affect a person's health, safety, financial stability, or wellbeing. In [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/ - Network accessline 8
YMYL (Your Money or Your Life) is Google's term for content that could significantly affect a person's health, safety, financial stability, or wellbeing. In [Google's Quality Rater Guidelines](https://static.googleusercontent.com/media/guid - Network accessline 44
<!-- In-text citation example --> <p>According to the <a href="https://www.cdc.gov/diabetes/data/statistics-report/index.html"> - Network accessline 45
<p>According to the <a href="https://www.cdc.gov/diabetes/data/statistics-report/index.html"> CDC's 2023 National Diabetes Statistics Report - Network accessline 46
<a href="https://www.cdc.gov/diabetes/data/statistics-report/index.html"> - Network accessline 67
Google's Quality Rater Guidelines require YMYL pages to meet higher E-E-A-T standards than general content — a YMYL page without visible expertise and trust signals will be rated low quality regardless of technical SEO. Google's explanation - Network accessline 111
<script type="application/ld+json"> { "@context": "https://schema.org", - Network accessline 112
{ "@context": "https://schema.org", "@type": "MedicalWebPage", - Network accessline 113
"@context": "https://schema.org", - Network accessline 118
"honorificSuffix": "MD", "medicalSpecialty": "Endocrinology", "url": "https://example.com/about/dr-sarah-chen" - Network accessline 119
"medicalSpecialty": "Endocrinology", "url": "https://example.com/about/dr-sarah-chen" }, - Network accessline 120
"url": "https://example.com/about/dr-sarah-chen"
skills/zoom-reflow/SKILL.md
- Network accessline 8
estimatedTime: "30" source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/zoom-reflow - Network accessline 9
source: frontendchecklist.io url: https://frontendchecklist.io/rules/accessibility/zoom-reflow --- - Network accessline 10
url: https://frontendchecklist.io/rules/accessibility/zoom-reflow - Network accessline 45
Rule page: https://frontendchecklist.io/rules/accessibility/zoom-reflow
How the signals fit together
Facts from a static read of the files at the pinned commit. They describe what the code does, not why.
Some files could not be read; the facts below still hold.
Declared and executed: 2 facts
- Contacts github.com, which SKILL.md, the README and the plugin manifest do not mentioncli/package.json:19High confidence
- Contacts github.com, which SKILL.md, the README and the plugin manifest do not mentionplugins/front-end-checklist/.claude-plugin/plugin.json:12High confidence
Signal confidence: 498 facts
- Network access in code of the plugin configuration.claude-plugin/marketplace.json:3High confidence
- Network access in code of the plugin configuration.claude-plugin/marketplace.json:4High confidence
- Network access in code of the plugin configuration.claude-plugin/marketplace.json:5High confidence
- Network access in code of the plugin configuration.claude-plugin/marketplace.json:14High confidence
- Network access in code of the plugin configuration.claude-plugin/marketplace.json:15High confidence
- Network access in code of the plugin configuration.claude-plugin/marketplace.json:16High confidence
- Network access in prose of documentationcli/README.md:3Low confidence
- Network access in code of documentationcli/README.md:15Low confidence
- Network access in code of documentationcli/README.md:16Low confidence
- Network access in code of documentationcli/README.md:17Low confidence
- Network access in prose of documentationcli/README.md:48Low confidence
- Network access in prose of documentationcli/README.md:49Low confidence
- Network access in code of documentationcli/README.md:54Low confidence
- Network access in code of documentationcli/README.md:55Low confidence
- Network access in code of documentationcli/README.md:56Low confidence
- Network access in prose of the SKILL.mdcli/SKILL.md:16Low confidence
- Network access in prose of the SKILL.mdcli/SKILL.md:17Low confidence
- Network access in prose of the SKILL.mdcli/SKILL.md:18Low confidence
- Executable script in code of a file that runscli/package.json:1High confidence
- Network access in code of a file that runscli/package.json:14High confidence
- Network access in code of a file that runscli/package.json:15High confidence
- Network access in code of a file that runscli/package.json:16High confidence
- Network access in code of a file that runscli/package.json:17High confidence
- Network access in code of a file that runscli/package.json:18High confidence
- Network access in code of a file that runscli/package.json:19High confidence
- Executable script in a comment of a file that runscli/scripts/build.ts:1Low confidence
- Executable script in code of a file that runscli/src/args.ts:1High confidence
- Executable script in code of a file that runscli/src/commands/audit.ts:1High confidence
- Network access in code of a file that runscli/src/commands/audit.ts:15High confidence
- Network access in code of a file that runscli/src/commands/audit.ts:16High confidence
- Network access in code of a file that runscli/src/commands/audit.ts:17High confidence
- Network access in code of a file that runscli/src/commands/audit.ts:40High confidence
- Network access in code of a file that runscli/src/commands/audit.ts:42High confidence
- Executable script in code of a file that runscli/src/commands/lookup.ts:1High confidence
- Executable script in code of a file that runscli/src/commands/review.ts:1High confidence
- Executable script in code of a file that runscli/src/content.ts:1High confidence
- Executable script in a comment of a file that runscli/src/index.ts:1Low confidence
- Executable script in code of a file that runscli/src/output.ts:1High confidence
- Executable script in code of a file that runscli/src/spec.ts:1High confidence
- Network access in code of a file that runscli/src/spec.ts:29High confidence
- Network access in code of a file that runscli/src/spec.ts:30High confidence
- Network access in code of a file that runscli/src/spec.ts:31High confidence
- Executable script in a comment of a testcli/tests/cli.test.mjs:1Low confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:5High confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:6High confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:7High confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:8High confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:9High confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:10High confidence
- Network access in code of the plugin configurationplugins/front-end-checklist/.claude-plugin/plugin.json:11High confidence
and 448 more
Only the first 500 facts are listed.
Works with
| Agent | Status | Evidence | Install to |
|---|---|---|---|
| Claude Code | Native | Manifest .claude-plugin/marketplace.json | .claude/skills/<skill-name>/ |
| Codex | Native | Manifest AGENTS.md | .agents/skills/<skill-name>/ |
| Cursor | Compatible | Standard SKILL.md packages/cli/SKILL.md | .cursor/skills/<skill-name>/ |
| Gemini CLI | Compatible | Standard SKILL.md packages/cli/SKILL.md | .gemini/skills/<skill-name>/ |
| GitHub Copilot | Compatible | Standard SKILL.md packages/cli/SKILL.md | .github/skills/<skill-name>/ |
| OpenCode | Compatible | Standard SKILL.md packages/cli/SKILL.md | .opencode/skills/<skill-name>/ |
- Native The repository ships a manifest, folder or frontmatter field for this agent.
- Compatible A standard SKILL.md that this agent can read.
- Unknown No evidence either way.
Derived automatically from paths, manifests and frontmatter. Not tested on each agent.
Add this badge to your README
It updates every night and links to this page.
[](https://hotskills.dev/skill/thedaviddias-front-end-checklist/)