@nurix/etna 0.19.10 → 0.19.12

package/data/harnesses/code/skills/design/data/gradients/amber-attention-fill.md

@@ -0,0 +1,16 @@
+---
+id: amber-attention-fill
+class: a4
+sourced: 2026-07-12
+source: "Distilled from generic near-threshold/warning chart-fill conventions in dashboard tooling"
+license: open
+feel: "a warm amber haze — draws the eye without alarming it"
+---
+Use for near-threshold or approaching-quota metrics. Don't combine with risk-decline-fill in the same chart — at low opacity the two will blur together.
+
+```yaml values
+role: chart-fill
+stops: [oklch(0.837 0.164 84.4 / 0.30), oklch(0.837 0.164 84.4 / 0)]
+angle: 180deg
+intensity: medium
+```

package/data/harnesses/code/skills/design/data/gradients/cloud-shadow-wash.md

@@ -0,0 +1,16 @@
+---
+id: cloud-shadow-wash
+class: a4
+sourced: 2026-07-12
+source: "Distilled from WebGradients 'Above Clouds' (MIT-licensed, itmeo/webgradients)"
+license: open
+feel: "soft graphite haze with almost no hue — architectural and quiet"
+---
+Card or sidebar background needing gentle separation from flat gray; reads equally well next to light or dim surfaces. No real "never" beyond stacking it under already-busy imagery.
+
+```yaml values
+role: wash
+stops: [oklch(0.795 0.005 314.8), oklch(0.700 0.007 277.1)]
+angle: 160deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/confident-lavender-wash.md

@@ -0,0 +1,16 @@
+---
+id: confident-lavender-wash
+class: a4
+sourced: 2026-07-12
+source: "Distilled from WebGradients 'Confident Cloud' (MIT-licensed, itmeo/webgradients)"
+license: open
+feel: "lavender easing into a whisper of blush — calm with a faint trace of warmth"
+---
+Onboarding empty-state or settings-panel background. Keep off data-dense grids, where the hue drift could read as an unintended status tint.
+
+```yaml values
+role: wash
+stops: [oklch(0.882 0.033 297.2), oklch(0.938 0.013 5.8)]
+angle: 135deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/ember-ship-flare.md

@@ -0,0 +1,18 @@
+---
+id: ember-ship-flare
+class: a4
+sourced: 2026-07-12
+source: "Distilled from Vercel's public 'Ship' gradient pairing (shadcn.io Vercel system breakdown)"
+license: brand-reference
+feel: "warm coral tipping into gold — a single completion flare, like a deploy going green"
+---
+A one-off celebratory moment — a deploy-success toast or onboarding-complete card. Never persistent chrome, never repeated across a dashboard grid.
+
+This entry is a distilled approximation of Vercel's publicly visible "Ship" gradient pairing, never a redistributed asset — the stops are our own oklch reconstruction, not an extracted brand file.
+
+```yaml values
+role: accent
+stops: [oklch(0.673 0.215 25.0), oklch(0.858 0.167 91.2)]
+angle: 120deg
+intensity: loud
+```

package/data/harnesses/code/skills/design/data/gradients/full-metal-wash.md

@@ -0,0 +1,16 @@
+---
+id: full-metal-wash
+class: a4
+sourced: 2026-07-12
+source: "Distilled from WebGradients 'Full Metal' (MIT-licensed, itmeo/webgradients)"
+license: open
+feel: "brushed steel — near-neutral blue-gray with almost no chroma at all"
+---
+Default panel/card background for a professional dashboard shell. The lowest-risk entry in this set — appropriate almost anywhere neutral depth is wanted.
+
+```yaml values
+role: wash
+stops: [oklch(0.896 0.016 248.0), oklch(0.926 0.010 252.8)]
+angle: 180deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/indigo-ruby-cta-band.md

@@ -0,0 +1,18 @@
+---
+id: indigo-ruby-cta-band
+class: a4
+sourced: 2026-07-12
+source: "Distilled from Stripe's public brand pairing of primary indigo and ruby accent (shadcn.io Stripe system breakdown)"
+license: brand-reference
+feel: "confident indigo deepening at one edge into ruby — a branded call-to-action, not a background"
+---
+Primary-button or CTA-band surface at moderate scale (a banner, not a full page). Avoid full-bleed page backgrounds where it would compete with dense content.
+
+This entry is a distilled approximation of Stripe's publicly visible indigo/ruby brand pairing, never a redistributed asset — the stops are our own oklch reconstruction, not an extracted brand file.
+
+```yaml values
+role: accent
+stops: [oklch(0.521 0.268 277.4), oklch(0.609 0.228 10.8)]
+angle: 100deg
+intensity: medium
+```

package/data/harnesses/code/skills/design/data/gradients/linear-graphite-wash.md

@@ -0,0 +1,18 @@
+---
+id: linear-graphite-wash
+class: a4
+sourced: 2026-07-12
+source: "Distilled from Linear's official brand palette — Mercury White / Nordic Gray (linear.app/brand)"
+license: brand-reference
+feel: "the quiet cool-gray of a focused productivity tool, barely tinted blue"
+---
+App-shell background or table zebra-row wash. Deliberately low-contrast so it never competes with list or table content.
+
+This entry is a distilled approximation of Linear's publicly visible Mercury White / Nordic Gray brand palette, never a redistributed asset — the stops are our own oklch reconstruction, not an extracted brand file.
+
+```yaml values
+role: wash
+stops: [oklch(0.970 0.004 271.4), oklch(0.929 0.013 255.5)]
+angle: 180deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/marble-quartz-wash.md

