Coding standards, frameworks, refactoring, and code review (16.4K skills)
Review long pages and dashboards to defer heavy components until they approach the visible screen area. Identify unnecessary initial JavaScript, introduce visibility-based loading, and preserve layout space so scrolling content is ready when needed.
Review iframe and frame titles so screen reader users can identify embedded content before entering it. Find missing or empty title attributes, add meaningful descriptions, and verify the changes with browser accessibility tools or assistive technology.
Measure how quickly a webpage updates after user interactions using INP, a responsiveness metric. Identify confirmed bottlenecks and improve event handlers, split long tasks, or move heavy computation to web workers.
Audit an HTTPS website for HTTP links in pages, resources, and application code. Group findings by link type, update internal URLs, and check whether external destinations support HTTPS before changing them.
Review form validation so users, including people using screen readers, can understand and correct errors. Check field descriptions, required states, and grouped choices in rendered HTML, while accounting for React forms that handle submission in the browser.
Review web page headings for skipped levels and unclear hierarchy. Identify specific elements to adjust, explain how heading structure supports screen reader navigation, and describe how to verify the revised page with accessibility tools.
Review how a website behaves when images fail to load and add fallback images or meaningful placeholder content. Check loading behavior, consider loading placeholders, and use error logging and browser developer tools to investigate and verify fixes.
Review where keyboard focus, the current target for keyboard input, moves when dialogs open, views change, or content updates. Identify misplaced or lost focus and propose changes that help keyboard and screen reader users continue navigating.
Audit how quickly a page shows its first text or image. Use performance measurements to identify blocking resources, slow server responses, and rendering delays, then recommend changes tied to the confirmed bottlenecks.
Review CSS focus indicators, the visible outlines that show which element receives keyboard input. Identify missing, clipped, or misplaced indicators, check contrast and responsive states, and guide changes that make keyboard navigation easier to follow.
Review CSS text sizes for mobile readability and accessibility. Identify undersized text and fixed pixel settings, suggest relative units that follow browser font preferences, and check that content and controls remain usable at 200% zoom.
Review how a web page loads scripts and identify tags that interrupt HTML parsing. Get guidance on choosing defer, async, or type=module, with checks focused on the HTML actually delivered to the browser.
Check and implement site icons for browser tabs, bookmarks, and mobile home screens. Review icon formats, sizes, HTML declarations, and PWA manifest settings to help the site display appropriate icons across browsers and devices.
Find npm packages that help implement or check a frontend rule, verify download counts and publishing dates, and add up to three qualifying package names to the rule file's metadata.
Review pages for languages written from right to left, including Arabic and Hebrew. Guide HTML direction settings, mixed-direction user content, and layout checks so browsers and screen readers handle text in the intended order.
Review repeated event listeners and consolidate them on a shared parent element. This approach, called event delegation, handles dynamically added items and reduces individual listeners while preserving the intended interaction behavior.
Review styles written directly in HTML or embedded style blocks, and move suitable rules into external stylesheets. Check layouts across screen sizes and interaction states while preserving justified exceptions for critical styles and dynamic values.
Review HTML lists of terms and descriptions, finding dt and dd elements used without a containing dl. Help correct the structure so assistive technologies can associate each term with its description, and explain how to verify the fix.
Review JavaScript module usage and convert CommonJS code to ES modules using import/export. Inspect source code and browser execution, explain how unused code can be removed during builds, and describe how to verify changes.
Review image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.
Review JavaScript error handling in source code and browser behavior. Find unhandled asynchronous failures, improve logs with useful context, and add React Error Boundaries, components that handle rendering errors, so failures are handled explicitly and are easier to investigate.
Review drag-and-drop interfaces for keyboard and screen reader access. Inspect the rendered HTML, identify missing alternative controls and status announcements, and guide changes so users can perform equivalent actions through different input methods.
Review images and their visible captions, then connect them with figure and figcaption markup. Check caption placement and alternative text so screen readers can present the relationship between an image and its description.
Measure the size and nesting of a page's DOM, the tree of HTML elements. Identify unnecessary wrappers and oversized lists, then simplify the structure or render only visible list items to reduce confirmed rendering costs.