What can be checked automatically

Part of this catalog is already enforced by a lint rule, so it belongs in CI rather than in a review. The rest is multi-line behaviour spread over a file, which no linter can match and a person or an agent has to recognise. Knowing which half a migration falls into is most of deciding how to tackle it.

5 a linter already finds

Turn these on and stop reviewing them by hand. This catalog names the rule rather than reimplementing the check, the same way it points at guides rather than copying them.

All of them at once, in an eslint config:

import unicorn from "eslint-plugin-unicorn";

export default [
  {
    plugins: { unicorn },
    rules: {
      "unicorn/prefer-event-target": "error",
      "unicorn/prefer-group-by": "error",
      "unicorn/prefer-promise-with-resolvers": "error",
      "unicorn/prefer-structured-clone": "error",
      "unicorn/prefer-url-search-parameters": "error",
    },
  },
];

Rule names checked against eslint-plugin-unicorn 74.0.0, captured 2026-09-12. A rule renamed upstream fails this site's freshness check rather than becoming a dead link.

26 shapes that need a person

No package is installed for any of these, so nothing matches in a package.json either. They are stateful and spread over a file, which is why no lint rule covers them. An agent reading the code can, which is what the skill and the MCP server are for.

  • Animating to height autointerpolate-size: allow-keywords, or calc-size()
    • reading scrollHeight and animating max-height to that pixel value to open a panel
    • a transitionend listener setting height back to auto once an opening animation has finished
  • CarouselsCSS scroll-snap with ::scroll-button() and ::scroll-marker()
    • a scroll listener on a horizontal strip dividing scrollLeft by item width to work out the active index
    • prev and next buttons calling scrollBy, each with its own disabled state recomputed on every scroll
    • rendering dots from the item count and toggling an active class on whichever one is current
  • Element resize trackingResizeObserver
    • a window resize listener that reads offsetWidth on an element to react to that element's own size
    • polling an element's dimensions on an interval to notice when they change
  • Focus trappingthe inert attribute
    • a keydown handler watching for Tab and cycling focus between the first and last focusable element
    • a querySelectorAll over a list of focusable selectors, used to decide where focus is allowed to go
    • storing document.activeElement when an overlay opens so focus can be put back on close
  • Generating UUIDscrypto.randomUUID()
    • a v4 id built from Math.random() and a template string of x and y placeholders
    • Date.now() joined to Math.random().toString(36) to make something unique enough
  • Modal dialogs<dialog> with showModal()
    • a div with role=dialog and aria-modal, placed with position fixed and a z-index over the page
    • a keydown listener on document checking for Escape so an overlay can be dismissed
    • a click handler on the backdrop comparing event.target against the panel to decide whether to close
  • Multi-line text truncation-webkit-line-clamp
    • measuring text in a hidden element or on a canvas to decide where to cut a string for display
    • slicing a string to a character count and appending an ellipsis so it fits its box
  • Scroll chaining and body scroll lockoverscroll-behavior: contain
    • setting document.body.style.overflow to hidden when an overlay opens, and restoring it on close
    • recording window.scrollY on open and calling scrollTo to put the page back on close
  • Styled scrollbarsscrollbar-width, scrollbar-color and scrollbar-gutter
    • measuring the scrollbar width from innerWidth minus documentElement.clientWidth and padding the body by it
    • adding a margin or padding when an overlay opens so the page does not shift sideways
  • Tooltips, dropdowns and popoversThe Popover API with CSS anchor positioning
    • calling getBoundingClientRect on a trigger inside scroll and resize listeners to place a floating panel
    • writing top and left onto a tooltip from a requestAnimationFrame loop
    • flip or shift logic comparing a panel's rect against the viewport and moving it back inside
  • Visibility trackingIntersectionObserver
    • a scroll listener calling getBoundingClientRect to decide whether an element is in the viewport
    • comparing offsetTop against window.scrollY and innerHeight to fire something as the page scrolls

Not this tool's job

Three questions near this one, each better answered somewhere else. Reimplementing them here would be worse than pointing at them.

knipIs this dependency used at all?
Unused dependencies, exports and files. It reads npm scripts, config files and plugin names, which is what makes an "unused" claim trustworthy rather than a guess.
Biome useBaselineIs this CSS feature too new for my users?
The opposite direction to this catalog. It stops you using a feature before your target browsers have it, where this tells you a feature is finally old enough to replace a library.
eslint-plugin-compatDoes this API exist in my browser targets?
Checks calls against your browserslist. Useful alongside a finding here that reads as newly available.