@@ -0,0 +1,16 @@
+---
+id: marble-quartz-wash
+class: a4
+sourced: 2026-07-12
+source: "Distilled from WebGradients 'Marble Wall' (MIT-licensed, itmeo/webgradients)"
+license: open
+feel: "cool periwinkle fading into dusty rose-gray — mineral and understated"
+---
+Secondary (non-primary) promo-card background; light enough to sit behind body copy on a plain text panel.
+
+```yaml values
+role: wash
+stops: [oklch(0.823 0.054 279.3), oklch(0.910 0.017 316.9)]
+angle: 145deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/midnight-aurora-panel.md

@@ -0,0 +1,16 @@
+---
+id: midnight-aurora-panel
+class: a4
+sourced: 2026-07-12
+source: "Distilled and simplified from the public Aurora UI CSS recipe (superdesign.dev), collapsing its 4-color radial mesh into a 3-stop linear read"
+license: open
+feel: "a near-black canvas lit from within by indigo and teal — a control room at night"
+---
+Dark-mode marketing or onboarding hero only. Source guidance is explicit: never place body text, tables, or forms directly on it — text needs an opaque or glass panel on top, and it must never become the dashboard's working background.
+
+```yaml values
+role: hero
+stops: [oklch(0.101 0.043 298.6), oklch(0.585 0.204 277.1), oklch(0.785 0.133 181.9)]
+angle: "radial (at 25% 20%)"
+intensity: loud
+```

package/data/harnesses/code/skills/design/data/gradients/neutral-volume-fill.md

@@ -0,0 +1,16 @@
+---
+id: neutral-volume-fill
+class: a4
+sourced: 2026-07-12
+source: "Distilled from generic dashboard restraint guidance for volume/bar gradients (Highcharts docs, Tableau sequential-palette conventions)"
+license: open
+feel: "a quiet blue-gray fade — the 'no news is good news' fill for a series with no positive or negative charge"
+---
+Default fill for volume, count, or duration series with no inherent good/bad direction. Safe to reuse across most charts on one dashboard for visual consistency.
+
+```yaml values
+role: chart-fill
+stops: [oklch(0.809 0.096 251.8 / 0.28), oklch(0.809 0.096 251.8 / 0)]
+angle: 180deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/revenue-uptrend-fill.md

@@ -0,0 +1,16 @@
+---
+id: revenue-uptrend-fill
+class: a4
+sourced: 2026-07-12
+source: "Distilled from the standard fade-to-transparent area-chart convention (Chart.js/Recharts linear-gradient docs)"
+license: open
+feel: "a growth line's shadow — green fading to nothing, reads as 'up and to the right' without shouting"
+---
+Area-under-line fill for positive/growth series only. Keep the top-stop opacity low so gridlines and labels stay legible; never use as a background behind text.
+
+```yaml values
+role: chart-fill
+stops: [oklch(0.723 0.192 149.6 / 0.35), oklch(0.723 0.192 149.6 / 0)]
+angle: 180deg
+intensity: medium
+```

package/data/harnesses/code/skills/design/data/gradients/risk-decline-fill.md

