Frontend Checklist

Frontend Checklist is the open-source front-end quality system for humans and AI agents. It turns front-end best practices into a practical review workflow you can browse on the web, run through with MCP-compatible tools, or work through directly in this README.

Companion project: UX Patterns for Devs helps developers choose the right UI pattern before using Frontend Checklist to verify implementation quality.

[!IMPORTANT]
Use the website for browsing and filtering, the MCP server for agent workflows, and this README when you want the checklist in one place.

What you get

385 English rules across 11 active categories
11 MCP tools exposed by the hosted server
Rule pages with explanations, remediation guidance, and verification steps

How to use this checklist

Start with the category navigator below and jump straight to the part of the checklist you need.
Work through the checkbox items that apply to your project, audit, or pull request.
Open the linked rule pages when you need the full guidance, examples, verification steps, and AI prompts.
Use frontendchecklist.io for interactive browsing, and frontendchecklist.io/mcp when you want agents to use the same rule corpus directly.

Priority legend

means site-breaking, compliance-sensitive, or security-sensitive issues that should be fixed first.
means issues with major impact on user experience, accessibility, performance, or discoverability.
means strong best practices that should be part of normal frontend quality review.
means useful improvements that are situational or lower urgency.

Choose your workflow

Browse online

Explore all rules at frontendchecklist.io/rules
Use curated checklists at frontendchecklist.io/checklists
Open a category page for focused audits and implementation guidance

Choose the right pattern first

Frontend Checklist helps you review implementation quality. If you are still deciding what interface to build, use UX Patterns for Devs to compare common UI patterns, understand tradeoffs, and find practical guidance for forms, navigation, data display, feedback states, authentication, and AI interfaces.

Contribute to the checklist

Install dependencies: pnpm install
Run local development: pnpm dev
Validate structure: pnpm validate:rule-structure
Score the corpus: pnpm score:rules
Regenerate derived artifacts: pnpm generate:skills and pnpm generate:readme

Use with MCP

Connect an MCP-capable agent to Frontend Checklist for structured rule lookup, audits, and remediation workflows.

[!TIP]
Best first use: point an MCP-capable agent at a real component, page, or public URL and ask for the highest-confidence Frontend Checklist findings first.

Public endpoint: mcp.frontendchecklist.io
Public docs: frontendchecklist.io/en/mcp
Local/editor integration: stdio server at packages/mcp/src/cli.ts

What you can do:

Review pasted code or file contents against the checklist
Audit a live public URL
Fetch a specific rule with remediation guidance
Search rules by keyword, category, or priority
Get a workflow or quick reference for a focused audit

Example prompts:

Review this component against the Frontend Checklist and report the highest-confidence findings first.
Audit https://example.com for accessibility, performance, and SEO issues.
Explain the canonical URL rule and suggest a fix with code examples.

Use with skills

Install Frontend Checklist skills when you want reusable audit workflows or focused rule-specific guidance in tools that support them.

Install:

npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https

Useful entry points:

Global audit entry point: skills/frontend-checklist-global/SKILL.md
Focused rule skill example: skills/https/SKILL.md

Example uses:

Run a broad frontend audit against the full Frontend Checklist corpus
Use a focused skill like https for security review on one concern
Use rule-specific skills to explain why a rule matters and how to fix it

Checklist

HTML

25 rules. Semantic markup, metadata, forms, and document structure rules.

Browse HTML on frontendchecklist.io

Add Subresource Integrity to external scripts : Use Subresource Integrity (SRI) hash attributes on external scripts and stylesheets loaded from CDNs to ensure the content hasn't been tampered with.
Add thumbnail images to videos : HTML5 video elements should have a poster attribute providing a thumbnail image displayed before the video loads or is played.
Create a custom 404 error page : A custom 404 error page is designed with helpful navigation options for lost users.
Declare UTF-8 character encoding : The charset (UTF-8) is declared correctly as the first element in the head.
Ensure all IDs are unique : All ID attributes are unique within the document. No duplicate IDs exist on the page.
Implement accessible breadcrumb navigation : Breadcrumb navigation is implemented with proper semantic markup and ARIA attributes for accessibility.
Implement favicons for all devices : All necessary favicon formats are implemented for browsers, devices, and PWA support.
Link a Web App Manifest for installability : Include a Web App Manifest (manifest.json) linked from the HTML head to enable Progressive Web App features like home screen installation, standalone display, and splash screens.
Load scripts with defer, async, or type=module : Prevent JavaScript from blocking HTML parsing by using defer, async, or type=module attributes on script tags so the browser can continue building the DOM while scripts download.
Make custom elements and Web Components accessible : Custom elements must implement ARIA reflection via ElementInternals, keyboard interaction, and form association so that screen readers and assistive technologies can interpret them correctly.
Make file uploads accessible : File upload components are accessible with proper labels, file type restrictions, and progress feedback.
Make pagination accessible : Pagination controls are accessible with proper ARIA labels, keyboard navigation, and current page indication.
Make search inputs accessible : Search functionality is accessible with proper input type, label, role, and autocomplete suggestions.
Make videos accessible with captions : Videos have captions, audio descriptions, transcripts, pause controls, and avoid autoplay for users with hearing, vision, or cognitive impairments.
Meet PWA installability criteria : The web app satisfies the browser's minimum PWA installability requirements: a valid web app manifest, a registered service worker, HTTPS, and maskable icons.
Provide noscript fallback content : A noscript tag provides fallback content for users with JavaScript disabled.
Remove comments and debug code in production : Unnecessary code, comments, and debug elements are removed before deploying to production.
Set text direction for RTL languages : The dir attribute is used for languages that read right-to-left (RTL) or mixed content.
Set the page lang attribute : The element must have a lang attribute with a valid BCP 47 language code so screen readers, translation tools, and search engines know the primary language of the page.
Set the responsive viewport meta tag : The viewport meta tag is declared correctly for responsive design.
Use semantic HTML elements : HTML5 Semantic Elements are used appropriately (header, section, footer, main, article, aside...).
Use semantic input type attributes : Set the correct type attribute on input elements to trigger the right mobile keyboard, enable browser validation, and improve autofill accuracy.
Use the HTML5 doctype : The HTML5 doctype declaration must appear as the first line of every HTML document to trigger standards mode rendering in all browsers.
Validate forms accessibly : Forms provide clear validation feedback with accessible error messages and proper ARIA attributes.
Validate HTML against W3C standards : HTML markup is validated against W3C standards for cross-browser compatibility.

Back to top

CSS

32 rules. Layout, typography, responsive design, and styling rules.

Browse CSS on frontendchecklist.io

