lsd-pi 1.2.0 → 1.2.1

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

@@ -1,33 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-jump-non-grouped.md

@@ -1,29 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-reduced-motion.md

@@ -1,28 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-spring-rotation.md

@@ -1,23 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-strokelinecap-round.md

@@ -1,21 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-three-lines.md

@@ -1,32 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-use-collapsed.md

@@ -1,33 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/native-backdrop-styling.md

@@ -1,27 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/native-placeholder-styling.md

@@ -1,27 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/native-selection-styling.md

@@ -1,18 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/nested-consistent-timing.md

@@ -1,25 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/nested-propagate-required.md

@@ -1,41 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/none-context-menu-entrance.md

@@ -1,25 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/none-high-frequency.md

@@ -1,29 +0,0 @@
----
-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} />;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/none-keyboard-navigation.md

@@ -1,32 +0,0 @@
----
-title: No Animation for Keyboard Navigation
-impact: MEDIUM
-tags: none, keyboard, a11y
----
-
-## No Animation for Keyboard Navigation
-
-Keyboard navigation should be instant, no animation.
-
-**Incorrect (animated focus):**
-
-```tsx
-function Menu() {
-  return items.map(item => (
-    <motion.li
-      whileFocus={{ scale: 1.05 }}
-      transition={{ duration: 0.2 }}
-    />
-  ));
-}
-```
-
-**Correct (CSS focus-visible only):**
-
-```tsx
-function Menu() {
-  return items.map(item => (
-    <li className={styles.menuItem} />
-  ));
-}
-```

package/src/resources/skills/userinterface-wiki/rules/param-click-duration.md

@@ -1,21 +0,0 @@
----
-title: Click Duration 5-15ms
-impact: MEDIUM
-tags: param, click, duration
----
-
-## Click Duration 5-15ms
-
-Click/tap sounds should be 5-15ms duration.
-
-**Incorrect (too long):**
-
-```ts
-const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.1, ctx.sampleRate);
-```
-
-**Correct (appropriate duration):**
-
-```ts
-const buffer = ctx.createBuffer(1, ctx.sampleRate * 0.008, ctx.sampleRate);
-```

package/src/resources/skills/userinterface-wiki/rules/param-filter-frequency-range.md

@@ -1,21 +0,0 @@
----
-title: Click Filter 3000-6000Hz
-impact: LOW
-tags: param, filter, frequency
----
-
-## Click Filter 3000-6000Hz
-
-Bandpass filter for clicks should be 3000-6000Hz.
-
-**Incorrect (too low):**
-
-```ts
-filter.frequency.value = 500;
-```
-
-**Correct (crisp range):**
-
-```ts
-filter.frequency.value = 4000;
-```

package/src/resources/skills/userinterface-wiki/rules/param-q-value-range.md

@@ -1,21 +0,0 @@
----
-title: Filter Q Value 2-5
-impact: LOW
-tags: param, q-value, filter
----
-
-## Filter Q Value 2-5
-
-Filter Q for clicks should be 2-5 for focused but not harsh sound.
-
-**Incorrect (too resonant):**
-
-```ts
-filter.Q.value = 15;
-```
-
-**Correct (balanced Q):**
-
-```ts
-filter.Q.value = 3;
-```

package/src/resources/skills/userinterface-wiki/rules/param-reasonable-gain.md

@@ -1,21 +0,0 @@
----
-title: Gain Under 1.0
-impact: MEDIUM
-tags: param, gain, clipping
----
-
-## Gain Under 1.0
-
-Gain values should not exceed 1.0 to prevent clipping.
-
-**Incorrect (clipping):**
-
-```ts
-gain.gain.setValueAtTime(1.5, t);
-```
-
-**Correct (safe gain):**
-
-```ts
-gain.gain.setValueAtTime(0.3, t);
-```

package/src/resources/skills/userinterface-wiki/rules/physics-active-state.md

