@duro-app/cli 5.17.0 → 5.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/cli",
-  "version": "5.17.0",
+  "version": "5.19.0",
   "type": "module",
   "license": "MIT",
   "description": "Machine-queryable docs for the Duro design system: components, props, recipes, tokens and rules as CLI output, JSON, or an MCP server.",
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": ">=1.0.0",
-    "@duro-app/ui": "^5.17.0"
+    "@duro-app/ui": "^5.19.0"
   },
   "peerDependenciesMeta": {
     "@duro-app/ui": {
@@ -61,9 +61,9 @@
     "@types/node": "^24.0.0",
     "ts-morph": "^26.0.0",
     "typescript": "^5.7.0",
-    "@duro-app/tokens": "^5.17.0",
-    "@duro-app/ui": "^5.17.0",
-    "@duro-app/eslint-plugin": "^5.17.0"
+    "@duro-app/eslint-plugin": "^5.19.0",
+    "@duro-app/ui": "^5.19.0",
+    "@duro-app/tokens": "^5.19.0"
   },
   "scripts": {
     "registry": "node scripts/build-registry.mjs",

package/registry.json

@@ -4911,7 +4911,7 @@
           ],
           "required": []
         },
-        "description": "Structural primitive for grouping content with header, body, and footer slots. A \"workspace surface\" for forms, settings sections, and inspectors. Sub-components are purely structural — no context required.",
+        "description": "Structural primitive for grouping content with header, body, and footer slots. A \"workspace surface\" for forms, settings sections, and inspectors. Sub-components are purely structural — no context required. On native the Body does not scroll (unlike the web Body): wrap long content in ScrollArea. A TextLink inside needs onNavigate for in-app routes on native.",
         "example": "<Panel.Root bordered>\n  <Panel.Header>\n    <Heading level={3}>Section Title</Heading>\n    <Button variant=\"secondary\" size=\"small\">Action</Button>\n  </Panel.Header>\n  <Panel.Body>\n    {/* Content */}\n  </Panel.Body>\n  <Panel.Footer>\n    <Button>Save</Button>\n  </Panel.Footer>\n</Panel.Root>",
         "relatedTo": [
           {
@@ -4937,7 +4937,7 @@
         ]
       },
       "name": "Panel",