Apply Flexbox best practices : Use Flexbox for one-dimensional layouts with the right properties, avoiding common mistakes like overusing flex:1, ignoring min-width:0, and misunderstanding flex-basis.
Avoid embedded and inline CSS : Embedded and inline CSS are avoided except for critical CSS and performance optimization.
Avoid intrusive interstitials : Full-screen interstitials (pop-ups, overlays, cookie banners) that block the main content on mobile are a ranking penalty signal and accessibility barrier. Use non-intrusive alternatives.
Do not disable pinch zoom : The viewport meta tag must not set user-scalable=no or maximum-scale=1 as these prevent users from zooming in to read content, violating WCAG 2.1 SC 1.4.4 (Resize Text).
Include a print stylesheet : A print stylesheet is provided and correctly optimized for printed pages.
Inline critical CSS for faster rendering : Critical CSS (above-the-fold content) is inlined in the head for faster initial render.
Keep CSS specificity low and flat : Write selectors at the lowest specificity that works, avoiding ID selectors and deep nesting, so styles can be overridden cleanly without resorting to !important.
Lint CSS and SCSS files : All CSS/SCSS files are linted with Stylelint to detect errors and enforce standards.
Load CSS without blocking render : Non-critical CSS is loaded asynchronously to avoid blocking DOM rendering.
Minify all CSS files : All CSS files are minified to reduce file size and improve page load performance.
Optimize web font formats : Web fonts use modern formats (WOFF2, WOFF) with proper fallbacks and loading strategies.
Order CSS files correctly : All CSS files are loaded before JavaScript files to prevent render blocking.
Prevent horizontal scrolling : Web pages must not require horizontal scrolling at standard viewport widths. Horizontal overflow breaks responsive layouts and makes content inaccessible to low-vision users who zoom in.
Provide visible custom focus indicators : Ensure all interactive elements have a clearly visible focus indicator for keyboard navigation — never just remove the default outline without providing a better alternative.
Register CSS custom properties with @property for animation and type safety : Use @property to register CSS custom properties with a type, initial value, and inheritance control — enabling animation of custom properties and providing compile-time validation for design tokens.
Remove unused CSS rules : Unused CSS is removed to reduce bundle size and improve performance.
Support dark mode with prefers-color-scheme : Implement dark mode using the prefers-color-scheme media query and CSS custom properties so the site automatically adapts to the user's system preference.
Use :has() to style parent elements based on their descendants : Use the CSS :has() relational pseudo-class to select and style an element based on what it contains, replacing JavaScript DOM manipulation for many common styling scenarios.
Use @layer to manage CSS cascade order explicitly : CSS Cascade Layers (@layer) are used to give the codebase explicit, predictable control over specificity and cascade order, eliminating the need to fight specificity with !important.
Use a CSS reset or normalize stylesheet : A CSS reset or normalize is used to ensure consistent styling across browsers.
Use consistent CSS naming conventions : Adopt a consistent class naming methodology (BEM, CUBE CSS, or a team-agreed pattern) to make class names self-documenting and prevent style conflicts.
Use container queries for component-level responsiveness : Use CSS container queries to make components respond to their own container's size rather than the viewport, enabling truly reusable responsive components.
Use CSS containment to limit repaint scope : Apply the contain property to components to tell the browser they are independent from the rest of the page, enabling rendering optimizations that reduce repaint and reflow scope.
Use CSS custom properties for design tokens : Define design system values (colors, spacing, typography) as CSS custom properties on :root to enable consistent theming, dynamic updates, and dark mode support.
Use CSS Grid for two-dimensional layouts : Use CSS Grid when you need to control both rows and columns simultaneously, such as page layouts, card grids, and complex component arrangements.
Use CSS logical properties for i18n and RTL support : Use CSS logical properties (margin-inline, padding-block, border-inline-start) instead of physical properties (margin-left, padding-top) to support right-to-left languages automatically.
Use CSS subgrid to align nested grid items to parent tracks : Use grid-template-columns: subgrid (or subgrid for rows) to make nested grid items participate in the parent grid's tracks, solving the card-content alignment problem without JavaScript height matching.
Use oklch() and oklab() for perceptually uniform colour palettes : Colour values in the design system use oklch() or oklab() colour functions to produce perceptually uniform palettes where equal numeric steps produce equal perceived lightness changes.
Use readable font sizes on mobile : Text must be large enough to read without zooming on mobile devices. Using relative units (rem/em) allows browser font size preferences to be respected.
Use relative units for responsive layouts : Use rem, em, %, vw, vh, and clamp() instead of fixed px values to build layouts that scale with user font size preferences and viewport dimensions.
Use the View Transitions API for smooth page and component transitions : The View Transitions API is used to animate between page states or navigations with cross-fade or custom animations, providing a native-app quality transition without JavaScript animation libraries.
Use transform and opacity for animations : Animate with CSS transform and opacity properties to keep animations running on the GPU compositor thread at 60fps, avoiding layout-triggering properties like top, left, width, and height.

Back to top

JavaScript

26 rules. Client-side behavior, async patterns, and runtime quality rules.

Browse JavaScript on frontendchecklist.io

Avoid implicit type coercion : Use strict equality (===), explicit type conversion, and Number/String/Boolean constructors to avoid JavaScript's implicit type coercion producing unexpected results.
Avoid inline JavaScript : Inline JavaScript is avoided. JavaScript is kept in external files for caching and maintainability.
Avoid the any type — use unknown, generics, or type guards instead : Replace TypeScript's any type with unknown, proper generics, or narrowed type assertions to preserve type safety without sacrificing expressiveness.
Debounce and throttle event handlers : Use debounce or throttle for high-frequency events like scroll, resize, and input to improve performance.
Enable noUncheckedIndexedAccess to catch out-of-bounds array bugs : Enable noUncheckedIndexedAccess in tsconfig.json to make array and object index access return T | undefined, forcing explicit null checks that prevent out-of-bounds runtime errors.
Enable TypeScript strict mode in tsconfig.json : Enable "strict": true in tsconfig.json to activate the full suite of TypeScript type-checking flags and catch the most common runtime bugs at compile time.
Handle cross-origin requests securely : Use CORS correctly, validate message origins with postMessage, and understand the Same-Origin Policy to prevent cross-origin attacks.
Implement proper error handling : Use try-catch blocks and error boundaries to gracefully handle errors in async operations and UI components.
Lint JavaScript code : JavaScript code is linted with ESLint to detect errors and enforce coding standards.
Minify all JavaScript files : All JavaScript files are minified to reduce file size and improve loading performance.
Minimize costly DOM read/write operations : Batch DOM reads and writes separately to avoid layout thrashing — the performance problem caused by alternating between reading and writing layout properties.
Never use eval() or unsafe dynamic code execution : Avoid eval(), new Function(), setTimeout/setInterval with string arguments, and innerHTML with untrusted content — they execute arbitrary code and create critical XSS vulnerabilities.
Parse JSON safely with error handling : Always wrap JSON.parse() in try/catch and validate the parsed structure before use, as invalid JSON or unexpected data shapes cause runtime errors.
Prefer const and let over var : Use block-scoped const and let declarations instead of function-scoped var to avoid hoisting bugs and unintended variable mutations.
Prefer immutable data patterns : Use spread operators, Object.assign, and array methods that return new values instead of mutating objects and arrays in place, to make data flow predictable and debugging easier.
Prevent common memory leak patterns : Identify and avoid the most common JavaScript memory leak sources: forgotten event listeners, retained DOM references, closures holding large objects, and uncleared timers.
Remove console statements in production : Remove or disable console.log, console.debug, and other console statements before deploying to production.
Split large JavaScript bundles : Use dynamic imports and route-based code splitting to break large bundles into smaller chunks that load on demand, reducing initial page load time.
Use ES modules (import/export) : Use native ES module syntax for imports and exports instead of CommonJS require() to enable static analysis, tree-shaking, and better tooling support.
Use event delegation for dynamic content : Attach event listeners to stable parent elements rather than individual dynamic children to reduce memory usage and handle elements added to the DOM after page load.
Use import type for type-only imports : Use the import type syntax for imports that are only needed as TypeScript types, ensuring they are fully erased at compile time with zero runtime cost.
Use modern array and object methods : Use ES2015+ array methods (map, filter, reduce, find, flatMap) and object methods (Object.entries, Object.fromEntries, structuredClone) for cleaner, more expressive code.
Use scheduler.yield() to keep the main thread responsive during long tasks : Break up tasks longer than 50 ms by yielding to the browser with scheduler.yield() or a MessageChannel fallback so that user input is never blocked.
Use Web Storage API safely : Use localStorage and sessionStorage with proper serialization, error handling, and security awareness to avoid data corruption and storage quota errors.
Validate external data at runtime with a schema library : Use Zod or Valibot to validate data from API responses, form inputs, localStorage, and environment variables — TypeScript types are erased at runtime and cannot protect against unexpected shapes.
Write internationalisation-friendly translation strings : Translation strings use message format patterns (ICU or similar) rather than string concatenation, and correctly handle pluralisation, gender, and variable interpolation.