@@ -1,23 +0,0 @@
----
-title: Active State Scale Transform
-impact: HIGH
-impactDescription: Missing active state makes interactive elements feel unresponsive and reduces tactile feedback.
-tags: physics, interaction, active-state
----
-
-## Active State Scale Transform
-
-Interactive elements must have active/pressed state with scale transform.
-
-**Incorrect (no active state):**
-
-```css
-.button:hover { background: var(--gray-3); }
-/* Missing :active state */
-```
-
-**Correct (active state present):**
-
-```css
-.button:active { transform: scale(0.98); }
-```

package/src/resources/skills/userinterface-wiki/rules/physics-no-excessive-stagger.md

@@ -1,22 +0,0 @@
----
-title: Stagger Under 50ms Per Item
-impact: MEDIUM
-impactDescription: Excessive stagger delays list readiness and feels sluggish; keep per-item delay minimal.
-tags: physics, stagger, list-animation
----
-
-## Stagger Under 50ms Per Item
-
-Stagger delays must not exceed 50ms per item.
-
-**Incorrect (excessive stagger):**
-
-```tsx
-transition={{ staggerChildren: 0.15 }}
-```
-
-**Correct (reasonable stagger):**
-
-```tsx
-transition={{ staggerChildren: 0.03 }}
-```

package/src/resources/skills/userinterface-wiki/rules/physics-spring-for-overshoot.md

@@ -1,23 +0,0 @@
----
-title: Springs for Overshoot and Settle
-impact: HIGH
-impactDescription: Easing cannot produce natural overshoot; springs are required for organic bounce-and-settle motion.
-tags: physics, spring, overshoot
----
-
-## Springs for Overshoot and Settle
-
-Use springs (not easing) when overshoot-and-settle is needed.
-
-**Incorrect (easing for bounce):**
-
-```tsx
-<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
-// When element should bounce/settle
-```
-
-**Correct (spring physics):**
-
-```tsx
-<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />
-```

package/src/resources/skills/userinterface-wiki/rules/physics-subtle-deformation.md

@@ -1,22 +0,0 @@
----
-title: Subtle Squash and Stretch
-impact: MEDIUM
-impactDescription: Excessive squash/stretch feels cartoonish and distracts from the interface; subtle deformation adds polish.
-tags: physics, squash-stretch, deformation
----
-
-## Subtle Squash and Stretch
-
-Squash/stretch deformation must be subtle (0.95-1.05 range).
-
-**Incorrect (excessive deformation):**
-
-```tsx
-<motion.div whileTap={{ scale: 0.8 }} />
-```
-
-**Correct (subtle deformation):**
-
-```tsx
-<motion.div whileTap={{ scale: 0.98 }} />
-```

package/src/resources/skills/userinterface-wiki/rules/prefetch-hit-slop.md

@@ -1,27 +0,0 @@
----
-title: Use hitSlop to Trigger Predictions Earlier
-impact: MEDIUM
-tags: prefetch, hit-slop, target
----
-
-## Use hitSlop to Trigger Predictions Earlier
-
-Expand the invisible prediction area around elements with hitSlop to start loading sooner.
-
-**Incorrect (tight prediction area):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => prefetch(),
-  hitSlop: 0,
-});
-```
-
-**Correct (expanded prediction area):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => prefetch(),
-  hitSlop: 20,
-});
-```

package/src/resources/skills/userinterface-wiki/rules/prefetch-keyboard-tab.md

@@ -1,19 +0,0 @@
----
-title: Prefetch on Keyboard Navigation
-impact: MEDIUM
-tags: prefetch, keyboard, tab, a11y
----
-
-## Prefetch on Keyboard Navigation
-
-Monitor focus changes and prefetch when the user is a few tab stops away from a registered element.
-
-**Correct (tab-aware prefetching):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => router.prefetch("/settings"),
-  name: "settings-link",
-  // Tab prediction fires when focus approaches
-});
-```