niahere 0.2.61 → 0.2.63

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

@@ -0,0 +1,16 @@
+---
+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/skills/userinterface-wiki/rules/type-underline-offset.md

@@ -0,0 +1,25 @@
+---
+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/skills/userinterface-wiki/rules/type-variable-weight-continuous.md

@@ -0,0 +1,23 @@
+---
+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/skills/userinterface-wiki/rules/ux-aesthetic-usability.md

@@ -0,0 +1,32 @@
+---
+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/skills/userinterface-wiki/rules/ux-cognitive-load-reduce.md

@@ -0,0 +1,49 @@
+---
+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/skills/userinterface-wiki/rules/ux-common-region-boundaries.md

@@ -0,0 +1,50 @@
+---
+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/skills/userinterface-wiki/rules/ux-doherty-perceived-speed.md

@@ -0,0 +1,29 @@
+---
+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/skills/userinterface-wiki/rules/ux-doherty-under-400ms.md

@@ -0,0 +1,30 @@
+---
+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.

package/skills/userinterface-wiki/rules/ux-fitts-hit-area.md

@@ -0,0 +1,32 @@
+---
+title: Expand Hit Areas with Invisible Padding
+impact: HIGH
+tags: ux, fitts, hit-area, pseudo
+---
+
+## Expand Hit Areas with Invisible Padding
+
+Use pseudo-elements or invisible padding to expand clickable areas beyond visible bounds.
+
+**Incorrect (visible size equals hit area):**
+
+```css
+.link {
+  font-size: 14px;
+  /* Hit area matches text only */
+}
+```
+
+**Correct (expanded invisible hit area):**
+
+```css
+.link {
+  position: relative;
+}
+
+.link::before {
+  content: "";
+  position: absolute;
+  inset: -8px -12px;
+}
+```

package/skills/userinterface-wiki/rules/ux-fitts-target-size.md

@@ -0,0 +1,31 @@
+---
+title: Size Interactive Targets for Easy Clicking
+impact: HIGH
+tags: ux, fitts, target-size
+---
+
+## Size Interactive Targets for Easy Clicking
+
+The bigger something is, the easier it is to click. Make interactive elements large enough to hit comfortably.
+
+**Incorrect (tiny click target):**
+
+```css
+.icon-button {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+```
+
+**Correct (comfortable target):**
+
+```css
+.icon-button {
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+}
+```
+
+Reference: Fitts, P. M. (1954). The information capacity of the human motor system.

package/skills/userinterface-wiki/rules/ux-goal-gradient-progress.md