Back to top

Performance

43 rules. Loading speed, rendering, optimization, and Core Web Vitals rules.

Browse Performance on frontendchecklist.io

Analyze performance with WebPageTest : Page performance is analyzed with WebPageTest to identify loading bottlenecks and optimization opportunities.
Avoid JavaScript-based redirects : Detects JavaScript resources that return 3XX redirects to reduce latency
Avoid serving legacy JavaScript to modern browsers : Detects ES5 polyfills and legacy JavaScript code to reduce bundle size and improve execution
Convert animated GIFs to video : Large animated GIFs are replaced with more efficient video formats like MP4 or WebM to reduce page weight.
Disable lazy loading for above-the-fold content : Detects lazy loading on likely above-fold images to improve Largest Contentful Paint (LCP)
Eliminate render-blocking resources : Checks for render-blocking CSS and JavaScript that prevent the initial page render
Enable browser caching : Cache-Control and ETag headers are properly configured for static resources.
Enable HTTP/2 or HTTP/3 : Use modern HTTP protocols to enable request multiplexing and reduce network latency.
Enable text-based compression : Compress text resources (HTML, CSS, JS) using Gzip or Brotli to reduce data transfer size.
Implement Google Consent Mode v2 : Adjust Google Tag behavior based on user consent to comply with privacy regulations and maintain data insights.
Implement lazy loading for offscreen content : Images and heavy resources below the fold are lazy loaded to improve initial performance.
Keep page load time under 3 seconds : Page fully loads in under 3 seconds on a standard connection.
Keep page weight under 1500KB : Total page weight including all resources is under 1500KB (ideally under 500KB).
Load non-critical code on user interaction : Defer JavaScript modules, widgets, and third-party code until the user signals intent through a click, focus, hover, or similar interaction.
Load non-critical code when content approaches the viewport : Use viewport-aware loading to fetch components, embeds, and feature code shortly before they become visible instead of shipping them on first load.
Minimize critical request chains : Reduce the number and depth of dependent resource requests that block the initial rendering of the page.
Minimize cumulative layout shift : Page maintains visual stability with a CLS score below 0.1, preventing unexpected content shifts during load.
Minimize HTTP requests : HTTP requests are minimized by combining files, using sprites, and HTTP/2.
Optimize CSS file size : Keep individual CSS files small and remove unused styles to accelerate the critical rendering path.
Optimize first contentful paint : First content renders within 1.8 seconds, providing quick visual feedback that the page is loading.
Optimize Google Tag Manager implementation : Configure Google Tag Manager efficiently to minimize its impact on page load speed and main-thread blocking.
Optimize interaction to next paint : Page responds to user interactions within 200ms, ensuring good responsiveness.
Optimize JavaScript bundle size : Checks for JavaScript files that exceed recommended size limits to ensure fast interaction
Optimize largest contentful paint : The largest content element loads within 2.5 seconds for a good user experience.
Optimize pages for back/forward cache : Pages avoid back/forward cache blockers such as unload listeners and restore state correctly when a browser resumes them from memory.
Optimize third-party script loading : Load third-party scripts asynchronously to prevent blocking the main thread and improve page performance.
Optimize web font loading : Use efficient font formats and loading strategies to prevent layout shifts and invisible text.
Perform browser-based performance audits : Conduct performance audits in a full browser environment to capture accurate runtime metrics and layout shifts.
Provide an offline fallback page : When the network is unavailable, users are shown a custom offline fallback page rather than the browser's generic error screen.
Provide source maps for production debugging : Checks for source map availability and configuration to ensure easier debugging
Reduce DOM size and complexity : Keep the DOM tree small and shallow to improve memory usage and rendering performance.
Reduce Time to First Byte (TTFB) : Measures and optimizes server response time (TTFB) to ensure a fast initial response
Register a service worker for caching and offline support : A service worker is registered to intercept network requests, cache critical assets, and enable offline functionality for your web application.
Remove duplicate JavaScript libraries : Detect and consolidate duplicate JavaScript libraries to reduce bundle size and prevent version conflicts.
Show loading indicators : Loading indicators provide feedback during asynchronous operations to keep users informed of progress.
Stream HTML to the browser before the full response is ready : Use HTTP chunked transfer encoding and React renderToPipeableStream (or ReadableStream) to begin delivering HTML to the browser as soon as the first bytes are available, reducing Time to First Byte and First Contentful Paint.
Use a content delivery network : Static assets are served from a CDN for reduced latency and faster delivery.
Use fetchpriority to hint resource loading priority : The fetchpriority attribute is applied to critical images, scripts, and preload links to help the browser prioritise the most important resources and defer lower-priority ones.
Use preconnect for critical third-party origins : Checks for preconnect hints to critical third-party origins to reduce connection latency
Use resource hints for faster loading : Implement preload, prefetch, and preconnect hints to optimize resource loading priority.
Use secure and up-to-date JS libraries : Detects JavaScript libraries and checks for known vulnerabilities
Use the Speculation Rules API to prefetch and prerender navigations : The Speculation Rules API is used to declaratively prefetch or prerender likely next pages, making navigation feel near-instant without the overhead of a full client-side router.
Virtualize long lists and tables : Render only the visible subset of rows or cards in large collections to reduce DOM size, memory usage, and scroll-time rendering work.

Back to top

Accessibility

95 rules. Keyboard, screen reader, ARIA, and inclusive UX rules.

Browse Accessibility on frontendchecklist.io

