niahere 0.2.61 → 0.2.63

package/skills/userinterface-wiki/rules/spring-for-gestures.md

@@ -0,0 +1,27 @@
+---
+title: Springs for Gesture-Driven Motion
+impact: HIGH
+tags: spring, gesture, drag
+---
+
+## Springs for Gesture-Driven Motion
+
+Gesture-driven motion (drag, flick, swipe) must use springs.
+
+**Incorrect (easing for drag):**
+
+```tsx
+<motion.div
+  drag="x"
+  transition={{ duration: 0.3, ease: "easeOut" }}
+/>
+```
+
+**Correct (spring for drag):**
+
+```tsx
+<motion.div
+  drag="x"
+  transition={{ type: "spring", stiffness: 500, damping: 30 }}
+/>
+```

package/skills/userinterface-wiki/rules/spring-for-interruptible.md

@@ -0,0 +1,27 @@
+---
+title: Springs for Interruptible Motion
+impact: HIGH
+tags: spring, interruptible, animation
+---
+
+## Springs for Interruptible Motion
+
+Motion that can be interrupted must use springs.
+
+**Incorrect (easing for interruptible):**
+
+```tsx
+<motion.div
+  animate={{ x: isOpen ? 200 : 0 }}
+  transition={{ duration: 0.3 }}
+/>
+```
+
+**Correct (spring for interruptible):**
+
+```tsx
+<motion.div
+  animate={{ x: isOpen ? 200 : 0 }}
+  transition={{ type: "spring", stiffness: 400, damping: 25 }}
+/>
+```

package/skills/userinterface-wiki/rules/spring-params-balanced.md

@@ -0,0 +1,29 @@
+---
+title: Balanced Spring Parameters
+impact: MEDIUM
+tags: spring, stiffness, damping
+---
+
+## Balanced Spring Parameters
+
+Spring parameters must be balanced; avoid excessive oscillation.
+
+**Incorrect (too bouncy):**
+
+```tsx
+transition={{
+  type: "spring",
+  stiffness: 1000,
+  damping: 5,
+}}
+```
+
+**Correct (balanced):**
+
+```tsx
+transition={{
+  type: "spring",
+  stiffness: 500,
+  damping: 30,
+}}
+```

package/skills/userinterface-wiki/rules/spring-preserves-velocity.md

@@ -0,0 +1,28 @@
+---
+title: Springs Preserve Input Velocity
+impact: MEDIUM
+tags: spring, velocity, drag
+---
+
+## Springs Preserve Input Velocity
+
+When velocity matters, use springs to preserve input energy.
+
+**Incorrect (velocity ignored):**
+
+```tsx
+onDragEnd={(e, info) => {
+  animate(target, { x: 0 }, { duration: 0.3 });
+}}
+```
+
+**Correct (velocity preserved):**
+
+```tsx
+onDragEnd={(e, info) => {
+  animate(target, { x: 0 }, {
+    type: "spring",
+    velocity: info.velocity.x,
+  });
+}}
+```

package/skills/userinterface-wiki/rules/staging-dim-background.md

@@ -0,0 +1,22 @@
+---
+title: Dim Background for Focus
+impact: MEDIUM
+impactDescription: Transparent overlays fail to direct focus; dimmed backgrounds isolate the modal and reduce distraction.
+tags: staging, modal, overlay
+---
+
+## Dim Background for Focus
+
+Modal/dialog backgrounds should dim to direct focus.
+
+**Incorrect (transparent overlay):**
+
+```css
+.overlay { background: transparent; }
+```
+
+**Correct (dimmed overlay):**
+
+```css
+.overlay { background: var(--black-a6); }
+```

package/skills/userinterface-wiki/rules/staging-one-focal-point.md

@@ -0,0 +1,24 @@
+---
+title: Single Focal Point
+impact: MEDIUM
+impactDescription: Competing animations split attention and reduce clarity; one focal point guides the user effectively.
+tags: staging, focus, attention
+---
+
+## Single Focal Point
+
+Only one element should animate prominently at a time.
+
+**Incorrect (competing animations):**
+
+```tsx
+<motion.div animate={{ scale: 1.1 }} />
+<motion.div animate={{ scale: 1.1 }} />
+```
+
+**Correct (single focal point):**
+
+```tsx
+<motion.div animate={{ scale: 1.1 }} />
+<motion.div animate={{ scale: 1 }} />
+```

package/skills/userinterface-wiki/rules/staging-z-index-hierarchy.md

