lsd-pi 1.2.0 → 1.2.2

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

@@ -1,28 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/transition-name-required.md

@@ -1,27 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/transition-name-unique.md

@@ -1,24 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/transition-over-js-library.md

@@ -1,32 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/transition-style-pseudo-elements.md

@@ -1,24 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-antialiased-on-retina.md

@@ -1,18 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-disambiguation-stylistic-set.md

@@ -1,15 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-font-display-swap.md

@@ -1,28 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-justify-with-hyphens.md

@@ -1,24 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-letter-spacing-uppercase.md

@@ -1,28 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-no-font-synthesis.md

@@ -1,18 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-oldstyle-nums-for-prose.md

@@ -1,21 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-opentype-contextual-alternates.md

@@ -1,15 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-optical-sizing-auto.md

@@ -1,25 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-proper-fractions.md

@@ -1,15 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-slashed-zero.md

@@ -1,17 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-tabular-nums-for-data.md

@@ -1,21 +0,0 @@
----
-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/src/resources/skills/userinterface-wiki/rules/type-text-wrap-balance-headings.md

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

package/src/resources/skills/userinterface-wiki/rules/type-text-wrap-pretty.md

@@ -1,16 +0,0 @@
----
-title: Use text-wrap pretty for Body Text
-impact: MEDIUM
-tags: type, text-wrap, orphans, pretty
----
-
-## Use text-wrap pretty for Body Text
-
-Use text-wrap: pretty for body text to reduce orphans. Use text-wrap: balance for headings.
-
-**Correct:**
-
-```css
-p { text-wrap: pretty; }
-h1, h2, h3 { text-wrap: balance; }
-```

package/src/resources/skills/userinterface-wiki/rules/type-underline-offset.md

