niahere 0.2.61 → 0.2.63

package/skills/userinterface-wiki/rules/exit-prop-required.md

@@ -0,0 +1,33 @@
+---
+title: Exit Prop Required Inside AnimatePresence
+impact: HIGH
+tags: exit, prop, animate-presence
+---
+
+## Exit Prop Required Inside AnimatePresence
+
+Elements inside AnimatePresence should have exit prop defined.
+
+**Incorrect (missing exit):**
+
+```tsx
+<AnimatePresence>
+  {isOpen && (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
+  )}
+</AnimatePresence>
+```
+
+**Correct (exit defined):**
+
+```tsx
+<AnimatePresence>
+  {isOpen && (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    />
+  )}
+</AnimatePresence>
+```

package/skills/userinterface-wiki/rules/exit-requires-wrapper.md

@@ -0,0 +1,27 @@
+---
+title: AnimatePresence Wrapper Required
+impact: HIGH
+tags: exit, animate-presence, wrapper
+---
+
+## AnimatePresence Wrapper Required
+
+Conditional motion elements must be wrapped in AnimatePresence.
+
+**Incorrect (no wrapper):**
+
+```tsx
+{isVisible && (
+  <motion.div exit={{ opacity: 0 }} />
+)}
+```
+
+**Correct (wrapped):**
+
+```tsx
+<AnimatePresence>
+  {isVisible && (
+    <motion.div exit={{ opacity: 0 }} />
+  )}
+</AnimatePresence>
+```

package/skills/userinterface-wiki/rules/impl-default-subtle.md

@@ -0,0 +1,21 @@
+---
+title: Subtle Default Volume
+impact: MEDIUM
+tags: impl, volume, default
+---
+
+## Subtle Default Volume
+
+Default volume should be subtle, not loud.
+
+**Incorrect (too loud):**
+
+```tsx
+const DEFAULT_VOLUME = 1.0;
+```
+
+**Correct (subtle):**
+
+```tsx
+const DEFAULT_VOLUME = 0.3;
+```

package/skills/userinterface-wiki/rules/impl-preload-audio.md

@@ -0,0 +1,34 @@
+---
+title: Preload Audio Files
+impact: MEDIUM
+tags: impl, preload, performance
+---
+
+## Preload Audio Files
+
+Preload audio files to avoid playback delay.
+
+**Incorrect (loads on demand):**
+
+```tsx
+function playSound(name: string) {
+  const audio = new Audio(`/sounds/${name}.mp3`);
+  audio.play();
+}
+```
+
+**Correct (preloaded):**
+
+```tsx
+const sounds = {
+  success: new Audio("/sounds/success.mp3"),
+  error: new Audio("/sounds/error.mp3"),
+};
+
+Object.values(sounds).forEach(audio => audio.load());
+
+function playSound(name: keyof typeof sounds) {
+  sounds[name].currentTime = 0;
+  sounds[name].play();
+}
+```

package/skills/userinterface-wiki/rules/impl-reset-current-time.md