@@ -0,0 +1,22 @@
+---
+title: Z-Index Layering for Animated Elements
+impact: MEDIUM
+impactDescription: Missing z-index causes tooltips and overlays to render behind other content, breaking the visual hierarchy.
+tags: staging, z-index, layering
+---
+
+## Z-Index Layering for Animated Elements
+
+Animated elements must respect z-index layering.
+
+**Incorrect (no z-index):**
+
+```css
+.tooltip { /* No z-index, may render behind other elements */ }
+```
+
+**Correct (explicit z-index):**
+
+```css
+.tooltip { z-index: 50; }
+```

package/skills/userinterface-wiki/rules/timing-consistent.md

@@ -0,0 +1,24 @@
+---
+title: Consistent Timing for Similar Elements
+impact: CRITICAL
+impactDescription: Inconsistent timing across similar elements creates a disjointed, unpolished feel and undermines design system coherence.
+tags: timing, consistency, animation
+---
+
+## Consistent Timing for Similar Elements
+
+Similar elements must use identical timing values.
+
+**Incorrect (inconsistent timing):**
+
+```css
+.button-primary { transition: 200ms; }
+.button-secondary { transition: 150ms; }
+```
+
+**Correct (consistent timing):**
+
+```css
+.button-primary { transition: 200ms; }
+.button-secondary { transition: 200ms; }
+```

package/skills/userinterface-wiki/rules/timing-no-entrance-context-menu.md

@@ -0,0 +1,22 @@
+---
+title: No Entrance Animation on Context Menus
+impact: HIGH
+impactDescription: Entrance animations on context menus delay access to options and feel unnecessary for ephemeral UI.
+tags: timing, context-menu, entrance
+---
+
+## No Entrance Animation on Context Menus
+
+Context menus should not animate on entrance (exit only).
+
+**Incorrect (animates entrance):**
+
+```tsx
+<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
+```
+
+**Correct (exit only):**
+
+```tsx
+<motion.div exit={{ opacity: 0 }} />
+```

package/skills/userinterface-wiki/rules/timing-under-300ms.md

@@ -0,0 +1,22 @@
+---
+title: User Animations Under 300ms
+impact: CRITICAL
+impactDescription: Exceeding 300ms for user-initiated actions degrades perceived responsiveness and makes the interface feel sluggish.
+tags: timing, duration, animation
+---
+
+## User Animations Under 300ms
+
+User-initiated animations must complete within 300ms.
+
+**Incorrect (exceeds 300ms limit):**
+
+```css
+.button { transition: transform 400ms; }
+```
+
+**Correct (within 300ms):**
+
+```css
+.button { transition: transform 200ms; }
+```

package/skills/userinterface-wiki/rules/transition-name-cleanup.md

@@ -0,0 +1,28 @@
+---
+title: Clean Up View Transition Names
+impact: MEDIUM
+tags: view-transition, cleanup
+---
+
+## Clean Up View Transition Names
+
+Remove view-transition-name after transition completes.
+
+**Incorrect (stale name):**
+
+```ts
+sourceImg.style.viewTransitionName = "card";
+document.startViewTransition(() => {
+  targetImg.style.viewTransitionName = "card";
+});
+```
+
+**Correct (name cleaned up):**
+
+```ts
+sourceImg.style.viewTransitionName = "card";
+document.startViewTransition(() => {
+  sourceImg.style.viewTransitionName = "";
+  targetImg.style.viewTransitionName = "card";
+});
+```

package/skills/userinterface-wiki/rules/transition-name-required.md

@@ -0,0 +1,27 @@
+---
+title: View Transition Name Required
+impact: HIGH
+tags: view-transition, transition-name
+---
+
+## View Transition Name Required
+
+Elements participating in view transitions need view-transition-name.
+
+**Incorrect (no transition name):**
+
+```ts
+document.startViewTransition(() => {
+  targetImg.src = newSrc;
+});
+```
+
+**Correct (transition name assigned):**
+
+```ts
+sourceImg.style.viewTransitionName = "card";
+document.startViewTransition(() => {
+  sourceImg.style.viewTransitionName = "";
+  targetImg.style.viewTransitionName = "card";
+});
+```

package/skills/userinterface-wiki/rules/transition-name-unique.md

@@ -0,0 +1,24 @@
+---
+title: Unique View Transition Names
+impact: HIGH
+tags: view-transition, unique, naming
+---
+
+## Unique View Transition Names
+
+Each view-transition-name must be unique on the page during transition.
+
+**Incorrect (duplicate names):**
+
+```css
+.card {
+  view-transition-name: card;
+}
+/* Multiple cards with same name */
+```
+
+**Correct (unique per element):**
+
+```ts
+element.style.viewTransitionName = `card-${id}`;
+```