Align visible labels with accessible names : The accessible name of a control should contain its visible label text.
Allow pasting into form inputs : Users should be able to paste content into form fields to improve usability and reduce errors.
Announce dynamic content with ARIA live regions : Dynamic content updates are announced to screen readers using appropriate ARIA live regions.
Associate labels with form controls : Form inputs must have programmatically associated labels.
Avoid autofocus on form fields : Form fields do not use the autofocus attribute which can disorient screen reader users and cause unexpected page behavior.
Avoid autoplaying media : Audio and video content does not autoplay, or provides immediate controls to pause or stop playback.
Avoid focusable descendants in role="text" elements : Checks that elements with role='text' have no focusable descendants
Avoid images of text : Real text is used instead of images containing text, except for logos or when specific visual presentation is essential.
Avoid meta refresh redirects : Meta refresh redirects can disorient users and cause accessibility issues by refreshing the page unexpectedly.
Avoid redundant entry in the same process : Information already provided earlier in a multi-step flow is auto-populated or available for selection instead of being typed again.
Avoid redundant image alternative text : Alternative text should not contain redundant words like 'image' or 'photo'.
Avoid scrolljacking and custom scroll behavior : Natural scroll behavior is preserved without custom scroll speeds, directions, or hijacked scroll events.
Avoid sensory-only instructions : Instructions do not rely solely on sensory characteristics like color, shape, size, location, or sound.
Avoid using deprecated ARIA roles : Checks for deprecated or abstract ARIA roles to ensure long-term compatibility.
Create accessible tooltips : Tooltips are accessible to keyboard users and screen readers with proper ARIA attributes and focus handling.
Define proper table headers : Checks that data tables have proper headers
Do not use aria-hidden on the document body : Ensures the document body is not set to aria-hidden, which would hide the entire page from screen readers.
Enable keyboard navigation for all elements : All interactive elements are accessible via keyboard with logical focus order and hidden elements excluded from tab sequence.
Ensure accesskey values are unique : Checks that accesskey values are unique to avoid shortcut conflicts.
Ensure all input fields have accessible names : Checks that input fields have accessible names so screen reader users know what data each field expects.
Ensure ARIA attributes are valid : All ARIA attributes must be valid and exist in the WAI-ARIA specification.
Ensure ARIA roles are contained by required parent roles : Checks that elements with certain roles have required parent roles
Ensure ARIA roles contain required child roles : Elements with certain ARIA roles must contain the required child roles or the widget structure will be broken for assistive technologies.
Ensure content remains usable without CSS : Content structure, instructions, and primary tasks remain understandable and operable when author CSS is disabled or replaced by user styles.
Ensure dialogs have an accessible name : Checks that dialog elements have accessible names to orient screen reader users.
Ensure headings contain text : All heading elements (h1-h6) must have visible, descriptive content.
Ensure identical links have consistent destinations : Links with the same text must point to the same destination or be distinguishable.
Ensure logical focus order : Tab focus order follows the visual layout and logical reading sequence of the page.
Ensure table headers associate with data cells : Checks that table headers have associated data cells
Ensure tables have unique accessible names : Checks that data tables have unique accessible names
Fix empty and broken links : All links contain accessible text content and do not lead to broken destinations.
Hide decorative elements from assistive technology : Decorative images and visual elements are hidden from screen readers using aria-hidden or empty alt attributes.
Implement "Skip to Content" links : Checks for bypass mechanisms for keyboard navigation
Include a skip navigation link : A skip navigation link is provided to allow keyboard users to bypass repetitive content and navigate directly to main content.
Include required ARIA attributes for roles : Checks that elements have required ARIA attributes for their roles
Keep focused elements unobscured : Sticky headers, footers, banners, and overlays must not fully hide the element that currently has keyboard focus.
Keep repeated help mechanisms in a consistent location : When help or support mechanisms appear on multiple pages in the same flow, they stay in the same relative order so users can find them predictably.
Link table cells to headers using IDs : Checks that td headers attribute references valid th ids
Maintain logical heading order : Heading levels should follow a sequential, hierarchical order.
Make accordions keyboard navigable : Accordion components use proper ARIA attributes and keyboard interactions for screen reader accessibility.
Make carousels accessible : Carousels and sliders are accessible with pause controls, keyboard navigation, and proper ARIA attributes.
Make drag and drop accessible : Drag and drop interfaces provide keyboard alternatives and proper ARIA attributes for accessibility.
Make links in text blocks visually distinguishable : Links within blocks of text must be distinguishable from surrounding non-link text by more than color alone.
Make modal dialogs keyboard accessible : Modal dialogs are accessible with proper focus trapping, ARIA attributes, and keyboard dismissal.
Make notifications accessible : Toast notifications and alerts are announced to screen readers using ARIA live regions and appropriate roles.
Make tabs keyboard navigable : Tab components implement the ARIA tabs pattern with proper roles, states, and keyboard navigation.
Manage focus during dynamic interactions : Focus is programmatically managed during dynamic interactions like modals, page transitions, and content updates.
Match lang and xml:lang attributes : The lang and xml:lang attributes on the html element must have identical values to avoid conflicting language signals across HTML and XML parsers.
Meet minimum color contrast ratios : Text and background colors must have sufficient contrast to be readable by users with low vision or color blindness.
Place list items within list containers : List item elements (li) must always be direct children of a list container (ul, ol, or menu) to maintain valid HTML structure and correct screen reader announcements.
Prevent data loss from session timeouts : Users are warned before session expiry, can extend time when appropriate, and can re-authenticate or resume work without losing entered data.
Prevent seizure-triggering flashing content : Content does not flash more than three times per second to prevent seizures in users with photosensitive epilepsy.
Provide accessible authentication methods : Authentication flows avoid unnecessary cognitive tests and support assistive mechanisms such as password managers, paste, OTP autofill, and passkeys.
Provide accessible names for all interactive elements : Checks that interactive elements have accessible names for clear navigation.
Provide accessible names for ARIA command elements : Checks that command elements like buttons and links have accessible names for screen reader support.
Provide accessible names for buttons : All buttons must have a discernible, descriptive accessible name for screen readers.
Provide accessible names for meter elements : Checks that meter elements have accessible names to provide context for measurements.
Provide accessible names for progress bars : Checks that progressbar elements have accessible names
Provide accessible names for select elements : All <select> elements must have an associated label or an accessible name to be correctly identified by screen readers.
Provide accessible names for toggle fields : Checks that toggle fields (checkbox, radio, switch) have accessible names
Provide accessible names for tooltips : Checks that tooltip elements have accessible names
Provide accessible names for tree items : All elements with role="treeitem" must have a descriptive accessible name so screen reader users can navigate hierarchical tree widgets.
Provide alt text for image buttons : Input elements of type='image' must have a descriptive alt attribute.
Provide alternative text for objects : The <object> element must contain alternative content to ensure accessibility for users who cannot view the primary content.
Provide alternatives to parallax effects : Parallax scrolling effects have reduced-motion alternatives or can be disabled by users.
Provide audio descriptions for video : Videos with important visual content include audio descriptions that narrate visual information for blind users.
Provide captions for video content : Prerecorded video with audio must have synchronized captions. Live video must have real-time captions. This is required by WCAG 2.1 SC 1.2.2 and SC 1.2.4.
Provide instant anchor scroll option : Smooth scroll animations to anchor links respect motion preferences or provide an instant alternative.
Provide sufficient touch target size : Interactive elements must have large enough touch targets so users with motor impairments can activate them accurately on touchscreen devices.
Provide titles for iframes and frames : iframes and frames must have a title attribute to describe their content.
Remove focusable elements from aria-hidden containers : Ensures aria-hidden elements do not contain focusable content to avoid "ghost" focus.
Respect reduced motion preferences : Animations respect user motion preferences, avoid seizure-triggering flashing, and include warnings for excessive motion.
Support both portrait and landscape orientation : Content and functionality work in both portrait and landscape unless a specific orientation is essential to the activity.
Support content reflow at 400% zoom : Content reflows when zoomed to 400% without requiring horizontal scrolling or loss of functionality.
Support text resizing to 200% : Text can be resized up to 200% without loss of content or functionality using browser settings.
Test with screen readers : Pages must be tested with actual screen reader software (NVDA, JAWS, VoiceOver, TalkBack) to verify announcements, focus order, and widget behavior beyond what automated tools can detect.
Use a single label for each form field : Form fields should have exactly one associated element for maximum clarity.
Use appropriate tabindex values : Checks for appropriate tabindex values
Use correct definition list structure : Definition lists (<dl>) must only contain valid <dt> and <dd> elements.
Use correct list structure : Lists (ul, ol) should only contain list item elements (li) to ensure they are correctly interpreted by assistive technology.
Use descriptive link text : Link text clearly describes the destination or purpose without relying on surrounding context.
Use exactly one main landmark : Each page must have one and only one main landmark.
Use inclusive language : Content uses inclusive, non-discriminatory language that welcomes all users regardless of ability, gender, race, or background.
Use landmark regions correctly : Proper landmark regions (main, nav, footer) help users navigate the page more efficiently.
Use logical heading hierarchy : Headings follow a sequential structure (h1 to h6) that reflects the content hierarchy without skipping levels.
Use navigation landmark regions : Page navigation uses nav elements with proper ARIA labels to distinguish multiple navigation regions.
Use only allowed ARIA attributes for each role : Checks that ARIA attributes are allowed on their elements to ensure valid accessibility trees.
Use semantic list elements : Groups of related items use ul, ol, or dl elements so screen readers announce list context and item count.
Use semantic table markup for screen readers : Data tables use proper semantic markup with headers, captions, and scope attributes for screen reader accessibility.
Use unique IDs for active elements : All focusable or active elements must have a unique ID attribute.
Use unique IDs for ARIA references : IDs referenced by ARIA attributes must be unique to ensure correct accessibility relationships.
Use valid ARIA role values : Checks for valid ARIA role values
Use valid values for ARIA attributes : Checks for valid values in ARIA attributes
Wrap definition items in a definition list : Description terms (<dt>) and details (<dd>) must be contained within a <dl> element.
Write in plain language : Content uses clear, simple language that is easy to understand for users with cognitive disabilities and non-native speakers.

