What can be checked automatically

8 rules 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.

• Deep cloningstructuredClone()

  unicorn/prefer-structured-clone

• Deferred promisesPromise.withResolvers()

  unicorn/prefer-promise-with-resolvers

• Element resize trackingResizeObserver

  unicorn/prefer-observer-apis

• Event emittersEventTarget with CustomEvent

  unicorn/prefer-event-target

• Grouping a list by keyObject.groupBy() and Map.groupBy()

  unicorn/prefer-group-by

• Query string parsingURLSearchParams and the URL constructor

  unicorn/prefer-url-search-parameters

• Timing out async workAbortSignal.timeout()

  unicorn/prefer-abort-signal-timeout

• Visibility trackingIntersectionObserver

  unicorn/prefer-observer-apis

import unicorn from "eslint-plugin-unicorn";

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

114 shapes that need a person or a model

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.

• Accordions<details name> for an exclusive accordion
  • an open id over a list of collapsible panels, where opening one sets every other closed
• Animating from JavaScriptelement.animate()
  • a requestAnimationFrame loop interpolating a style property between two values, with its own easing function
  • a chain of setTimeout calls stepping an element's style to fake a keyframe sequence
• 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
• Auto-growing textareasfield-sizing: content
  • an input handler setting style.height to auto and then to scrollHeight in pixels, so the textarea remeasures on every keystroke
  • a hidden mirror div kept in sync with the textarea's value, measured to decide how tall the real field should be
• Balanced headingstext-wrap: balance
  • inserting a br or a non-breaking space between the last two words of a heading so it does not orphan one
• Base64 encodingbtoa() and atob(), with TextEncoder for text
  • btoa wrapped in unescape and encodeURIComponent to survive characters outside Latin-1
• Cancelling async workAbortController and AbortSignal
  • an ignore or isMounted flag set in a cleanup function, guarding the result of a fetch given no signal
• 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
• Choosing a plural formIntl.PluralRules
  • a count === 1 ternary picking between two words, or a bare + "s" appended to a noun
  • a lookup of irregular plurals kept next to the component that renders them
• Colour manipulationcolor-mix(), oklch() and relative colour syntax
  • a lighten or darken helper doing arithmetic on the six characters of a hex colour
  • a second hex value hardcoded next to every colour token, one for the base and one for its hover state
• Copy and pastenavigator.clipboard.writeText()
  • an off-screen textarea or contenteditable element created only so text can be selected and execCommand'd
• Country and language namesIntl.DisplayNames
  • an object literal mapping country or language codes to English names, pasted in and extended as gaps turn up
  • a switch over locale codes returning a display string per case
• Cross-tab messagingBroadcastChannel
  • writing to localStorage only so other tabs receive the storage event, then deleting the key
• Custom select menusappearance: base-select on <select>
  • a div with role=listbox and children with role=option, wired to arrow keys and Enter by hand
• Date and time pickers<input type="date"> and <input type="time">
  • building a month grid from Date arithmetic, with the leading blanks worked out from getDay
  • a text input with a placeholder like dd/mm/yyyy and a hand-written parser checking what was typed
• Date arithmetic and time zonesTemporal
  • a date rebuilt through UTC offsets with getTimezoneOffset, to move a timestamp into another zone
  • adding 86400000 milliseconds to a timestamp to mean tomorrow, which is an hour out on the two days a year the offset changes
• Element resize trackingResizeObserver
  • polling an element's dimensions on an interval to notice when they change
• Element size queriesContainer queries
  • a ResizeObserver toggling size classes on an element so it can style itself by its own width
• Enter and exit transitions@starting-style with transition-behavior: allow-discrete
  • a setTimeout matching the CSS duration, so an element stays mounted long enough to animate out
  • an isClosing or isLeaving flag held only to keep something rendered while its exit animation runs
• File pickers and drop zones<input type="file"> with drop events
  • a hidden file input triggered by click() from a styled button, wrapped in a component that forwards the change event
  • dragenter and dragleave counters kept in state to work out whether the pointer is still over the drop zone
• Fixed aspect ratiosaspect-ratio
  • a padding-bottom percentage on a wrapper with the real content positioned absolutely inside it
  • reading offsetWidth and setting height from it to keep a box in proportion