@@ -0,0 +1,16 @@
+---
+id: risk-decline-fill
+class: a4
+sourced: 2026-07-12
+source: "Distilled from the same fade-to-transparent convention, applied to a rose hue for negative/at-risk series"
+license: open
+feel: "a soft warning wash under a downward line — legible urgency, not an error page"
+---
+Pair only with genuinely negative or at-risk series. Keep the top-stop opacity conservative so it reads as signal, not alarm.
+
+```yaml values
+role: chart-fill
+stops: [oklch(0.645 0.215 16.4 / 0.30), oklch(0.645 0.215 16.4 / 0)]
+angle: 180deg
+intensity: medium
+```

package/data/harnesses/code/skills/design/data/gradients/signal-blue-develop.md

@@ -0,0 +1,18 @@
+---
+id: signal-blue-develop
+class: a4
+sourced: 2026-07-12
+source: "Distilled from Vercel's public 'Develop' gradient pairing (shadcn.io Vercel system breakdown)"
+license: brand-reference
+feel: "crisp electric blue sliding into aqua — technical and confident, like a status light turning green"
+---
+Feature-launch banner or empty-state illustration backdrop. Keep off dense grids; always pair with an opaque text panel rather than a direct text overlay.
+
+This entry is a distilled approximation of Vercel's publicly visible "Develop" gradient pairing, never a redistributed asset — the stops are our own oklch reconstruction, not an extracted brand file.
+
+```yaml values
+role: hero
+stops: [oklch(0.596 0.197 255.1), oklch(0.816 0.141 190.7)]
+angle: 90deg
+intensity: medium
+```

package/data/harnesses/code/skills/design/data/gradients/slate-mist-wash.md

@@ -0,0 +1,16 @@
+---
+id: slate-mist-wash
+class: a4
+sourced: 2026-07-12
+source: "Distilled from WebGradients 'Saint Petersburg' (MIT-licensed, itmeo/webgradients)"
+license: open
+feel: "barely-there cool gray-blue mist — the quietest kind of depth"
+---
+Page or panel background behind operator tables, settings screens, or empty states. Low-risk enough to leave on as a near-permanent surface.
+
+```yaml values
+role: wash
+stops: [oklch(0.975 0.005 258.3), oklch(0.851 0.030 259.6)]
+angle: 180deg
+intensity: subtle
+```

package/data/harnesses/code/skills/design/data/gradients/stripe-atmosphere-mesh.md

@@ -0,0 +1,18 @@
+---
+id: stripe-atmosphere-mesh
+class: a4
+sourced: 2026-07-12
+source: "Distilled from public breakdowns of Stripe.com's marketing hero mesh (open-design.ai, shadcn.io Stripe palette)"
+license: brand-reference
+feel: "a warm daybreak haze — cream sliding through lavender into deep indigo, like sunrise through glass"
+---
+Hero band only, above the fold on a marketing or onboarding surface. Never behind an operator table, form, or dense data grid — the source is a multi-blob radial mesh; this is a simplified linear read of it.
+
+This entry is a distilled approximation of a publicly visible Stripe marketing surface, never a redistributed asset — no Stripe brand file or imagery is embedded here, only our own oklch reconstruction of the visible hues.
+
+```yaml values
+role: hero
+stops: [oklch(0.938 0.031 81.8), oklch(0.881 0.040 295.1), oklch(0.521 0.268 277.4)]
+angle: 135deg
+intensity: loud
+```

package/data/harnesses/code/skills/design/data/gradients/teal-signal-accent.md

@@ -0,0 +1,16 @@
+---
+id: teal-signal-accent
+class: a4
+sourced: 2026-07-12
+source: "Distilled from WebGradients 'Malibu Beach' (MIT-licensed, itmeo/webgradients)"
+license: open
+feel: "a bright cyan-blue sweep — energetic but still cool enough for technical software"
+---
+Small-surface accent only — a "new" badge, a progress ring, a feature-spotlight chip. Too saturated for a full-panel background in a dense dashboard.
+
+```yaml values
+role: accent
+stops: [oklch(0.724 0.149 248.1), oklch(0.874 0.149 201.2)]
+angle: 90deg
+intensity: medium
+```

package/data/harnesses/code/skills/design/data/gradients/violet-magenta-promo.md

