lsd-pi 1.2.0 → 1.2.2

package/src/resources/skills/userinterface-wiki/rules/prefetch-not-everything.md

@@ -1,22 +0,0 @@
----
-title: Prefetch by Intent, Not Viewport
-impact: HIGH
-tags: prefetch, viewport, intent, bundle-size
----
-
-## Prefetch by Intent, Not Viewport
-
-Don't prefetch everything visible in the viewport. Prefetch based on user intent to avoid wasted bandwidth.
-
-**Incorrect (prefetch all visible links):**
-
-```tsx
-<Link href="/page" prefetch={true}>Page</Link>
-```
-
-**Correct (intent-based prefetching):**
-
-```tsx
-<Link href="/page" prefetch={false}>Page</Link>
-// Let trajectory/hover prediction handle it
-```

package/src/resources/skills/userinterface-wiki/rules/prefetch-touch-fallback.md

@@ -1,34 +0,0 @@
----
-title: Fall Back Gracefully on Touch Devices
-impact: MEDIUM
-tags: prefetch, touch, mobile, fallback
----
-
-## Fall Back Gracefully on Touch Devices
-
-Touch devices have no cursor. Fall back to viewport or touch-start strategies automatically.
-
-**Incorrect (assumes cursor exists):**
-
-```tsx
-function PrefetchLink({ href, children }) {
-  return (
-    <Link
-      href={href}
-      onMouseMove={() => prefetch(href)}
-    >
-      {children}
-    </Link>
-  );
-}
-```
-
-**Correct (device-aware strategy):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => router.prefetch(href),
-  hitSlop: 20,
-});
-// Automatically falls back to touch-start on mobile
-```

package/src/resources/skills/userinterface-wiki/rules/prefetch-trajectory-over-hover.md

@@ -1,32 +0,0 @@
----
-title: Trajectory Prediction Over Hover Prefetching
-impact: HIGH
-tags: prefetch, trajectory, hover, performance
----
-
-## Trajectory Prediction Over Hover Prefetching
-
-Hover prefetching starts too late. Trajectory prediction fires while the cursor is still in motion, reclaiming 100-200ms.
-
-**Incorrect (waits for hover):**
-
-```tsx
-<Link
-  href="/about"
-  onMouseEnter={() => router.prefetch("/about")}
->
-  About
-</Link>
-```
-
-**Correct (trajectory-based):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => router.prefetch("/about"),
-  hitSlop: 20,
-  name: "about-link",
-});
-
-<Link ref={elementRef} href="/about">About</Link>
-```

package/src/resources/skills/userinterface-wiki/rules/prefetch-use-selectively.md

@@ -1,13 +0,0 @@
----
-title: Use Predictive Prefetching Selectively
-impact: MEDIUM
-tags: prefetch, selective, performance
----
-
-## Use Predictive Prefetching Selectively
-
-Predictive prefetching doesn't belong in every project. Use it where navigation latency is noticeable.
-
-**Good use cases:** data-heavy dashboards, multi-page apps with slow API responses, e-commerce product pages.
-
-**Bad use cases:** static sites with instant navigation, single-page apps with all data preloaded.

package/src/resources/skills/userinterface-wiki/rules/presence-disable-interactions.md

@@ -1,31 +0,0 @@
----
-title: Disable Interactions on Exiting Elements
-impact: MEDIUM
-tags: presence, interaction, exit
----
-
-## Disable Interactions on Exiting Elements
-
-Disable interactions on exiting elements using isPresent.
-
-**Incorrect (clickable during exit):**
-
-```tsx
-function Card() {
-  const isPresent = useIsPresent();
-  return <button onClick={handleClick}>Click</button>;
-}
-```
-
-**Correct (disabled during exit):**
-
-```tsx
-function Card() {
-  const isPresent = useIsPresent();
-  return (
-    <button onClick={handleClick} disabled={!isPresent}>
-      Click
-    </button>
-  );
-}
-```

package/src/resources/skills/userinterface-wiki/rules/presence-hook-in-child.md

