analyzthis_design 2.5.0 → 2.5.2

package/dist/lib/system-prompt.js

@@ -32,8 +32,11 @@ function buildPrompt(opts) {
   lines.push('');
   lines.push('**CRITIQUE** — Review an existing screen. Run personas: Arjun (UX + Visual) + Meera (Business) -> Priya (Feasibility) + Zara (Delight) -> Raj (synthesis). Output: composite score, SHIP/REVISE/BLOCK verdict, top 3 fixes.');
   lines.push('');
+  lines.push('**DIRECTION** — Mood board (tagged URLs) or UI image board. For a UI board, Zara scouts 3-5 real shipped screens (never invent URLs, never generate AI comps). Arjun, Noor, Priya, Meera jury. She re-scouts if they skip (max 3 rounds).');
+  lines.push('');
   lines.push('When the user says "design", "wireframe", "ideate", or "create" -> run CREATE mode.');
   lines.push('When the user says "review", "critique", "audit", or "fix" -> run CRITIQUE mode.');
+  lines.push('When the user says "mood board", "UI board", "image board", or "visual direction" -> run DIRECTION mode.');
   lines.push('');
 
   lines.push('## Premise challenge (critical)');

package/dist/lib/ui-libraries.js

@@ -0,0 +1,232 @@
+'use strict';
+
+/**
+ * Detect installed motion / UX / visual-design libraries from package.json
+ * and copy-paste kit folders. Personas read Tech/Installed-UI-Libraries.md
+ * and session.installed_ui_libraries instead of guessing the stack.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const retrieve = require('./retrieve');
+
+const DEFAULT_BY_JOB = {
+  primitives: 'Shadcn UI',
+  motion: 'Motion',
+  icons: 'Lucide',
+};
+
+const FOLDER_CANDIDATES = [
+  'components/ui',
+  'src/components/ui',
+  'app/components/ui',
+  'components/magicui',
+  'src/components/magicui',
+  'components/aceternity',
+  'src/components/aceternity',
+];
+
+function catalogRows() {
+  try {
+    return retrieve.loadCsv('ui-libraries.csv').rows || [];
+  } catch {
+    return [];
+  }
+}
+
+function splitAliases(field) {
+  return String(field || '')
+    .split(';')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function npmMatches(depName, npmField) {
+  return splitAliases(npmField).some((alias) => {
+    if (alias.endsWith('/*')) {
+      const prefix = alias.slice(0, -1);
+      const pkg = alias.slice(0, -2);
+      return depName === pkg || depName.startsWith(prefix);
+    }
+    return depName === alias;
+  });
+}
+
+function readPackageDeps(cwd) {
+  const pkgPath = path.join(cwd, 'package.json');
+  if (!fs.existsSync(pkgPath)) return { deps: [], pkgPath: null };
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    const names = Object.keys({
+      ...(pkg.dependencies || {}),
+      ...(pkg.devDependencies || {}),
+    });
+    return { deps: names, pkgPath };
+  } catch {
+    return { deps: [], pkgPath };
+  }
+}
+
+function folderExists(cwd, rel) {
+  try {
+    return fs.statSync(path.join(cwd, rel)).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+function detectFolders(cwd) {
+  const found = [];
+  for (const rel of FOLDER_CANDIDATES) {
+    if (folderExists(cwd, rel)) found.push(rel);
+  }
+  return found;
+}
+
+function folderHitsRow(foundFolders, detectionFolders) {
+  const needles = splitAliases(detectionFolders).filter(Boolean);
+  if (!needles.length) return false;
+  return foundFolders.some((rel) =>
+    needles.some((n) => rel === n || rel.endsWith('/' + n) || rel.indexOf(n) !== -1));
+}
+
+/**
+ * @param {{ cwd: string }} opts
+ * @returns {{ installed: object[], missing_defaults: object[], folders: string[], full_kits: string[], mixed_kits: boolean }}
+ */
+function detectInstalledUiLibraries({ cwd } = {}) {
+  const root = path.resolve(cwd || process.cwd());
+  const { deps } = readPackageDeps(root);
+  const folders = detectFolders(root);
+  const rows = catalogRows();
+  const installed = [];
+  const seen = new Set();
+
+  for (const row of rows) {
+    const byNpm = deps.some((d) => npmMatches(d, row['Npm Names']));
+    const byFolder = folderHitsRow(folders, row['Detection Folders']);
+    if (!byNpm && !byFolder) continue;
+    const name = row.Library;
+    if (seen.has(name)) continue;
+    seen.add(name);
+    installed.push({
+      library: name,
+      job: row.Job,
+      persona: row.Persona,
+      import_example: row['Import Example'],
+      docs: row['Docs URL'],
+      do_not_use_for: row['Do Not Use For'],
+      bundle_hint: row['Bundle Hint'],
+      how: byNpm ? (byFolder ? 'package+folder' : 'package.json') : 'folder',
+    });
+  }
+
+  const jobsPresent = new Set(installed.map((i) => i.job));
+  const missing_defaults = [];
+  Object.keys(DEFAULT_BY_JOB).forEach((job) => {
+    if (jobsPresent.has(job)) return;
+    // full-kit covers primitives
+    if (job === 'primitives' && jobsPresent.has('full-kit')) return;
+    const libName = DEFAULT_BY_JOB[job];
+    const row = rows.find((r) => r.Library === libName);
+    missing_defaults.push({
+      job,
+      library: libName,
+      install: row ? row.Install : '',
+      docs: row ? row['Docs URL'] : '',
+    });
+  });
+
+  const full_kits = installed.filter((i) => i.job === 'full-kit').map((i) => i.library);
+  const hasShadcn = installed.some((i) => i.library === 'Shadcn UI' || i.library === 'Radix UI');
+  const mixed_kits = full_kits.length > 1 || (full_kits.length > 0 && hasShadcn);
+
+  return { installed, missing_defaults, folders, full_kits, mixed_kits };
+}
+
+function buildNoteMarkdown(detection) {
+  const date = new Date().toISOString().split('T')[0];
+  const installed = detection.installed || [];
+  const missing = detection.missing_defaults || [];
+  const lines = [
+    '---',
+    'title: Installed-UI-Libraries',
+    'tags: [tech, ui-libraries]',
+    'source: package.json',
+    'category: tech',
+    `collected_at: "${date}"`,
+    'enriched: true',
+    '---',
+    '',
+    '## Purpose',
+    'Libraries already in this repo that design personas must prefer. One library per job. Do not add a second full UI kit. Do not put marketing FX (Magic UI, Aceternity, 21st.dev, Lottie, Spline) on daily working dashboards.',
+    '',
+    '## Installed',
+  ];
+  if (!installed.length) {
+    lines.push('- _(none of the catalogued packages detected)_');
+  } else {
+    for (const i of installed) {
+      lines.push(`- **${i.library}** (${i.job}) via ${i.how} — \`${i.import_example}\``);
+    }
+  }
+  lines.push('', '## Missing defaults (optional — do not install unless the brief needs them)');
+  if (!missing.length) {
+    lines.push('- All default jobs covered.');
+  } else {
+    for (const m of missing) {
+      lines.push(`- **${m.job}:** ${m.library} — \`${m.install}\``);
+    }
+  }
+  lines.push('', '## Kit rule');
+  if (detection.mixed_kits) {
+    lines.push('- **BLOCK mix:** more than one full kit (or a full kit plus Shadcn) is present. Priya: do not add more. Use the incumbent kit.');
+  } else if (detection.full_kits && detection.full_kits.length) {
+    lines.push(`- Incumbent full kit: **${detection.full_kits.join(', ')}**. Prescribe this kit's components; do not start a Shadcn tree.`);
+  } else {
+    lines.push('- No full kit detected. Shadcn + Radix is the greenfield default for Tailwind apps.');
+  }
+  lines.push('', '## Folders found');
+  if (!(detection.folders || []).length) {
+    lines.push('- _(none)_');
+  } else {
+    for (const f of detection.folders) lines.push(`- \`${f}\``);
+  }
+  lines.push('');
+  return lines.join('\n');
+}
+
+function writeInstalledUiLibrariesNote({ vaultPath, detection, dryRun }) {
+  const md = buildNoteMarkdown(detection);
+  const rel = path.join('Tech', 'Installed-UI-Libraries.md');
+  if (dryRun || !vaultPath) {
+    return { vaultRel: rel, written: false, markdown: md };
+  }
+  const destDir = path.join(vaultPath, 'Tech');
+  fs.mkdirSync(destDir, { recursive: true });
+  const dest = path.join(destDir, 'Installed-UI-Libraries.md');
+  fs.writeFileSync(dest, md);
+  return { vaultRel: rel, written: true, markdown: md, dest };
+}
+
+function sessionPayload(detection) {
+  return {
+    installed: (detection.installed || []).map((i) => ({
+      library: i.library,
+      job: i.job,
+      how: i.how,
+    })),
+    missing_defaults: detection.missing_defaults || [],
+    full_kits: detection.full_kits || [],
+    mixed_kits: !!detection.mixed_kits,
+    folders: detection.folders || [],
+  };
+}
+
+module.exports = {
+  detectInstalledUiLibraries,
+  writeInstalledUiLibrariesNote,
+  buildNoteMarkdown,
+  sessionPayload,
+  DEFAULT_BY_JOB,
+};

package/dist/skills/anuj/SKILL.md

@@ -31,6 +31,8 @@ You cannot know host tokens. Do not invent a dollar figure.
 ## Non-negotiables
 
 - **Density never flattens the information hierarchy.** Whatever ranks #1 in Noor's declared hierarchy (or the most business-critical column/data point if no ranking was declared) stays the most prominent element on screen — leftmost column, largest, first-sorted, or otherwise visually dominant — even at full data density. "Everything is visible" is not the same as "everything is equally important."
+- **Harden for production edge cases:** Audit that high-density tables and forms handle text overflow (`truncate`, `line-clamp-2`), extreme data lengths, zero/empty states, loading states, error boundaries, and form state hardening (`[ux-guidelines.csv, row 84, 110]`).
+- **Prefer installed power-user libs:** If `installed_ui_libraries` has TanStack Table/Virtual, CMDK, Auto-Animate, `nuqs`, or a hotkeys library, specify those imports. Otherwise Shadcn Table + note “add TanStack if volume is high.” CMDK for Cmd+K on daily surfaces.
 - Every data table has bulk selection
 - Any action taken >10×/session has a keyboard shortcut
 - Column configuration is user-controllable
@@ -38,7 +40,7 @@ You cannot know host tokens. Do not invent a dollar figure.
 
 ## What you fight against
 
-Wizard flows that fragment a single task across multiple screens. Progressive disclosure that hides data expert users need immediately. "Clean" interfaces that strip data under the banner of simplicity.
+Wizard flows that fragment a single task across multiple screens. Progressive disclosure that hides data expert users need immediately. "Clean" interfaces that strip data under the banner of simplicity. Fragile layouts that break when text overflows or data volume surges.
 
 ## Output — Concept B (text wireframe format)
 
@@ -93,6 +95,7 @@ Read from `~/.cursor/skills/design-reference/` to ground power-user critique in
 | `app-interface.csv` | When mobile or React Native is in scope — cite touch target rules and gesture patterns |
 | `ui-reasoning.csv` | When auditing the default state — check `Recommended_Pattern` for the product category to verify density is appropriate |
 | `stacks/shadcn.csv` | When design system is ShadCN — confirm that DataTable, Command, and bulk-action components exist before specifying them |
+| `ui-libraries.csv` | Table, command, hotkeys, url-state rows — cite Import Example; prefer installed |
 
 **How to use:** When auditing a surface for power-user gaps, read `ux-guidelines.csv` and filter by `Category` = "Navigation", "Interaction", or "Data Table". Cite the `Issue`, `Do`, and `Severity` columns to make the gap concrete and actionable.
 

package/dist/skills/arjun/SKILL.md

@@ -10,11 +10,11 @@ disable-model-invocation: true
 
 You are Arjun. Product designer who came up through user research — 200+ user sessions across B2B SaaS — operations, analytics, and workflow tools for expert users in high-pressure, time-scarce environments. You speak for users not in the room.
 
-You then spent 3 years on a design system team: built the token architecture, owned component specs, shipped 200+ production components. That means you run both the UX lens and the visual design lens in a single pass — you do not need to hand off basic visual quality issues to someone else. You know exactly why a layout feels unbalanced, why a palette feels wrong for the category, and why spacing that isn't on a scale creates visual noise, and you can name the fix precisely.
+You then spent 3 years on a design system team: built the token architecture, owned component specs, shipped 200+ production components. That means you run both the UX lens and the visual design lens in a single pass — you do not need to hand off basic visual quality issues to someone else. You know exactly why a layout feels unbalanced, why a palette feels wrong for the category, and why spacing that isn't on a scale creates visual noise, and you can name the fix precisely. You actively scan for and eliminate generic AI-slop patterns (card nesting syndrome, un-tinted pure blacks, gray text on colored badges, purple gradient clichés, and bouncy animations).
 
 ## Allowed / forbidden jobs
 
-**Allowed:** UX Honeycomb critique; the full Visual Design Audit (hierarchy, color, typography, spacing, components, style fit, micro-interactions); diagnosing visual issues against the declared information hierarchy and DS tokens.
+**Allowed:** UX Honeycomb critique; the full Visual Design Audit (hierarchy, color, typography, spacing, components, style fit, micro-interactions, anti-slop craftsmanship checks, bolder vs. quieter balance); diagnosing visual issues against the declared information hierarchy and DS tokens.
 
 **Forbidden:** brand-system recovery as a primary job — this is a diagnostic pass only, using `colors.csv` + knowledge bank tokens, never CSS patches or `!important` overrides; running a delight pass (hand off to Zara); implementing code without explicit build approval (see Assess-only below).
 

package/dist/skills/arjun/references/lens.md

@@ -214,8 +214,19 @@ Combined Arjun score: (UX score + Visual score) / 2 → [X/5]
 - Missing timestamps users repeatedly asked for
 - Modal interruptions that break expert mid-flow
 - Single-session generalizations — always qualify with sample size
-
-**Visual:**
+- Touch targets under 44×44px on mobile or tablet surfaces (`[ux-guidelines.csv, row 109]`)
+
+**Visual & Anti-AI-Slop Checks:**
+- **Card Nesting Syndrome:** Wrapping every section in nested cards (`div.card > div.card > div.card`). Flag this and replace with clean whitespace, subtle horizontal rules, and typographic hierarchy (`[ux-guidelines.csv, row 100]`).
+- **Untinted / Harsh Neutrals:** Pure `#000000` black or dead `#888888` gray with zero undertone. Replace with brand-tinted neutrals (e.g. slate, zinc, warm gray) (`[ux-guidelines.csv, row 101]`).
+- **Gray Text on Colored Backgrounds:** Light or medium gray text placed on colored hero sections, pills, or cards that destroys WCAG contrast. Enforce high-contrast tinted white/dark tones (`[ux-guidelines.csv, row 102]`).
+- **AI Purple/Blue Gradient Clichés:** Defaulting to generic purple-to-blue or pink gradient text and cards on every screen. Use intentional brand palettes, crisp solid accents, or clean subtle tinted backgrounds (`[ux-guidelines.csv, row 103]`).
+- **Heading Icon Tile Crutch:** Sticking a rounded-square bordered icon tile above every single section heading. Use strong typographic hierarchy instead of decorative icon crutches (`[ux-guidelines.csv, row 104]`).
+- **Bouncy / Elastic Easing:** Bouncy, elastic spring overshoot or animations >400ms that feel gimmicky. Enforce crisp 150–250ms ease-out transitions (`[ux-guidelines.csv, row 105]`).
+- **Runaway Reading Width:** Paragraphs stretching beyond 75 characters per line without max-width constraint. Constrain reading columns to 45–75ch (`[ux-guidelines.csv, row 106]`).
+- **Bolder vs. Quieter Balance:**
+  - *Too Timid (Needs to be Bolder):* Everything has identical medium font size and gray tint with no clear focal point. Scale rank #1 up, increase contrast, establish a dominant visual anchor (`[ux-guidelines.csv, row 107]`).
+  - *Over-Decorated (Needs to be Quieter):* Every widget has borders, badges, glows, and shadows. Strip away redundant borders and let white space carry the structure (`[ux-guidelines.csv, row 108]`).
 - Visual hierarchy doesn't match the declared information hierarchy — the most important element isn't the most visually prominent one, even when Noor's ranking says it should be
 - Wrong product-type style — e.g. an editorial serif like Playfair Display on a developer tool signals luxury, not technical trust
 - Spacing chaos — 7px, 13px, 22px gaps instead of a consistent 4/8/16/32 scale
@@ -259,6 +270,8 @@ Read from `~/.cursor/skills/design-reference/` when grounding critique in specif
 | `colors.csv` | Always for the Visual Design Audit — grounds the Color System dimension. Filter: match `Product Type` to the session context product, then compare the design's actual palette against the recommended tokens. |
 | `typography.csv` | Always for the Visual Design Audit — grounds the Typography dimension. Filter: match `Best For` and `Mood/Style Keywords` to the session context product type. |
 | `icons.csv` | When icons are visible on the screen — audit for family and weight consistency. Check whether all icons come from the same family (e.g., Phosphor) and share the same visual weight (e.g., all regular, not a mix of regular and bold). |
+| `motion.csv` | Always for Micro-interactions — cite Timing and Easing. Flag bounce and >400ms. |
+| `ui-libraries.csv` | Always — tokens, typography, icons, charts, a11y. Prefer `installed_ui_libraries`. One icon family (Lucide or Phosphor). Floating UI for popover collision. Tremor/Recharts for dashboards. Fontsource/`next/font` when present. |
 
 **How to use:** Filter rows by product type or platform matching the session context. Quote the `Do`, `Don't`, and `Severity` columns directly in your critique instead of giving abstract advice.
 

package/dist/skills/design-director/SKILL.md

@@ -108,6 +108,8 @@ Read `skills/arjun/SKILL.md` — scoped **spec review only**:
 - Typography scale consistent?
 - Spacing rhythm (`tokens.spacing`) sufficient?
 - Color classes WCAG-safe per knowledge bank?
+- Anti-slop craftsmanship checks: no nested cards, no untinted pure black/gray, no gray text on colored backgrounds, and motion timing locked to 150–250ms ease-out (`[ux-guidelines.csv, row 100-105]`, `[motion.csv, row 1]`).
+- If `motion.enabled`: library + import from installed or `ui-libraries.csv`; `reduced_motion` filled; no Magic UI / Aceternity / Lottie on daily surfaces.
 
 Update `spec_verdict`. All three pass → set `"status": "ship"`.
 

package/dist/skills/design-reference/SKILL.md

@@ -25,6 +25,8 @@ Shared knowledge base for all 7 design personas. Each CSV covers a specific desi
 | `landing.csv` | Landing page layout patterns — section order, CTA placement, color strategy, conversion optimization | Meera, Zara |
 | `charts.csv` | 25 chart types — when to use, when not to use, accessibility grade, library recommendation | Arjun, Zara |
 | `icons.csv` | Phosphor icon catalog — name, keywords, import code, usage context, style | Noor, Zara |
+| `motion.csv` | Motion craft rules — enter/exit, layout, hover, lists, celebration, reduced-motion, timings | Zara, Arjun |
+| `ui-libraries.csv` | Motion, UX, and visual-design packages — npm names, jobs, imports, when not to use | Zara, Arjun, Anuj, Noor, Priya |
 | `react-performance.csv` | React rendering patterns — memoization, lazy loading, virtualization, bundle splitting | Priya |
 | `stacks/nextjs.csv` | Next.js-specific patterns and component guidance | Priya |
 | `stacks/react.csv` | React-specific patterns | Priya |
@@ -52,6 +54,8 @@ Every time you cite a value from a reference file, use this format inline:
 - `[ui-reasoning.csv, row 6: "Financial Dashboard — must_have: real-time-updates, must_have: high-contrast"]`
 - `[styles.csv, row 14: "Glassmorphism — Effects: backdrop-blur(20px) + border: 1px rgba(255,255,255,0.2)"]`
 - `[stacks/shadcn.csv, row 8: "DataTable — supports column visibility toggle and row selection"]`
+- `[motion.csv, row 1: "Animate enter with 150-250ms ease-out — Severity: High"]`
+- `[ui-libraries.csv, row 23: "CMDK — Job: command — daily power-user palettes"]`
 
 **Never cite abstractly.** "Add a 44px touch target" is wrong. `[ux-guidelines.csv, row 22: "Minimum 44×44px — Severity: High"]` is correct. The row number and quoted value make the output reproducible across AI sessions.
 
@@ -74,6 +78,8 @@ All files live at: `~/.cursor/skills/design-reference/`
 ├── landing.csv
 ├── charts.csv
 ├── icons.csv
+├── motion.csv
+├── ui-libraries.csv
 ├── react-performance.csv
 └── stacks/
     ├── nextjs.csv

package/dist/skills/design-reference/motion.csv

@@ -0,0 +1,11 @@
+No,Category,Library,Timing,Easing,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,enter-exit,motion,150-250ms,ease-out,Animate enter with 150-250ms ease-out and exit slightly faster; wrap lists in AnimatePresence,Use bounce elastic or durations over 400ms on UI chrome,"<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.2; ease: 'easeOut' }}>","<motion.div animate={{ y: [0;-8;0] }} transition={{ type: 'spring'; bounce: 0.6 }}>",High
+2,layout,motion,200-300ms,ease-out,Use layout or layoutId for shared-element moves so the eye can track rank #1,Animate top/left/width/height (layout thrash) or skip layout animation entirely,"<motion.div layoutId=""primary-cta"" transition={{ duration: 0.22; ease: 'easeOut' }}>","style={{ top: animatedTop }} without transform",Medium
+3,hover-tap,motion,150ms,ease-out,Hover and press feedback in 150ms; keep scale under 1.03 on product UI,Elastic spring on buttons or hover that moves layout,"<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} transition={{ duration: 0.15 }}>","whileHover={{ scale: 1.15 }} transition={{ type: 'spring'; bounce: 0.8 }}",High
+4,list,@formkit/auto-animate,200ms,ease-out,Use Auto-Animate for insert/remove/reorder on tables and filters when the package is installed,Hand-roll FLIP or bounce rows in and out,useAutoAnimate() on the tbody or list parent,animate-bounce on every new table row,Medium
+5,scroll,lenis,n/a,smooth,Lenis only on marketing or long-scroll storytelling pages,Smooth-scroll hijack on app chrome dashboards or data tables,Lenis on a landing page with prefers-reduced-motion disable,new Lenis() on an invoice queue,High
+6,celebration,canvas-confetti,one-shot,n/a,Fire confetti once at a Peak-End milestone (first success) then never again on that surface,Confetti on every save click or page load,"confetti({ particleCount: 60; spread: 50 }) once on first invoice created",confetti() inside a useEffect with no guard,High
+7,reduced-motion,css,0ms,none,Honor prefers-reduced-motion: reduce — opacity only or no motion,Ignore the media query or force parallax,"@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }",ScrollTrigger parallax with no reduced-motion branch,High
+8,enter-exit,motion,400ms+,bounce,Never use bounce or elastic easing on menus dialogs dropdowns or tables,animate-bounce or spring bounce > 0.2 on product chrome,transition={{ duration: 0.2; ease: 'easeOut' }},className=""animate-bounce"" on a Sheet,High
+9,celebration,lottie-react,one-shot,n/a,Lottie or Rive only as Zara's single peak on onboarding or empty-state illustration,Looping Lottie on a daily dashboard,"<Lottie animationData={success} loop={false} /> inside prefers-reduced-motion check","<Lottie loop autoplay /> in the app shell",High
+10,hover-tap,css,150-250ms,ease-out,CSS transitions with transform and opacity are enough when Motion is not installed,Animate width height top left or box-shadow on every hover,transition-transform duration-200 ease-out hover:scale-[1.02],transition-all duration-700 ease-in-out hover:h-32,Medium

package/dist/skills/design-reference/schema.json

@@ -70,6 +70,18 @@
       "no_column": "No",
       "evolve_persona": "priya"
     },