package/skills/userinterface-wiki/rules/transition-over-js-library.md

@@ -0,0 +1,32 @@
+---
+title: View Transitions Over JS Libraries
+impact: MEDIUM
+tags: view-transition, native, performance
+---
+
+## View Transitions Over JS Libraries
+
+Prefer View Transitions API over JavaScript animation libraries for page transitions.
+
+**Incorrect (JS-based transition):**
+
+```tsx
+import { motion } from "motion/react";
+
+function ImageLightbox() {
+  return (
+    <motion.img layoutId="hero" />
+  );
+}
+```
+
+**Correct (native View Transition):**
+
+```ts
+function openLightbox(img: HTMLImageElement) {
+  img.style.viewTransitionName = "hero";
+  document.startViewTransition(() => {
+    // Native browser transition
+  });
+}
+```

package/skills/userinterface-wiki/rules/transition-style-pseudo-elements.md

@@ -0,0 +1,24 @@
+---
+title: Style View Transition Pseudo-Elements
+impact: MEDIUM
+tags: view-transition, pseudo, styling
+---
+
+## Style View Transition Pseudo-Elements
+
+Style view transition pseudo-elements for custom animations.
+
+**Incorrect (default crossfade only):**
+
+```ts
+document.startViewTransition(() => { /* ... */ });
+```
+
+**Correct (custom animation):**
+
+```css
+::view-transition-group(card) {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+```

package/skills/userinterface-wiki/rules/type-antialiased-on-retina.md

@@ -0,0 +1,18 @@
+---
+title: Use Antialiased Font Smoothing
+impact: MEDIUM
+tags: type, rendering, antialiased
+---
+
+## Use Antialiased Font Smoothing
+
+Set -webkit-font-smoothing: antialiased on retina displays. The default subpixel rendering looks thicker and fuzzier.
+
+**Correct:**
+
+```css
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```

package/skills/userinterface-wiki/rules/type-disambiguation-stylistic-set.md

