Audit the titles, descriptions, images, and URLs shown when web pages are shared on social networks or messaging apps. Check Open Graph metadata, the tags that define link previews, for missing values and incorrect settings.
- Check link previews before publishing a page
- Find missing or empty Open Graph tags
- Review sharing images and URL settings
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Audit paginated archives, product lists, and search results. Check canonical tags, which identify each page’s preferred URL, and verify consistent pagination links so search crawlers can reach later pages, including content behind infinite scroll.
- Review canonical tags on blog archive pages
- Check pagination URLs in product lists
- Verify crawlable links for infinite scroll
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Measure page loading speed and identify what prevents a page from loading in under three seconds. Use performance measurements to guide improvements such as lazy loading, caching, CDN delivery, and reducing resource costs.
- Investigating slow page loads
- Finding heavy resources and costly rendering steps
- Checking performance on a throttled 3G connection
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review pagination markup so people using screen readers or keyboards can understand their current page and move between pages. Check navigation labels, current-page attributes, focusable controls, and announcements when the page changes.
- Reviewing pagination in search results
- Checking keyboard navigation between pages
- Improving screen reader labels for pagination
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Set and review limits for bundled file size and page performance so CI, automated checks on code changes, can catch regressions. Check enforcement on pull requests and review production monitoring for slowdowns after release.
- Reviewing performance limits in CI configuration
- Checking pull requests that add dependencies or assets
- Setting limits for file size and page performance
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review messages that display counts and check whether each target language gets the correct plural form. Replace simple number-and-text joins or singular/plural branches with Intl.PluralRules or ICU MessageFormat, which select wording according to language-specific rules.
- Reviewing count messages in multilingual interfaces
- Adding plural forms for Arabic or Russian
- Checking translation files and i18n settings
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review HTML object elements and add meaningful fallback content for people who cannot load or view embedded material. Identify missing alternatives, suggest text or appropriate HTML elements, and explain how to verify accessibility.
- Find object elements with missing fallback content
- Add alternatives for embedded content that fails to load
- Review whether fallback content conveys equivalent information
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Audit website redirects after URL migrations, domain changes, or CMS upgrades. Record each redirect path and HTTP status code, identify unnecessary steps or loops, and update redirects to point directly to the final destination.
- Checking redirect paths after a URL migration
- Finding redirect chains and loops after a domain change
- Simplifying redirect rules accumulated through CMS upgrades
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review stylesheets for a CSS reset or normalization layer that reduces differences in browser defaults. Check import order, framework provisions, and rendered layouts across screen sizes and interaction states, then suggest changes for a consistent styling foundation.
- Investigating layout differences between browsers
- Choosing a reset for a new site's styles
- Checking reset coverage in a CSS framework
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Audit page loading and choose resource hints, browser instructions for fetching files or preparing connections early. Use measurements to identify delays, then suggest preload, preconnect, prefetch, or dns-prefetch for critical assets, external services, and likely next-page resources.
- Reviewing early loading of key images and fonts
- Preparing connections to external services
- Prefetching resources for likely next pages
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Create a custom offline page and configure a service worker, a browser background script, to cache it in advance. Show it when page navigation fails, and review resource dependencies and fallback conditions.
- Add an offline page to a PWA
- Guide users during connection loss
- Review offline page caching
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Audit and add structured organization data on a business or brand homepage. Check machine-readable details such as the official name, logo, contact information, and social profiles to help Google understand the organization and its search information panel.
- Audit organization data on a company homepage
- Add brand names, logos, and contact details in JSON-LD
- Check links to official social profiles
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Check images used in social link previews through Open Graph metadata. Verify dimensions, aspect ratio, file size, and HTTPS URLs, then resize assets and update tags to reduce missing images and unwanted cropping.
- Auditing social link preview images
- Preparing 1200×630-pixel sharing images
- Investigating missing or cropped preview images
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Audit a page’s social sharing URL against its canonical URL, the preferred page address. Identify differences in domains, paths, or tracking parameters, and align the tags to address split share counts.
- Investigating unexpectedly low social share counts
- Checking Open Graph tags before publication
- Reviewing tracking parameters and URL variations
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Measure the total size of a web page and its resources, identify what slows loading, and reduce unnecessary weight. Use a 1500KB limit to guide image optimization, code compression, and removal of unused resources.
- Investigating slow page loads on mobile networks
- Checking total page size against a size budget
- Reducing heavy images and JavaScript files
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review slow page loads and choose resource hints, browser instructions that start loading or connecting earlier. Use measurements to identify bottlenecks, then recommend preload, preconnect, prefetch, or dns-prefetch for important assets and likely next-page resources.
- Reviewing slow loading of prominent images and fonts
- Preparing connections to external services
- Prefetching resources for likely next-page visits
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review URL parameters used for filters, sorting, pagination, and tracking. Check canonical tags, which identify a preferred page URL, and recommend consistent handling of URL variants to address duplicate content and unnecessary search engine crawling.
- Reviewing filtered and sorted product URLs
- Removing tracking parameters from canonical URLs
- Investigating crawlable URL combinations
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review form fields for code that blocks pasting, then remove those restrictions. The skill helps check password manager use, keyboard interactions, and accessibility so people can paste passwords and other long values into inputs.
- Checking why passwords cannot be pasted
- Reviewing credit card fields for paste restrictions
- Improving form accessibility
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review HTTP response headers and restrict browser features an application does not need, such as camera, microphone, and location access. Guide Permissions-Policy settings that limit what attackers could use if the site is compromised.
- Review security headers before a release
- Disable unused camera and microphone features
- Check feature restrictions for third-party iframes
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review whether every page provides an accessible privacy policy link, especially in the footer. Check that the policy explains data collection, use, sharing, retention periods, contact details, and user rights, and identify missing information.
- Checking privacy policy links across all pages
- Adding a privacy policy link to a shared footer
- Reviewing data retention and sharing disclosures
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review early connections to third-party services such as fonts and APIs. Use loading measurements to identify essential domains, recommend preconnect hints that prepare connections in advance, and remove unnecessary hints that add overhead.
- Investigating connection delays for external fonts and APIs
- Reviewing preconnect hints in the page head
- Removing unnecessary early connections
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review website text and interface instructions for jargon, complex sentences, and unclear actions. Simplify wording, explain technical terms, and adjust reading difficulty so the intended audience can understand content and follow instructions.
- Simplifying website instructions
- Explaining technical terms for general readers
- Reviewing interface text for accessibility
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Find important pages that receive no links from elsewhere on the site. Compare crawl results with sitemaps and indexed pages, then suggest relevant existing pages where descriptive internal links could help connect the content.
- Audit internal links across a site
- Investigate pages with low organic search traffic
- Find relevant pages to link to isolated content
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review images displayed at different screen sizes and help browsers select appropriately sized files. Check srcset image options, sizes display-width hints, and CSS layout together to identify oversized mobile downloads or mismatched image variants.
- Reviewing responsive images in articles
- Reducing oversized image downloads on phones
- Checking image sizes in cards and galleries
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026