@@ -0,0 +1,16 @@
+---
+id: violet-magenta-promo
+class: a4
+sourced: 2026-07-12
+source: "Distilled from Vercel's 'Preview' gradient pairing and the WebGradients 'North Miracle' family (MIT-licensed)"
+license: open
+feel: "bold violet cutting into magenta — premium and a little playful, not shy about it"
+---
+Upsell or upgrade promo card, one per screen at most. Keep out of nav/sidebar chrome, where it would compete with live data for attention.
+
+```yaml values
+role: accent
+stops: [oklch(0.491 0.228 300.4), oklch(0.645 0.260 2.5)]
+angle: 135deg
+intensity: loud
+```

package/data/harnesses/code/skills/design/data/iconography.md

@@ -0,0 +1,199 @@
+---
+id: iconography
+class: a5
+sourced: 2026-07-12
+source: "distilled from the A5 iconography phase-1 research sweep — Lucide, Tabler Icons, Radix Icons, Heroicons, Phosphor (Regular + Duotone), Material Symbols, IBM Carbon, Octicons, Linear, and Stripe Apps"
+license: mixed — nine of the eleven conventions below are open (OSS icon sets under ISC/MIT/Apache-2.0); two are licensed (Linear, Stripe) because they describe a proprietary product's house convention rather than a redistributable asset — see the `license` line inside each convention's own values block
+feel: "the register this file spans: quiet neutral utility (Lucide, Tabler) through dense-precision (Radix), paired-weight (Heroicons), rounded-friendly and illustrative (Phosphor), mechanically variable (Material Symbols), rectilinear enterprise (Carbon), hand-tuned developer precision (Octicons), to near-monochrome restraint (Linear, Stripe) — pick the register the product needs, not just a glyph shape"
+---
+A small conventions database, not a big catalog — eleven curated iconography conventions, each a coherent bundle of icon set, stroke/fill treatment, size grid, default color role, and type-pairing rule, because real products never choose these independently. The standing complaint every entry below answers is the same one: a bare, icon-less nav reads as unfinished; each convention states plainly where icons are obligatory (nav, status glyphs, empty states) versus optional (body copy, pure decoration).
+
+## Convention: lucide-quiet-utility
+
+**Feel:** "quiet, neutral utility line-work — reads as structural chrome, not decoration"
+
+Lucide (ISC-licensed fork of Feather) is the default pick for stroke-based quiet utility icons in SaaS dashboards. Obligatory in nav rails, sidebar items, and empty-state graphics — the failure mode this convention guards against is exactly a bare, icon-less nav; optional inline in body copy or button labels where the text alone already carries the meaning.
+
+```yaml values
+set: Lucide (ISC license)
+stroke: "2px, currentColor, round caps/joins, no fills"
+grid: [24, 24]
+default-color: muted-foreground
+pairing: "absoluteStrokeWidth keeps the 2px line constant across sizes; optically matches a 14-16px UI sans at regular weight"
+obligatory: [nav-rail, sidebar-items, empty-state-graphics]
+optional: [body-copy, button-labels]
+license: open
+```
+
+## Convention: tabler-technical-outline
+
+**Feel:** "sharp, technical, exhaustive — the 'there's an icon for everything' catalog reads as engineering completeness, not a curated voice"
+
+Tabler's 6,000+ MIT icon catalog is the pick when coverage matters more than a distinct personality — admin panels, internal tools, anywhere a designer needs an icon for a niche concept without commissioning custom art. Obligatory in dense toolbars and table row-actions where recognition beats charm; optional as pure decoration, where its neutrality reads generic rather than intentional.
+
+```yaml values
+set: Tabler Icons (MIT license)
+stroke: "2px, adjustable, currentColor"
+grid: [24, 24]
+default-color: "neutral-500 / muted-foreground"
+pairing: "2px stroke reads correctly against 14px UI text; bump to ~2.5px only above 32px display sizes so the line doesn't thin out"
+obligatory: [dense-toolbars, table-row-actions]
+optional: [pure-decoration]
+license: open
+```
+
+## Convention: radix-dense-precision
+
+**Feel:** "crisp, hard-edged precision built for the smallest interactive targets — dropdowns, toolbars, table cells, badges"
+
+Radix Icons' 15x15 grid (not the usual 24) exists because at the sizes dense UI actually renders icons — inside buttons, selects, table cells — a 24-grid icon scaled down loses pixel-snap crispness, while a native 15px drawing keeps strokes on-pixel. Obligatory wherever the paired control is itself sub-20px (combobox triggers, sort carets, badge glyphs); skip above ~20px, where the fixed grid stops paying off and a 24-grid set reads better — there is no "optional" tier here, only a hard size threshold.
+
+```yaml values
+set: "Radix Icons (MIT license, designed by WorkOS)"
+stroke: "single fixed weight per icon — redrawn per size, not algorithmically scaled"
+grid: [15, 15]
+default-color: "gray-11 / muted-foreground"
+pairing: "matches the cap-height of 12-13px UI text used across Radix-based component libraries (Radix Themes, shadcn primitives)"
+obligatory: [combobox-triggers, sort-carets, badge-glyphs]
+optional: []
+skip-above: "~20px — hand off to a 24-grid set past this threshold"
+license: open
+```
+
+## Convention: heroicons-outline-solid-pair
+
+**Feel:** "Tailwind-native default — outline for resting state, solid for the moment something becomes true"
+
+Heroicons ships two coherent weights meant to be switched, never mixed within one context: 24px/1.5px-stroke outline for default and primary nav, 20px solid (plus a 16px mini and micro variant) for active/selected states and compact controls. Obligatory swap pattern: an outline icon in a nav item becomes its solid twin exactly when that item is current — the fill change is the only state signal, so don't blend outline and solid within the same list.
+
+```yaml values
+set: "Heroicons (MIT license, Tailwind Labs)"
+stroke: "1.5px outline / filled solid — paired variants, not a weight slider"
+grid: [24, 24] # outline; solid ships at 20px, mini at 16px, micro at 16px
+default-color: "text-gray-500 (outline, resting) -> text-gray-900 or accent (solid, active)"
+pairing: "built on Tailwind's own h-4/h-5/h-6 scale, so icon size always lands exactly on a text-size step"
+obligatory: [nav-active-state-swap]
+optional: []
+license: open
+```
+
+## Convention: phosphor-rounded-friendly
+
+**Feel:** "rounded, approachable, slightly playful without tipping into cartoonish — the friendly-SaaS register between Lucide's neutrality and duotone's illustration"
+
+Phosphor's Regular weight is the rounded-friendly middle ground: softer terminals than Lucide or Tabler, but still a line icon, not a shape. Obligatory in consumer-facing or community products (onboarding flows, empty states, nav) where the brand voice is warm rather than clinical; match icon weight to type weight — Regular icon beside regular/medium body text, Bold icon only beside semibold-or-heavier headings, so the icon never visually undershoots its label.
+
+```yaml values
+set: "Phosphor Icons — Regular weight (MIT license)"
+stroke: "~1.5px-equivalent stroke, rounded caps and joins"
+grid: [24, 24] # authored on a 256x256 source grid, shipped at 24px
+default-color: "muted-foreground, warms to accent on hover/active"
+pairing: "weight axis tracks type weight: Regular <-> body/UI text, Bold <-> semibold+ headings"
+obligatory: [onboarding-flows, empty-states, nav]
+optional: []
+license: open
+```
+
+## Convention: phosphor-duotone-expressive
+
+**Feel:** "filled, two-tone, illustrative — reads as a fragment of an illustration more than a clickable control"
+
+Phosphor's Duotone weight layers a full-opacity foreground shape over a 20%-opacity fill of the same color, giving flat icons a sense of depth without a second hue. Obligatory in empty states, onboarding checklists, and marketing-adjacent surfaces where an icon needs to carry emotional weight; never use duotone for functional nav or toolbar icons — the two-tone fill reads as illustration rather than an actionable control, and it undermines click affordance.
+
+```yaml values
+set: "Phosphor Icons — Duotone weight (MIT license)"
+stroke: "filled: 100% opacity primary shape + 20% opacity secondary layer, same hue"
+grid: [24, 24]
+default-color: "brand/accent (duotone is inherently expressive, rarely neutral gray)"
+pairing: "sized 1.5-2x the adjacent display headline's cap height; never paired directly with dense UI text"
+obligatory: [empty-states, onboarding-checklists, marketing-adjacent-surfaces]
+optional: []
+never-use: [functional-nav, toolbar-icons]
+license: open
+```
+
+## Convention: material-symbols-variable-axes
+
+**Feel:** "mechanically consistent, endlessly adjustable — one variable font file standing in for what other systems ship as five separate icon sets"
+
+Material Symbols collapses weight, fill, grade, and optical size into a single variable font (`wght` 100-700, `FILL` 0/1, `GRAD` -50 to 200, `opsz` 20-48), so "outline vs. filled" and "thin vs. bold" become live CSS values instead of separate asset swaps. Obligatory pattern: `FILL 0` for resting nav items, animated to `FILL 1` on select — the fill toggle is the selected-state affordance itself, so a nav that skips it loses its only state signal.
+
+```yaml values
+set: "Material Symbols (Apache-2.0 license, Google)"
+stroke: "variable FILL axis: 0 (outlined) to 1 (filled); wght 100-700, GRAD -50 to 200"
+grid: [24, 24] # opsz axis spans 20-48 on the same glyph
+default-color: "on-surface-variant (Material's muted-foreground equivalent)"
+pairing: "opsz should numerically track the paired text's rendered px/pt size 1:1, or stroke weight looks wrong at the range's edges"
+obligatory: [nav-fill-toggle-as-selected-state]
+optional: []
+license: open
+```
+
+## Convention: carbon-enterprise-grid
+
+**Feel:** "rectilinear, high-density, unmistakably enterprise — icons read as instrumentation, not ornament"
+
+IBM Carbon draws every icon on a 32x32 master grid with 2px padding, then scales linearly down to 24/20/16px rather than redrawing per size, keeping optical alignment exact across a data-dense UI. Obligatory at 16px inside buttons and inputs, where IBM Plex Sans runs at 14px; 24/32px reserved for standalone actions and empty-state illustration slots. Touch targets stay 44px+ regardless of the visual icon size — a Carbon-specific accessibility floor worth keeping alongside the visual convention.
+
+```yaml values
+set: "IBM Carbon icons (Apache-2.0 license)"
+stroke: "solid/filled glyph forms scaled from one master grid, not a stroke-weight system"
+grid: [32, 32] # scales down linearly to 24/20/16 for actual component use
+default-color: "icon-primary token (near-black in light theme, near-white in dark)"
+pairing: "16/20px icons pair with 14/16px IBM Plex Sans UI text; 24/32px reserved for standalone or empty-state use"
+obligatory: [buttons-and-inputs-at-16px, standalone-actions-at-24-32px, empty-state-illustration]
+optional: []
+touch-target-floor: "44px+ regardless of visual icon size"
+license: open
+```
+
+## Convention: octicons-dual-precision
+
+**Feel:** "hand-tuned developer-tool precision — every icon individually redrawn per size rather than mechanically scaled"
+
+GitHub's Octicons draws each icon twice — a 16px version and a separately hand-corrected 24px version, rather than one scaled from the other — with a consistent 1.5px stroke, round caps/joins, and 1px corner radius across both. Obligatory at 16px in repo/PR/issue navigation chrome, where an icon-less nav row reads as visibly broken against GitHub's own conventions; 24px reserved for section headers and empty-state glyphs, never mixed with 16px in the same row.
+
+```yaml values
+set: "Octicons — GitHub Primer (MIT license)"
+stroke: "1.5px, round caps and joins, 1px corner radius (0.25px on small filled arrowheads)"
+grid: [16, 16] # plus a separately hand-drawn 24x24 variant
+default-color: "fg.muted (Primer token)"
+pairing: "16px icon pairs with Primer's 14px UI text baseline; 24px pairs with section headers only"
+obligatory: [repo-pr-issue-nav-chrome-at-16px, section-headers-and-empty-states-at-24px]
+optional: []
+license: open
+```
+
+## Convention: linear-icon-restraint
+
+**Feel:** "near-monochrome restraint — icons are load-bearing wayfinding, never decoration, and the restraint itself is the brand voice"
+
+Linear confines icons almost exclusively to two obligatory slots — the sidebar nav rail and issue/status glyphs (priority, workflow state) — and deliberately withholds them everywhere else (body text, secondary inline actions) to protect density. The one place Linear over-indexes on icons rather than under-indexing is exactly where the standing complaint bites hardest: a nav with missing icons reads as unfinished, so nav iconography is treated as non-negotiable even though icons everywhere else stay optional.
+
+```yaml values
+set: "product convention (implementation-agnostic thin outline, Lucide-class)"
+stroke: "~1.5px, single weight, no fill states except the active accent swap"
+grid: [16, 16]
+default-color: "muted-foreground, promotes to the single accent color only on active/selected state"
+pairing: "icon optical size matches the 13px UI sans cap height in the sidebar; icon and label baseline-align, never icon-only in primary nav"
+obligatory: [sidebar-nav-rail, issue-status-glyphs]
+optional: [body-text, secondary-inline-actions]
+license: licensed
+```
+
+## Convention: stripe-restrained-fintech
+
+**Feel:** "near-monochromatic, trustworthy, financial-instrument register — icons are quiet infrastructure, color is spent on one accent only"
+
+Stripe's Icon component ships a fixed five-step size scale (xsmall through xlarge) rather than free pixel values, keeping every icon on-grid with the dashboard's type scale by construction; icons default to inherit surrounding text color and only break to the brand indigo for strokes that need to signal interactivity. Obligatory in the dashboard nav rail and the app-indicator badge (the colored bar + icon identifying which Stripe App is active); optional-to-discouraged as decoration inside data-dense tables, where Stripe's own guidance limits custom styling to preserve platform consistency.
+
+```yaml values
+set: "product convention (Stripe Dashboard / Stripe Apps Icon component)"
+stroke: "thin outline, inherits currentColor by default"
+grid: [16, 20, 24, 28, 32] # xsmall..xlarge step scale, not free px
+default-color: "inherits surrounding text color (currentColor); accent indigo for interactive strokes only"
+pairing: "icon size step always matches the adjacent text's type-scale step, never set independently"
+obligatory: [dashboard-nav-rail, app-indicator-badge]
+optional: [decoration-in-dense-tables]
+license: licensed
+```