-      "native": false,
+      "native": true,
       "parts": {
         "Body": {
           "name": "Body",
@@ -5741,6 +5741,7 @@
           "Top-level horizontal nav — use Inline with LinkButton"
         ],
         "whenToUse": [
+          "Inside `AppShell.Rail`: the Rail is the navigation landmark, so Root renders a plain block, or `role=\"group\"` with its `aria-label` when it has one. Name the Rail \"Main\", not \"Navigation\" (screen readers would announce \"Navigation navigation\"). Outside a Rail, Root is a `nav` landmark.",
           "App-level sidebar navigation — flat `Section`s, every destination visible",
           "Settings navigation with labelled regions",
           "`Group` for a rare or advanced region tucked below the flat sections",
@@ -5807,7 +5808,7 @@
               "type": "ReactNode"
             },
             {
-              "description": "Names the navigation landmark (\"Main\", \"Settings\"). Give one whenever the page has another nav (a breadcrumb, a pager): screen readers list landmarks by name.",
+              "description": "Names the navigation landmark (\"Main\", \"Settings\"). Give one whenever the page has another nav (a breadcrumb, a pager): screen readers list landmarks by name. Inside `AppShell.Rail` it is not a landmark (the Rail is): the name then labels a `role=\"group\"`.",
               "name": "aria-label",
               "required": false,
               "type": "string"
@@ -7374,7 +7375,7 @@
       "importPath": "@duro-app/ui",
       "kind": "component",
       "meta": {
-        "description": "Inline hyperlink for running text and standalone text links (\"View all\", \"Edit profile\"). Always underlined, so colour is never the only cue: default is accent text with an accent underline; subtle keeps the surrounding text colour with a muted underline and turns accent on hover. target=\"_blank\" defaults rel to noopener noreferrer. onNavigate(href, event) hands a plain primary click to a client router (the app calls event.preventDefault(), then navigates); modified clicks keep the browser default.",
+        "description": "Inline hyperlink for running text and standalone text links (\"View all\", \"Edit profile\"). Always underlined, so colour is never the only cue: default is accent text with an accent underline; subtle keeps the surrounding text colour with a muted underline and turns accent on hover. target=\"_blank\" defaults rel to noopener noreferrer. onNavigate(href, event) hands a plain primary click to a client router (the app calls event.preventDefault(), then navigates); modified clicks keep the browser default. On native the link renders no href and a press goes through onNavigate, then the system (Linking.openURL): onNavigate is required for in-app routes on native, and a target set skips it.",
         "example": "<Text>\n  Read the <TextLink href=\"/docs/migrate\">migration guide</TextLink> before you change seats, or{' '}\n  <TextLink href=\"/plans\" variant=\"subtle\">compare plans</TextLink> first.\n</Text>",
         "relatedTo": [
           {
@@ -7400,7 +7401,7 @@
         ]
       },
       "name": "TextLink",
-      "native": false,
+      "native": true,
       "props": [
         {
           "name": "href",
@@ -8253,7 +8254,7 @@
             "Item"
           ]
         },
-        "description": "Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required. On React Native selection, expansion and aria-level are the same; the keyboard model (arrows, Home/End, typeahead) is web only.",
+        "description": "Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. A click or Enter on a branch row with no href selects it and toggles it open or closed (a folder); a branch with href navigates, and its chevron toggles. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required. On React Native each row is a pressable link (href) or button, and a branch has its own chevron control that expands it (named by the optional Root prop expandLabel(text), default the item text); selection, expansion and aria-level are the same, the keyboard model (arrows, Home/End, typeahead) is web only. On native onNavigate is required for in-app routes: without it a relative href goes to the system (Linking.openURL). On web a tree with more items than Root virtualizeThreshold (default 150, open or not) is windowed: only the rows in view mount, as flat treeitems with aria-level, aria-setsize and aria-posinset; maxHeight caps its scroll viewport. Items must be JSX descendants of Root (fragments and arrays are fine, an Item hidden inside another component is not seen by the window). Native renders every row.",
         "example": "<Tree.Root aria-label=\"Blocs\" defaultExpanded={['energy']} onValueChange={setSelected}>\n  <Tree.Item value=\"energy\" label=\"Core business — Energy\">\n    <Tree.Item value=\"generation\" label=\"Generation\" meta=\"4 apps\" />\n    <Tree.Item value=\"network\" label=\"Network operations\">\n      <Tree.Item value=\"scada\" label=\"SCADA supervision\" />\n    </Tree.Item>\n  </Tree.Item>\n  <Tree.Item value=\"finance\" label=\"Finance & steering\" />\n</Tree.Root>",
         "relatedTo": [
           {
@@ -8381,6 +8382,25 @@
               "name": "onExpandedChange",
               "required": false,
               "type": "(expanded: string[]) => void"
+            },
+            {
+              "description": "Native: the accessible name of a branch's chevron control, from the item's text (its `textValue`, else a string `label`). Defaults to that text.",
+              "name": "expandLabel",
+              "required": false,
+              "type": "(label: string) => string"
+            },
+            {
+              "default": "150",
+              "description": "Web: with more items than this (open or not) the tree mounts only the rows in view. At or below it, every row is mounted. Default 150.",
+              "name": "virtualizeThreshold",
+              "required": false,
+              "type": "number"
+            },
+            {
+              "description": "Web, windowed: caps the scroll viewport's height; without it, it fills its parent.",
+              "name": "maxHeight",
+              "required": false,
+              "type": "Length"
             }
           ],
           "sourcePath": "packages/ui/src/components/Tree/Tree.tsx"
@@ -8918,8 +8938,8 @@
     },
     "ui": {
       "LICENSE": "MIT License\n\nCopyright (c) 2026 Jakub Krehel\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n",
-      "NOTICE.md": "# Notice\n\nThis skill is a fork of `better-ui/` from the repository `jakubkrehel/skills`, at commit `4c66b1fa86e9ab70187b43d7da9b6fdb29f2ef63`, fetched 2026-10-16.\n\nLocal edits:\n\n- Renamed by `scripts/fork-interface-skills.sh` at dotfiles commit `5fbdc4b` (`better-ui` to `ui`).\n- Dropped `agents/openai.yaml`.\n- Added the precedence block after the introduction of `SKILL.md`.\n- Reconciled the clause in `ui/SKILL.md` that limited project tokens, so a project token always wins.\n\nUpdating: diff upstream from the pinned commit, have a frontier model port the changes over the local edits, then bump the pin.\n\nThe upstream license (MIT) applies; the text is in `LICENSE`:\n\n> MIT License\n>\n> Copyright (c) 2026 Jakub Krehel\n>\n> Permission is hereby granted, free of charge, to any person obtaining a copy\n> of this software and associated documentation files (the \"Software\"), to deal\n> in the Software without restriction, including without limitation the rights\n> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n> copies of the Software, and to permit persons to whom the Software is\n> furnished to do so, subject to the following conditions:\n>\n> The above copyright notice and this permission notice shall be included in all\n> copies or substantial portions of the Software.\n>\n> THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n> SOFTWARE.\n",
-      "SKILL.md": "---\nname: ui\ndescription: Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation.\n---\n\n# UI polish\n\nThis skill holds the visual polish for surfaces, icons and motion, with the exact value each detail takes. It applies once the underlying interaction is sound, and a polish finding never outranks a broken interaction.\n\nA decision of this repository (resolved at its applicable scope with `aval resolve`) outranks a value in this skill. Apply token requirements and gap routing only where the repository's decisions require them, keeping their named exemptions. On `duro-stack`, a non-exempt measure without a token is a design-system gap under ADR-0006/0027, never a local literal.\n\nWhere Duro defines the value, these win: the `spacing.css.ts` radii, `shadows.css.ts` and `motion.css.ts`.\n\nThe ui values with no token (`300ms` enter, `100ms` stagger, `cubic-bezier(0.2, 0, 0, 1)`) are known design-system gaps tracked in one issue (https://github.com/fredericrous/duro-design-system/issues/120), so a review reports them once against that issue and not per use.\n\n## Exact values, optional polish\n\nThe values below are exact, not ranges to approximate. `cubic-bezier(0.2, 0, 0, 1)` is not `cubic-bezier(0.4, 0, 0.2, 1)`, and `0.96` is not `0.95`. The optical nudges and the concentric padding cutoff are the exceptions. They are starting points, judged by eye.\n\nKeep the project's component library, tokens and density. A project token always wins over a value here, and this skill's value applies only where the project has no token for it. Match the project's motion language wherever no rule here gives a value. A deliberate and consistent project convention, such as a style with no shadows, is a preference and not a finding. The same detail done two ways within the project is a finding.\n\nText wrapping, font rendering, tabular numbers and text spacing belong to `typography`. Hit areas, keyboard support, ARIA and the reduced-motion requirement belong to `accessibility`. Grouping, section spacing, breakpoints and spatial RTL belong to `layout`, except directional icon mirroring. Color tokens and contrast measurement belong to `colors`.\n\n## Outer radius equals inner radius plus padding\n\nWhere nested surfaces share a visible, even inset, the outer radius is the inner radius plus the padding plus any border width. Past `24px` of padding, or where the padding is deliberately asymmetric, treat the layers as separate surfaces and keep each one's radius token. Recipes are in [surfaces.md](surfaces.md).\n\n## Align optically where geometry looks off\n\nWhere geometric centering looks off, nudge by eye. Give a button `2px` less padding on its icon side, shift a play triangle toward its point and fix asymmetric glyphs in the SVG itself. Recipes are in [surfaces.md](surfaces.md#optical-alignment).\n\n## Shadows for elevation, borders for structure\n\nWhere a border exists only to create depth, replace it with layered transparent `box-shadow` values. Keep borders on dividers, separators, table cells and selected states. Keep them on form inputs too, whose boundary needs 3:1 non-text contrast under `accessibility`. Focus rings belong to `accessibility` as well.\n\nForced-colors mode removes every `box-shadow`. Keep `border: 1px solid transparent` under a shadow ring so that mode still draws an edge. Recipes are in [surfaces.md](surfaces.md#shadow-recipes).\n\n## Outline images in pure black or white\n\nGive content images a `1px` outline inset by `1px`. Use `oklch(0 0 0 / 0.1)` in light mode and `oklch(1 0 0 / 0.1)` in dark. Never use a palette near-black, a tinted neutral or the accent color, because the tint shows as a colored fringe on the image edge. Skip transparent artwork such as logos and illustrations. The recipe is in [surfaces.md](surfaces.md#image-outlines).\n\n## Transitions, not keyframes, for interactive state\n\nDrive interactive state changes with CSS transitions or a motion library's springs, which retarget when the user reverses mid-flight. Keyframes run a fixed timeline and cannot reverse, so reserve them for sequences that run once. See [animations.md](animations.md).\n\n## Press scales to 0.96\n\nA pressed button scales to `0.96` over `150ms` with `ease-out`, and a disabled one never scales. Give the button an opt-out where the motion would distract, through the component's existing variant API or a `static` prop. See [recipes for CSS, Tailwind and Motion](animations.md#scale-on-press).\n\n## High-frequency interactions get no animation\n\nKeystrokes, row hovers and tab switches get instant feedback, or a transition of `150ms` or less on `opacity` or `background-color`. Reserve expressive motion for infrequent moments such as a view's first load, a success state or an empty state.\n\nEvery animated state change also leaves a static cue in the form of a color, icon or label. Motion is never the only feedback channel.\n\n## Gate motion behind the reduced-motion preference\n\n`accessibility` owns the requirement, and no recipe here ships without it. Run movement, scale and blur only under `prefers-reduced-motion: no-preference`. Under reduced motion, replace them with an opacity cross-fade rather than removing the element instantly. Recipes for CSS, Tailwind and Motion are in [animations.md](animations.md#reduced-motion-fallback).\n\n## Stagger infrequent entrances by 100ms\n\nWhere sequence communicates hierarchy in a staged entrance, split the content into semantic chunks such as title, description and actions. Stagger them `100ms` apart, each entering with opacity, `4px` of blur and `12px` of `translateY` over `300ms` with `ease-out`. Never stagger routine interactions. See [enter-exit.md](enter-exit.md).\n\n## Exits are shorter and smaller than enters\n\nExit with opacity, `4px` of blur and a fixed `-12px` `translateY` over `150ms` with `ease-out`, never the full container height. Slide fully out only where the destination carries meaning, such as a drawer closing. Remove the element instantly where motion adds no information. See [enter-exit.md](enter-exit.md#exit-animations).\n\n## Skip state animations on first render\n\nSet `initial={false}` on an `AnimatePresence` that wraps a state swap, so the default state does not animate in on mount. Never set it around an intentional entrance such as a staggered hero. See [animations.md](animations.md#skip-animation-on-page-load).\n\n## Cross-fade contextual icons with exact values\n\nWhere an icon swaps on an infrequent state change, such as play to pause or copy to copied, cross-fade it. Scale runs `0.25` to `1`, opacity `0` to `1` and blur `4px` to `0px`. With a motion library, use `{ type: \"spring\", duration: 0.3, bounce: 0 }`, and bounce is always `0`. Without one, keep both icons in the DOM and cross-fade over `300ms` with `cubic-bezier(0.2, 0, 0, 1)`.\n\nA tab's icon swap and the actions a row reveals on hover fall under **High-frequency interactions get no animation**. Both recipes are in [icon-transitions.md](icon-transitions.md).\n\n## Suppress transitions on theme switch\n\nDisable every transition for the theme swap, force a style flush and restore transitions after the next frame. Otherwise every color transition fires at once and the switch smears. See the [recipe](animations.md#suppress-transitions-on-theme-switch).\n\n## Transition only what changes\n\nName the exact properties, as in `transition-property: scale, opacity`, and never `all`. See [performance.md](performance.md).\n\n## Name the animated property in will-change\n\nAdd `will-change` only after you see first-frame stutter, and name the property you animate: `scale` for `scale`, `transform` for `transform`. Limit it to transform properties, `opacity` and `filter`, and never use `all`. See [performance.md](performance.md#use-will-change-sparingly).\n\n## Hover effects only on hover-capable pointers\n\nPut hover-only styling behind `@media (hover: hover)`. On touch, `:hover` latches after a tap and reads as a stuck selected state. Tailwind 4's `hover:` variant already compiles under that query, and Tailwind 3's does not. Where a control draws its own pressed state, set `-webkit-tap-highlight-color: transparent` so the default gray flash does not double it.\n\n## Contain scroll inside overlays\n\nGive scrollable dialogs, drawers, menus and side panels `overscroll-behavior: contain`, so scrolling past their end never scrolls the page behind.\n\n## Match icon stroke to text weight\n\nAn icon's rendered stroke tracks the weight of the text beside it, from `1.5px` at 400 to `2.5px` at 700. Use one icon library per surface. The table, sizing and grid rules are in [icons.md](icons.md).\n\n## One SVG, recolored per state\n\nIcons use `currentColor` and take hover, selected and disabled states from CSS color and opacity, never from separate assets. Outline is the default variant, and fill marks the active state. Under `dir=\"rtl\"`, mirror only icons whose meaning follows reading direction. See [icons.md](icons.md#icons-in-rtl).\n\n## Before you finish\n\n| Detection | Fix |\n| --- | --- |\n| Padded parent and child with the same `rounded-*` or `border-radius` | Add the padding to the outer radius |\n| `box-shadow: 0 0 0 1px` ring with no `border` beside it | `border: 1px solid transparent` |\n| `outline-slate-*`, `outline-zinc-*` or a hex outline color on `img` | `outline-black/10` and `dark:outline-white/10` |\n| `transition-all` or `transition: all` | Name the changing properties |\n| `animation:` set on `:hover`, `.open` or another toggled class | A transition on the same properties |\n| `active:scale-95`, `scale-90` or `whileTap` below `0.96` | `0.96` |\n| `:active` scale with no `:disabled` exclusion | `enabled:active:` or `:not(:disabled):active` |\n| `bounce:` set to anything but `0` | `bounce: 0` |\n| `opacity: 0` in a base rule that only an `animation` reveals | Hidden state in the `from` keyframe, `animation-fill-mode: both` |\n| `translate`, `scale`, `filter` or `motion.*` animation with no `prefers-reduced-motion`, `motion-safe:` or `MotionConfig` guard | Gate it and cross-fade opacity under reduced motion |\n| Color transitions plus a theme toggle with no `disableTransitionOnChange` or override | The theme-switch suppression recipe |\n| `will-change: all`, or `will-change` on an element that never animates | Name the animated property or delete it |\n| `fill=\"#...\"` or `stroke=\"#...\"` inside an icon SVG | `currentColor` |\n| Plain-CSS `:hover` or Tailwind 3 `hover:` outside `@media (hover: hover)` | Wrap it in the query |\n| `overflow: auto` or `overflow-y-auto` on a dialog, drawer or menu with no `overscroll-behavior` | `overscroll-behavior: contain` |\n\n## Reporting\n\n**Severity.** `HIGH` breaks an interaction, as a keyframe toggle that cannot reverse or a hover state stuck on touch does. Two of `interface`'s escalation triggers land here and are `HIGH` on sight. One is motion that ignores `prefers-reduced-motion`, and the other is a state change carried by motion alone. `MEDIUM` is a visible inconsistency in surfaces, icons or motion. `LOW` is isolated polish.\n\n**Verification.** Without a browser, read every state the component defines from the code, such as hover, pressed, selected, loading and empty, with its durations and easings. With one, walk each state and replay motion at 10% speed in the browser's Animations panel. Report every check you could not run as `Not verified`.\n\n**Format.** Group findings under the principle each violates, ordered by severity, one row per root cause listing every location it appears in:\n\n| Severity | Location | Before | After | Why |\n| --- | --- | --- | --- | --- |\n\n`Location` is `path/to/file:line`. `Why` names the principle and the user impact.\n\nEnd with `Block` when any `HIGH` remains, `Approve` otherwise, leaving the rest in the table as work to do. Never `Approve` coverage you did not inspect. With nothing to report, state \"No actionable UI-polish findings\" and report verification.\n",
+      "NOTICE.md": "# Notice\n\nThis skill is a fork of `better-ui/` from the repository `jakubkrehel/skills`, at commit `4c66b1fa86e9ab70187b43d7da9b6fdb29f2ef63`, fetched 2026-10-16.\n\nLocal edits:\n\n- Renamed by `scripts/fork-interface-skills.sh` at dotfiles commit `5fbdc4b` (`better-ui` to `ui`).\n- Dropped `agents/openai.yaml`.\n- Added the precedence block after the introduction of `SKILL.md`.\n- Reconciled the clause in `ui/SKILL.md` that limited project tokens, so a project token always wins.\n- Extended the `description:` with animation triggers (menu or dialog enter and exit, staggered items, hover and press feedback, icon swaps), so `ui` wins those prompts over `motion-design`: 18/18 should, 0/12 near-miss on 2026-10-17, against 12/18 before.\n\nUpdating: diff upstream from the pinned commit, have a frontier model port the changes over the local edits, then bump the pin.\n\nThe upstream license (MIT) applies; the text is in `LICENSE`:\n\n> MIT License\n>\n> Copyright (c) 2026 Jakub Krehel\n>\n> Permission is hereby granted, free of charge, to any person obtaining a copy\n> of this software and associated documentation files (the \"Software\"), to deal\n> in the Software without restriction, including without limitation the rights\n> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n> copies of the Software, and to permit persons to whom the Software is\n> furnished to do so, subject to the following conditions:\n>\n> The above copyright notice and this permission notice shall be included in all\n> copies or substantial portions of the Software.\n>\n> THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n> SOFTWARE.\n",
+      "SKILL.md": "---\nname: ui\ndescription: Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation. Use when adding or tuning a UI animation or transition, such as a menu or dialog enter and exit, staggered list items, hover and press feedback or an icon swap.\n---\n\n# UI polish\n\nThis skill holds the visual polish for surfaces, icons and motion, with the exact value each detail takes. It applies once the underlying interaction is sound, and a polish finding never outranks a broken interaction.\n\nA decision of this repository (resolved at its applicable scope with `aval resolve`) outranks a value in this skill. Apply token requirements and gap routing only where the repository's decisions require them, keeping their named exemptions. On `duro-stack`, a non-exempt measure without a token is a design-system gap under ADR-0006/0027, never a local literal.\n\nWhere Duro defines the value, these win: the `spacing.css.ts` radii, `shadows.css.ts` and `motion.css.ts`.\n\nThe ui values with no token (`300ms` enter, `100ms` stagger, `cubic-bezier(0.2, 0, 0, 1)`) are known design-system gaps tracked in one issue (https://github.com/fredericrous/duro-design-system/issues/120), so a review reports them once against that issue and not per use.\n\n## Exact values, optional polish\n\nThe values below are exact, not ranges to approximate. `cubic-bezier(0.2, 0, 0, 1)` is not `cubic-bezier(0.4, 0, 0.2, 1)`, and `0.96` is not `0.95`. The optical nudges and the concentric padding cutoff are the exceptions. They are starting points, judged by eye.\n\nKeep the project's component library, tokens and density. A project token always wins over a value here, and this skill's value applies only where the project has no token for it. Match the project's motion language wherever no rule here gives a value. A deliberate and consistent project convention, such as a style with no shadows, is a preference and not a finding. The same detail done two ways within the project is a finding.\n\nText wrapping, font rendering, tabular numbers and text spacing belong to `typography`. Hit areas, keyboard support, ARIA and the reduced-motion requirement belong to `accessibility`. Grouping, section spacing, breakpoints and spatial RTL belong to `layout`, except directional icon mirroring. Color tokens and contrast measurement belong to `colors`.\n\n## Outer radius equals inner radius plus padding\n\nWhere nested surfaces share a visible, even inset, the outer radius is the inner radius plus the padding plus any border width. Past `24px` of padding, or where the padding is deliberately asymmetric, treat the layers as separate surfaces and keep each one's radius token. Recipes are in [surfaces.md](surfaces.md).\n\n## Align optically where geometry looks off\n\nWhere geometric centering looks off, nudge by eye. Give a button `2px` less padding on its icon side, shift a play triangle toward its point and fix asymmetric glyphs in the SVG itself. Recipes are in [surfaces.md](surfaces.md#optical-alignment).\n\n## Shadows for elevation, borders for structure\n\nWhere a border exists only to create depth, replace it with layered transparent `box-shadow` values. Keep borders on dividers, separators, table cells and selected states. Keep them on form inputs too, whose boundary needs 3:1 non-text contrast under `accessibility`. Focus rings belong to `accessibility` as well.\n\nForced-colors mode removes every `box-shadow`. Keep `border: 1px solid transparent` under a shadow ring so that mode still draws an edge. Recipes are in [surfaces.md](surfaces.md#shadow-recipes).\n\n## Outline images in pure black or white\n\nGive content images a `1px` outline inset by `1px`. Use `oklch(0 0 0 / 0.1)` in light mode and `oklch(1 0 0 / 0.1)` in dark. Never use a palette near-black, a tinted neutral or the accent color, because the tint shows as a colored fringe on the image edge. Skip transparent artwork such as logos and illustrations. The recipe is in [surfaces.md](surfaces.md#image-outlines).\n\n## Transitions, not keyframes, for interactive state\n\nDrive interactive state changes with CSS transitions or a motion library's springs, which retarget when the user reverses mid-flight. Keyframes run a fixed timeline and cannot reverse, so reserve them for sequences that run once. See [animations.md](animations.md).\n\n## Press scales to 0.96\n\nA pressed button scales to `0.96` over `150ms` with `ease-out`, and a disabled one never scales. Give the button an opt-out where the motion would distract, through the component's existing variant API or a `static` prop. See [recipes for CSS, Tailwind and Motion](animations.md#scale-on-press).\n\n## High-frequency interactions get no animation\n\nKeystrokes, row hovers and tab switches get instant feedback, or a transition of `150ms` or less on `opacity` or `background-color`. Reserve expressive motion for infrequent moments such as a view's first load, a success state or an empty state.\n\nEvery animated state change also leaves a static cue in the form of a color, icon or label. Motion is never the only feedback channel.\n\n## Gate motion behind the reduced-motion preference\n\n`accessibility` owns the requirement, and no recipe here ships without it. Run movement, scale and blur only under `prefers-reduced-motion: no-preference`. Under reduced motion, replace them with an opacity cross-fade rather than removing the element instantly. Recipes for CSS, Tailwind and Motion are in [animations.md](animations.md#reduced-motion-fallback).\n\n## Stagger infrequent entrances by 100ms\n\nWhere sequence communicates hierarchy in a staged entrance, split the content into semantic chunks such as title, description and actions. Stagger them `100ms` apart, each entering with opacity, `4px` of blur and `12px` of `translateY` over `300ms` with `ease-out`. Never stagger routine interactions. See [enter-exit.md](enter-exit.md).\n\n## Exits are shorter and smaller than enters\n\nExit with opacity, `4px` of blur and a fixed `-12px` `translateY` over `150ms` with `ease-out`, never the full container height. Slide fully out only where the destination carries meaning, such as a drawer closing. Remove the element instantly where motion adds no information. See [enter-exit.md](enter-exit.md#exit-animations).\n\n## Skip state animations on first render\n\nSet `initial={false}` on an `AnimatePresence` that wraps a state swap, so the default state does not animate in on mount. Never set it around an intentional entrance such as a staggered hero. See [animations.md](animations.md#skip-animation-on-page-load).\n\n## Cross-fade contextual icons with exact values\n\nWhere an icon swaps on an infrequent state change, such as play to pause or copy to copied, cross-fade it. Scale runs `0.25` to `1`, opacity `0` to `1` and blur `4px` to `0px`. With a motion library, use `{ type: \"spring\", duration: 0.3, bounce: 0 }`, and bounce is always `0`. Without one, keep both icons in the DOM and cross-fade over `300ms` with `cubic-bezier(0.2, 0, 0, 1)`.\n\nA tab's icon swap and the actions a row reveals on hover fall under **High-frequency interactions get no animation**. Both recipes are in [icon-transitions.md](icon-transitions.md).\n\n## Suppress transitions on theme switch\n\nDisable every transition for the theme swap, force a style flush and restore transitions after the next frame. Otherwise every color transition fires at once and the switch smears. See the [recipe](animations.md#suppress-transitions-on-theme-switch).\n\n## Transition only what changes\n\nName the exact properties, as in `transition-property: scale, opacity`, and never `all`. See [performance.md](performance.md).\n\n## Name the animated property in will-change\n\nAdd `will-change` only after you see first-frame stutter, and name the property you animate: `scale` for `scale`, `transform` for `transform`. Limit it to transform properties, `opacity` and `filter`, and never use `all`. See [performance.md](performance.md#use-will-change-sparingly).\n\n## Hover effects only on hover-capable pointers\n\nPut hover-only styling behind `@media (hover: hover)`. On touch, `:hover` latches after a tap and reads as a stuck selected state. Tailwind 4's `hover:` variant already compiles under that query, and Tailwind 3's does not. Where a control draws its own pressed state, set `-webkit-tap-highlight-color: transparent` so the default gray flash does not double it.\n\n## Contain scroll inside overlays\n\nGive scrollable dialogs, drawers, menus and side panels `overscroll-behavior: contain`, so scrolling past their end never scrolls the page behind.\n\n## Match icon stroke to text weight\n\nAn icon's rendered stroke tracks the weight of the text beside it, from `1.5px` at 400 to `2.5px` at 700. Use one icon library per surface. The table, sizing and grid rules are in [icons.md](icons.md).\n\n## One SVG, recolored per state\n\nIcons use `currentColor` and take hover, selected and disabled states from CSS color and opacity, never from separate assets. Outline is the default variant, and fill marks the active state. Under `dir=\"rtl\"`, mirror only icons whose meaning follows reading direction. See [icons.md](icons.md#icons-in-rtl).\n\n## Before you finish\n\n| Detection | Fix |\n| --- | --- |\n| Padded parent and child with the same `rounded-*` or `border-radius` | Add the padding to the outer radius |\n| `box-shadow: 0 0 0 1px` ring with no `border` beside it | `border: 1px solid transparent` |\n| `outline-slate-*`, `outline-zinc-*` or a hex outline color on `img` | `outline-black/10` and `dark:outline-white/10` |\n| `transition-all` or `transition: all` | Name the changing properties |\n| `animation:` set on `:hover`, `.open` or another toggled class | A transition on the same properties |\n| `active:scale-95`, `scale-90` or `whileTap` below `0.96` | `0.96` |\n| `:active` scale with no `:disabled` exclusion | `enabled:active:` or `:not(:disabled):active` |\n| `bounce:` set to anything but `0` | `bounce: 0` |\n| `opacity: 0` in a base rule that only an `animation` reveals | Hidden state in the `from` keyframe, `animation-fill-mode: both` |\n| `translate`, `scale`, `filter` or `motion.*` animation with no `prefers-reduced-motion`, `motion-safe:` or `MotionConfig` guard | Gate it and cross-fade opacity under reduced motion |\n| Color transitions plus a theme toggle with no `disableTransitionOnChange` or override | The theme-switch suppression recipe |\n| `will-change: all`, or `will-change` on an element that never animates | Name the animated property or delete it |\n| `fill=\"#...\"` or `stroke=\"#...\"` inside an icon SVG | `currentColor` |\n| Plain-CSS `:hover` or Tailwind 3 `hover:` outside `@media (hover: hover)` | Wrap it in the query |\n| `overflow: auto` or `overflow-y-auto` on a dialog, drawer or menu with no `overscroll-behavior` | `overscroll-behavior: contain` |\n\n## Reporting\n\n**Severity.** `HIGH` breaks an interaction, as a keyframe toggle that cannot reverse or a hover state stuck on touch does. Two of `interface`'s escalation triggers land here and are `HIGH` on sight. One is motion that ignores `prefers-reduced-motion`, and the other is a state change carried by motion alone. `MEDIUM` is a visible inconsistency in surfaces, icons or motion. `LOW` is isolated polish.\n\n**Verification.** Without a browser, read every state the component defines from the code, such as hover, pressed, selected, loading and empty, with its durations and easings. With one, walk each state and replay motion at 10% speed in the browser's Animations panel. Report every check you could not run as `Not verified`.\n\n**Format.** Group findings under the principle each violates, ordered by severity, one row per root cause listing every location it appears in:\n\n| Severity | Location | Before | After | Why |\n| --- | --- | --- | --- | --- |\n\n`Location` is `path/to/file:line`. `Why` names the principle and the user impact.\n\nEnd with `Block` when any `HIGH` remains, `Approve` otherwise, leaving the rest in the table as work to do. Never `Approve` coverage you did not inspect. With nothing to report, state \"No actionable UI-polish findings\" and report verification.\n",
       "animations.md": "# Animations\n\nRecipes for interruptible transitions, press feedback, first-render behavior, theme switches and the reduced-motion fallback. Staged entrances and exits live in [enter-exit.md](enter-exit.md), and icon swaps in [icon-transitions.md](icon-transitions.md).\n\n## Interruptible animations\n\n| | CSS transitions | CSS keyframe animations |\n| --- | --- | --- |\n| **Behavior** | Interpolate toward the latest state | Run on a fixed timeline |\n| **Interrupted** | Retarget mid-flight and reverse | Snap or restart from the beginning |\n| **Use for** | Hover, toggle, open and close | Sequences that run once, such as enters and loading |\n\n```css\n/* Good: clicking again mid-animation reverses smoothly */\n.drawer {\n  transform: translateX(-100%);\n  transition: transform 200ms ease-out;\n}\n.drawer.open {\n  transform: translateX(0);\n}\n\n/* Bad: closing mid-animation snaps */\n.drawer.open {\n  animation: slideIn 200ms ease-out forwards;\n}\n```\n\n## Scale on press\n\n```css\n.button {\n  transition-property: scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n\n.button:not(:disabled):active {\n  scale: 0.96;\n}\n```\n\n```tsx\n// Tailwind\n<button className=\"transition-transform duration-150 ease-out enabled:active:scale-[0.96]\">\n  Click me\n</button>\n\n// Motion\n<motion.button whileTap={disabled ? undefined : { scale: 0.96 }} disabled={disabled}>\n  Click me\n</motion.button>\n```\n\n### Static prop pattern\n\nWhere the button has no variant API to carry the opt-out, apply the scale class conditionally on a `static` prop:\n\n```tsx\nconst tapScale = \"enabled:active:scale-[0.96]\";\n\nfunction Button({ static: isStatic, className, children, ...props }) {\n  return (\n    <button\n      className={cn(\n        \"transition-transform duration-150 ease-out\",\n        !isStatic && tapScale,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\n// Usage\n<Button>Click me</Button>           {/* scales on press */}\n<Button static>Submit</Button>       {/* no scale */}\n```\n\n## Skip animation on page load\n\nThe icon recipe in [icon-transitions.md](icon-transitions.md#motion) shows `initial={false}` used correctly. It suits icon swaps, toggles, tabs and segmented controls, anything with a default state on page load.\n\nSetting it around a first-time entrance skips that entrance entirely. Check the component on a full page refresh before adding it.\n\n```tsx\n// Bad: initial={false} skips the staggered page enter\n<AnimatePresence initial={false}>\n  <motion.div initial=\"hidden\" animate=\"visible\" variants={...}>\n    ...\n  </motion.div>\n</AnimatePresence>\n```\n\n## Suppress transitions on theme switch\n\nInject a stylesheet that turns off every transition, force a style flush so the new colors commit while it applies, then remove it after the next frame:\n\n```tsx\n\"use client\";\n\nimport { useEffect } from \"react\";\n\nexport function DisableThemeTransitions() {\n  useEffect(() => {\n    const mql = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    const handleChange = () => {\n      const style = document.createElement(\"style\");\n      style.append(\n        document.createTextNode(\n          \"*,*::before,*::after{transition:none !important}\"\n        )\n      );\n      document.head.append(style);\n\n      void document.body.offsetHeight; // forces a synchronous style flush\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => style.remove());\n      });\n    };\n\n    mql.addEventListener(\"change\", handleChange);\n    return () => mql.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  return null;\n}\n```\n\nThe new theme resolves while the override is still in the document, so no transition starts. The nested `requestAnimationFrame` removes the override only after that paint.\n\nThat covers the OS-level change. An in-app toggle needs the same steps around its own flip: apply the override, change the theme, flush and remove. `next-themes` ships this as `disableTransitionOnChange`.\n\n## High-frequency motion\n\n```css\n/* Good: high-frequency hover gets a minimal transition */\n.row:hover {\n  background-color: var(--surface-hover);\n  transition: background-color 100ms ease-out;\n}\n\n/* Bad: every hover replays a full entrance */\n.row:hover .row-icon {\n  animation: bounceIn 500ms;\n}\n```\n\n## Reduced-motion fallback\n\nThe opacity fade runs for everyone, and movement, scale and blur join it only without the preference:\n\n```css\n.panel {\n  transition: opacity 150ms ease-out;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .panel {\n    transition-property: opacity, translate, scale, filter;\n    transition-duration: 300ms;\n  }\n}\n```\n\nIn Tailwind, prefix movement, scale and blur utilities with `motion-safe:`. In Motion, wrap the app in `<MotionConfig reducedMotion=\"user\">`. It turns off transform and layout animations under the preference and keeps opacity. Blur still runs there, so branch on `useReducedMotion()` where a recipe animates `filter`.\n",
       "enter-exit.md": "# Enter and exit animations\n\nRecipes for staged entrances and the exits that follow them. For interactive state feedback see [animations.md](animations.md), and for icon swaps see [icon-transitions.md](icon-transitions.md).\n\n## Enter animations\n\n1. **Split** into semantic groups such as title, description and actions.\n2. **Stagger** the groups `100ms` apart.\n3. **Split a short display headline** into words, staggered `80ms` apart, where it should read word by word.\n4. **Combine** `opacity`, `blur` and `translateY` for each group's enter.\n\n### Motion\n\n```tsx\nconst item = {\n  hidden: { opacity: 0, y: 12, filter: \"blur(4px)\" },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: \"blur(0px)\",\n    transition: { duration: 0.3, ease: \"easeOut\" },\n  },\n};\n\nfunction PageHeader() {\n  return (\n    <motion.div\n      initial=\"hidden\"\n      animate=\"visible\"\n      variants={{ visible: { transition: { staggerChildren: 0.1 } } }}\n    >\n      <motion.h1 variants={item}>Welcome</motion.h1>\n      <motion.p variants={item}>A description of the page.</motion.p>\n      <motion.div variants={item}>\n        <Button>Get started</Button>\n      </motion.div>\n    </motion.div>\n  );\n}\n```\n\n### CSS\n\nThe hidden state lives in the `from` keyframe, so an item whose animation never runs stays visible. Reduced motion keeps only the opacity keyframe.\n\n```css\n.stagger-item {\n  animation: fade-in 300ms ease-out both;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .stagger-item {\n    animation-name: fade-in-up;\n  }\n}\n\n.stagger-item:nth-child(2) { animation-delay: 100ms; }\n.stagger-item:nth-child(3) { animation-delay: 200ms; }\n\n@keyframes fade-in {\n  from { opacity: 0; }\n}\n\n@keyframes fade-in-up {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n    filter: blur(4px);\n  }\n}\n```\n\n### Entering from display: none\n\nA popover, dialog or element toggled from `display: none` has no previous style to transition from. `@starting-style` supplies one, and `transition-behavior: allow-discrete` keeps it rendered through the exit. The open state's duration applies on enter and the closed state's on exit.\n\n```css\n[popover] {\n  opacity: 0;\n  translate: 0 12px;\n  transition-property: opacity, translate, display, overlay;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  transition-behavior: allow-discrete;\n}\n\n[popover]:popover-open {\n  opacity: 1;\n  translate: 0 0;\n  transition-duration: 300ms;\n}\n\n@starting-style {\n  [popover]:popover-open {\n    opacity: 0;\n    translate: 0 12px;\n  }\n}\n```\n\n`@starting-style` and discrete `display` transitions are Baseline 2024. `overlay` is Chromium only, and browsers without support show and hide instantly.\n\n## Exit animations\n\n### Subtle exit\n\n```tsx\n<motion.div\n  exit={{\n    opacity: 0,\n    y: -12,\n    filter: \"blur(4px)\",\n    transition: { duration: 0.15, ease: \"easeOut\" },\n  }}\n>\n  {content}\n</motion.div>\n```\n\n### Full exit\n\nSlide fully out only where the destination carries meaning, such as a card returning to a list or a drawer closing:\n\n```tsx\n<motion.div\n  exit={{\n    opacity: 0,\n    x: \"-100%\",\n    transition: { duration: 0.2, ease: \"easeOut\" },\n  }}\n>\n  {content}\n</motion.div>\n```\n\n### Good and bad\n\n```css\n/* Good: subtle exit */\n.item-exit {\n  opacity: 0;\n  transform: translateY(-12px);\n  transition: opacity 150ms ease-out, transform 150ms ease-out;\n}\n\n/* Bad: dramatic exit that steals focus */\n.item-exit {\n  opacity: 0;\n  transform: translateY(-100%) scale(0.5);\n  transition: all 400ms ease-out;\n}\n\n/* Sometimes correct: remove at once when motion adds no information */\n.item-exit {\n  display: none;\n}\n```\n",
       "icon-transitions.md": "# Icon transitions\n\nCross-fade recipes for an icon that swaps on a state change, with and without a motion library. Icon weight, color and direction live in [icons.md](icons.md).\n\n## Which library\n\nCheck the project's `package.json`. Import from `\"motion/react\"` when `motion` is installed, or `\"framer-motion\"` when that is. Where both exist, follow the imports the component or its nearest peers already use. Where neither is present, use the CSS cross-fade and never add a dependency just for icon transitions.\n\n## Motion\n\n```tsx\nimport { AnimatePresence, motion } from \"motion/react\";\n\nfunction IconButton({ isActive, icon: Icon }) {\n  return (\n    <button>\n      <AnimatePresence initial={false} mode=\"popLayout\">\n        <motion.span\n          key={isActive ? \"active\" : \"inactive\"}\n          initial={{ opacity: 0, scale: 0.25, filter: \"blur(4px)\" }}\n          animate={{ opacity: 1, scale: 1, filter: \"blur(0px)\" }}\n          exit={{ opacity: 0, scale: 0.25, filter: \"blur(4px)\" }}\n          transition={{ type: \"spring\", duration: 0.3, bounce: 0 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n    </button>\n  );\n}\n```\n\n`initial={false}` keeps the default icon from animating in on mount.\n\n## CSS, both icons in the DOM\n\nBoth icons stay mounted in one grid cell, so enter and exit both animate and the larger icon sets the size. The `motion-reduce:` classes leave only the opacity fade under reduced motion.\n\n```tsx\nconst layer = cn(\n  \"[grid-area:1/1] transition-[opacity,filter,scale] duration-300\",\n  \"ease-[cubic-bezier(0.2,0,0,1)]\",\n  \"motion-reduce:scale-100 motion-reduce:blur-[0px]\"\n);\nconst shown = \"scale-100 opacity-100 blur-[0px]\";\nconst hidden = \"scale-[0.25] opacity-0 blur-[4px]\";\n\nfunction IconButton({ isActive, ActiveIcon, InactiveIcon }) {\n  return (\n    <button>\n      <span className=\"grid place-items-center\">\n        <span className={cn(layer, isActive ? shown : hidden)}>\n          <ActiveIcon />\n        </span>\n        <span className={cn(layer, isActive ? hidden : shown)}>\n          <InactiveIcon />\n        </span>\n      </span>\n    </button>\n  );\n}\n```\n\nTailwind 4's `scale-*` utilities write the `scale` property, so `transition-[...scale]` animates them. Tailwind 3's write `transform`, so name `transform` in the transition instead.\n\n## Which icons animate\n\n| Animate | Don't animate |\n| --- | --- |\n| Infrequent state swaps such as play to pause, like to liked or copy to copied | Hover-revealed actions in list rows |\n| Icons in a toolbar that appears on selection | Tab and navigation icon swaps |\n| Loading and success indicators | Decorative or always-visible icons |\n",

package/skills/ui/NOTICE.md

@@ -8,6 +8,7 @@ Local edits:
 - Dropped `agents/openai.yaml`.
 - Added the precedence block after the introduction of `SKILL.md`.
 - Reconciled the clause in `ui/SKILL.md` that limited project tokens, so a project token always wins.
+- Extended the `description:` with animation triggers (menu or dialog enter and exit, staggered items, hover and press feedback, icon swaps), so `ui` wins those prompts over `motion-design`: 18/18 should, 0/12 near-miss on 2026-10-17, against 12/18 before.
 
 Updating: diff upstream from the pinned commit, have a frontier model port the changes over the local edits, then bump the pin.
 

package/skills/ui/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: ui
-description: Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation.
+description: Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation. Use when adding or tuning a UI animation or transition, such as a menu or dialog enter and exit, staggered list items, hover and press feedback or an icon swap.
 ---
 
 # UI polish