Back to top

SEO

94 rules. Crawlability, metadata, structured data, and search visibility rules.

Browse SEO on frontendchecklist.io

4XX Pages in Sitemap : Checks for sitemap URLs that return 4XX HTTP status codes, indicating broken or removed pages.
Add a favicon to every page : Checks for favicon presence and correct link element configuration
Add disclaimers to sensitive content : Checks for appropriate disclaimers on sensitive content types such as medical, legal, financial, and affiliate pages
Add FAQPage schema markup : Validates FAQPage JSON-LD structured data for question-and-answer content
Add internal links to key pages : Validates that key pages receive adequate internal links from other site pages
Add internal links to orphan pages : Detects pages with no internal links pointing to them
Add LocalBusiness schema markup : Validates LocalBusiness schema for local SEO
Add Organization schema markup : Validates Organization schema for brand presence
Add outgoing links to dead-end pages : Pages with no outgoing internal links, potentially trapping users and crawlers
Add Product schema markup : Validates Product schema for e-commerce
Add relevant external links : Validates that pages include outgoing links to authoritative external sources where appropriate
Add Review schema markup : Validates Review and AggregateRating schema on product, service, and business pages to enable star-rating rich results.
Add share buttons to content pages : Checks for social sharing buttons on articles, blog posts, and other shareable content pages.
Add structured data markup : Schema.org structured data (JSON-LD) is implemented for rich search results.
Add Twitter Card meta tags : Validates Twitter (X) Card meta tags for correct card type, image dimensions, and required fields.
Add VideoObject schema to video pages : Checks for VideoObject structured data on pages containing video content to enable video rich results in Google Search.
Audit all noindex pages : Lists and reviews all pages blocked from indexing to ensure critical content is accessible.
Audit and refine AI-generated content : Detects and reviews content that appears to be primarily AI-generated to ensure quality.
Avoid conflicting indexability signals : Detects conflicting signals between robots.txt, meta robots, X-Robots-Tag headers, and canonical tags
Avoid duplicate meta descriptions : Checks for duplicate meta descriptions across the site
Avoid keyword stuffing : Detects excessive keyword repetition in content, titles, or meta tags that signals manipulative SEO
Avoid multi-hop redirect chains : Detects multi-hop redirect chains that waste crawl budget
Avoid nofollow on internal links : Flags internal links with rel=nofollow
Avoid nosnippet on important pages : Detects pages preventing search engine snippets
Avoid redirect chains on canonical URLs : Ensures that canonical tags point directly to the final destination URL without intermediate redirects.
Avoid thin content on key pages : Checks content length on key pages to identify thin content that may underperform in search results.
Check for broken links : All links are tested and none are broken. Links redirect to intended destinations.
Cite authoritative external sources : Checks for citations to reputable external websites to back up factual claims and build trust.
Create a comprehensive Contact page : Checks for a dedicated contact page with multiple methods for users to reach out.
Create a dedicated About page : Checks for a dedicated about or company page with meaningful content.
Create and submit an XML sitemap : An XML sitemap is available at /sitemap.xml and includes all important pages.
Display a physical business address : Checks for visible physical address information
Display clear author bylines : Checks for visible author names on content pages to establish transparency and trust.
Do not link from HTTPS to HTTP : Detects links from HTTPS pages to HTTP destinations, which trigger mixed content warnings and lose ranking signals
Fix invalid links : Detects malformed, empty, or syntactically invalid link formats on the page
Fix malformed HTML structure : Ensures that the HTML document is well-formed with correctly nested and closed tags.
Fix or remove broken external links : Detects and resolves external links that return error codes or have timed out.
Geo Meta Tags : Checks for geographic meta tags for local or regional targeting
Highlight author credentials and expertise : Checks for author bios and credentials to establish expertise and trust.
Identify YMYL content on your site : Detects Your Money or Your Life (YMYL) content that is subject to Google's elevated E-E-A-T quality standards.
Implement comprehensive author markup : Uses structured data to provide machine-readable metadata about content authors.
Implement valid Article structured data : Validates that articles use the correct Schema.org properties for improved search visibility.
Implement valid BreadcrumbList schema : Adds structured data to breadcrumb navigation for better site hierarchy and search appearance.
Include indexable pages in your sitemap : Checks for canonical-url, indexable pages that are missing from the XML sitemap.
Include keywords in URL slugs : Checks if URL slugs contain descriptive, keyword-relevant words instead of IDs, random strings, or vague terms.
Keep HTML documents under crawl limits : Checks HTML document size against Googlebot crawl limits
Keep linked PDFs under 60 MB : Checks linked PDF sizes against Googlebot 60MB truncation limit
Keep NAP details consistent : Checks for consistent Name, Address, Phone across site
Keep page titles unique : Checks that the tag is unique across all pages of the site to avoid duplicate title SEO issues.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/sitemap-domain">Keep sitemap URLs on the correct domain</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks that all URLs in the sitemap belong to the same domain and protocol as the sitemap itself.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/length">Keep URLs concise</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks URL length for optimal crawlability and usability</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/sitemap-valid">Keep XML sitemaps valid</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Validates sitemap XML structure against the sitemaps.org protocol, URL limits, and encoding requirements.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/parameters">Limit unnecessary URL parameters</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for excessive URL parameters</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/redirect-chains">Link directly to final destination URLs</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Detects URLs that redirect and links pointing to redirects</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/social-profiles">Link to active social profiles</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Checks for links to the organization's social media profiles to help search engines connect the site to its social entity and build E-E-A-T signals.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/llm-parsability">Make content easy for LLMs to parse</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Analyzes how well LLMs can parse and understand the content</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/indexability">Make important pages indexable</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Identifies important pages blocked from search engine indexing by noindex, robots.txt, or other directives</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/meta-in-body">Meta Tags in Body</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Detects meta tags incorrectly placed in document body</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/mime-type">MIME Type Validation</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Detects Content-Type header mismatches with file extensions</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/noindex-in-sitemap">Noindex in Sitemap</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Checks for noindexed pages listed in sitemap</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/og-image-size">OG Image Size</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks og:image meets recommended size (1200x630)</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/og-url-match">OG URL Match</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks that og:url matches canonical URL</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/og-tags">Open Graph Tags</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Validates Open Graph meta tags for social sharing</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/article-links">Optimize article link density</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Ensures articles have a healthy balance of internal and external links relative to their length.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/affiliate-disclosure">Provide clear affiliate disclosures</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for affiliate and sponsored content disclosures to maintain transparency.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/robots-txt">Publish a robots.txt file</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Checks if robots.txt exists at the root, is accessible, and contains valid directives.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/editorial-policy">Publish an editorial policy page</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for editorial and content policy pages that demonstrate site-wide trustworthiness</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/quality">Publish high-quality content</a> <img src="./apps/web/public/priority/high.svg" alt="High">: LLM-based content quality analysis for SEO</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/llms-txt">Publish llms.txt for documentation-heavy sites</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Offer an optional llms.txt index that points AI tools to high-value documentation pages and, when useful, a fuller llms-full.txt companion.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/broken-links">Resolve internal broken links</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Detects and fixes internal links that return 404 or 5xx errors to improve user experience.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/robots-meta-conflict">Robots Meta Conflict</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Detects pages blocked by robots.txt that also carry noindex meta tags, creating a paradox where the directive is never read.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/schema-noindex-conflict">Schema + Noindex Conflict</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Detects pages that carry rich result schema markup but are blocked from indexing via noindex or robots.txt.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/service-area">Service Area Pages</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for properly structured service-area or location pages for businesses serving multiple geographic regions.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/canonical-url">Set canonical URLs for all pages</a> <img src="./apps/web/public/priority/high.svg" alt="High">: A canonical URL tag is present to prevent duplicate content issues.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/robots-meta">Set robots meta directives correctly</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Checks robots meta tag for valid indexing directives in the page head.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/freshness">Show content freshness signals</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for last-modified and published date signals that help Google assess content currency</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/content-dates">Show published and updated dates</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for published and modified dates on content pages</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/trust-signals">Show trust signals on key pages</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for trust badges, certifications, client logos, testimonials, and social proof on high-conversion pages.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/canonical-header">Sync HTML canonical tags and Link headers</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Ensures consistency between HTML rel="canonical" tags and HTTP Link canonical-url headers.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/tel-mailto">Tel & Mailto Links</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Validates that phone numbers use the tel: scheme and email addresses use the mailto: scheme for one-click contact on mobile devices.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/special-chars">URL Special Characters</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for problematic special characters in URL paths that can cause crawling, parsing, or canonicalization issues.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/stop-words">URL Stop Words</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Flags common stop words in URL slugs that add length without improving keyword relevance.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/h1">Use a single descriptive H1</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Validates that each page has exactly one H1 tag containing a descriptive, keyword-relevant heading</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/pagination">Use canonicals on paginated pages</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks that paginated pages have proper canonicals</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/anchor-text">Use descriptive anchor text</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for descriptive, keyword-rich anchor text that provides context for users and search engines.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/hyphens">Use hyphens in URLs</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks that URL slugs use hyphens as word separators, not underscores or spaces</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/lowercase">Use lowercase URLs</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks that URLs are lowercase</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/trailing-slash">Use trailing slashes consistently</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Checks for consistent trailing slash usage across all URLs to avoid duplicate content and canonicalization issues.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/json-ld-valid">Use valid JSON-LD structured data</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Validates JSON-LD structured data for syntax correctness, required properties, and schema.org compliance</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/weak-internal-links">Weak Internal Links</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Detects pages with very few dofollow internal links pointing to them, indicating poor link equity distribution and crawl discoverability.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/website-search">WebSite Search Schema</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Checks for WebSite schema with SearchAction to enable the Sitelinks Searchbox in Google Search results.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/meta-title">Write a descriptive page title</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Validates page title presence and length</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/meta-description">Write a meta description for each page</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Validates meta description presence and length</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/seo/reading-level">Write at a clear reading level</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Analyzes content readability using Flesch-Kincaid</li> </ul> <p><strong><a href="#frontend-checklist">Back to top</a></strong></p> <h3>Security</h3> <p><em>22 rules. Headers, transport, safe linking, and frontend security rules.</em></p> <p><a href="https://frontendchecklist.io/rules/security">Browse Security on frontendchecklist.io</a></p> <ul> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/element-hiding">Adblock Element Hiding</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Checks for HTML elements and CSS classes that would be hidden by common adblockers, causing layout breaks or missing functionality for users with ad blocking enabled.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/dependency-audit">Audit dependencies for known vulnerabilities</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Dependencies are regularly scanned for known security vulnerabilities using automated tooling, and critical findings are remediated before deployment.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/mixed-content">Avoid mixed content on HTTPS pages</a> <img src="./apps/web/public/priority/high.svg" alt="High">: An HTTPS page that loads resources over HTTP has mixed content — browsers block or warn about these requests, breaking functionality and undermining transport security.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/blocked-links">Blocked Tracking Links</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Links and resources pointing to known tracking or advertising domains may be blocked by adblockers, breaking navigation and functionality for a significant portion of users.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/new-tab">External Link Security</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Links that open in a new tab using target='_blank' must include rel='noopener noreferrer' to prevent the opened page from accessing the opener's window context.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/content-security-policy">Implement a content security policy</a> <img src="./apps/web/public/priority/high.svg" alt="High">: A Content Security Policy is implemented to prevent XSS attacks and control resource loading.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/leaked-secrets">Leaked Environment Variables</a> <img src="./apps/web/public/priority/critical.svg" alt="Critical">: Checks for exposed API keys, tokens, passwords, and other secrets embedded in HTML source, JavaScript bundles, or client-accessible files.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/terms-of-service">Link to your terms of service in the footer</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Websites offering services to users should publish Terms of Service and link to them from every page — this establishes the legal agreement governing use of the service.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/stack-trace-exposure">Prevent stack trace exposure in production error responses</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Production error responses never include stack traces, internal file paths, framework internals, or other debugging detail that could aid an attacker (OWASP A09).</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/form-captcha">Protect public forms with CAPTCHA</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Public forms that accept user input without authentication must include bot protection to prevent spam, credential stuffing, and automated abuse.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/http-to-https">Redirect HTTP to HTTPS</a> <img src="./apps/web/public/priority/critical.svg" alt="Critical">: All HTTP requests must be permanently redirected (301) to HTTPS to prevent users from accessing your site over an insecure connection.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/password-field-security">Secure password input fields</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Password fields implement security best practices including proper autocomplete, show/hide toggle, and strength indicators.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/https">Serve all pages over HTTPS</a> <img src="./apps/web/public/priority/critical.svg" alt="Critical">: Every page and resource on your site must be delivered over HTTPS to protect user data in transit and enable modern browser features.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/permissions-policy">Set a Permissions-Policy header</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: The Permissions-Policy header lets servers restrict which browser features (camera, microphone, geolocation, etc.) can be used in a page or its embedded iframes.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/referrer-policy">Set a Referrer-Policy header</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: The Referrer-Policy header controls how much referrer information is sent when navigating from your site to another, protecting user privacy and preventing leaking sensitive URL parameters.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/hsts">Set an HSTS header</a> <img src="./apps/web/public/priority/high.svg" alt="High">: The Strict-Transport-Security response header tells browsers to always use HTTPS for your domain, preventing protocol downgrade attacks and cookie hijacking.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/x-frame-options">Set an X-Frame-Options header</a> <img src="./apps/web/public/priority/high.svg" alt="High">: The X-Frame-Options header controls whether your page can be embedded in an iframe, frame, or object — preventing clickjacking attacks.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/session-cookie-flags">Set Secure, HttpOnly, and SameSite flags on session cookies</a> <img src="./apps/web/public/priority/high.svg" alt="High">: All session and authentication cookies are issued with the Secure, HttpOnly, and an appropriate SameSite flag to prevent interception, JavaScript exfiltration, and cross-site request forgery.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/x-content-type">Set X-Content-Type-Options: nosniff</a> <img src="./apps/web/public/priority/high.svg" alt="High">: The X-Content-Type-Options: nosniff header prevents browsers from MIME-sniffing a response away from the declared Content-Type, blocking a class of drive-by download and XSS attacks.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/token-storage-security">Store authentication tokens securely</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Sensitive authentication tokens are stored in httpOnly cookies rather than localStorage or sessionStorage to prevent theft via cross-site scripting attacks (OWASP A07).</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/form-https">Submit forms over HTTPS</a> <img src="./apps/web/public/priority/critical.svg" alt="Critical">: All HTML form actions must point to HTTPS URLs to ensure form data is encrypted in transit and cannot be intercepted by network attackers.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/security/cross-origin-isolation">Use COOP, COEP, and CORP for cross-origin isolation when needed</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Sensitive or high-capability applications use COOP, COEP, and CORP deliberately, audit third-party embeds, and verify cross-origin isolation in the browser before relying on it.</li> </ul> <p><strong><a href="#frontend-checklist">Back to top</a></strong></p> <h3>Images</h3> <p><em>25 rules. Formats, responsive delivery, optimization, and media quality rules.</em></p> <p><a href="https://frontendchecklist.io/rules/images">Browse Images on frontendchecklist.io</a></p> <ul> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/image-compression">Compress images without quality loss</a> <img src="./apps/web/public/priority/high.svg" alt="High">: All images are compressed without significant quality loss to reduce file sizes.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/broken-images">Fix broken images</a> <img src="./apps/web/public/priority/high.svg" alt="High">: No images return 404 errors or display broken-image icons to users.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/error-images">Handle image loading errors gracefully</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Broken images are handled gracefully with fallback images or placeholder content.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/responsive-images">Implement responsive images with srcset</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images use srcset and sizes attributes for responsive delivery across devices.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/image-file-size">Keep image file sizes within recommended limits</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Individual image files are compressed to reasonable sizes to avoid wasted bandwidth and slow load times, especially on mobile networks.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/offscreen-lazy">Lazy load offscreen images</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images below the visible viewport use loading="lazy" to defer download until the user scrolls near them, reducing initial page load time.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/svg-inline">Manage inline SVG size and complexity</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Large or complex SVGs inlined in HTML are extracted to external files or components, preventing them from bloating the HTML document and blocking parsing.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/optimized">Optimise images for faster loading</a> <img src="./apps/web/public/priority/high.svg" alt="High">: All images are compressed and metadata-stripped before deployment, removing unnecessary bytes without visible quality loss.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/image-optimization">Optimize all images for web</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images are optimized with appropriate formats, compression, and modern techniques.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/svg-optimization">Optimize SVG files</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: SVG files are optimized with SVGO to remove unnecessary metadata and reduce size.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/critical-images">Prioritize loading critical images</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Hero and above-the-fold images are preloaded with high fetch priority for LCP.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/alt-text">Provide meaningful alt text for images</a> <img src="./apps/web/public/priority/critical.svg" alt="Critical">: Every informative image has a descriptive alt attribute; decorative images use alt="" to be ignored by screen readers.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/responsive-size">Serve images at the correct display size</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images are not significantly larger than their display dimensions—serving a 2000px image for a 400px container wastes bandwidth and hurts LCP.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/image-cdn">Serve images from a CDN</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images are served from a CDN with automatic optimization, resizing, and format conversion.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/dimensions">Set explicit width and height on images</a> <img src="./apps/web/public/priority/high.svg" alt="High">: All <img> elements have explicit width and height attributes so browsers can reserve space before the image loads, preventing layout shift.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/retina-display">Support high-DPI retina displays</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: High-resolution images (2x, 3x) are provided for retina and high-DPI displays.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/figure-figcaption">Use <figure> and <figcaption> for image captions</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Images with visible captions are wrapped in <figure> with a <figcaption> child, creating a semantic association between image and caption.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/picture-element">Use <picture> with an <img> fallback</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Every <picture> element contains a required <img> fallback as its last child, ensuring images display in all browsers including those that don't support <picture>.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/avif-format">Use AVIF format for modern browsers</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Images support AVIF format for superior compression with proper browser fallbacks.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/filename-quality">Use descriptive image filenames</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Image filenames are descriptive and human-readable, using lowercase letters, hyphens as separators, and meaningful words that reflect the image content.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/sprite-generation">Use image sprites where appropriate</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Small images and icons use sprites or SVG to reduce HTTP requests.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/modern-format">Use modern image formats (WebP, AVIF)</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images are served in modern formats (WebP or AVIF) instead of legacy JPEG/PNG where browser support allows, reducing file size without visible quality loss.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/progressive-jpeg">Use progressive JPEG encoding</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: JPEG images use progressive format for better perceived loading performance.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/srcset">Use srcset for responsive images</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images wider than 100px use the srcset attribute to offer multiple resolution variants, letting the browser download the optimal size for the user's viewport and device pixel ratio.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/images/webp-format">Use WebP format with fallbacks</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Images are served in WebP format with fallbacks for older browsers.</li> </ul> <p><strong><a href="#frontend-checklist">Back to top</a></strong></p> <h3>Testing</h3> <p><em>13 rules. Unit, integration, E2E, monitoring, and quality assurance rules.</em></p> <p><a href="https://frontendchecklist.io/rules/testing">Browse Testing on frontendchecklist.io</a></p> <ul> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/performance-budget">Enforce performance budgets in CI</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Define measurable performance thresholds (bundle size, Lighthouse scores, Core Web Vitals) and fail CI builds automatically when they're exceeded.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/mock-best-practices">Follow mocking best practices</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Use mocks strategically to isolate units under test without over-mocking.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/contract-testing">Implement consumer-driven contract testing for API boundaries</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Consumer-driven contract tests (Pact) define and verify the API contracts between the frontend consumer and backend provider, catching integration mismatches before they reach production.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/e2e-testing">Implement end-to-end testing</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Use E2E testing frameworks like Playwright or Cypress to test critical user journeys.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/accessibility-testing">Include accessibility testing</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Automate accessibility testing with tools like axe-core, jest-axe, or Playwright's accessibility testing.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/error-monitoring">Integrate real-time error monitoring in production</a> <img src="./apps/web/public/priority/high.svg" alt="High">: A real-time error monitoring service captures, groups, and alerts on unhandled exceptions and promise rejections in production so issues are discovered before users report them.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/test-coverage">Maintain test coverage thresholds</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Set and enforce minimum code coverage thresholds to ensure adequate test coverage.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/cross-browser-testing">Test across all major browsers</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Website works correctly across major browsers (Chrome, Firefox, Safari, Edge).</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/mobile-testing">Test on real mobile devices and viewports</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Verify your application on real mobile devices and browser DevTools device emulation to catch touch interaction issues, viewport bugs, and mobile-specific rendering problems.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/mutation-testing">Use mutation testing to measure how well tests detect bugs</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Run Stryker mutation testing on critical business logic to verify that your test suite will actually catch real bugs, not just achieve line coverage.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/visual-regression">Use visual regression testing</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Capture screenshots of components and pages, then automatically compare them against approved baselines to detect unintended visual changes before they reach production.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/integration-testing">Write integration tests for key workflows</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Test how multiple units of code work together — API routes with their database queries, form submissions with validation, and component trees with their state management.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/testing/unit-tests">Write unit tests</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Critical functionality has unit tests with good coverage for reliability.</li> </ul> <p><strong><a href="#frontend-checklist">Back to top</a></strong></p> <h3>Privacy</h3> <p><em>5 rules. Consent, tracking, retention, and user data rights rules.</em></p> <p><a href="https://frontendchecklist.io/rules/privacy">Browse Privacy on frontendchecklist.io</a></p> <ul> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/privacy/third-party-cookies">Avoid third-party cookies</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Third-party cookies set by external domains track users across sites without their knowledge. Modern browsers are phasing them out, and regulations like GDPR and CCPA require consent before setting them.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/privacy/data-minimisation">Collect only the minimum personal data necessary</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Limit data collection to only what is strictly required for the stated purpose, in line with GDPR Article 5(1)(c) data minimisation principles.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/privacy/right-to-erasure">Implement a user-facing data deletion mechanism</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Provide users with a clear way to request deletion of their personal data, fulfilling GDPR Article 17 (right to erasure / right to be forgotten).</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/privacy/privacy-policy">Link to your privacy policy in the footer</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Websites that collect any personal data must publish a privacy policy and link to it prominently — this is a legal requirement under GDPR, CCPA, and most other privacy regulations.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/privacy/cookie-consent">Show a cookie consent notice</a> <img src="./apps/web/public/priority/high.svg" alt="High">: Websites that set non-essential cookies must obtain prior, informed user consent under GDPR, CCPA, and similar privacy regulations before cookies are placed.</li> </ul> <p><strong><a href="#frontend-checklist">Back to top</a></strong></p> <h3>Internationalization</h3> <p><em>5 rules. Localization, RTL, language handling, and translation workflow rules.</em></p> <p><a href="https://frontendchecklist.io/rules/i18n">Browse Internationalization on frontendchecklist.io</a></p> <ul> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/i18n/hreflang">Add hreflang tags for multilingual sites</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Hreflang tags indicate language and regional variations for multilingual sites.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/i18n/text-expansion">Design UI components to accommodate text expansion from translation</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Ensure that layouts use flexible sizing so that translated text — which can be 30–50% longer than English — does not overflow, clip, or break the UI.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/i18n/pluralization">Handle plural forms with Intl.PluralRules or ICU MessageFormat</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Select the correct grammatical plural category for every language using Intl.PluralRules or an ICU-aware i18n library instead of simple singular/plural branching.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/i18n/currency-formatting">Use Intl APIs for currency, number, and date formatting</a> <img src="./apps/web/public/priority/medium.svg" alt="Medium">: Format monetary values, numbers, and dates using the browser's built-in Intl.NumberFormat and Intl.DateTimeFormat APIs instead of manual string manipulation.</li> <li><input disabled="" type="checkbox"> <a href="https://frontendchecklist.io/rules/i18n/locale-images">Use locale-neutral images and provide cultural overrides when needed</a> <img src="./apps/web/public/priority/low.svg" alt="Low">: Default to abstract, culture-neutral icons and illustrations, and supply locale-specific image variants only when visual content carries meaning that differs across regions.</li> </ul> <p><strong><a href="#frontend-checklist">Back to top</a></strong></p>  <h2>Monorepo overview</h2> <table> <thead> <tr> <th>Area</th> <th>Purpose</th> </tr> </thead> <tbody><tr> <td><code>apps/web</code></td> <td>Public website, rule pages, checklists, and MCP HTTP entrypoints</td> </tr> <tr> <td><code>packages/content</code></td> <td>Source MDX content for rules and checklists</td> </tr> <tr> <td><code>packages/mcp</code></td> <td>MCP server and tool definitions</td> </tr> <tr> <td><code>packages/rules</code></td> <td>Public rules package for external consumers</td> </tr> <tr> <td><code>packages/design-system</code></td> <td>Shared UI primitives and custom components</td> </tr> <tr> <td><code>packages/auth</code>, <code>packages/data-layer</code>, <code>packages/schemas</code>, <code>packages/types</code></td> <td>Shared auth, data, schema, and type infrastructure</td> </tr> </tbody></table> <h2>Common commands</h2> <ul> <li><code>pnpm dev</code> - Run local development tasks</li> <li><code>pnpm build</code> - Build all apps and packages with Turborepo</li> <li><code>pnpm lint</code> - Run Biome linting</li> <li><code>pnpm typecheck</code> - Run TypeScript checks across the repo</li> <li><code>pnpm test</code> - Run the test suite</li> <li><code>pnpm validate:rule-structure</code> - Validate rule heading structure</li> <li><code>pnpm score:rules</code> - Score the rule corpus against the quality gate</li> <li><code>pnpm generate:skills</code> - Regenerate installable skills from the rules</li> <li><code>pnpm generate:readme</code> - Regenerate the root README checklist and the generated catalog copy</li> </ul> <h2>Contributing</h2> <p>Most content work happens in <code>packages/content/rules/en</code>. A typical rule-editing flow is:</p> <ol> <li>Edit or add the relevant rule MDX files.</li> <li>Run <code>pnpm score:rules</code>.</li> <li>Run <code>pnpm validate:rule-structure</code>.</li> <li>Run <code>pnpm validate:sources</code> when source metadata changes.</li> <li>Run <code>pnpm generate:skills</code>.</li> <li>Run <code>pnpm generate:readme</code> if rule titles or descriptions changed.</li> </ol> <p>See <a href="AGENTS.md"><code>AGENTS.md</code></a>, <a href="scripts/README.md"><code>scripts/README.md</code></a>, and <a href="docs/generated/rules-catalog.md"><code>docs/generated/rules-catalog.md</code></a> for repo conventions, script docs, and the generated standalone catalog copy.</p> <h2>Contributors</h2> <p>Thanks goes to these wonderful people (<a href="https://allcontributors.org/docs/en/emoji-key">emoji key</a>):</p> <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"> <img src="https://contrib.rocks/image?repo=thedaviddias/Front-End-Checklist" /> </a> <h2>Support</h2> <ul> <li>GitHub repo: <a href="https://github.com/thedaviddias/Front-End-Checklist">thedaviddias/Front-End-Checklist</a></li> <li>Issues: <a href="https://github.com/thedaviddias/Front-End-Checklist/issues">open an issue</a></li> <li>License: <a href="LICENSE">MIT</a></li> </ul>

Front-End-Checklist

Frontend Checklist

What you get

How to use this checklist

Priority legend

Choose your workflow

Browse online

Choose the right pattern first

Contribute to the checklist

Use with MCP

Use with skills

Checklist

Jump to a category

Categories

HTML

CSS

JavaScript

Performance

Accessibility

SEO

Reviews (0)