package/data/harnesses/code/skills/design/data/motion/accordion-expand.md

@@ -0,0 +1,18 @@
+---
+id: accordion-expand
+class: a6
+sourced: 2026-07-12
+source: "emilkowalski.skills/skills/animation-vocabulary/SKILL.md (Accordion/Collapse term) + review-animations/STANDARDS.md (easing decision order — on-screen morph → strong ease-in-out; interruptibility)"
+license: open
+feel: "a 240ms reveal on a strong ease-in-out reads smooth; snapping open or drifting past 300ms reads clunky"
+aliases: { clunky: "a plain built-in easing instead of the strong custom ease-in-out curve", "snap-open": "no transition at all — content appears/disappears instantly", janky: "keyframes (or animated height) instead of an interruptible transition on transform/clip-path" }
+---
+Expand/collapse sections, FAQ rows, nested tree rows — an on-screen morph, so ease-in-out, not the entrance curve. Prefer `clip-path`/transform reveals over animated `height` (layout property — off-GPU). Rapid toggling must retarget mid-animation, not restart from collapsed.
+
+```yaml values
+duration: 240ms
+easing: cubic-bezier(0.77, 0, 0.175, 1)
+element-class: panel
+interruptible: required
+budget: { panel: 200-300ms }
+```

package/data/harnesses/code/skills/design/data/motion/destructive-hold-confirm.md