@@ -1,25 +0,0 @@
----
-title: Offset Underlines from Descenders
-impact: MEDIUM
-tags: type, underline, offset, decoration
----
-
-## Offset Underlines from Descenders
-
-Use text-underline-offset to push underlines below descenders so they look intentional.
-
-**Incorrect (underline collides with descenders):**
-
-```css
-a { text-decoration: underline; }
-```
-
-**Correct (offset underline):**
-
-```css
-a {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-skip-ink: auto;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/type-variable-weight-continuous.md

@@ -1,23 +0,0 @@
----
-title: Use Continuous Weight Values with Variable Fonts
-impact: LOW
-tags: type, variable-font, weight
----
-
-## Use Continuous Weight Values with Variable Fonts
-
-Variable fonts accept any integer from 100-900, not just the standard stops at 400, 500, 600, 700.
-
-**Incorrect (limited to standard stops):**
-
-```css
-.medium { font-weight: 500; }
-.semibold { font-weight: 600; }
-```
-
-**Correct (precise weight control):**
-
-```css
-.medium { font-weight: 450; }
-.semibold { font-weight: 550; }
-```

package/src/resources/skills/userinterface-wiki/rules/ux-aesthetic-usability.md

@@ -1,32 +0,0 @@
----
-title: Visual Polish Increases Perceived Usability
-impact: MEDIUM
-tags: ux, aesthetic, usability, polish
----
-
-## Visual Polish Increases Perceived Usability
-
-Users perceive aesthetically pleasing design as more usable. Small visual details compound into trust.
-
-**Incorrect (unstyled, raw elements):**
-
-```css
-.card {
-  border: 1px solid black;
-  padding: 10px;
-}
-```
-
-**Correct (considered visual treatment):**
-
-```css
-.card {
-  padding: 16px;
-  background: var(--gray-2);
-  border: 1px solid var(--gray-a4);
-  border-radius: 12px;
-  box-shadow: var(--shadow-1);
-}
-```
-
-Reference: [Aesthetic-Usability Effect](https://lawsofux.com/aesthetic-usability-effect/)

package/src/resources/skills/userinterface-wiki/rules/ux-cognitive-load-reduce.md

@@ -1,49 +0,0 @@
----
-title: Minimize Extraneous Cognitive Load
-impact: HIGH
-tags: ux, cognitive-load, simplicity, noise
----
-
-## Minimize Extraneous Cognitive Load
-
-Remove anything that doesn't help the user complete their task. Decoration, redundant labels, and unnecessary options all add load.
-
-**Incorrect (extraneous elements):**
-
-```tsx
-function DeleteDialog() {
-  return (
-    <dialog>
-      <Icon name="warning" size={64} />
-      <h2>Warning!</h2>
-      <p>Are you absolutely sure you want to delete?</p>
-      <p>This action is permanent and cannot be undone.</p>
-      <p>All associated data will be lost forever.</p>
-      <div>
-        <button>Cancel</button>
-        <button>Delete</button>
-        <button>Learn More</button>
-      </div>
-    </dialog>
-  );
-}
-```
-
-**Correct (essential information only):**
-
-```tsx
-function DeleteDialog() {
-  return (
-    <dialog>
-      <h2>Delete this item?</h2>
-      <p>This can't be undone.</p>
-      <div>
-        <button>Cancel</button>
-        <button>Delete</button>
-      </div>
-    </dialog>
-  );
-}
-```
-
-Reference: [Cognitive Load](https://lawsofux.com/cognitive-load/)

package/src/resources/skills/userinterface-wiki/rules/ux-common-region-boundaries.md

@@ -1,50 +0,0 @@
----
-title: Use Boundaries to Group Related Content
-impact: MEDIUM
-tags: ux, common-region, boundaries, grouping
----
-
-## Use Boundaries to Group Related Content
-
-Elements sharing a clearly defined boundary are perceived as a group.
-
-**Incorrect (flat list with no visual grouping):**
-
-```tsx
-function Settings() {
-  return (
-    <div>
-      <Toggle label="Dark mode" />
-      <Toggle label="Notifications" />
-      <Input label="Email" />
-      <Input label="Password" />
-    </div>
-  );
-}
-```
-
-**Correct (bounded sections):**
-
-```tsx
-function Settings() {
-  return (
-    <div>
-      <section className={styles.group}>
-        <h3>Appearance</h3>
-        <Toggle label="Dark mode" />
-      </section>
-      <section className={styles.group}>
-        <h3>Notifications</h3>
-        <Toggle label="Notifications" />
-      </section>
-      <section className={styles.group}>
-        <h3>Account</h3>
-        <Input label="Email" />
-        <Input label="Password" />
-      </section>
-    </div>
-  );
-}
-```
-
-Reference: [Law of Common Region](https://lawsofux.com/law-of-common-region/)

package/src/resources/skills/userinterface-wiki/rules/ux-doherty-perceived-speed.md

@@ -1,29 +0,0 @@
----
-title: Fake Speed When Actual Speed Isn't Possible
-impact: HIGH
-tags: ux, doherty, perceived-speed, skeleton
----
-
-## Fake Speed When Actual Speed Isn't Possible
-
-If you can't make something fast, make it feel fast with optimistic UI, skeletons, or progress indicators.
-
-**Incorrect (blank screen during load):**
-
-```tsx
-function Page() {
-  const { data, isLoading } = useFetch("/api/data");
-  if (isLoading) return null;
-  return <Content data={data} />;
-}
-```
-
-**Correct (skeleton during load):**
-
-```tsx
-function Page() {
-  const { data, isLoading } = useFetch("/api/data");
-  if (isLoading) return <Skeleton />;
-  return <Content data={data} />;
-}
-```

package/src/resources/skills/userinterface-wiki/rules/ux-doherty-under-400ms.md

@@ -1,30 +0,0 @@
----
-title: Respond Within 400ms
-impact: CRITICAL
-tags: ux, doherty, latency, response-time
----
-
-## Respond Within 400ms
-
-Interactions must respond within 400ms to feel instant. Above this threshold, users notice delay.
-
-**Incorrect (no feedback during loading):**
-
-```tsx
-async function handleClick() {
-  const data = await fetchData();
-  setResult(data);
-}
-```
-
-**Correct (immediate optimistic feedback):**
-
-```tsx
-async function handleClick() {
-  setResult(optimisticData);
-  const data = await fetchData();
-  setResult(data);
-}
-```
-
-Reference: Doherty, W. J. (1979). Managing VM/CMS systems for user effectiveness.