@@ -0,0 +1,15 @@
+---
+title: Use Disambiguation Stylistic Set for UI
+impact: MEDIUM
+tags: type, stylistic-set, disambiguation
+---
+
+## Use Disambiguation Stylistic Set for UI
+
+Enable ss02 (or your font's disambiguation set) in code-facing UIs to distinguish I, l, 1 and 0, O.
+
+**Correct:**
+
+```css
+.code-ui { font-feature-settings: "ss02"; }
+```

package/skills/userinterface-wiki/rules/type-font-display-swap.md

@@ -0,0 +1,28 @@
+---
+title: Use font-display swap to Avoid Invisible Text
+impact: MEDIUM
+tags: type, font-display, loading, FOIT
+---
+
+## Use font-display swap to Avoid Invisible Text
+
+Set font-display: swap so text renders immediately with a fallback font while the custom font loads.
+
+**Incorrect (invisible text during load):**
+
+```css
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter.woff2") format("woff2");
+}
+```
+
+**Correct (text visible immediately):**
+
+```css
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter.woff2") format("woff2");
+  font-display: swap;
+}
+```

package/skills/userinterface-wiki/rules/type-justify-with-hyphens.md

@@ -0,0 +1,24 @@
+---
+title: Pair Justified Text with Hyphens
+impact: MEDIUM
+tags: type, justify, hyphens, rivers
+---
+
+## Pair Justified Text with Hyphens
+
+Justified text without hyphens creates rivers of whitespace. Always pair with hyphens: auto.
+
+**Incorrect (rivers of whitespace):**
+
+```css
+.article { text-align: justify; }
+```
+
+**Correct (hyphenation prevents rivers):**
+
+```css
+.article {
+  text-align: justify;
+  hyphens: auto;
+}
+```

package/skills/userinterface-wiki/rules/type-letter-spacing-uppercase.md

@@ -0,0 +1,28 @@
+---
+title: Add Letter Spacing to Uppercase Text
+impact: MEDIUM
+tags: type, letter-spacing, uppercase, small-caps
+---
+
+## Add Letter Spacing to Uppercase Text
+
+Uppercase and small-caps text needs positive letter-spacing to feel open and readable.
+
+**Incorrect (tight uppercase):**
+
+```css
+.label {
+  text-transform: uppercase;
+  font-size: 12px;
+}
+```
+
+**Correct (opened up):**
+
+```css
+.label {
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+}
+```

package/skills/userinterface-wiki/rules/type-no-font-synthesis.md

@@ -0,0 +1,18 @@
+---
+title: Disable Font Synthesis for Missing Styles
+impact: LOW
+tags: type, synthesis, italic, bold
+---
+
+## Disable Font Synthesis for Missing Styles
+
+Set font-synthesis: none to prevent the browser from faking bold or italic. Browser-generated faux styles look terrible.
+
+**Correct:**
+
+```css
+.icon-font,
+.display-font {
+  font-synthesis: none;
+}
+```

package/skills/userinterface-wiki/rules/type-oldstyle-nums-for-prose.md

@@ -0,0 +1,21 @@
+---
+title: Oldstyle Numbers for Body Text
+impact: MEDIUM
+tags: type, numeric, oldstyle, prose
+---
+
+## Oldstyle Numbers for Body Text
+
+Use oldstyle-nums in body text so numbers blend with lowercase letters. Use lining-nums in tables and headings.
+
+**Correct (prose):**
+
+```css
+.body-text { font-variant-numeric: oldstyle-nums; }
+```
+
+**Correct (data):**
+
+```css
+.data-table { font-variant-numeric: lining-nums tabular-nums; }
+```

package/skills/userinterface-wiki/rules/type-opentype-contextual-alternates.md

@@ -0,0 +1,15 @@
+---
+title: Enable Contextual Alternates
+impact: MEDIUM
+tags: type, opentype, calt
+---
+
+## Enable Contextual Alternates
+
+Keep contextual alternates enabled (calt). They adjust punctuation and glyph shapes based on surrounding characters.
+
+**Correct (usually on by default, don't disable):**
+
+```css
+body { font-feature-settings: "calt" 1; }
+```

package/skills/userinterface-wiki/rules/type-optical-sizing-auto.md

@@ -0,0 +1,25 @@
+---
+title: Keep Optical Sizing Auto
+impact: MEDIUM
+tags: type, variable-font, optical-sizing
+---
+
+## Keep Optical Sizing Auto
+
+Leave font-optical-sizing at auto. The font adjusts glyph shapes for the current size — thicker strokes at small sizes, finer details at large sizes.
+
+**Incorrect (forced optical size):**
+
+```css
+body {
+  font-optical-sizing: none;
+}
+```
+
+**Correct (automatic adjustment):**
+
+```css
+body {
+  font-optical-sizing: auto;
+}
+```

package/skills/userinterface-wiki/rules/type-proper-fractions.md

@@ -0,0 +1,15 @@
+---
+title: Use Typographic Fractions
+impact: LOW
+tags: type, fractions, numeric, opentype
+---
+
+## Use Typographic Fractions
+
+Enable diagonal-fractions to convert 1/2, 1/3, etc. into proper typographic fractions.
+
+**Correct:**
+
+```css
+.recipe { font-variant-numeric: diagonal-fractions; }
+```

package/skills/userinterface-wiki/rules/type-slashed-zero.md

@@ -0,0 +1,17 @@
+---
+title: Slashed Zero for Disambiguation
+impact: MEDIUM
+tags: type, zero, disambiguation
+---
+
+## Slashed Zero for Disambiguation
+
+Enable slashed zero in code-adjacent UIs so users never confuse 0 with O.
+
+**Correct:**
+
+```css
+.code { font-variant-numeric: slashed-zero; }
+/* or */
+.code { font-feature-settings: "zero"; }
+```

package/skills/userinterface-wiki/rules/type-tabular-nums-for-data.md

@@ -0,0 +1,21 @@
+---
+title: Tabular Numbers for Data Display
+impact: HIGH
+tags: type, numeric, tabular, alignment
+---
+
+## Tabular Numbers for Data Display
+
+Use tabular-nums for any numeric data that should align in columns (tables, dashboards, pricing).
+
+**Incorrect (proportional numbers misalign):**
+
+```css
+.price { font-variant-numeric: proportional-nums; }
+```
+
+**Correct (tabular numbers align):**
+
+```css
+.price { font-variant-numeric: tabular-nums; }
+```

package/skills/userinterface-wiki/rules/type-text-wrap-balance-headings.md

@@ -0,0 +1,21 @@
+---
+title: Balance Headings with text-wrap
+impact: MEDIUM
+tags: type, text-wrap, balance, headings
+---
+
+## Balance Headings with text-wrap
+
+Use text-wrap: balance on headings to make lines roughly equal length instead of one long line and a short orphan.
+
+**Incorrect (unbalanced heading):**
+
+```css
+h1 { /* default text-wrap */ }
+```
+
+**Correct (balanced):**
+
+```css
+h1 { text-wrap: balance; }
+```