@@ -0,0 +1,18 @@
+---
+id: destructive-hold-confirm
+class: a6
+sourced: 2026-07-12
+source: "emilkowalski.skills/skills/review-animations/STANDARDS.md (asymmetric timing — press slow/release fast example, values verbatim class)"
+license: open
+feel: "a slow deliberate fill on hold with a fast release reads like the system is making you mean it; a symmetric hold/release reads accidental-prone"
+aliases: { "trigger-happy": "hold and release animating at the same speed, so a brief accidental hold nearly commits", "accidental-prone": "no hold gate at all — a single tap commits the destructive action" }
+---
+Delete/destructive confirmations gated behind a hold, not a second click. The hold phase (user deciding) animates slow and must be abortable mid-hold; release or completion (system responding) snaps back fast.
+
+```yaml values
+duration: 2000ms (hold-to-fill) / 200ms (release)
+easing: linear (hold) / cubic-bezier(0.23, 1, 0.32, 1) (release)
+element-class: control
+interruptible: required
+budget: { control: 1500-2500ms hold, 150-250ms release }
+```

package/data/harnesses/code/skills/design/data/motion/drag-dismiss-momentum.md

@@ -0,0 +1,18 @@
+---
+id: drag-dismiss-momentum
+class: a6
+sourced: 2026-07-12
+source: "emilkowalski.skills/skills/review-animations/STANDARDS.md (gestures & drag — velocity dismissal; springs config) + apple-design/SKILL.md §5 (velocity handoff)"
+license: open
+feel: "a flick that keeps its exact velocity into the dismiss reads thrown away on purpose; a fixed-duration tween to the edge reads like the drag didn't matter"
+aliases: { disconnected: "velocity discarded at release in favor of a fixed-duration keyframe to the exit point", stuck: "dismissal gated on a distance threshold instead of release velocity (~0.11 px/ms)" }
+---
+Swipe-to-dismiss on toasts, cards, sheets. The spring here is a correctness mechanism (velocity continuity for gesture-driven motion), not styling — it carries the pointer's release velocity into the exit and stays grabbable and reversible mid-flight. Bounce is canon-sanctioned specifically for drag-to-dismiss; it doesn't generalize.
+
+```yaml values
+duration: 500ms (spring settle; no fixed duration)
+easing: spring(bounce 0.2, damping ~0.8)
+element-class: overlay
+interruptible: required
+budget: { overlay: 350-550ms }
+```