@@ -1,31 +0,0 @@
----
-title: useIsPresent in Child Component
-impact: HIGH
-tags: presence, hook, component-hierarchy
----
-
-## useIsPresent in Child Component
-
-useIsPresent must be called from child of AnimatePresence, not parent.
-
-**Incorrect (hook in parent):**
-
-```tsx
-function Parent() {
-  const isPresent = useIsPresent();
-  return (
-    <AnimatePresence>
-      {show && <Child />}
-    </AnimatePresence>
-  );
-}
-```
-
-**Correct (hook in child):**
-
-```tsx
-function Child() {
-  const isPresent = useIsPresent();
-  return <motion.div data-exiting={!isPresent} />;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/presence-safe-to-remove.md

@@ -1,37 +0,0 @@
----
-title: Call safeToRemove After Async Work
-impact: HIGH
-tags: presence, safe-to-remove, async
----
-
-## Call safeToRemove After Async Work
-
-When using usePresence, always call safeToRemove after async work.
-
-**Incorrect (missing safeToRemove):**
-
-```tsx
-function AsyncComponent() {
-  const [isPresent, safeToRemove] = usePresence();
-
-  useEffect(() => {
-    if (!isPresent) {
-      cleanup();
-    }
-  }, [isPresent]);
-}
-```
-
-**Correct (safeToRemove called):**
-
-```tsx
-function AsyncComponent() {
-  const [isPresent, safeToRemove] = usePresence();
-
-  useEffect(() => {
-    if (!isPresent) {
-      cleanup().then(safeToRemove);
-    }
-  }, [isPresent, safeToRemove]);
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-content-required.md

@@ -1,28 +0,0 @@
----
-title: Content Property Required for Pseudo-Elements
-impact: HIGH
-tags: pseudo, content, before-after
----
-
-## Content Property Required for Pseudo-Elements
-
-::before and ::after require content property to render.
-
-**Incorrect (missing content):**
-
-```css
-.button::before {
-  position: absolute;
-  background: var(--gray-3);
-}
-```
-
-**Correct (content set):**
-
-```css
-.button::before {
-  content: "";
-  position: absolute;
-  background: var(--gray-3);
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-first-line-styling.md

@@ -1,27 +0,0 @@
----
-title: Use ::first-line for Typographic Treatments
-impact: LOW
-tags: pseudo, first-line, typography
----
-
-## Use ::first-line for Typographic Treatments
-
-Use ::first-line for drop-cap-adjacent styling without JavaScript or hardcoded spans.
-
-**Incorrect (manual span):**
-
-```tsx
-<p>
-  <span className={styles["first-line"]}>The opening line of this paragraph</span>
-  is styled differently from the rest.
-</p>
-```
-
-**Correct (native ::first-line):**
-
-```css
-.article p:first-of-type::first-line {
-  font-variant-caps: small-caps;
-  font-weight: var(--font-weight-medium);
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-hit-target-expansion.md

@@ -1,31 +0,0 @@
----
-title: Hit Target Expansion with Pseudo-Elements
-impact: MEDIUM
-tags: pseudo, hit-target, accessibility
----
-
-## Hit Target Expansion with Pseudo-Elements
-
-Use negative inset values to expand hit targets without extra markup.
-
-**Incorrect (wrapper for hit target):**
-
-```tsx
-<div className={styles.wrapper}>
-  <a className={styles.link}>Link</a>
-</div>
-```
-
-**Correct (pseudo-element expansion):**
-
-```css
-.link {
-  position: relative;
-}
-
-.link::before {
-  content: "";
-  position: absolute;
-  inset: -8px -12px;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-marker-styling.md

@@ -1,28 +0,0 @@
----
-title: Use ::marker for Custom List Bullets
-impact: LOW
-tags: pseudo, marker, list, bullets
----
-
-## Use ::marker for Custom List Bullets
-
-Use ::marker to style list bullets without extra elements or background-image hacks.
-
-**Incorrect (background image hack):**
-
-```css
-li {
-  list-style: none;
-  background: url("bullet.svg") no-repeat 0 4px;
-  padding-left: 20px;
-}
-```
-
-**Correct (native ::marker):**
-
-```css
-li::marker {
-  color: var(--gray-8);
-  font-size: 0.8em;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-over-dom-node.md

@@ -1,32 +0,0 @@
----
-title: Pseudo-Elements Over DOM Nodes
-impact: MEDIUM
-tags: pseudo, dom, decorative
----
-
-## Pseudo-Elements Over DOM Nodes
-
-Use pseudo-elements for decorative content instead of extra DOM nodes.
-
-**Incorrect (extra DOM node):**
-
-```tsx
-<button className={styles.button}>
-  <span className={styles.background} />
-  Click me
-</button>
-```
-
-**Correct (pseudo-element):**
-
-```tsx
-<button className={styles.button}>
-  Click me
-</button>
-```
-```css
-.button::before {
-  content: "";
-  /* decorative background */
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-position-relative-parent.md

@@ -1,33 +0,0 @@
----
-title: Position Relative Parent for Pseudo-Elements
-impact: HIGH
-tags: pseudo, position, relative
----
-
-## Position Relative Parent for Pseudo-Elements
-
-Parent must have position: relative for absolute pseudo-elements.
-
-**Incorrect (no position on parent):**
-
-```css
-.button::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-```
-
-**Correct (parent positioned):**
-
-```css
-.button {
-  position: relative;
-}
-
-.button::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/pseudo-z-index-layering.md

@@ -1,37 +0,0 @@
----
-title: Z-Index Layering for Pseudo-Elements
-impact: MEDIUM
-tags: pseudo, z-index, layering
----
-
-## Z-Index Layering for Pseudo-Elements
-
-Pseudo-elements need z-index to layer correctly with content.
-
-**Incorrect (covers text):**
-
-```css
-.button::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--gray-3);
-}
-```
-
-**Correct (layered behind):**
-
-```css
-.button {
-  position: relative;
-  z-index: 1;
-}
-
-.button::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--gray-3);
-  z-index: -1;
-}
-```

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

@@ -1,27 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/spring-for-interruptible.md

@@ -1,27 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/spring-params-balanced.md

@@ -1,29 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/spring-preserves-velocity.md

@@ -1,28 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/staging-dim-background.md

@@ -1,22 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/staging-one-focal-point.md

@@ -1,24 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/staging-z-index-hierarchy.md

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

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

@@ -1,22 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/timing-under-300ms.md

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