+    "motion.csv": {
+      "header": ["No", "Category", "Library", "Timing", "Easing", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"],
+      "filter_column": "Category",
+      "no_column": "No",
+      "evolve_persona": "zara"
+    },
+    "ui-libraries.csv": {
+      "header": ["No", "Library", "Npm Names", "Job", "Best For Tags", "Do Not Use For", "Import Example", "Install", "Docs URL", "Persona", "Bundle Hint", "Reduced Motion", "Detection Folders"],
+      "filter_column": "Best For Tags",
+      "no_column": "No",
+      "evolve_persona": "arjun"
+    },
     "stacks/angular.csv": {
       "header": ["No", "Category", "Guideline", "Description", "Do", "Don't", "Code Good", "Code Bad", "Severity", "Docs URL"],
       "filter_column": "Category",

package/dist/skills/design-reference/stacks/shadcn.csv

@@ -59,3 +59,9 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
 58,Customization,Create custom components,Build new components following shadcn patterns,Use cn() and cva for custom components,Different patterns for custom,const Custom = ({ className }) => <div className={cn("base" className)}>,const Custom = ({ style }) => <div style={style}>,Medium,
 59,Patterns,Use asChild for composition,asChild prop for component composition,Slot pattern with asChild,Wrapper divs for composition,<Button asChild><Link href="/">,<Button><Link href="/"></Link></Button>,Medium,https://ui.shadcn.com/docs/components/button
 60,Patterns,Combine with React Hook Form,Form + useForm for complete forms,RHF Controller with shadcn inputs,Custom form state management,<FormField control={form.control} name="email">,<Input value={email} onChange={(e) => setEmail(e.target.value)},High,https://ui.shadcn.com/docs/components/form
+61,Command,Compose Command with CMDK,Shadcn Command is built on cmdk — use it for Cmd+K palettes,Command + CommandInput + CommandList from components/ui/command,Custom dropdown search,<Command><CommandInput/><CommandList/>,input plus absolute div list,High,https://ui.shadcn.com/docs/components/command
+62,Table,Compose Table with TanStack Table,Use Shadcn Table markup with @tanstack/react-table for sort filter pagination,useReactTable plus Table TableHeader TableBody,Div grid pretending to be a data table,<Table><TableHeader/><TableBody/>,div.grid with 40 rows,High,https://ui.shadcn.com/docs/components/table
+63,Table,Virtualize dense tables,Pair TanStack Virtual with Shadcn Table when row count is high,useVirtualizer on table body,Render thousands of TableRow nodes,<TableBody> virtualized rows,map 10000 rows to TableRow,Medium,https://tanstack.com/virtual
+64,Form,Origin UI input patterns,Copy Origin UI input/select recipes into existing components/ui — do not start a second kit,Extend shadcn Input/Select,Install Origin as a parallel component tree,components/ui/input.tsx with Origin pattern,components/origin/input.tsx beside ui/,Medium,https://originui.com
+65,Sheet,Compose Sheet with Vaul,Mobile drawers should use Vaul via Shadcn Sheet,Sheet for mobile filters/settings,Dialog for side drawers on small screens,<Sheet><SheetContent side="bottom">,<Dialog> slide animation on mobile,Medium,https://ui.shadcn.com/docs/components/sheet
+66,Patterns,Prefer the installed kit,If Chakra Mantine HeroUI MUI or Ant Design is already in package.json use that kit not a new Shadcn tree,One primitive kit per app,Shadcn files plus Chakra Button on the same screen,Use existing kit Button,import { Button } from '@chakra-ui/react' and @/components/ui/button,High,https://ui.shadcn.com/docs

package/dist/skills/design-reference/ui-libraries.csv

@@ -0,0 +1,46 @@
+No,Library,Npm Names,Job,Best For Tags,Do Not Use For,Import Example,Install,Docs URL,Persona,Bundle Hint,Reduced Motion,Detection Folders
+1,Motion,motion;framer-motion,motion,saas;b2b;dashboard;landing;onboarding;motion;animation,Bounce easing on daily dashboards,"import { motion; AnimatePresence } from 'motion/react'",npm i motion,https://motion.dev,zara,medium,Honor prefers-reduced-motion; opacity-only fallback,
+2,Auto-Animate,@formkit/auto-animate,motion,saas;b2b;dashboard;table;list;motion,Decorative page-level motion,"import { useAutoAnimate } from '@formkit/auto-animate/react'",npm i @formkit/auto-animate,https://auto-animate.formkit.com,anuj,small (~2kB),Disable when reduced-motion,
+3,Lenis,lenis;@studio-freight/lenis,scroll,landing;marketing;storytelling;scroll,App chrome; dashboards; data tables,"import Lenis from 'lenis'",npm i lenis,https://github.com/darkroomengineering/lenis,noor,small,Disable smooth scroll when reduced-motion,
+4,canvas-confetti,canvas-confetti,celebration,onboarding;landing;celebration;first-run,Every save; daily working surfaces,"import confetti from 'canvas-confetti'",npm i canvas-confetti,https://github.com/catdad/canvas-confetti,zara,small,Skip entirely when reduced-motion,
+5,Lottie,lottie-react;lottie-web,motion,onboarding;empty-state;illustration;landing,Daily dashboards; looping chrome,"import Lottie from 'lottie-react'",npm i lottie-react,https://airbnb.io/lottie,zara,medium-heavy,Static frame when reduced-motion,
+6,Rive,@rive-app/react-canvas;@rive-app/react-webgl,motion,onboarding;marketing;illustration,Product tables; settings,"import { useRive } from '@rive-app/react-canvas'",npm i @rive-app/react-canvas,https://rive.app,zara,heavy,Pause/stop when reduced-motion,
+7,Shadcn UI,shadcn;class-variance-authority,primitives,saas;b2b;dashboard;forms;tailwind;shadcn,Second full kit beside Chakra/Mantine/MUI,"import { Button } from '@/components/ui/button'",npx shadcn@latest init,https://ui.shadcn.com,arjun,copy-paste (no runtime kit),n/a,components/ui
+8,Radix UI,@radix-ui/react-dialog;@radix-ui/react-dropdown-menu;@radix-ui/*,primitives,saas;b2b;a11y;shadcn;radix,Custom div role=button overlays,"import * as Dialog from '@radix-ui/react-dialog'",npm i @radix-ui/react-dialog,https://www.radix-ui.com,arjun,tree-shake per primitive,Focus trap built in,
+9,Base UI,@base-ui/react,primitives,saas;b2b;a11y;headless;forms,Mixing with Radix on the same control,"import { Dialog } from '@base-ui/react/dialog'",npm i @base-ui/react,https://base-ui.com,noor,medium,Built-in keyboard,components/ui
+10,Headless UI,@headlessui/react,primitives,saas;tailwind;a11y;forms,Second dialog stack beside Radix,"import { Dialog } from '@headlessui/react'",npm i @headlessui/react,https://headlessui.com,noor,medium,Focus management built in,
+11,React Aria,react-aria-components;react-aria,a11y,saas;b2b;a11y;government;healthcare,Ignoring the kit's labels and focus,"import { Button; Dialog } from 'react-aria-components'",npm i react-aria-components,https://react-spectrum.adobe.com/react-aria,arjun,medium,Full keyboard and ARIA,
+12,Chakra UI,@chakra-ui/react;@chakra-ui/*,full-kit,saas;b2b;dashboard;chakra,Adding Shadcn/Mantine on the same screen,"import { Button } from '@chakra-ui/react'",npm i @chakra-ui/react,https://chakra-ui.com,priya,heavy kit,Respect Chakra motion tokens,
+13,Mantine,@mantine/core;@mantine/hooks;@mantine/*,full-kit,saas;b2b;dashboard;mantine,Mixing with Chakra or Shadcn primitives,"import { Button } from '@mantine/core'",npm i @mantine/core,https://mantine.dev,priya,heavy kit,Use Mantine reduced-motion hook,
+14,HeroUI,@heroui/react;@nextui-org/react,full-kit,saas;landing;heroui;nextui,Second full kit,"import { Button } from '@heroui/react'",npm i @heroui/react,https://www.heroui.com,priya,heavy kit,Use kit motion props,
+15,Ark UI / Park UI,@ark-ui/react,full-kit,saas;headless;ark,Copying Shadcn files into an Ark app,"import { Dialog } from '@ark-ui/react/dialog'",npm i @ark-ui/react,https://ark-ui.com,priya,medium,Headless a11y,
+16,MUI,@mui/material;@mui/*,full-kit,enterprise;dashboard;mui,Greenfield Tailwind apps; mixing with Shadcn,"import Button from '@mui/material/Button'",detect only,https://mui.com,priya,heavy kit,Respect if installed; do not prescribe,
+17,Ant Design,antd,full-kit,enterprise;dashboard;antd,Greenfield Tailwind apps; mixing kits,"import { Button } from 'antd'",detect only,https://ant.design,priya,heavy kit,Respect if installed; do not prescribe,
+18,Floating UI,@floating-ui/react;@floating-ui/dom,a11y,saas;b2b;tooltip;popover;dropdown,Custom position:absolute tooltips,"import { useFloating } from '@floating-ui/react'",npm i @floating-ui/react,https://floating-ui.com,arjun,small,n/a,
+19,Vaul,vaul,primitives,mobile;sheet;drawer;shadcn,Desktop-only modal that should be Dialog,"import { Drawer } from 'vaul'",npm i vaul,https://vaul.emilkowal.ski,noor,small,Sheet animation honors reduced-motion,
+20,Sonner,sonner,feedback,saas;b2b;forms;toast;feedback,Custom toast stacks or alert() ,"import { toast } from 'sonner'",npm i sonner,https://sonner.emilkowal.ski,zara,small,No motion required,
+21,React Hook Form,react-hook-form,forms,saas;b2b;forms;settings,useState per field on large forms,"import { useForm } from 'react-hook-form'",npm i react-hook-form,https://react-hook-form.com,anuj,small,n/a,
+22,Zod,zod,forms,saas;b2b;forms;validation,Ad-hoc string checks with no schema,"import { z } from 'zod'",npm i zod,https://zod.dev,priya,small,n/a,
+23,CMDK,cmdk,command,saas;b2b;dashboard;power-user;command,Hiding all navigation behind Cmd+K only,"import { Command } from 'cmdk'",npm i cmdk,https://cmdk.paco.me,anuj,small,n/a,
+24,TanStack Table,@tanstack/react-table,table,saas;b2b;dashboard;table;density,Div-grid fake tables for >20 rows,"import { useReactTable } from '@tanstack/react-table'",npm i @tanstack/react-table,https://tanstack.com/table,anuj,medium,n/a,
+25,TanStack Virtual,@tanstack/react-virtual,table,dashboard;table;density;performance,Rendering 10k DOM rows,"import { useVirtualizer } from '@tanstack/react-virtual'",npm i @tanstack/react-virtual,https://tanstack.com/virtual,priya,small,n/a,
+26,Embla Carousel,embla-carousel-react,scroll,landing;marketing;carousel;mobile,Autoplay carousels on dashboards,"import useEmblaCarousel from 'embla-carousel-react'",npm i embla-carousel-react,https://www.embla-carousel.com,noor,small,Disable autoplay when reduced-motion,
+27,nuqs,nuqs,url-state,saas;b2b;dashboard;filters;share,Local-only filter state that must be shareable,"import { useQueryState } from 'nuqs'",npm i nuqs,https://nuqs.47ng.com,anuj,small,n/a,
+28,react-hotkeys-hook,react-hotkeys-hook;tinykeys,hotkeys,saas;b2b;dashboard;power-user;keyboard,Global shortcuts that steal browser find,"import { useHotkeys } from 'react-hotkeys-hook'",npm i react-hotkeys-hook,https://react-hotkeys-hook.vercel.app,anuj,small,n/a,
+29,Driver.js,driver.js,onboarding,onboarding;first-run;tour,Daily dashboards; unskippable overlays,"import { driver } from 'driver.js'",npm i driver.js,https://driverjs.com,noor,small,Skip motion; require Skip,
+30,Shepherd.js,shepherd.js,onboarding,onboarding;first-run;tour,Forced linear tours on expert surfaces,"import Shepherd from 'shepherd.js'",npm i shepherd.js,https://shepherdjs.dev,noor,medium,Skip and Back required,
+31,React Flow,@xyflow/react;reactflow,canvas,canvas;workflow;graph;diagram,CRUD tables or settings pages,"import { ReactFlow } from '@xyflow/react'",npm i @xyflow/react,https://reactflow.dev,priya,heavy,Only if the product is a graph,
+32,Tailwind CSS,tailwindcss,tokens,saas;b2b;landing;tailwind;tokens,Inline style={{}} design system,"import 'tailwindcss'",npm i tailwindcss,https://tailwindcss.com,arjun,build-time,n/a,
+33,CVA + tailwind-merge,class-variance-authority;tailwind-merge;clsx,tokens,saas;shadcn;tailwind;tokens,Duplicating variant class strings,"import { cva } from 'class-variance-authority'; import { twMerge } from 'tailwind-merge'",npm i class-variance-authority tailwind-merge clsx,https://cva.style,arjun,tiny,n/a,
+34,tailwindcss-animate,tailwindcss-animate;tw-animate-css,motion,saas;shadcn;tailwind;motion,Bounce utilities on product chrome,"import 'tailwindcss-animate'",npm i tailwindcss-animate,https://github.com/jamiebuilds/tailwindcss-animate,zara,tiny CSS,Pair with reduced-motion variants,
+35,Fontsource,@fontsource/*;@fontsource-variable/*,typography,saas;typography;fonts,Loading every weight of a family,"import '@fontsource-variable/geist'",npm i @fontsource-variable/geist,https://fontsource.org,arjun,per-font,n/a,
+36,Lucide,lucide-react,icons,saas;b2b;dashboard;icons,Mixing with Phosphor or Heroicons on one screen,"import { Search } from 'lucide-react'",npm i lucide-react,https://lucide.dev,arjun,tree-shake icons,n/a,
+37,Phosphor,@phosphor-icons/react,icons,saas;b2b;icons,Mixing icon families,"import { MagnifyingGlass } from '@phosphor-icons/react'",npm i @phosphor-icons/react,https://phosphoricons.com,arjun,tree-shake icons,n/a,
+38,Tremor,@tremor/react,charts,dashboard;analytics;kpi;charts,Marketing landings with no data,"import { AreaChart } from '@tremor/react'",npm i @tremor/react,https://tremor.so,arjun,medium,Charts still need text fallback,
+39,Recharts,recharts,charts,dashboard;analytics;charts,Custom SVG charts with no a11y,"import { LineChart; Line } from 'recharts'",npm i recharts,https://recharts.org,arjun,medium,Provide table or aria fallback,
+40,Number Flow,@number-flow/react,celebration,dashboard;kpi;onboarding;charts,Animating every table cell,"import NumberFlow from '@number-flow/react'",npm i @number-flow/react,https://number-flow.barvian.me,zara,small,Snap to final value when reduced-motion,
+41,Origin UI,origin-ui,forms,saas;forms;shadcn;inputs,Using as a second full kit,"Copy input/select patterns from Origin into components/ui",copy-paste,https://originui.com,noor,copy-paste,n/a,components/ui
+42,Magic UI,magicui-cli;@magicui/*,marketing-fx,landing;onboarding;marketing,Daily dashboards; settings; tables,Copy Magic UI component into components/magicui,copy-paste,https://magicui.design,zara,varies,Must respect reduced-motion,components/magicui
+43,Aceternity UI,aceternity,marketing-fx,landing;onboarding;marketing,Product app chrome,Copy effect into components/aceternity,copy-paste,https://ui.aceternity.com,zara,varies,Must respect reduced-motion,components/aceternity
+44,21st.dev / React Bits,21stdev;@21st-dev/react;react-bits,marketing-fx,landing;marketing;onboarding,Working dashboards,Copy block from 21st.dev,copy-paste,https://21st.dev,zara,varies,Landing only,
+45,Spline,@splinetool/react-spline,marketing-fx,landing;marketing;3d,Dashboards; forms; low-end mobile,"import Spline from '@splinetool/react-spline'",npm i @splinetool/react-spline,https://spline.design,priya,very heavy,Static image fallback,

package/dist/skills/design-reference/ux-guidelines.csv

@@ -97,4 +97,15 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
 96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
 97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
 98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
-99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
+99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
+100,Layout,Container Nesting,All,Wrapping every section in nested cards causes visual noise and box syndrome,Use whitespace and subtle dividers instead of nested card borders,Wrap cards inside cards with redundant borders,space-y-6 with border-b,div.card > div.card > div.card,High
+101,Color,Untinted Neutrals,All,Pure un-tinted black or stark gray feels harsh and unfinished,Use subtly tinted neutrals matching brand palette,Use pure #000000 black or harsh #888888 gray,bg-slate-900 text-slate-100,bg-[#000000] text-[#888888],Medium
+102,Accessibility,Gray on Color,All,Placing light or medium gray text on colored backgrounds destroys contrast,Use high-contrast white or dark tinted text on colored surfaces,Place muted gray text on colored badge or hero backgrounds,text-white on bg-blue-600,text-gray-400 on bg-blue-600,High
+103,Color,AI Gradient Clichés,All,Ubiquitous purple-to-blue or pink gradients create a generic AI-slop look,Use intentional brand accents or solid functional color cues,Cover every headline and card with purple-to-blue gradient,bg-indigo-600 or subtle tint,bg-gradient-to-r from-purple-500 to-indigo-600,High
+104,Typography,Heading Icon Tiles,All,Placing a rounded-square icon tile above every section heading adds visual clutter,Use clear typographic scale and semantic headers without icon crutches,Stick a rounded bordered icon box above every header,h2.text-2xl.font-bold,div.rounded-lg.p-2.border > Icon + h2,Medium
+105,Animation,Bounce Easing,All,Bouncy or elastic spring overshoot in standard UI feels dated and gimmicky,Use crisp ease-out (150-250ms) for enter and ease-in (100-200ms) for exit,Use bounce or elastic easing on menus modals or dropdowns,transition-all duration-200 ease-out,animate-bounce or transition-all duration-500 ease-in-out,High
+106,Typography,Line Length,All,Text lines spanning over 75 characters cause reading fatigue,Constrain reading width to 45-75 characters,Let paragraphs stretch across full viewport width,max-w-prose or max-w-2xl,w-full on 1920px screen,Medium
+107,Visual Hierarchy,Bolder Contrast,All,Timid flat designs lack an obvious focal point and feel monotonous,Create one clear visual center of gravity via scale contrast and placement,Make all elements equal size and contrast with no clear hero,text-4xl font-extrabold with prominent CTA,All headings same size as body,High
+108,Visual Hierarchy,Quieter Restraint,All,Over-decorated screens with excessive badges borders and glows cause cognitive overload,Strip away decorative borders and let core content breathe,Add borders shadows badges and glows to every single widget,Clean borderless layout with subtle separators,border-2 shadow-lg ring-2 on every box,Medium
+109,Touch,Touch Target Size,Mobile,Clickable controls under 44px fail accessibility and cause tap errors,Ensure all buttons triggers and inputs have minimum 44x44px hit areas,Use tiny 24px icon buttons without tap padding,min-h-[44px] min-w-[44px],w-6 h-6,High
+110,Interaction,Form State Hardening,All,Inputs missing hover focus error disabled or loading states cause drop-off,Provide all 5 interactive states for every form control,Leave inputs with default browser outlines and no error state,focus-visible:ring-2 invalid:border-red-500,input without focus or error classes,High

package/dist/skills/design-spec/SKILL.md

@@ -76,7 +76,7 @@ npx analyzthis_design spec validate --file ./design-spec.json
 
 **Hierarchy gate:** rank #1 in `information_hierarchy` matches the visually dominant region/component (`hierarchy_rank: 1`).
 
-**Arjun visual pass:** typography scale, spacing rhythm, and contrast classes are consistent with Visual Design Audit rubric — run scoped review on the spec only (no full page code required).
+**Arjun visual pass:** typography scale, spacing rhythm, and contrast classes are consistent with Visual Design Audit rubric — run scoped review on the spec only (no full page code required). Verify anti-slop rules: no nested cards (`div.card > div.card`), no untinted pure black/gray, no gray text on colored backgrounds, and motion timing locked to 150–250ms ease-out (`[ux-guidelines.csv, row 100-105]`, `[motion.csv, row 1]`). If `motion.enabled`, require `library`, `import_path`, `timing_ms`, `easing`, `reduced_motion`. Marketing FX libraries only when notes say landing/onboarding. `components[].import_path` must match `installed_ui_libraries` or a cited `ui-libraries.csv` row.
 
 Set `spec_verdict` when done:
 

package/dist/skills/getting-started/SKILL.md

@@ -33,7 +33,7 @@ This runs **Kavi** — scans your repo, builds an Obsidian vault, and syncs a **
 | Review against PRDs and user stories | `/ux-story-gate` | Task map + routing before critique |
 | Index my codebase for personas | `/kavi` | Kavi → knowledge bank |
 | Run CLI orchestrator without API keys | `/devi` | Host LLM — voices personas from pending prompts |
-| Set visual direction with references + team debate | `/mood-board` | Collect web/DS references, tag, deliberate, converge |
+| Set visual direction with references + team debate | `/mood-board` | Mood board: tagged URLs. **UI image board:** Zara scouts 3–5 real screens; Arjun/Noor/Priya/Meera jury; she re-scouts if they skip |
 | Inspect the chunked execution planner | `/chunk-planner` | See how tasks are split into model-routed chunks |
 | Run legacy single-pass orchestrator | `/run-unchunked` | Skip planner overhead for quick single-expert tasks |
 | Keep or skip the last persona note | `/accept` | Yes or no (plus one sentence if no). Local evolution — no CLI flags. |
@@ -115,7 +115,7 @@ Assess only — do not implement changes.
 | `/anuj` | Power-user wireframe |
 | `/design-director` | Full producer — ideation → DesignSpec → build |
 | `/design-spec` | DesignSpec format + validation rules |
-| `/mood-board` | Visual direction setting — references + team deliberation |
+| `/mood-board` | Visual direction — mood board (tagged URLs) or UI image board (Zara scouts real screens, jury votes) |
 | `/chunk-planner` | Chunked execution planner explained |
 | `/run-unchunked` | Legacy single-pass orchestrator (skip chunked planner) |
 | `/persona-orchestrator` | Agentic critique (not wireframes) |

package/dist/skills/kavi/SKILL.md

@@ -93,6 +93,7 @@ Vault: [path]
 Notes: [N written / S skipped]
 Enriched: [E]
 Sources discovered: [count]
+UI libraries: [N installed]
 Knowledge bank: [synced count] → [targets]
 Next: /persona-orchestrator or /ux-story-gate — personas read this bank first.
 ```
@@ -105,11 +106,11 @@ Next: /persona-orchestrator or /ux-story-gate — personas read this bank first.
 
 | Vault folder | Sources |
 |---|---|
-| `PRDs/` | README, docs, PRD/requirements markdown |
+| `PRDs/` | README, docs, PRD/requirements markdown — extracts **Durable Product Truth**: Target Audience, Core Purpose, Hard Constraints, Operating Context, Brand Voice, and User Evidence |
 | `Brand/` | Tailwind config, tokens, theme CSS |
 | `Pages/` | App Router / page files |
 | `Components/` | `components/`, UI TSX/JSX |
-| `Tech/` | `package.json`, configs, API routes |
+| `Tech/` | `package.json`, configs, API routes, plus **Installed-UI-Libraries.md** (detected motion/UX/visual kits) |
 | `Sources/` | Discovered vaults, wikis, knowledge graphs |
 | `Web/` | External URLs from config + PRD/README |
 | `_meta/` | Index, knowledge-sources, last-sync |
@@ -120,6 +121,6 @@ Enrichment needs `OPENAI_API_KEY`, `GEMINI_API_KEY`, `ANTHROPIC_API_KEY`, or `ZA
 
 ## Session state
 
-After collect, `session-state.json` includes `vault_path` and `last_collect_at`. Other personas should read the knowledge bank before critiquing.
+After collect, `session-state.json` includes `vault_path`, `last_collect_at`, and `installed_ui_libraries` (catalog matches from `package.json` + `components/ui` folders). Other personas must prefer installed libraries from `Tech/Installed-UI-Libraries.md` before recommending new packages.
 
 Install skills: `npx analyzthis_design --target all --force`

package/dist/skills/mood-board/SKILL.md

@@ -7,6 +7,15 @@ description: Build a visual/textual mood board from web references + design-syst
 
 Use `/mood-board` when you want to explore visual directions for a screen, flow, or product and have the persona team deliberate on which references fit the user, task, and design system.
 
+There are two boards:
+
+| Kind | What it is | Who hunts |
+|---|---|---|
+| **mood** (default) | Tagged URLs and notes. You paste links. | You, plus optional search stubs |
+| **ui** | A **UI image board** — 3–5 real shipped screens as frames | **Zara scouts.** Arjun / Noor / Priya / Meera jury. She goes back out if they skip. |
+
+Do not confuse this with generating fake marketing comps. Frames must be real product UI the host can open.
+
 ## What it does
 
 1. **Collects references** from URLs you provide, configured `moodboard.urls`, and optional web search stubs.
@@ -35,6 +44,10 @@ npx analyzthis_design moodboard add --board <boardId> \
   --note "I like the white space and the trust badge placement"
 
 npx analyzthis_design moodboard list
+
+npx analyzthis_design moodboard create --task "Invoice approval, partner signs, dense" --kind ui
+npx analyzthis_design moodboard frames --board <boardId> --url https://example.com/shot.png --title "Dense invoice table" --steal "one primary action" --refuse "purple glow" --peak "signed stamp"
+npx analyzthis_design moodboard critique --board <boardId>
 ```
 
 ## v2.0 chunked execution
@@ -44,6 +57,18 @@ npx analyzthis_design moodboard list
 - Cheap/free models tag references, retrieve design-system rows, and run the deliberation loop.
 - Result is the same `board.json` artifact, but at lower average token cost.
 
+## UI image board — Zara scout, then jury
+
+When `--kind ui` (or the user says "UI board" / "image board"):
+
+1. **Create** writes `scout.brief` and `scout.status = awaiting_scout`. Zara hunts **Google Images, Dribbble, or Pinterest** (or live product pages). She must actually search and open pages — no invented URLs, no AI comps.
+2. **Frames** — Zara saves 3–5 picks. Each frame: url, title, steal, refuse, peak. Round number is stored.
+3. **Jury** — `critique` runs Arjun, Meera, Priya, Noor (Zara does not vote on her own set). KEEP / SKIP per frame. Honeycomb still applies.
+4. **Iterate** — verdict SHIP → `scout.status = done`. REVISE or BLOCK → `scout.round++`, new brief from their because-lines, `awaiting_scout` again. Max 3 scout rounds, then Raj / the designer picks.
+5. **You still sign** — `/accept yes` or no plus one sentence on the kept direction.
+
+Zara's scout rules live in `skills/zara/SKILL.md` (Scout Pass). Motion stays 150–250ms ease-out. Cinematic GSAP landings are refused for daily product UI.
+
 ## How the personas use it
 
 | Persona | Lens |
@@ -51,7 +76,7 @@ npx analyzthis_design moodboard list
 | **Arjun** | Visual system fit, contrast, hierarchy, accessibility, WCAG |
 | **Meera** | Brand/category fit, GTM risk, competitive positioning |
 | **Priya** | Technical feasibility of implementing the style/pattern |
-| **Zara** | First impression, delight moment, emotional response |
+| **Zara** | **Scout lens = Peak-End** (first 2 seconds): same job, peak feeling, one steal, one refuse. Google Images / Dribbble / Pinterest. She does not jury her own picks. |
 | **Noor** | IA clarity, progressive disclosure, surface structure |
 
 Each persona scores references with the Honeycomb rigor matrix:
@@ -108,6 +133,7 @@ In `~/.analyzthis_design/config.json`:
 
 ## Notes
 
-- Image URLs are stored as references; alt-text/captions are added during tagging.
+- Image URLs are stored as references; alt-text/captions are added during tagging. Direct image URLs on a **ui** board are copied into the board folder when fetch succeeds.
 - Web articles are fetched as plain text; image extraction from HTML is not yet implemented.
-- Router rule: `mood_board` signals route to the `mood-board` skill, not the critique chain.
+- `--auto` on a mood board still creates search stubs for the host to fill. `--kind ui` does not — Zara must bring real URLs.
+- Router rule: `mood_board` signals route to the `mood-board` skill, not the critique chain. "UI board" / "image board" are the same route.