@@ -0,0 +1,26 @@
+---
+title: Reset currentTime Before Replay
+impact: MEDIUM
+tags: impl, replay, current-time
+---
+
+## Reset currentTime Before Replay
+
+Reset audio currentTime before replay to allow rapid triggering.
+
+**Incorrect (won't replay if playing):**
+
+```tsx
+function playSound() {
+  audio.play();
+}
+```
+
+**Correct (reset before play):**
+
+```tsx
+function playSound() {
+  audio.currentTime = 0;
+  audio.play();
+}
+```

package/skills/userinterface-wiki/rules/mode-pop-layout-for-lists.md

@@ -0,0 +1,25 @@
+---
+title: popLayout for List Reordering
+impact: MEDIUM
+tags: mode, pop-layout, list
+---
+
+## popLayout for List Reordering
+
+Use popLayout mode for list reordering animations.
+
+**Incorrect (default mode causes shifts):**
+
+```tsx
+<AnimatePresence>
+  {items.map(item => <ListItem key={item.id} />)}
+</AnimatePresence>
+```
+
+**Correct (popLayout prevents shifts):**
+
+```tsx
+<AnimatePresence mode="popLayout">
+  {items.map(item => <ListItem key={item.id} />)}
+</AnimatePresence>
+```

package/skills/userinterface-wiki/rules/mode-sync-layout-conflict.md

@@ -0,0 +1,29 @@
+---
+title: Mode "sync" Causes Layout Conflicts
+impact: MEDIUM
+tags: mode, sync, layout
+---
+
+## Mode "sync" Causes Layout Conflicts
+
+Mode "sync" causes layout conflicts; position exiting elements absolutely.
+
+**Incorrect (sync with layout competition):**
+
+```tsx
+<AnimatePresence mode="sync">
+  {items.map(item => (
+    <motion.div exit={{ opacity: 0 }}>{item}</motion.div>
+  ))}
+</AnimatePresence>
+```
+
+**Correct (popLayout instead):**
+
+```tsx
+<AnimatePresence mode="popLayout">
+  {items.map(item => (
+    <motion.div exit={{ opacity: 0 }}>{item}</motion.div>
+  ))}
+</AnimatePresence>
+```

package/skills/userinterface-wiki/rules/mode-wait-doubles-duration.md

@@ -0,0 +1,25 @@
+---
+title: Mode "wait" Doubles Duration
+impact: MEDIUM
+tags: mode, wait, duration
+---
+
+## Mode "wait" Doubles Duration
+
+Mode "wait" nearly doubles animation duration; adjust timing accordingly.
+
+**Incorrect (too slow with wait):**
+
+```tsx
+<AnimatePresence mode="wait">
+  <motion.div transition={{ duration: 0.3 }} />
+</AnimatePresence>
+```
+
+**Correct (halved timing):**
+
+```tsx
+<AnimatePresence mode="wait">
+  <motion.div transition={{ duration: 0.15 }} />
+</AnimatePresence>
+```

package/skills/userinterface-wiki/rules/morphing-aria-hidden.md

@@ -0,0 +1,21 @@
+---
+title: Aria Hidden on Icon SVGs
+impact: LOW
+tags: morphing, a11y, aria
+---
+
+## Aria Hidden on Icon SVGs
+
+Icon SVGs should be aria-hidden since they're decorative.
+
+**Incorrect (no aria attribute):**
+
+```tsx
+<svg width={size} height={size}>...</svg>
+```
+
+**Correct (aria-hidden):**
+
+```tsx
+<svg width={size} height={size} aria-hidden="true">...</svg>
+```

package/skills/userinterface-wiki/rules/morphing-consistent-viewbox.md

@@ -0,0 +1,23 @@
+---
+title: Consistent ViewBox Size
+impact: HIGH
+tags: morphing, viewbox, svg
+---
+
+## Consistent ViewBox Size
+
+All icons must use the same viewBox (14x14 recommended).
+
+**Incorrect (mixed scales):**
+
+```ts
+const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14
+const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28
+```
+
+**Correct (consistent scale):**
+
+```ts
+const VIEWBOX_SIZE = 14;
+const CENTER = 7;
+```

package/skills/userinterface-wiki/rules/morphing-group-variants.md

@@ -0,0 +1,33 @@
+---
+title: Shared Group for Rotational Variants
+impact: HIGH
+tags: morphing, group, rotation
+---
+
+## Shared Group for Rotational Variants
+
+Icons that are rotational variants MUST share the same group and base lines.
+
+**Incorrect (different line definitions):**
+
+```ts
+const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };
+const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] };
+```
+
+**Correct (shared base lines):**
+
+```ts
+const arrowLines: [IconLine, IconLine, IconLine] = [
+  { x1: 2, y1: 7, x2: 12, y2: 7 },
+  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },
+  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },
+];
+
+const icons = {
+  "arrow-right": { lines: arrowLines, rotation: 0, group: "arrow" },
+  "arrow-down": { lines: arrowLines, rotation: 90, group: "arrow" },
+  "arrow-left": { lines: arrowLines, rotation: 180, group: "arrow" },
+  "arrow-up": { lines: arrowLines, rotation: -90, group: "arrow" },
+};
+```

package/skills/userinterface-wiki/rules/morphing-jump-non-grouped.md

@@ -0,0 +1,29 @@
+---
+title: Instant Jump for Non-Grouped Icons
+impact: MEDIUM
+tags: morphing, jump, group
+---
+
+## Instant Jump for Non-Grouped Icons
+
+When transitioning between icons NOT in the same group, rotation should jump instantly.
+
+**Incorrect (always animates rotation):**
+
+```tsx
+useEffect(() => {
+  rotation.set(definition.rotation ?? 0);
+}, [definition]);
+```
+
+**Correct (jumps when not grouped):**
+
+```tsx
+useEffect(() => {
+  if (shouldRotate) {
+    rotation.set(definition.rotation ?? 0);
+  } else {
+    rotation.jump(definition.rotation ?? 0);
+  }
+}, [definition, shouldRotate]);
+```

package/skills/userinterface-wiki/rules/morphing-reduced-motion.md

@@ -0,0 +1,28 @@
+---
+title: Reduced Motion Support for Icons
+impact: MEDIUM
+tags: morphing, a11y, reduced-motion
+---
+
+## Reduced Motion Support for Icons
+
+Respect prefers-reduced-motion by disabling animations.
+
+**Incorrect (always animates):**
+
+```tsx
+function MorphingIcon({ icon }: Props) {
+  return <motion.line animate={...} transition={{ duration: 0.4 }} />;
+}
+```
+
+**Correct (respects preference):**
+
+```tsx
+function MorphingIcon({ icon }: Props) {
+  const reducedMotion = useReducedMotion() ?? false;
+  const activeTransition = reducedMotion ? { duration: 0 } : transition;
+  
+  return <motion.line animate={...} transition={activeTransition} />;
+}
+```

package/skills/userinterface-wiki/rules/morphing-spring-rotation.md

@@ -0,0 +1,23 @@
+---
+title: Spring Physics for Rotation
+impact: MEDIUM
+tags: morphing, spring, rotation
+---
+
+## Spring Physics for Rotation
+
+Rotation between grouped icons should use spring physics for natural motion.
+
+**Incorrect (duration-based rotation):**
+
+```tsx
+<motion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} />
+```
+
+**Correct (spring rotation):**
+
+```tsx
+const rotation = useSpring(definition.rotation ?? 0, activeTransition);
+
+<motion.g style={{ rotate: rotation, transformOrigin: "center" }} />
+```

package/skills/userinterface-wiki/rules/morphing-strokelinecap-round.md

@@ -0,0 +1,21 @@
+---
+title: Round Stroke Line Caps
+impact: LOW
+tags: morphing, stroke, svg
+---
+
+## Round Stroke Line Caps
+
+Lines should use strokeLinecap="round" for polished endpoints.
+
+**Incorrect (butt caps):**
+
+```tsx
+<motion.line strokeLinecap="butt" />
+```
+
+**Correct (round caps):**
+
+```tsx
+<motion.line strokeLinecap="round" />
+```

package/skills/userinterface-wiki/rules/morphing-three-lines.md

@@ -0,0 +1,32 @@
+---
+title: Icons Must Use Exactly Three Lines
+impact: HIGH
+tags: morphing, svg, structure
+---
+
+## Icons Must Use Exactly Three Lines
+
+Every icon MUST use exactly 3 lines. No more, no fewer.
+
+**Incorrect (only 2 lines):**
+
+```ts
+const checkIcon = {
+  lines: [
+    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
+    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
+  ],
+};
+```
+
+**Correct (3 lines with collapsed):**
+
+```ts
+const checkIcon = {
+  lines: [
+    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
+    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
+    collapsed,
+  ],
+};
+```

package/skills/userinterface-wiki/rules/morphing-use-collapsed.md

@@ -0,0 +1,33 @@
+---
+title: Use Collapsed Constant for Unused Lines
+impact: HIGH
+tags: morphing, collapsed, structure
+---
+
+## Use Collapsed Constant for Unused Lines
+
+Unused lines must use the collapsed constant, not omission or null.
+
+**Incorrect (null for unused):**
+
+```ts
+const minusIcon = {
+  lines: [
+    { x1: 2, y1: 7, x2: 12, y2: 7 },
+    null,
+    null,
+  ],
+};
+```
+
+**Correct (collapsed constant):**
+
+```ts
+const minusIcon = {
+  lines: [
+    { x1: 2, y1: 7, x2: 12, y2: 7 },
+    collapsed,
+    collapsed,
+  ],
+};
+```

package/skills/userinterface-wiki/rules/native-backdrop-styling.md

@@ -0,0 +1,27 @@
+---
+title: Use ::backdrop for Dialog Backgrounds
+impact: MEDIUM
+tags: native, backdrop, dialog
+---
+
+## Use ::backdrop for Dialog Backgrounds
+
+Use ::backdrop pseudo-element for dialog/popover backgrounds.
+
+**Incorrect (extra overlay node):**
+
+```tsx
+<>
+  <div className={styles.overlay} onClick={close} />
+  <dialog className={styles.dialog}>{children}</dialog>
+</>
+```
+
+**Correct (native ::backdrop):**
+
+```css
+dialog::backdrop {
+  background: var(--black-a6);
+  backdrop-filter: blur(4px);
+}
+```

package/skills/userinterface-wiki/rules/native-placeholder-styling.md

@@ -0,0 +1,27 @@
+---
+title: Use ::placeholder for Input Styling
+impact: LOW
+tags: native, placeholder, input
+---
+
+## Use ::placeholder for Input Styling
+
+Use ::placeholder for input placeholder styling, not wrapper elements.
+
+**Incorrect (custom placeholder node):**
+
+```tsx
+<div className={styles.inputWrapper}>
+  {!value && <span className={styles.placeholder}>Enter text...</span>}
+  <input value={value} />
+</div>
+```
+
+**Correct (native ::placeholder):**
+
+```css
+input::placeholder {
+  color: var(--gray-9);
+  opacity: 1;
+}
+```

package/skills/userinterface-wiki/rules/native-selection-styling.md

@@ -0,0 +1,18 @@
+---
+title: Use ::selection for Text Styling
+impact: LOW
+tags: native, selection, text
+---
+
+## Use ::selection for Text Styling
+
+Use ::selection for text selection styling.
+
+**Correct:**
+
+```css
+::selection {
+  background: var(--blue-a5);
+  color: var(--gray-12);
+}
+```

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

@@ -0,0 +1,25 @@
+---
+title: Coordinated Parent-Child Exit Timing
+impact: MEDIUM
+tags: nested, timing, exit
+---
+
+## Coordinated Parent-Child Exit Timing
+
+Parent and child exit durations should be coordinated.
+
+**Incorrect (parent too fast):**
+
+```tsx
+<motion.div exit={{ opacity: 0 }} transition={{ duration: 0.1 }}>
+  <motion.div exit={{ scale: 0 }} transition={{ duration: 0.5 }} />
+</motion.div>
+```
+
+**Correct (coordinated timing):**
+
+```tsx
+<motion.div exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+  <motion.div exit={{ scale: 0 }} transition={{ duration: 0.15 }} />
+</motion.div>
+```

package/skills/userinterface-wiki/rules/nested-propagate-required.md

@@ -0,0 +1,41 @@
+---
+title: Propagate Prop for Nested AnimatePresence
+impact: HIGH
+tags: nested, propagate, exit
+---
+
+## Propagate Prop for Nested AnimatePresence
+
+Nested AnimatePresence must use propagate prop for coordinated exits.
+
+**Incorrect (children vanish instantly):**
+
+```tsx
+<AnimatePresence>
+  {isOpen && (
+    <motion.div exit={{ opacity: 0 }}>
+      <AnimatePresence>
+        {items.map(item => (
+          <motion.div key={item.id} exit={{ scale: 0 }} />
+        ))}
+      </AnimatePresence>
+    </motion.div>
+  )}
+</AnimatePresence>
+```
+
+**Correct (propagate on both):**
+
+```tsx
+<AnimatePresence propagate>
+  {isOpen && (
+    <motion.div exit={{ opacity: 0 }}>
+      <AnimatePresence propagate>
+        {items.map(item => (
+          <motion.div key={item.id} exit={{ scale: 0 }} />
+        ))}
+      </AnimatePresence>
+    </motion.div>
+  )}
+</AnimatePresence>
+```

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

@@ -0,0 +1,25 @@
+---
+title: No Entrance Animation for Context Menus
+impact: MEDIUM
+tags: none, context-menu, entrance
+---
+
+## No Entrance Animation for Context Menus
+
+Context menus should not animate on entrance (exit only).
+
+**Incorrect (entrance animation):**
+
+```tsx
+<motion.div
+  initial={{ opacity: 0, scale: 0.95 }}
+  animate={{ opacity: 1, scale: 1 }}
+  exit={{ opacity: 0 }}
+/>
+```
+
+**Correct (exit only):**
+
+```tsx
+<motion.div exit={{ opacity: 0, scale: 0.95 }} />
+```

package/skills/userinterface-wiki/rules/none-high-frequency.md

@@ -0,0 +1,29 @@
+---
+title: No Animation for High-Frequency Interactions
+impact: HIGH
+tags: none, high-frequency, performance
+---
+
+## No Animation for High-Frequency Interactions
+
+High-frequency interactions should have no animation.
+
+**Incorrect (animated on every keystroke):**
+
+```tsx
+function SearchInput() {
+  return (
+    <motion.div animate={{ scale: [1, 1.02, 1] }}>
+      <input onChange={handleSearch} />
+    </motion.div>
+  );
+}
+```
+
+**Correct (no animation):**
+
+```tsx
+function SearchInput() {
+  return <input onChange={handleSearch} />;
+}
+```