Frontend-Design-Claude-Skill-Package

Use when building an accessible data table (semantic markup, sortable columns, sticky header that stays put while users scroll long lists, mobile-safe reflow strategy, row selection with select-all and indeterminate state, virtualised tables that need `aria-rowcount` / `aria-colcount`), when adding a Cmd+K (Ctrl+K on non-Mac) command palette to a product so power users can jump to any feature or run any command without leaving the keyboard, or when an existing `<div role="table">` mess needs to be refactored to a native `<table>` for keyboard support and free a11y. Prevents the `<div role="table">` and `<div role="row">` anti-pattern (loses keyboard semantics that the native `<table>` gives for free), missing `scope` on `<th>` (screen readers cannot associate header with cells), sortable column header built as a `<div>` with a click handler (no keyboard activation, no focus, no `:focus-visible`), `<thead>` declared `position: sticky` without a scrolling parent (it never sticks; the parent MUST have `overflow:

Use when auditing a UI component, page, or feature for the three combined failure modes a frontend product can ship : WCAG 2 2 accessibility violations, Core Web Vitals (LCP / INP / CLS) regressions, and cross-skill consistency drift (naming, structure, token usage, file shape). Spawn this agent skill when reviewing a pull request, before merging a feature branch, during a quarterly compliance audit, when triaging a Lighthouse score regression, or when validating a newly-authored skill file against the package quality rules. Prevents the most common audit gaps in 2026 : skipping the accessibility pass because the page "looks fine" while still failing WCAG 2 5 8 Target Size or 2 4 11 Focus Not Obscured, trusting a green Lighthouse score without checking semantic correctness, fixing performance by intuition before measuring against the binding p75 thresholds, naming-convention drift across components (`--my-bg` vs `--color-bg-surface`), magic numbers in component CSS despite a token system existing, `<div role=

Use when auditing a CSS codebase for design-system compliance, reviewing a pull request that touches `.css` / `.scss` / `.ts` / `.tsx` / `.vue` / `.svelte` files with style declarations, hunting for hardcoded color / spacing / font-size / radius values that bypass the design-token layer, validating that components consume semantic tokens (not primitive tokens directly), confirming the three-tier token chain (primitive -> semantic -> component) is intact, verifying the `@layer tokens, theme, base, components, utilities;` cascade-layer order is declared at the project root, checking that animatable custom properties are `@property`- registered for proper interpolation, sweeping for orphaned tokens (defined but never referenced) or dangling references (`var(--undefined)` with no `@property` default), and confirming WCAG 1.4.3 / 1.4.11 contrast ratios hold for every text-on- background and UI-component pair in both light and dark variants. Use as a checklist agents and reviewers apply BEFORE merging UI changes, n

Use when a mobile hero section overflows because of `100vh`, deciding between the small (`svh`), large (`lvh`), and dynamic (`dvh`) viewport-unit families, picking between `em` and `rem` for font-size or component spacing, reasoning about CSS px versus device px on a HiDPI / Retina display, sizing a `<canvas>` backing store to match `devicePixelRatio`, handling iPhone notch / Dynamic Island safe areas with `env(safe-area-inset-*)`, configuring the `<meta name="viewport">` tag with `viewport-fit=cover`, debugging unexpected font-size compounding three levels deep, or migrating off the legacy `--vh` JavaScript workaround for the mobile-chrome viewport bug. Prevents the most common 2026 unit and viewport regressions : a `100vh` hero that gets covered by the mobile browser chrome on first load and shows empty whitespace once the chrome retracts, nested `1.5em` font-size declarations that compound to 3 375x at three levels deep, `100vw` that includes the desktop scrollbar gutter and overflows the body, `env(safe-a

Use when a CSS rule that should clearly win does not (style not applying despite higher specificity), when `!important` is being escalated as a fix-everything hammer (you are about to lose a specificity war by joining it), when an unlayered author rule mysteriously beats a layered author rule (unlayered ALWAYS wins for normal declarations regardless of specificity), when a layer order seems "inverted" for `!important` declarations (it IS inverted; earlier layers win for important), when an `@scope`-anchored rule beats a deeper-DOM normal rule (scoping proximity overrides source order), when DevTools shows a rule struck through with no obvious reason, when `:where(.a, .b)` "loses" its specificity, when `:is(.a, #b)` "wins" too aggressively, when an ID selector creates a 1-0-0 specificity trap that nothing else can override, or when removing a class makes a different rule appear (cascade order, not the class, was the deciding factor). Prevents `!important` chains used to win specificity battles (they only escal

Use when diagnosing the canonical layout failures of modern CSS : a flex child that overflows its parent (the auto `min-content` floor), three `1fr` grid columns that refuse to be equal (the same floor), a `position: sticky` element that never sticks (ancestor `overflow`, no `inset`, or wrong parent height), a hero section that overshoots the mobile viewport by the chrome bar (`100vh` versus `100dvh / 100svh / 100lvh`), a long URL or unbreakable string that breaks the card layout (`overflow-wrap` / `word-break`), a `z-index` that refuses to win against an element in a different stacking context (`transform`, `opacity < 1`, `filter`, `will-change`, `position: fixed | sticky` all create new contexts), a subgrid track that cannot generate implicit tracks, container query units (`cqi` / `cqb`) falling back to small-viewport units when no container ancestor matches, margin-collapse between parent and first / last child, and the universal `box-sizing: border-box` reset. Prevents the seven dominant layout failure mo

Use when a single-page-app DOM swap needs a Shared-Element transition (old and new states cross-fade with named elements morphing between them) without rolling a custom FLIP library, when a multi-page-app navigation should animate seamlessly from one document to another via `@view-transition { navigation: auto }`, when a hero element should animate as it enters the viewport (parallax, fade-up, scale-in) without `requestAnimationFrame` or `IntersectionObserver` glue, when a scroll progress indicator at the top of the page must track exactly how far down the user has scrolled, when a horizontal carousel needs `scroll-snap-type: x mandatory` so cards snap into place, when `background-attachment: fixed` parallax is being considered (it is a mobile compositor disaster and must be replaced with scroll-driven animations), or when an animation must respect `prefers-reduced-motion: reduce`. Prevents the cross-document `@view-transition` declared on only one side (the transition silently no-ops; MUST be declared on bot

Use when authoring a custom HTML element with `customElements.define`, attaching a shadow root with `attachShadow`, distributing children via `<slot>`, reacting to attribute changes via `observedAttributes` + `attributeChangedCallback`, server-rendering the shadow root via declarative shadow DOM (`<template shadowrootmode="open">`), building a custom form control that participates in `<form>` submission via `ElementInternals` (`static formAssociated = true`, `setFormValue`, `setValidity`, `formAssociatedCallback`, `formResetCallback`, `formStateRestoreCallback`), or shipping a framework-agnostic UI primitive that needs to work in every framework (and no framework). Use when reviewing custom-element code for the canonical lifecycle bugs : missing `observedAttributes`, DOM work in the constructor, attribute reads before the element is upgraded, single-word element names, closed shadow without reason, form-custom-elements without `setFormValue`. Prevents the seven dominant web-component failures : missing `stati

Use when building a confirm modal, alert dialog, or settings overlay with the HTML `<dialog>` element, building a toast notification system with the Popover API plus an `aria-live` region, wiring focus restoration after a modal closes, choosing between `aria-live="polite"` and `aria-live="assertive"` for a toast announcement, managing a queue of stacked toasts with auto-dismiss and pause-on-hover, animating dialog or popover open / close with `@starting-style`, or migrating off a custom focus-trap library to native `showModal()`. Prevents the most common modal and toast regressions in 2026 : modal that does not trap focus because the team rolled their own JS instead of using `<dialog>.showModal()`, modal whose background page keeps scrolling because the team added `body { overflow: hidden }` instead of relying on `showModal()` auto-inert, modal that loses focus to the body after closing because the trigger reference was not captured, toast that interrupts the screen reader mid-sentence because `aria-live="ass

Use when building a typographic system for a product (modular type scale, fluid scaling across viewports, variable-font axes, web-font loading strategy), when a heading wraps badly with one orphaned word and `text-wrap: balance` is on the table, when `font-feature-settings` and `font-variant-*` both appear in the codebase and a deterministic ordering is needed, when a designer asks "why is my tabular numerals rule not working" (it likely uses the raw OpenType tag instead of `font-variant-numeric: tabular-nums`), when web-font swap causes visible layout shift (CLS) and a metric-matched fallback is required, when the LCP candidate text uses a webfont that needs preloading, or when a `font-weight: 700` declaration is being silently overridden by a `font-variation-settings: "wght" 400` in a base layer. Prevents the `line-height: 24px` trap (px line-height stops scaling with `font-size` and breaks fluid type), `font-display: block` (or the default `auto`) FOIT that destroys LCP, mixing `font-weight` and `font-vari

Use when building any surface that lives in the browser top layer : modal confirmations, cookie banners, dropdown menus, command palettes, tooltips, date pickers, comboboxes, settings panels, off-canvas drawers, side-sheets. Use when deciding between `<dialog>` + `showModal()` (interrupts user, modal, has backdrop) versus the Popover API (`popover="auto" | "manual" | "hint"`, always non-modal, ships light-dismiss). Use when positioning a surface relative to a trigger via CSS Anchor Positioning (`anchor-name`, `position-anchor`, `anchor()`, `position-area`, `position-try-fallbacks`) instead of `getBoundingClientRect` scroll/resize math. Use when fixing the "open animation does not play" bug or the "exit animation cuts off" bug : both require the `@starting-style` + `transition-behavior: allow-discrete` + `overlay` recipe. Prevents the six dominant top-layer failures : adding `tabindex` to `<dialog>` (forbidden by spec, breaks focus model); combining `popover` attribute with `dialog.showModal()` on the same ele

Use when building a layout that must look correct from 320px phones to 3840px ultrawide monitors without breakpoint cliffs, when fluid typography is needed so headings scale continuously between viewports instead of jumping at media-query breakpoints, when the same card or panel component must reflow inside both a narrow sidebar and a wide main column (a job for container queries, not media queries), when an iOS Safari hero with `100vh` clips behind the URL bar or jumps as the bar shrinks, when a card grid must adapt column count without enumerating pixel breakpoints, when an image or video needs to hold a proportional box before its content loads, or when a flex row's children overflow because each child carries a non-zero `min-width: auto`. Prevents the fixed-pixel-breakpoint cliff anti-pattern, viewport-unit traps on mobile (`100vh` clipping behind iOS URL bar), `clamp()` formulas whose `preferred` value resolves outside the `min`/`max` bracket and silently behaves like a constant, container queries that "

Use when designing or implementing hover, focus, and press feedback on buttons, links, and cards; choreographing entrance / exit animations for modals, popovers, dropdowns, list items, or any dynamic content; choosing an easing curve (Material standard, smooth ease-out, sharp / mechanical, bouncy); building a staggered reveal across a list of cards; ensuring motion respects `prefers-reduced-motion`; or transitioning between a `display: none` and a visible state (which by default does NOT animate). Use when reviewing CSS for the classic micro-interaction sins : bare `ease` keyword, animating `width` instead of `transform`, motion that ignores `prefers-reduced-motion`, hover-only feedback with no `:focus-visible` equivalent, or a `display: none` transition that silently never fires. Prevents the seven dominant micro-interaction failures : motion always-on without a `prefers-reduced-motion: reduce` guard (vestibular harm, WCAG 2.3.3 violation); bouncy easing on serious actions ("Delete" button bouncing); transit

Use when structuring a design-token system for a web app or component library, authoring the JSON interchange file per the W3C Design Tokens Community Group format, emitting tokens as CSS custom properties, deciding whether a value belongs at the primitive / semantic / component tier, registering an animatable token via `@property`, wiring up runtime theme switching via `data-theme` attribute or `color-scheme`, or migrating a codebase off hardcoded hex / rgb / oklch literals. Prevents the most common token-system regressions in 2026 : hardcoded color literals scattered across components so a brand refresh requires a twelve-file PR, single-tier flat tokens that map `--color-blue-500` directly to a button background and break the moment the brand picks a new blue, tokens declared in the default cascade layer that get overridden by random component CSS, a transitioned custom property that does not animate because it was never registered via `@property`, raw token names like `--my-bg` that leak into application s

Use when a gradient between two complementary or distant colours looks muddy in the middle, when a two-stop linear gradient has visible banding on a large surface, when a "mesh" gradient is needed but CSS lacks a native mesh function, when an animated gradient (rotating hue ring, slowly shifting hero) is required without dropping frames, when a conic gradient is wanted for a pie chart or loading ring, when a repeating pattern (stripes, checkerboard, grid) should be expressed in CSS rather than an image, when a gradient on text needs `background-clip: text`, or when a gradient must respect `prefers-reduced-motion`. Prevents the default-sRGB-interpolation muddy-midpoint, the untyped-custom-property gradient that snaps instead of animating, `background-attachment: fixed` parallax (a known compositor disaster on mobile), 30-stop gradients used to "smooth out" what an interpolation-space change would have fixed, conic-gradient pie charts shipped without `role="img"` and an `aria-label`, animated gradients shipped

Use when generating a full shade ladder (50, 100, 200, ..., 900, 950) from a single brand seed colour, when a design system needs perceptually-even contrast at each step, when an HSL-derived palette looks visually uneven across hues, when a brand colour change needs to ripple through every token without rewriting hex values, when picking which shade pairs satisfy WCAG 1.4.3 (4.5:1 normal text) and 1.4.11 (3:1 UI components) at a glance, when a gradient or shade transition looks muddy or washed out, when wide-gamut display-p3 colours need an sRGB fallback gate, or when a colour custom property must animate or transition smoothly. Prevents the classic HSL shade-ladder anti-pattern (perceptually non-uniform; the same `50%` lightness in HSL means different visible brightness across hues), the constant-L-constant-chroma trap where the same numeric chroma is out-of-gamut for some hues and inside gamut for others (yellow vs blue at high chroma), the single-tier token chain (brand colour = button colour) that makes a

Use when building a frosted-glass surface (sticky header, modal overlay, nav bar, card-on-image) with the CSS `backdrop-filter` property, debugging a `backdrop-filter` that silently does not blur, sizing the blur radius for a given content density, verifying that text-on-glass still passes WCAG contrast, picking a mobile-friendly fallback when GPU cost is too high, or shipping a fallback for browsers below Baseline 2024. Prevents the most common glassmorphism regressions : a `backdrop-filter` declared on a card whose ancestor has `opacity: 0.95` (the parent silently becomes a backdrop-root and clips the filter), white-on-glass body text that drops below 4 5 to 1 contrast against the bright photograph behind it (WCAG 1 4 3 fail), a 20-px blur applied to every card in an infinite scroll feed (mobile GPU melts), animating the `backdrop-filter` property itself (paint storm), missing `-webkit-backdrop-filter` for legacy Safari contexts, and stacking two `backdrop-filter` layers and getting compounded blur instead

Use when adding dark mode to a website or app, choosing between system-followed-only and user-toggle modes, eliminating duplicated `@media (prefers-color-scheme: dark) { ... }` rules with `light-dark()`, fixing a white flash on reload (FOUC), getting scrollbars and native form controls (`<input type="checkbox">`, `<input type="date">`, `<select>`) to render in dark theme, persisting a user theme choice across reloads, or building a three-state toggle (system / light / dark). Use when reviewing a dark mode that already exists and assessing whether it covers all the cases below. Prevents the six dominant dark-mode failures : using `light-dark()` without declaring `color-scheme: light dark` on `:root` (always returns the light value), forgetting `color-scheme` entirely so the page background goes dark but scrollbars and checkboxes stay light, applying the theme via `useEffect` AFTER first paint causing a white flash on every reload, duplicating every rule in `@media (prefers-color-scheme: dark)` instead of using

Use when measuring or improving Core Web Vitals (LCP, INP, CLS) at the 75th-percentile field-data bar, diagnosing why an interaction misses the 200 ms INP budget, picking a yielding strategy to break up a long task, prioritising the hero image with fetchpriority and preload, preventing cumulative layout shift on late-loading images, embeds, ads, or webfont swap, attributing a frame to a specific event handler via the LongAnimationFrame API, or wiring up Speculation Rules prefetch / prerender while protecting destructive URLs like sign-out and add-to-cart. Prevents the most common 2026 performance regressions : an LCP image marked loading lazy that defers past first paint, an image without explicit width and height that reflows content as it loads, a 350 ms synchronous loop inside a click handler that misses the INP budget, requestAnimationFrame mis-used as a generic yield that keeps the frame busy through paint, font-display block that produces a three-second invisible text period, content-visibility auto wit

Use when diagnosing dropped frames, choppy scroll, stuttering CSS transitions, slow taps, or a regressing INP (Interaction to Next Paint) score. Use when reading a Chrome DevTools Performance trace (purple Layout bars, green Paint bars, yellow Scripting), when chasing a "ResizeObserver loop completed with undelivered notifications" warning, when forced sync layout shows up under Performance insights, when a scroll handler reads `getBoundingClientRect` or `offsetHeight` and the page tanks, or when an animation works in isolation but a different feature appears to slow it down. Use as the diagnostic counterpart to `[[frontend-perf-animation-gpu- containment]]` (which teaches the GPU rules) and to `[[frontend- perf-core-web-vitals-inp]]` (which teaches the metric model). Prevents the six dominant jank failure modes : animating layout- trigger properties (`width`, `height`, `top`, `left`, `margin`, `font-size`, `box-shadow`) instead of `transform` / `opacity` / `filter`; forced synchronous layout from interleaved

Use when a CSS animation or transition feels janky on a real device, when scroll stutters on a long page, when DevTools shows recurring layout or paint work during interaction, when an animation uses `top`, `left`, `width`, `height`, `margin`, `padding`, `font-size`, or `box-shadow`, when an off-screen part of a long document is still costing layout and paint time, when `will-change` has been sprinkled across the stylesheet and GPU memory is exhausted, when a card grid drops frames as cards enter the viewport, or when a custom property needs to be transitioned smoothly. Prevents the classic "animate top/left" main-thread jank, the `will-change` always-on memory leak, `contain: strict` collapsing an element to zero size because no explicit dimensions were given, `content-visibility: auto` without `contain-intrinsic-size` causing scrollbar jitter and lost scroll position, animating `box-shadow` or `width`/`height`/`margin` triggering paint storms, the `requestAnimationFrame` infinite-loop animation pattern that

Use when building a UI widget that has no native HTML equivalent (tabs, combobox with custom rendering, listbox with rich options, menu/menubar, tree, treegrid, carousel, custom modal) and you need to know which ARIA roles, states, and keyboard model the W3C WAI APG mandates, when announcing dynamic updates to screen readers (status, alert, save toast), when deciding between `aria-label` and `aria-labelledby` and `aria-describedby` and `aria-errormessage` for an accessible name and description, when a screen reader is silent on a component that visibly changed, when keyboard focus or screen-reader announcement order does not match the visual order, or when a code review flags `role="..."` and you must verify whether the role is needed at all. Prevents the first-rule-of-ARIA violation (slapping a role on a div instead of using the native element), `aria-label` overriding visible text, redundant roles such as `<nav role="navigation">` or `<button role="button">`, live regions inserted at update time (they MUST

Use when authoring any focusable UI surface : modals, popovers, drawers, tabs, menus, listboxes, comboboxes, toolbars, grids, trees, or any custom widget that responds to keyboard input. Use when implementing focus styles (`:focus-visible`, `:focus-within`), choosing a tabindex value, designing arrow-key navigation, deciding between roving tabindex and `aria-activedescendant`, isolating background content behind an overlay, capturing-and-restoring focus around a dialog, or enforcing Escape semantics. Use when reviewing CSS for the classic `outline: none` deletion or the `aria-hidden` on background anti- pattern. Prevents the six dominant focus failures of 2010s authoring : invisible keyboard focus (`outline: none` without `:focus-visible` replacement), positive `tabindex` shattering DOM-order navigation, `aria-hidden` on the background of a modal instead of `inert` (keyboard still tabs in, screen reader still says nothing useful), focus traps that swallow Escape, programmatic `focus()` calls on non-focusable

Use when shipping a feature that must meet WCAG 2.2 conformance (nine new Success Criteria over 2.1), measuring text and non-text contrast against the binding 2.x ratios, deciding how to respect a user's reduced-motion preference in a CSS or View-Transitions animation, picking palette tokens for prefers-contrast more / less, supporting Windows High Contrast Mode via forced-colors, sizing an icon-only target, or remediating an audit finding on focus-not-obscured, dragging-only interaction, redundant-entry, or cognitive-CAPTCHA authentication. Prevents the most common a11y regressions in 2026 : animations that fire by default without a reduced-motion guard and trigger vestibular distress, 16-by-16 icon buttons that fail 2 5 8 Target Size, focus indicators that hide entirely behind a sticky header (2 4 11 fail), drag-only kanban / slider interactions with no single-pointer alternative (2 5 7 fail), CAPTCHA-only authentication that blocks password-manager paste (3 3 8 fail), color-only form-error indication (1 4

Use when writing vanilla JavaScript or TypeScript that touches the DOM in an evergreen-2026 browser, picking an ES2024 grouping / deep-clone / promise / iterator API, typing an event handler, narrowing a `querySelector` or `getElementById` return, or breaking up a long task to protect INP. Prevents the most common modern JS/TS regressions in 2026 : `JSON.parse(JSON.stringify(x))` deep clones that drop `Date` and crash on cycles, hand-rolled "deferred" promise patterns that leak resolvers out of an executor closure, `reduce` accumulator boilerplate for grouping, blind `as HTMLInputElement` casts on `event.target` that lie under delegation, `requestAnimationFrame` misused as a generic yield that breaks the INP budget, Iterator helpers shipped without feature detection to older mobile WebViews, and the deprecated `import ... assert { type: "json" }` syntax replaced by `with`. Covers ES2024 DOM-relevant features (`Object.groupBy`, `Map.groupBy`, `Promise.withResolvers`, `structuredClone` with `transfer`, top-leve

Use when authoring modern CSS without a preprocessor and you need either native nesting (`&` selector, nested `@media` / `@container` inside a rule) or logical properties (`margin-inline`, `padding-block`, `inset-inline-start`, `block-size`, `inline-size`) for international, RTL, or vertical-writing-mode layouts. Also use when deciding between physical and flow-relative properties, when a layout breaks in Arabic or Hebrew, when a vertical-writing-mode component leaks margins on the wrong side, or when reaching reflexively for Sass / PostCSS-nesting syntax that no longer applies in evergreen-2026. Prevents the four canonical failures : expecting the Sass `&__icon` string-concat BEM trick to work in native nesting (it does NOT), mixing physical (`margin-left`) and logical (`margin-inline-start`) properties in the same component (cascade conflict), assuming `inline-size` always equals `width` (it maps to height under vertical writing modes), and dropping the `&` for a pseudo-class nest (`:hover { ... }` inside a

Use when laying out a section that is two-dimensional (rows AND columns matter at the same time), when nested grid items need to align to lines defined on an outer grid, when card titles or meta rows in a card list refuse to line up across columns, when a responsive grid must auto-fit or auto-fill an unknown number of items, when negative margins are being considered to "pull" a child into a parent track, or when a layout needs named lines or named areas that survive refactors. Prevents the classic "nested grid with hand-tuned margins" anti-pattern, the `auto-fill` versus `auto-fit` confusion that collapses or preserves empty tracks unpredictably, declaring subgrid on both axes when implicit rows are still needed, assuming masonry layout is Baseline (it is not), and using the legacy `grid-gap` property name instead of `gap`. Covers `display: grid` and `display: inline-grid`, `grid-template-columns` and `grid-template-rows`, `grid-template-areas` with named areas and dot null cells, named lines with `[name]` b

Use when choosing a color function in CSS, building a shade ladder from a brand seed, blending two colors deterministically, wiring up dark mode without media-query duplication, or shipping wide-gamut colors with a sRGB fallback. Prevents the most common modern-color regressions in 2026 : muddy `color-mix` results from mixing in sRGB, `light-dark()` silently falling back to the light value because `color-scheme` was never declared, P3 colors clipping on sRGB displays without a fallback, relative-color expressions that overflow the gamut, and `hsl()` shade ladders that look "right" in numbers but wrong on screen because HSL is not perceptually uniform. Covers `oklch(L C H / alpha)` with perceptual lightness / chroma / hue, the relative-color syntax `oklch(from <color> l c h / alpha)`, `color-mix(in <space>, c1 pct, c2 pct)` across all eleven supported color spaces and the four polar hue-interpolation methods, `light-dark(<light>, <dark>)` paired with `color-scheme: light dark`, the `color()` function for `disp

Use when styling an element based on a descendant, sibling, or sibling-state condition; building a parent-style-from-child relationship in CSS without JavaScript; choreographing form-state styling (`form:has(input:invalid)`); or deciding whether `:has()` or a JS class-toggle is the right tool. Prevents the four standard performance and validity traps : anchoring on `body` or `:root` (re-evaluates on every DOM mutation), placing pseudo- elements inside `:has()` (spec-prohibited), nesting `:has()` inside `:has()` (also spec-prohibited), and reaching for `:has()` when `:focus-within` already solves the problem with cheaper semantics. Covers `:has(<relative-selector-list>)` syntax, the forgiving inner list, the highest-specificity rule, restrictions, combinator placement (`> child`, `+ sibling`, `~ sibling`), OR-via-comma vs AND-via-chained- `:has(...)`, anchor-locality performance heuristics, gating via `@supports selector(:has(*))`, and Baseline status. Keywords: :has, has selector, relational selector, parent

Use when a component's layout has to react to the width or aspect of its own parent rather than the viewport, when card or panel content collapses or stretches at the wrong breakpoint, when reusable components need to behave differently in a narrow sidebar versus a wide main column, or when a theme switch driven by a custom property should style its descendants without descendant-explosion selectors. Prevents the classic "media-query at the component" mistake, container query units (`cqi`, `cqw`) falling back silently to viewport units, layout collapse from setting `container-type: size` without an explicit height, descendant containers shadowing ancestor containers in unexpected ways, and shipping a Baseline 2025 style container query without a feature gate. Covers the full `container-type` value set (`size`, `inline-size`, `normal`), the `container-name` opt-in plus the `container` shorthand, anonymous and named `@container (width > X)` queries, the six container query length units (`cqw`, `cqh`, `cqi`, `cq

Use when authoring any HTML form, validating user input, wiring custom widgets into the form lifecycle, integrating password managers / autofill, or deciding between native and custom form controls. Prevents the most common form regressions in 2026 : `:invalid` red borders on empty load, `autocomplete="off"` killing password managers, `HTMLFormElement.submit()` silently bypassing validation, JS-rebuilt selects with no constraint validation, and ElementInternals widgets without `aria-errormessage` plumbing. Covers the complete 22-type `<input>` matrix with Baseline status, the `inputmode` token set, the full `autocomplete` token taxonomy, the Constraint Validation API (`ValidityState`, `setCustomValidity`, `checkValidity` vs `reportValidity`, `:invalid` vs `:user-invalid`, `requestSubmit`), form events (`submit` / `reset` / `formdata` / `invalid`), the FormData API, Open UI customizable controls (`appearance: base-select`, `<selectedcontent>`, gated Chromium-only with progressive-enhancement pattern), and Form

Use when organizing a stylesheet's cascade with `@layer`, scoping component styles with `@scope`, isolating third-party CSS, taming `!important` chains, or replacing descendant-selector trees with low-specificity scoped rules. Prevents the four standard cascade-discipline failures : mixing unlayered and layered author rules (unlayered always wins normal), assuming `!important` follows the same layer order as normal declarations (it is reversed), shipping `@scope` without an `@supports` gate, and using `:scope` where a bare selector was intended (silent class-level specificity bump). Covers `@layer` statement / block / anonymous / nested forms; the unlayered-vs-layered normal-vs-important inversion table; canonical author order (`reset, base, theme, components, utilities`); third-party CSS isolation via `@import ... layer(name)`; `@scope (<root>) to (<limit>)` donut syntax; the `:scope` specificity rule; cascade proximity (smallest DOM hop wins, ordered AFTER specificity and BEFORE source order); Baseline stat

Use when picking which HTML element to author for a region or piece of content, when a screen reader cannot find the navigation or main content, when an audit reports missing landmarks, or when a search field has no role. Prevents the `<div role="navigation">` reflex when `<nav>` exists, `<form role="search">` patterns now superseded by the `<search>` element, multiple `<main>` per page, `<section>` blocks without headings, `<article>` wrappers around unrelated content, and `tabindex` placed on `<dialog>`. Covers the semantic landmark surface (`<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`, `<article>`, `<section>`, `<search>`), the `<search>` element (Baseline Widely Available since October 2023, implicit role `search`), `<details>` / `<summary>` with the `name` attribute for accordion-style mutual exclusion (Baseline 2024), declarative Shadow DOM via `<template shadowrootmode>`, and the rule for when to use ARIA `role` versus a native element. Keywords: header, nav, main, aside, footer, article, secti

Use when starting a frontend project, picking a stack, deciding where a feature belongs in the codebase, or diagnosing why a page is slow, janky, or visually unstable. Prevents premature bundling of small zero-build sites, animating non-compositor properties that drop frames, polyfilling features that are already Baseline Widely Available, and treating MDN as authoritative when MDN and the underlying specification disagree. Covers the four authoring layers of the web platform (markup, style, behavior, animation-timeline), spec lookup discipline across WHATWG, W3C, MDN, and web.dev, the browser rendering pipeline from DOM construction through compositing, build-step versus runtime trade-offs for evergreen-2026 browsers, and the compositor-only animation rule. Keywords: DOM, CSSOM, render tree, style computation, layout, reflow, paint, composite, compositor, will-change, contain, content-visibility, WHATWG, W3C, BCD, ESM, native modules, import maps, transform, opacity, filter, Baseline, evergreen, slow page, s

Use when starting a new frontend project, reviewing a landing page that "looks AI-generated", or deciding between a default template pattern and a bespoke alternative. Prevents the AI-generic visual fingerprint (rounded-md gray cards in a 3-column grid under a centered hero, Inter/Geist at one weight, slate-plus-indigo palette, hover lift on every card) by giving deterministic rules for distinctive, system-driven, accessible, performant design. Covers what AI-generic looks like, the nine visual fingerprints of distinctive design, system-over-snowflake token thinking, accessibility as a design foundation (WCAG 2.2 SC 2.4.11, 2.4.13, 2.5.7, 2.5.8), and how Core Web Vitals (LCP, INP, CLS) constrain visual decisions. Keywords: oklch, design tokens, container queries, view transitions, popover, anchor positioning, subgrid, cascade layers, prefers-reduced-motion, WCAG 2.2, LCP, INP, CLS, Baseline, looks generic, looks AI-generated, looks like every other site, blends in too much, missing personality, boring templat

Use when deciding whether a web platform feature is safe to ship, looking up authoritative behavior for HTML / CSS / DOM / JS, or choosing between native feature, polyfill, and `@supports` gating in evergreen-2026 targets. Prevents shipping features that lack interop, polyfilling features that already reached Baseline Widely Available, UA-sniffing instead of feature detection, and citing stale BCD as if it were Baseline. Covers the Baseline taxonomy (Limited / Newly / Widely Available, 30-month rule, four core engines), spec-family lookup discipline (WHATWG Living Standards for HTML and DOM, W3C TR for CSS modules, W3C WAI for WCAG and ARIA, TC39 for ECMAScript), MDN's role as canonical secondary source, web.dev for Chrome-team applied guidance, the `web-features` package, and feature detection via CSS `@supports` and JS `in` operator. Keywords: WHATWG, W3C, TC39, Baseline, Baseline 2024, Baseline 2025, BCD, @supports, CSS.supports, feature detection, evergreen, polyfill, caniuse, web-features, web.dev, MDN,