Coding standards, frameworks, refactoring, and code review (16.4K skills)
Review CSS custom properties, often called CSS variables, used in animations and transitions. Add @property registrations with value types, initial values, and inheritance settings to support smooth changes and validate assigned values.
Review and adapt component CSS using container queries, rules based on the space a parent element provides. This helps cards and other components adjust across sidebars, grids, and full-width layouts.
Review conflicting CSS rules and organize styles with cascade layers, explicit groups that control override order. Define layers for resets, base styles, components, and utilities to make large stylesheets easier to reason about and maintain.
Review large JavaScript bundles to find code that can load later. Suggest dynamic imports, which load modules when needed, and page-level splitting, with loading states for heavy libraries and features outside the initial view.
Find and fix malformed HTML, including unclosed tags, incorrect nesting, and document structure errors. Inspect rendered HTML and HTTP responses to identify specific pages or templates with problems that may affect rendering and search engine parsing.
Review images needed when a page first opens, checking file size, display dimensions, and loading priority. Identify changes to preload settings and lazy loading that help the main visual content appear sooner.
Find repeated colors, spacing, and font sizes in CSS, then organize them into custom properties, reusable values referenced with var(). Review their use across components and screen sizes, and explain how overrides support theme changes.
Measure CLS, a score for unexpected movement of page content, and identify what causes it. Review image dimensions, reserved advertising space, fonts, and animations to recommend changes that reduce reading interruptions and accidental clicks.
Check whether production CSS is minified, meaning unnecessary spaces, comments, and verbose syntax are removed to reduce file size. Review build settings and rendered layouts, then suggest suitable minification tools or framework settings.
Review rotating slideshows for accessibility and guide fixes to pause controls, keyboard navigation, and screen reader announcements. Check the rendered HTML and ensure the carousel respects users who request reduced motion in their device settings.
Review and fix breadcrumb HTML so readers, including people using screen readers, can understand site hierarchy and their current location. Check navigation labels, ordered lists, current-page attributes, and consistency with structured data.
Review and create print styles for web pages so printed content stays readable. Adjust typography and page breaks, hide navigation and ads, and display external link URLs in the printed output.
Review JavaScript variable declarations, report every use of var with line numbers, and replace declarations with const or let according to reassignment. Explain variable scope and initialization behavior, and check affected browser execution paths.
Review tooltips so keyboard and screen reader users can access their explanations. Check the rendered HTML, accessible associations, hover and focus behavior, Escape dismissal, and contrast, then identify the elements and attributes that need fixes.
Review tooltips so their extra information is available to screen reader users. Check accessible names, meaning labels available to assistive technology, and links to the elements that trigger them, then suggest fixes and verification steps.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
Review collapsible accordion sections for keyboard and screen reader access. Check button triggers, expanded-state attributes, panel links, and heading structure, then guide fixes using the HTML actually delivered to the browser.
Review CSS animations for properties that cause costly layout updates, then suggest changes using transform and opacity. Check how effects look across screen sizes and interaction states, including support for users who prefer reduced motion.
Review how pages return from the browser’s back/forward cache, which restores them from memory. Identify event handlers that block restoration, fix lifecycle assumptions, and refresh time-sensitive information when a cached page resumes.
Review website images and delivery settings to introduce AVIF, an image format with efficient compression. Check image size and loading behavior, and provide WebP or JPEG alternatives for browsers that do not support AVIF.
Review whether ARIA roles, which describe interface elements to assistive technology, have the required parent roles. Find misplaced menu items, tabs, or list items, suggest suitable containers, and explain how to verify the corrected structure.
Review meter elements for accessible names, the labels screen readers use to explain what a value measures. Identify missing labels, add aria-label or aria-labelledby, and describe checks using browser accessibility tools or assistive technology.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.
Check that ARIA roles, which describe interface elements to assistive technology, include their required attributes. Identify missing state or value information in rendered HTML and get guidance on fixes and accessibility verification.