• Focus trappingthe inert attribute
  • a keydown handler watching for Tab and calling preventDefault so focus cannot leave an overlay
  • a querySelectorAll over a list of focusable selectors, used to decide where focus is allowed to go
• Form validationconstraint validation with :user-invalid
  • a submit handler running a regex against each field's value and collecting error strings into state
  • a touched or dirty flag tracked per field so an error only appears after the field has been left
• Fullscreen togglingElement.requestFullscreen()
  • a chain of vendor-prefixed calls such as webkitRequestFullscreen and msRequestFullscreen
• 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
• Hashing and encryptioncrypto.subtle
  • a session token, nonce or password-reset key built from Math.random(), which is not a cryptographic source and is predictable from earlier outputs
  • a SHA-256 or HMAC implementation pasted into the project as a single file of bit-shifting helpers
• HTTP requestsfetch()
  • an XMLHttpRequest with an onreadystatechange handler checking readyState === 4, often wrapped in a hand-made Promise
  • a request helper that sets Content-Type and stringifies the body on every call, written once per project and imported everywhere
• Human-readable durationsIntl.DurationFormat
  • already-split hours, minutes and seconds joined with hardcoded unit labels and plural rules
• Joining a list into a sentenceIntl.ListFormat
  • slice(0, -1).join(", ") joined to the last item with " and ", plus length checks for the one and two item cases
• jQueryquerySelectorAll(), classList and addEventListener()
  • a $ or qs helper wrapping querySelectorAll to get chaining back after the library was removed
• Keeping the screen awakenavigator.wakeLock.request("screen")
  • a muted looping video kept playing off-screen so the display does not sleep
  • a no-op setInterval added in the hope the page keeps counting as active
• Keyboard-only focus styling:focus-visible
  • listening for keydown and mousedown on the document to track whether the last input was a keyboard
  • toggling a class such as using-keyboard on the body so focus rings can be shown conditionally
• Knowing when a webfont has loadeddocument.fonts with font-display
  • a canvas or offscreen span whose width is measured repeatedly to work out whether a webfont has replaced the fallback
  • a setTimeout that adds a fonts-loaded class after a guessed delay, on the assumption the font has arrived by then
• Lazy-loaded images and iframesloading="lazy"
  • an IntersectionObserver that swaps a data-src attribute into src when an image nears the viewport
  • a scroll listener deciding which images are close enough to start loading
• Light and dark theminglight-dark() with color-scheme
  • every colour token declared twice, once at the root and again under a .dark or [data-theme] selector
  • a prefers-color-scheme media query listener in JavaScript that toggles a class on documentElement
• Locale-aware date and time formattingIntl.DateTimeFormat
  • an array of month names indexed by getMonth(), joined with getDate() and getFullYear() to build a display string
  • padStart on getHours() and getMinutes() to assemble a HH:MM clock, usually next to a hand-written AM and PM branch
• Locale-aware number and currency formattingIntl.NumberFormat
  • a regex inserting thousands separators into a number's string form
  • toFixed followed by string surgery to add a currency symbol and group the digits
• Masonry layoutsCSS masonry item placement
  • distributing items into column arrays in JavaScript by tracking each column's running height
  • absolutely positioning items after measuring them so the gaps between rows close up
• Matching URL patternsURLPattern
  • a hand-written regex per route with named capture groups, and a loop testing each against the path
  • pathname.split("/") compared segment by segment to work out which route matched and pull out an id
• 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 document keydown listener added when an overlay opens and removed when it closes, only to catch Escape
• Multi-line text truncation-webkit-line-clamp
  • measuring rendered text in a hidden element or on a canvas to decide where a line should visually end
  • slicing a string by character count before rendering it, so a card title fits its two lines
• Mutexes and critical sectionsnavigator.locks.request()
  • a boolean flag guarding an async section, set before the work and cleared in a finally
  • a promise chained onto the previous one in a module-level variable, so calls run one at a time
• Natural and locale-aware sortingIntl.Collator with numeric: true
  • a comparator pulling digits out of strings with a regex and comparing them as numbers
  • zero-padding numbers inside strings so a plain sort puts item10 after item9
