lsd-pi 1.2.0 → 1.2.2

package/src/resources/skills/userinterface-wiki/rules/design-oscillator-for-tonal.md

@@ -1,22 +0,0 @@
----
-title: Oscillators for Tonal Sounds
-impact: MEDIUM
-tags: design, oscillator, tonal
----
-
-## Oscillators for Tonal Sounds
-
-Use oscillators with pitch movement for tonal sounds (pops, confirmations).
-
-**Incorrect (static frequency):**
-
-```ts
-osc.frequency.value = 400;
-```
-
-**Correct (pitch sweep):**
-
-```ts
-osc.frequency.setValueAtTime(400, t);
-osc.frequency.exponentialRampToValueAtTime(600, t + 0.04);
-```

package/src/resources/skills/userinterface-wiki/rules/duration-max-300ms.md

@@ -1,21 +0,0 @@
----
-title: Max 300ms for User Actions
-impact: HIGH
-tags: duration, max, user-action
----
-
-## Max 300ms for User Actions
-
-User-initiated animations must not exceed 300ms.
-
-**Incorrect (exceeds limit):**
-
-```tsx
-<motion.div transition={{ duration: 0.5 }} />
-```
-
-**Correct (within limit):**
-
-```tsx
-<motion.div transition={{ duration: 0.25 }} />
-```

package/src/resources/skills/userinterface-wiki/rules/duration-press-hover.md

@@ -1,21 +0,0 @@
----
-title: Press and Hover 120-180ms
-impact: MEDIUM
-tags: duration, press, hover
----
-
-## Press and Hover 120-180ms
-
-Press and hover interactions should use 120-180ms duration.
-
-**Incorrect (too slow):**
-
-```css
-.button:hover { transition: background-color 400ms; }
-```
-
-**Correct (appropriate duration):**
-
-```css
-.button:hover { transition: background-color 150ms; }
-```

package/src/resources/skills/userinterface-wiki/rules/duration-shorten-before-curve.md

@@ -1,21 +0,0 @@
----
-title: Shorten Duration Before Adjusting Curve
-impact: MEDIUM
-tags: duration, optimization
----
-
-## Shorten Duration Before Adjusting Curve
-
-If animation feels slow, shorten duration before adjusting curve.
-
-**Incorrect (adjusting curve instead):**
-
-```css
-.element { transition: 400ms cubic-bezier(0, 0.9, 0.1, 1); }
-```
-
-**Correct (shorter duration):**
-
-```css
-.element { transition: 200ms ease-out; }
-```

package/src/resources/skills/userinterface-wiki/rules/duration-small-state.md

@@ -1,15 +0,0 @@
----
-title: Small State Changes 180-260ms
-impact: MEDIUM
-tags: duration, state-change
----
-
-## Small State Changes 180-260ms
-
-Small state changes should use 180-260ms duration.
-
-**Correct:**
-
-```css
-.toggle { transition: transform 200ms ease; }
-```

package/src/resources/skills/userinterface-wiki/rules/easing-entrance-ease-out.md

@@ -1,21 +0,0 @@
----
-title: Ease-Out for Entrances
-impact: HIGH
-tags: easing, entrance, ease-out
----
-
-## Ease-Out for Entrances
-
-Entrances must use ease-out (arrive fast, settle gently).
-
-**Incorrect (ease-in for entrance):**
-
-```css
-.modal-enter { animation-timing-function: ease-in; }
-```
-
-**Correct (ease-out for entrance):**
-
-```css
-.modal-enter { animation-timing-function: ease-out; }
-```

package/src/resources/skills/userinterface-wiki/rules/easing-exit-ease-in.md

@@ -1,21 +0,0 @@
----
-title: Ease-In for Exits
-impact: HIGH
-tags: easing, exit, ease-in
----
-
-## Ease-In for Exits
-
-Exits must use ease-in (build momentum before departure).
-
-**Incorrect (ease-out for exit):**
-
-```css
-.modal-exit { animation-timing-function: ease-out; }
-```
-
-**Correct (ease-in for exit):**
-
-```css
-.modal-exit { animation-timing-function: ease-in; }
-```

package/src/resources/skills/userinterface-wiki/rules/easing-for-state-change.md

@@ -1,27 +0,0 @@
----
-title: Easing for System State Changes
-impact: HIGH
-tags: easing, state-change, system
----
-
-## Easing for System State Changes
-
-System-initiated state changes should use easing curves.
-
-**Incorrect (spring for announcement):**
-
-```tsx
-<motion.div
-  animate={{ y: 0 }}
-  transition={{ type: "spring" }}
-/>
-```
-
-**Correct (easing for announcement):**
-
-```tsx
-<motion.div
-  animate={{ y: 0 }}
-  transition={{ duration: 0.2, ease: "easeOut" }}
-/>
-```

package/src/resources/skills/userinterface-wiki/rules/easing-linear-only-progress.md

@@ -1,21 +0,0 @@
----
-title: Linear Easing Only for Progress
-impact: MEDIUM
-tags: easing, linear, progress
----
-
-## Linear Easing Only for Progress
-
-Linear easing only for progress bars and time representation.
-
-**Incorrect (linear for motion):**
-
-```css
-.card-slide { transition: transform 200ms linear; }
-```
-
-**Correct (linear for progress):**
-
-```css
-.progress-bar { transition: width 100ms linear; }
-```

package/src/resources/skills/userinterface-wiki/rules/easing-natural-decay.md