package/data/harnesses/code/skills/design/data/motion/empty-state-arrive.md

@@ -0,0 +1,18 @@
+---
+id: empty-state-arrive
+class: a6
+sourced: 2026-07-12
+source: "emilkowalski.skills/skills/review-animations/STANDARDS.md (springs — subtle bounce) + improve-animations/AUDIT.md §1 (rare moments); A6 admission law (identity-moment scope)"
+license: open
+feel: "an illustration that gently scales and settles in reads intentional, like the empty state was designed on purpose; a plain instant fade reads unfinished"
+aliases: { unfinished: "the empty-state illustration/copy just appearing with no entrance at all", overdone: "spring bounce strong enough to feel jokey rather than reassuring" }
+---
+First-visit or true-zero-data empty states (no rows yet, no results yet). Low-frequency identity moment — springy motion is admissible, but keep bounce subtle since the tone is reassuring, not playful.
+
+```yaml values
+duration: 450ms (spring; no fixed duration)
+easing: spring(bounce 0.15)
+element-class: identity-moment
+interruptible: n/a
+budget: { identity-moment: 350-550ms }
+```

package/data/harnesses/code/skills/design/data/motion/hover-lift.md

@@ -0,0 +1,18 @@
+---
+id: hover-lift
+class: a6
+sourced: 2026-07-12
+source: "emilkowalski.skills/skills/emil-design-eng/SKILL.md (easing decision — hover → ease) + review-animations/STANDARDS.md (frequency tiers; hover gating); Easing Blueprint agrees as secondary"
+license: open
+feel: "a soft `ease` color/elevation shift under 200ms reads responsive; past 250ms or on touch it reads laggy and fake"
+aliases: { laggy: "hover duration pushed past the control budget", "fake-hover": "hover motion firing on a touch tap because it isn't gated to hover:hover and pointer:fine" }
+---
+List rows, nav items, cards, toolbar icons on mouse-hover. Gate behind `@media (hover: hover) and (pointer: fine)` always. Sits in the "tens of times/day — reduce, don't eliminate" frequency tier; drop it first on any list scrolled constantly.
+
+```yaml values
+duration: 150ms
+easing: ease
+element-class: control
+interruptible: n/a
+budget: { control: 120-200ms }
+```

package/data/harnesses/code/skills/design/data/motion/modal-center-arrive.md

@@ -0,0 +1,18 @@
+---
+id: modal-center-arrive
+class: a6
+sourced: 2026-07-12
+source: "emilkowalski.skills/skills/review-animations/STANDARDS.md (physicality — modal exemption; duration table, modal row) + improve-animations/AUDIT.md §3; Material emphasized-decelerate agrees as secondary"
+license: open
+feel: "a centered scale-from-0.95-and-fade at ~250ms on a strong ease-out reads deliberate and important; scale(0) or a snap-open reads like it teleported in"
+aliases: { teleported: "scale(0) or an opacity-only entrance with no initial transform", "snap-open": "no interpolation at all — the dialog just appears" }
+---
+Dialogs and confirmation modals only — the one place `transform-origin: center` is correct, exempt from the trigger-anchoring rule. Entrance starts from scale 0.9-0.97 + opacity 0, never scale(0); the longer end of the budget is the modal's prominence — don't reuse it on tooltips or dropdowns.
+
+```yaml values
+duration: 250ms
+easing: cubic-bezier(0.23, 1, 0.32, 1)
+element-class: overlay
+interruptible: n/a
+budget: { overlay: 200-500ms }
+```