Coding standards, frameworks, refactoring, and code review (16.4K skills)
Inspect raw HTML responses for a correct HTML5 doctype at the start of the document. Identify missing or outdated declarations and preceding content, then guide fixes that enable standards-mode rendering in browsers.
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 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.
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.
Inspect web font loading to identify invisible text, rendering delays, and layout shifts. Use measured evidence to guide fallback text display, preloading of important fonts, and the use of compressed formats such as WOFF2.
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.
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.
Find costly DOM operations, the code that reads or changes page elements, and review scrolling handlers or frequent React updates. Reorganize work to reduce repeated layout calculations and verify the changes in the browser.
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 file upload interfaces for clear labels, accepted formats, size limits, and accessible progress and error messages. Check that keyboard and screen reader users can complete uploads, including alternatives to drag and drop.
Review loading priorities for key images, fonts, and CSS, then adjust fetchpriority hints so important resources receive attention earlier. Use it to improve LCP, the time until the largest visible content appears.
Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.
Review how an application displays prices, numbers, and dates, then replace manual formatting with Intl APIs that follow language and regional conventions. The skill also checks locale-aware sorting and fallback choices when a requested locale is unavailable.
Review component styles to find where CSS containment, which isolates rendering work, can limit layout recalculation and repainting. Identify suitable components and off-screen list items, then check their appearance across screen sizes and interaction states.
Review layouts that need alignment across both rows and columns, and suggest CSS Grid changes. Check rendered behavior at different screen widths and explain sizing, named areas, and grids that adapt to their content.
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 CSS loading that delays a page’s first visible content. Help inline essential styles and defer other stylesheets, using preload and media conditions, while checking rendered layouts at different screen widths and interaction states.
Review how a page loads CSS, the rules that control its appearance. Inline the styles needed for the first visible content and load the rest asynchronously, while checking layouts across screen sizes and interaction states.
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 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.
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.
Find broken or fragile image references in markup, styles, and components. Correct paths, restore missing assets, and add fallback images, then verify how the page behaves when image requests fail.
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 the HTML delivered to browsers for a correct UTF-8 character encoding declaration. Find missing or misplaced charset tags in templates and rendered pages, then position the declaration early to help prevent garbled multilingual text.