@@ -1,22 +0,0 @@
----
-title: Exponential Ramps for Natural Decay
-impact: MEDIUM
-impactDescription: Linear ramps for decay produce abrupt, unnatural cutoffs; exponential ramps match perceptual expectations.
-tags: easing, decay, audio, animation
----
-
-## Exponential Ramps for Natural Decay
-
-Use exponential ramps, not linear, for natural decay.
-
-**Incorrect (linear ramp):**
-
-```ts
-gain.gain.linearRampToValueAtTime(0, t + 0.05);
-```
-
-**Correct (exponential ramp):**
-
-```ts
-gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
-```

package/src/resources/skills/userinterface-wiki/rules/easing-no-linear-motion.md

@@ -1,22 +0,0 @@
----
-title: No Linear Easing for Motion
-impact: MEDIUM
-impactDescription: Linear easing for motion feels mechanical; reserve it for progress indicators where uniform speed is expected.
-tags: easing, linear, animation
----
-
-## No Linear Easing for Motion
-
-Linear easing should only be used for progress indicators, not motion.
-
-**Incorrect (linear for motion):**
-
-```css
-.card { transition: transform 200ms linear; }
-```
-
-**Correct (linear for progress only):**
-
-```css
-.progress-bar { transition: width 100ms linear; }
-```

package/src/resources/skills/userinterface-wiki/rules/easing-transition-ease-in-out.md

@@ -1,15 +0,0 @@
----
-title: Ease-In-Out for View Transitions
-impact: MEDIUM
-tags: easing, transition, ease-in-out
----
-
-## Ease-In-Out for View Transitions
-
-View/mode transitions use ease-in-out for neutral attention.
-
-**Correct:**
-
-```css
-.page-transition { animation-timing-function: ease-in-out; }
-```

package/src/resources/skills/userinterface-wiki/rules/envelope-exponential-decay.md

@@ -1,21 +0,0 @@
----
-title: Exponential Decay for Natural Sound
-impact: HIGH
-tags: envelope, decay, exponential
----
-
-## Exponential Decay for Natural Sound
-
-Use exponential ramps for natural decay, not linear.
-
-**Incorrect (linear ramp):**
-
-```ts
-gain.gain.linearRampToValueAtTime(0, t + 0.05);
-```
-
-**Correct (exponential ramp):**
-
-```ts
-gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
-```

package/src/resources/skills/userinterface-wiki/rules/envelope-no-zero-target.md

@@ -1,21 +0,0 @@
----
-title: No Zero Target for Exponential Ramps
-impact: HIGH
-tags: envelope, exponential, zero
----
-
-## No Zero Target for Exponential Ramps
-
-Exponential ramps cannot target 0; use 0.001 or similar small value.
-
-**Incorrect (targets zero):**
-
-```ts
-gain.gain.exponentialRampToValueAtTime(0, t + 0.05);
-```
-
-**Correct (targets near-zero):**
-
-```ts
-gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
-```

package/src/resources/skills/userinterface-wiki/rules/envelope-set-initial-value.md

@@ -1,22 +0,0 @@
----
-title: Set Initial Value Before Ramp
-impact: MEDIUM
-tags: envelope, initial, glitch
----
-
-## Set Initial Value Before Ramp
-
-Set initial value before ramping to avoid glitches.
-
-**Incorrect (no initial value):**
-
-```ts
-gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
-```
-
-**Correct (initial value set):**
-
-```ts
-gain.gain.setValueAtTime(0.3, t);
-gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
-```

package/src/resources/skills/userinterface-wiki/rules/exit-key-required.md

@@ -1,29 +0,0 @@
----
-title: Unique Keys in AnimatePresence Lists
-impact: HIGH
-tags: exit, key, list
----
-
-## Unique Keys in AnimatePresence Lists
-
-Dynamic lists inside AnimatePresence must have unique keys.
-
-**Incorrect (index as key):**
-
-```tsx
-<AnimatePresence>
-  {items.map((item, index) => (
-    <motion.div key={index} exit={{ opacity: 0 }} />
-  ))}
-</AnimatePresence>
-```
-
-**Correct (stable unique key):**
-
-```tsx
-<AnimatePresence>
-  {items.map((item) => (
-    <motion.div key={item.id} exit={{ opacity: 0 }} />
-  ))}
-</AnimatePresence>
-```

package/src/resources/skills/userinterface-wiki/rules/exit-matches-initial.md

@@ -1,29 +0,0 @@
----
-title: Exit Mirrors Initial for Symmetry
-impact: MEDIUM
-tags: exit, initial, symmetry
----
-
-## Exit Mirrors Initial for Symmetry
-
-Exit animation should mirror initial for symmetry.
-
-**Incorrect (asymmetric exit):**
-
-```tsx
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  exit={{ scale: 0 }}
-/>
-```
-
-**Correct (symmetric exit):**
-
-```tsx
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  exit={{ opacity: 0, y: 20 }}
-/>
-```

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

@@ -1,33 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/exit-requires-wrapper.md

@@ -1,27 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/impl-default-subtle.md

@@ -1,21 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/impl-preload-audio.md

@@ -1,34 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/impl-reset-current-time.md

@@ -1,26 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/mode-pop-layout-for-lists.md

@@ -1,25 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/mode-sync-layout-conflict.md

@@ -1,29 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/mode-wait-doubles-duration.md

@@ -1,25 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/morphing-aria-hidden.md

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

@@ -1,23 +0,0 @@
----
-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;
-```