thedaviddias/frontendchecklist
84 skills94 installs6M starsGitHub
Install
npx skills add https://github.com/thedaviddias/frontendchecklistSkills in this repo
1Frontend Checklist Globalfrontend-checklist-global is a Claude Code skill for frontend development. It helps solo builders move faster with AI-assisted coding.9installs2Lazy LoadingA frontend-checklist performance rule for lazy-loading offscreen content. A developer uses it to defer non-critical resources and speed first paint.2installs3Mobile TestingVerifies key flows are tested on real mobile viewports and touch behavior that desktop emulation misses, then adds Playwright mobile-preset tests. A developer uses it when reviewing test coverage and mobile strategy.2installs4404 PageReviews templates, rendered HTML, and shared components to confirm a site has a custom 404 error page that returns a real HTTP 404. A developer uses it when auditing error-page handling and avoiding soft-404 indexing problems.1installs5About PageReviews metadata, crawlability, and rendered HTML to confirm a site has a dedicated About page identifying the people or organization behind the content. A developer uses it when auditing E-E-A-T and trust signals for SEO.1installs6Accessible AuthenticationReviews login, MFA, password reset, and recovery flows for accessible authentication barriers like blocked paste, password-manager hostility, and CAPTCHA without alternatives. A developer uses it when auditing WCAG-compliant authentication paths.1installs7Accessible TablesReviews rendered markup and components to verify tables use semantic th elements with scope, captions, and proper structure for screen readers. A developer uses it when auditing table accessibility.1installs8Ai ContentA frontend-checklist SEO rule for reviewing and refining AI-generated content against Google's helpful-content standards. A developer uses it when unedited AI text may lack the depth and originality needed to rank.1installs9Animated ContentA frontend-checklist performance rule for replacing heavy animated GIFs with the video element. A developer uses it when GIFs bloat page weight and hurt scrolling performance.1installs10Animation PerformanceA frontend-checklist CSS rule for animating only transform and opacity to avoid layout and paint. A developer uses it when animations of width, height, or position cause jank.1installs11Back Forward CacheA frontend-checklist performance rule for keeping pages eligible for the browser back/forward cache. A developer uses it when back and forward navigations feel slow because the page is rebuilt instead of resumed.1installs12Browser CachingA frontend-checklist performance rule for setting correct browser cache headers. A developer uses it when repeat visits redundantly re-download assets that could be cached.1installs13Browser RequiredA frontend-checklist performance rule for using browser-based audits to measure real runtime metrics. A developer uses it when static analysis misses execution and rendering bottlenecks.1installs14CdnA frontend-checklist performance rule for serving static assets through a CDN. A developer uses it when global users face high latency from a single-origin server.1installs15Code SplittingA frontend-checklist JavaScript rule for splitting large bundles to improve Time to Interactive. A developer uses it when a heavy SPA bundle blocks interactivity for seconds.1installs16CompressionA frontend-checklist performance rule for enabling text-based compression on HTML, JS, and CSS. A developer uses it when uncompressed assets slow downloads on mobile networks.1installs17Consent ModeA frontend-checklist rule for implementing Google Consent Mode v2 in GTM or gtag.js. A developer uses it to keep measuring conversions while respecting privacy consent.1installs18Console CleanupA frontend-checklist JavaScript rule for removing console statements from production builds. A developer uses it to prevent info leaks and unprofessional console output.1installs19Critical Request ChainsA frontend-checklist performance rule for minimizing critical request chains. A developer uses it when dependent resource requests delay first render.1installs20Css File SizeA frontend-checklist performance rule for keeping CSS files small so CSSOM construction is fast. A developer uses it when large stylesheets block rendering.1installs21Cumulative Layout ShiftA frontend-checklist performance rule for minimizing Cumulative Layout Shift. A developer uses it when shifting content causes misclicks and reading disruption.1installs22Dark Mode CssA frontend-checklist CSS rule for supporting dark mode with prefers-color-scheme. A developer uses it to respect OS theme preference and maintain contrast.1installs23Dom SizeA frontend-checklist performance rule for reducing DOM size and complexity. A developer uses it when an oversized DOM slows style calculation and reflows.1installs24Duplicate JsA frontend-checklist performance rule for removing duplicate JavaScript libraries. A developer uses it when redundant library versions inflate bundle size.1installs25FaqA frontend-checklist SEO rule for adding FAQPage structured data. A developer uses it to earn expandable Q&A rich results and more SERP real estate.1installs26FaviconA frontend-checklist SEO rule for adding an accessible favicon to every page. A developer uses it so Google displays the site's favicon in mobile SERPs.1installs27FaviconsA frontend-checklist HTML rule for implementing favicons across browsers, devices, and PWAs. A developer uses it to avoid missing or low-quality icons in tabs, bookmarks, and home screens.1installs28Fetchpriority AttributeA frontend-checklist performance rule for using the fetchpriority attribute to hint resource priority. A developer uses it to accelerate Largest Contentful Paint with minimal effort.1installs29Font LoadingA frontend-checklist performance rule for optimizing web font loading. A developer uses it when slow fonts cause FOIT or layout shifts that hurt Core Web Vitals.1installs30Http2A frontend-checklist performance rule for enabling HTTP/2 or HTTP/3. A developer uses it to multiplex requests over a single connection and reduce latency impact.1installs31Http RequestsA frontend-checklist performance rule for minimizing HTTP requests. A developer uses it when per-request DNS, TCP, and TLS overhead slows initial load.1installs32Import On InteractionA frontend-checklist performance rule for loading non-critical code on user interaction. A developer uses it so users do not pay download and parse cost for features they may not use.1installs33Import On VisibilityA frontend-checklist performance rule for loading non-critical code when content approaches the viewport. A developer uses it for long pages with expensive offscreen sections.1installs34Js File SizeA frontend-checklist performance rule for optimizing JavaScript bundle size. A developer uses it when excessive JS delays Time to Interactive on low-end devices.1installs35Js LibrariesA frontend-checklist rule for using secure, up-to-date JavaScript libraries. A developer uses it to remove vulnerable or bloated dependencies that hurt security and performance.1installs36Js RedirectsA frontend-checklist rule for avoiding JavaScript-based redirects. A developer uses it because JS redirects add a round-trip and can hurt SEO and indexability.1installs37Lazy Above FoldA frontend-checklist performance rule for not lazy-loading above-the-fold content. A developer uses it when lazy loading a hero image delays Largest Contentful Paint.1installs38Legacy JsA frontend-checklist performance rule for not serving legacy JavaScript to modern browsers. A developer uses it to drop unneeded polyfills and ES5 weight.1installs39Link CheckerA frontend-checklist HTML rule for finding broken links. A developer uses it because 404s frustrate users, hurt SEO, and damage credibility.1installs40Link TextA frontend-checklist accessibility rule for using descriptive link text. A developer uses it because screen reader users navigate by listing links.1installs41List VirtualizationA frontend-checklist performance rule for virtualizing long lists and tables. A developer uses it when rendering thousands of rows wastes memory and hurts scroll performance.1installs42Llms TxtA frontend-checklist SEO rule for publishing llms.txt on documentation-heavy sites. A developer uses it to give AI tools a curated entry point without replacing robots.txt or sitemaps.1installs43Loading IndicatorsA frontend-checklist rule for showing loading indicators during async operations. A developer uses it so users know something is happening and do not click repeatedly.1installs44Memory LeaksA frontend-checklist JavaScript rule for preventing common memory leak patterns. A developer uses it when SPA memory grows across navigations and eventually crashes the tab.1installs45Meta DescriptionChecks the head of each page for a unique meta description tag of the right length and rewrites it as call-to-action ad copy for search results. A developer uses it when auditing page metadata or generating descriptions for new pages.1installs46Meta In BodyDetects meta tags injected into the document body by CMS plugins or scripts, where directives like noindex or canonical are silently ineffective. A developer uses it when auditing HTML document structure for misplaced tags.1installs47Meta RefreshFinds client-side meta refresh redirects that confuse users with cognitive disabilities and restart screen readers, and swaps them for 301/302 server redirects. A developer uses it when reviewing rendered HTML for accessible redirect behavior.1installs48Meta TitleAudits the title tag on every page for uniqueness, length, and keyword placement since it is a confirmed Google ranking signal and drives click-through. A developer uses it when auditing page metadata or generating SEO titles.1installs49Mime TypeChecks that HTML, CSS, JS, and image responses carry the correct Content-Type header so browsers do not block resources under nosniff. A developer uses it when auditing server configuration or diagnosing broken resources.1installs50Mixed ContentFinds HTTP sub-resources on an HTTPS page where active mixed content lets attackers run arbitrary JavaScript, and reports each http:// URL to fix. A developer uses it when reviewing an HTTPS page for insecure resource loading.1installs51Modern Array MethodsReviews JavaScript for loops that could use modern array and object methods that self-document intent and are engine-optimized. A developer uses it when reviewing scripts or client components for readability.1installs52Modern FormatIdentifies images not served in modern WebP or AVIF formats and rewrites markup to serve smaller files that improve LCP. A developer uses it when auditing image assets and CDN or build transforms.1installs53Navigation LandmarkChecks that navigation regions use nav elements with aria-label so screen reader users can jump between navigation areas by landmark. A developer uses it when reviewing templates or shared components for accessible markup.1installs54Offline FallbackVerifies a self-contained offline fallback page exists and is served by the service worker instead of the browser's default error screen. A developer uses it when adding PWA capabilities or supporting unreliable networks.1installs55OptimizedFinds unoptimized images flagged by Lighthouse and re-encodes them with mozjpeg, pngquant, or SVGO while stripping metadata to cut page weight. A developer uses it when reviewing image assets and build transforms.1installs56OrganizationAudits the homepage for Organization schema markup that helps Google populate the Knowledge Panel with logo, social links, and contact details. A developer uses it when auditing structured data on a business or brand homepage.1installs57Page Load TimeVerifies pages load under 3 seconds on a standard connection since slower pages spike bounce rate and hurt conversions and SEO. A developer uses it when auditing slow page loads and rendering delays.1installs58Page WeightChecks that total transferred page weight stays under 1500KB since weight correlates directly with load time on mobile. A developer uses it when auditing heavy assets and slow loads.1installs59Password Field SecurityChecks password fields use type=password with correct autocomplete, work with password managers, and expose accessible visibility toggles. A developer uses it when reviewing forms and auth inputs for security.1installs60Pdf SizeAudits downloadable PDFs so they stay under Googlebot's download limits and are not partially crawled or skipped. A developer uses it when a site publishes indexable PDF resources like reports or manuals.1installs61PreconnectEstablishes early connections to essential third-party origins like fonts and APIs to shave connection overhead off the critical path. A developer uses it when auditing slow loads and rendering delays.1installs62Render BlockingEliminates render-blocking resources that delay first paint and cause a white-screen effect during load. A developer uses it when auditing slow loads and rendering delays.1installs63Resource HintsApplies the right resource hints to start fetching critical assets sooner, improving LCP by 100-300ms on average. A developer uses it when auditing slow loads and heavy assets.1installs64Robots MetaChecks per-page robots meta directives so no landing page carries an unintended noindex that drops it from search. A developer uses it when pages disappear from results or checking staging vs production parity.1installs65Robots Meta ConflictDetects the conflict where a robots.txt disallow prevents Google from ever reading a noindex tag, so the page stays indexed. A developer uses it when deindexed pages still appear in search.1installs66Robots TxtAudits the robots.txt file crawlers fetch first to catch misconfigured directives that silently block search engines. A developer uses it when auditing technical SEO foundations or crawl coverage gaps.1installs67Service WorkerAdds a service worker as a network proxy that caches static assets and enables offline function, cutting repeat-visit load times 50-90%. A developer uses it when auditing repeat-visit performance or PWA readiness.1installs68SitemapBuilds and submits an XML sitemap so search engines discover every important page beyond link crawling. A developer uses it when auditing crawlability and indexability of a site.1installs69Sitemap 4xxAudits the sitemap for 4XX URLs that signal poor maintenance and cause Search Console errors masking real issues. A developer uses it when investigating crawl errors or after a migration removed pages.1installs70Sitemap CoverageVerifies every canonical indexable page appears in the sitemap while noindex and non-self-canonical pages are excluded. A developer uses it when new pages take too long to appear in search.1installs71Sitemap DomainVerifies sitemap URLs stay on the verified domain and protocol since Google skips cross-domain entries. A developer uses it after HTTP-to-HTTPS or domain migrations when coverage reports low.1installs72Sitemap ValidChecks the sitemap has a valid urlset root, correct namespace, and properly escaped fully-qualified URLs within size limits. A developer uses it when debugging sitemap submission errors in Search Console.1installs73Social ProfilesVerifies the site links to active social profiles and declares them via sameAs schema so Google can confirm brand identity. A developer uses it when setting up Organization schema or auditing E-E-A-T signals.1installs74Source MapsEnsures production source maps map minified code back to source for debugging without exposing them publicly. A developer uses it when setting up production debugging while keeping minification.1installs75Speculation RulesUses the Speculation Rules API to prefetch or prerender the most likely next page, eliminating navigation latency and improving INP. A developer uses it when optimizing multi-page navigation performance.1installs76Streaming HtmlChecks that server rendering streams HTML incrementally instead of buffering until the slowest query completes, improving TTFB and LCP. A developer uses it when reviewing SSR, Next.js App Router, or Node HTTP handlers.1installs77Svg OptimizationOptimizes SVGs exported from design tools by removing bloat that often halves file size. A developer uses it when reviewing image assets and build transforms for SVG output.1installs78Third Party ScriptsOptimizes third-party script loading, the leading cause of slow sites, by choosing async, defer, or lazy-load per script. A developer uses it when auditing slow loads and heavy assets.1installs79Translation StringsFinds i18n-unfriendly string concatenation and hardcoded copy that break translation across languages with different word order. A developer uses it when preparing a codebase for internationalisation.1installs80TtfbReduces Time to First Byte, the foundation of page performance, by speeding server logic, adding a CDN, and caching at edge. A developer uses it when auditing slow first responses on SSR pages or APIs.1installs81Unused CssRemoves unused CSS rules, since projects typically use only 10-25% of their styles, to shrink bundles and speed loads. A developer uses it when reviewing stylesheets and component styles.1installs82WebpagetestExplains how to run WebPageTest to measure real-world loading metrics, waterfalls, and Core Web Vitals across locations and devices. A developer uses it when auditing and fixing front-end performance bottlenecks in rendered HTML.1installs83Ymyl DetectionExplains how to spot Your-Money-Your-Life content and check it for E-E-A-T signals like author credentials, cited sources, and expert review. A developer or content team uses it when auditing why high-quality-seeming pages underperform in search.1installs84Zoom ReflowExplains the WCAG reflow requirement and how to test that layouts stay usable at 400% zoom using relative units and fluid layouts. A developer uses it when reviewing rendered markup and components for accessibility.1installs