@@ -0,0 +1,33 @@
+---
+title: Show Progress Toward Completion
+impact: HIGH
+tags: ux, goal-gradient, progress, motivation
+---
+
+## Show Progress Toward Completion
+
+People accelerate behavior as they approach a goal. Show how close they are to finishing.
+
+**Incorrect (no sense of progress):**
+
+```tsx
+function Onboarding({ step }) {
+  return <OnboardingStep step={step} />;
+}
+```
+
+**Correct (progress visible):**
+
+```tsx
+function Onboarding({ step, totalSteps }) {
+  return (
+    <div>
+      <ProgressBar value={step} max={totalSteps} />
+      <span>Step {step} of {totalSteps}</span>
+      <OnboardingStep step={step} />
+    </div>
+  );
+}
+```
+
+Reference: [Goal-Gradient Effect](https://lawsofux.com/goal-gradient-effect/)

package/skills/userinterface-wiki/rules/ux-hicks-minimize-choices.md

@@ -0,0 +1,45 @@
+---
+title: Minimize Choices to Reduce Decision Time
+impact: HIGH
+tags: ux, hicks, choices, cognitive-load
+---
+
+## Minimize Choices to Reduce Decision Time
+
+Decision time increases logarithmically with the number of choices. Use progressive disclosure.
+
+**Incorrect (all options at once):**
+
+```tsx
+function Settings() {
+  return (
+    <div>
+      {allSettings.map(setting => (
+        <SettingRow key={setting.id} {...setting} />
+      ))}
+    </div>
+  );
+}
+```
+
+**Correct (progressive disclosure):**
+
+```tsx
+function Settings() {
+  return (
+    <div>
+      {commonSettings.map(setting => (
+        <SettingRow key={setting.id} {...setting} />
+      ))}
+      <details>
+        <summary>Advanced</summary>
+        {advancedSettings.map(setting => (
+          <SettingRow key={setting.id} {...setting} />
+        ))}
+      </details>
+    </div>
+  );
+}
+```
+
+Reference: Hick, W. E. (1952). On the rate of gain of information.

package/skills/userinterface-wiki/rules/ux-jakobs-familiar-patterns.md

@@ -0,0 +1,37 @@
+---
+title: Use Familiar UI Patterns
+impact: HIGH
+tags: ux, jakobs, familiarity, patterns
+---
+
+## Use Familiar UI Patterns
+
+Users spend most of their time on other sites. They expect yours to work the same way (Jakob's Law).
+
+**Incorrect (custom unconventional navigation):**
+
+```tsx
+function Nav() {
+  return (
+    <nav>
+      <button onClick={() => navigate("/")}>⬡</button>
+      <button onClick={() => navigate("/search")}>⬢</button>
+    </nav>
+  );
+}
+```
+
+**Correct (standard recognizable patterns):**
+
+```tsx
+function Nav() {
+  return (
+    <nav>
+      <Link href="/">Home</Link>
+      <Link href="/search">Search</Link>
+    </nav>
+  );
+}
+```
+
+Reference: [Jakob's Law](https://lawsofux.com/jakobs-law/)

package/skills/userinterface-wiki/rules/ux-millers-chunking.md

@@ -0,0 +1,23 @@
+---
+title: Chunk Data into Groups of 5-9
+impact: HIGH
+tags: ux, millers, chunking, memory
+---
+
+## Chunk Data into Groups of 5-9
+
+Working memory holds about 7 items. Group and chunk large data sets so they're scannable.
+
+**Incorrect (raw unformatted data):**
+
+```tsx
+<span>4532015112830366</span>
+```
+
+**Correct (chunked for readability):**
+
+```tsx
+<span>4532 0151 1283 0366</span>
+```
+
+Reference: Miller, G. A. (1956). The magical number seven, plus or minus two.

package/skills/userinterface-wiki/rules/ux-pareto-prioritize-features.md

@@ -0,0 +1,36 @@
+---
+title: Prioritize the Critical 20% of Features
+impact: MEDIUM
+tags: ux, pareto, prioritization, features
+---
+
+## Prioritize the Critical 20% of Features
+
+80% of users use 20% of features (Pareto Principle). Optimize the critical path first.
+
+**Incorrect (all features equally prominent):**
+
+```tsx
+function Toolbar() {
+  return (
+    <div>
+      {allFeatures.map(f => <Button key={f.id}>{f.label}</Button>)}
+    </div>
+  );
+}
+```
+
+**Correct (critical features prominent, rest accessible):**
+
+```tsx
+function Toolbar() {
+  return (
+    <div>
+      {criticalFeatures.map(f => <Button key={f.id}>{f.label}</Button>)}
+      <MoreMenu features={secondaryFeatures} />
+    </div>
+  );
+}
+```
+
+Reference: [Pareto Principle](https://lawsofux.com/pareto-principle/)

package/skills/userinterface-wiki/rules/ux-peak-end-finish-strong.md

@@ -0,0 +1,35 @@
+---
+title: End Experiences with Clear Success States
+impact: MEDIUM
+tags: ux, peak-end, success, completion
+---
+
+## End Experiences with Clear Success States
+
+People judge experiences by their peak moment and their end. Invest in success and completion states.
+
+**Incorrect (abrupt end after action):**
+
+```tsx
+async function handleSubmit() {
+  await submitForm(data);
+  router.push("/");
+}
+```
+
+**Correct (satisfying completion state):**
+
+```tsx
+async function handleSubmit() {
+  await submitForm(data);
+  setStatus("success");
+}
+
+return status === "success" ? (
+  <SuccessScreen message="You're all set." />
+) : (
+  <Form onSubmit={handleSubmit} />
+);
+```
+
+Reference: [Peak-End Rule](https://lawsofux.com/peak-end-rule/)

package/skills/userinterface-wiki/rules/ux-postels-accept-messy-input.md

@@ -0,0 +1,45 @@
+---
+title: Accept Messy Input, Output Clean Data
+impact: MEDIUM
+tags: ux, postels, input, validation
+---
+
+## Accept Messy Input, Output Clean Data
+
+Inputs should accept messy human data and normalize it. Validate generously, format strictly.
+
+**Incorrect (rigid format required):**
+
+```tsx
+function DateInput({ onChange }) {
+  return (
+    <input
+      type="text"
+      placeholder="YYYY-MM-DD"
+      pattern="\d{4}-\d{2}-\d{2}"
+      onChange={onChange}
+    />
+  );
+}
+```
+
+**Correct (accepts multiple formats):**
+
+```tsx
+function DateInput({ onChange }) {
+  function handleChange(e) {
+    const parsed = parseFlexibleDate(e.target.value);
+    if (parsed) onChange(parsed);
+  }
+
+  return (
+    <input
+      type="text"
+      placeholder="Any date format"
+      onChange={handleChange}
+    />
+  );
+}
+```
+
+Reference: Postel, J. (1980). RFC 761 — Transmission Control Protocol.

package/skills/userinterface-wiki/rules/ux-pragnanz-simplify.md

@@ -0,0 +1,33 @@
+---
+title: Simplify Complex Visuals into Clear Forms
+impact: MEDIUM
+tags: ux, pragnanz, simplicity, clarity
+---
+
+## Simplify Complex Visuals into Clear Forms
+
+People interpret complex visuals as the simplest form possible. Reduce visual noise to aid comprehension.
+
+**Incorrect (visually noisy layout):**
+
+```css
+.card {
+  border: 2px dashed red;
+  background: linear-gradient(45deg, #f0f, #0ff);
+  box-shadow: 5px 5px 0 black, 10px 10px 0 gray;
+  outline: 3px dotted blue;
+}
+```
+
+**Correct (clear, simple form):**
+
+```css
+.card {
+  background: var(--gray-2);
+  border: 1px solid var(--gray-a4);
+  border-radius: 12px;
+  box-shadow: var(--shadow-1);
+}
+```
+
+Reference: [Law of Prägnanz](https://lawsofux.com/law-of-pragnanz/)

package/skills/userinterface-wiki/rules/ux-progressive-disclosure.md

@@ -0,0 +1,41 @@
+---
+title: Show What Matters Now, Reveal Complexity Later
+impact: HIGH
+tags: ux, progressive-disclosure, complexity
+---
+
+## Show What Matters Now, Reveal Complexity Later
+
+Don't overwhelm users with everything at once. Reveal complexity incrementally as needed.
+
+**Incorrect (all controls visible):**
+
+```tsx
+function Editor() {
+  return (
+    <div>
+      <BasicTools />
+      <AdvancedTools />
+      <ExpertTools />
+      <DebugTools />
+    </div>
+  );
+}
+```
+
+**Correct (progressive disclosure):**
+
+```tsx
+function Editor() {
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  return (
+    <div>
+      <BasicTools />
+      {showAdvanced && <AdvancedTools />}
+      <button onClick={() => setShowAdvanced(!showAdvanced)}>
+        Toggle
+      </button>
+    </div>
+  );
+}
+```