• Passkeys in the browsernavigator.credentials with PublicKeyCredential
  • base64url encode and decode helpers written next to a credentials.create call to convert challenge and id fields
  • a Uint8Array built by looping over atob output to turn a server challenge into bytes
• Prefetching the next pagespeculation rules
  • an IntersectionObserver over anchors that injects a <link rel=prefetch> when one scrolls into view
  • a mouseover or touchstart listener on links that starts fetching the target before the click lands
• Reacting to a breakpointmatchMedia()
  • a resize listener comparing window.innerWidth against a breakpoint number kept in JavaScript
  • an isMobile flag held in state and recomputed from innerWidth inside a debounced resize handler
• Reading and writing cookiescookieStore
  • a document.cookie split on semicolons with decodeURIComponent, wrapped in a getCookie helper
  • a template string assigned to document.cookie assembling path, expires and SameSite attributes by hand
• Relative time formattingIntl.RelativeTimeFormat
  • a chain of millisecond thresholds turning a date difference into minutes, hours or days ago
  • a table of singular and plural unit names written out to build phrases like 3 days ago
• Reordering a list by draggingdraggable and the drag events
  • mousedown, mousemove and mouseup listeners tracking a pointer offset to move an element, with its original position held in state
  • an index swapped in an array when the pointer crosses a sibling, to reorder a list while a drag is in progress
• Resizable panelsresize
  • a mousedown on one panel's edge with mousemove handlers writing a width onto that same panel
• Saving a generated filea Blob object URL on a download link
  • a data: URI assigned to window.location to trigger a save, which truncates on larger files
  • a hidden iframe or form submitted to make the browser treat a response as a download
• Scroll chaining and body scroll lockoverscroll-behavior: contain
  • setting document.body.style.overflow to hidden when an overlay opens, and restoring it on close
• Scroll-triggered animationsanimation-timeline: view() and scroll()
  • a scroll listener setting a progress bar's width from scrollY over scrollHeight
  • mapping scroll position to a transform or an opacity on every scroll event
• Scrolling an element into viewscrollIntoView({ block: "nearest" })
  • getBoundingClientRect on an element and its scroll container, compared to decide whether to set scrollTop
  • a scrollTop assignment computed from offsetTop minus the container's height, to centre a highlighted item
• Server-sent eventsEventSource
  • a setInterval or a self-rescheduling setTimeout re-fetching an endpoint to notice changes, with the delay tuned by hand
  • a long poll: a fetch the server holds open, re-issued from its own then handler
• Sharing to other appsnavigator.share()
  • a share menu built from hardcoded intent URLs for each network, opened with window.open
• Smooth scrolling and scroll-to-anchorscroll-behavior: smooth with scroll-margin-top
  • a requestAnimationFrame loop easing scrollTop from where it is toward a target
  • an easing function like easeInOutQuad written next to a scroll routine
• Spinners and progress bars<progress>
  • a div with a CSS keyframe rotation and a border-radius, standing in for a spinner, usually with no role or aria-label
  • a wrapper div whose inline width is set to a percentage string to draw a filled bar
• Splitting text by character or wordIntl.Segmenter
  • str.length or split("") used to count characters, which counts an emoji or a combining accent as several
  • a regex over surrogate pairs to split a string into what the author is calling characters
• Sticky headers and sidebarsposition: sticky
  • a scroll listener toggling a fixed class once an element passes an offset
  • storing an element's original offsetTop so a placeholder can hold the gap when it goes fixed
• Stripping accents from textString.prototype.normalize("NFD")
  • a hand-maintained object or array mapping accented characters to their unaccented forms
  • a chain of replace calls, one per accented letter the project has run into so far
• Styled scrollbarsscrollbar-width, scrollbar-color and scrollbar-gutter
  • measuring the scrollbar width from innerWidth minus documentElement.clientWidth and padding the body by it
• Tab visibilitydocument.visibilityState and the visibilitychange event
  • a blur handler standing in for the tab being backgrounded, pausing a poll that a focus handler resumes
• 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 logic comparing a panel's rect against the viewport and moving it to the other side of its trigger
• Touch and pointer gesturespointer events with touch-action
  • paired touchstart and touchend listeners reading changedTouches[0].clientX to work out a swipe direction
  • separate mousedown and touchstart branches doing the same thing, written because the two event streams disagree

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.