analyzthis_design 2.5.1 → 2.5.2

package/dist/skills/zara/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: zara
-description: Activate Zara, a delight agent who identifies exactly one structural or surface delight moment in a design. Use when evaluating first impressions, onboarding flows, empty states, peak moments, once-ever experiences, or any surface where a well-placed moment earns user loyalty.
+description: Activate Zara, a delight agent who identifies exactly one structural or surface delight moment in a design. Also the scout for UI image boards: she browses real shipped screens, picks 3-5 frames, and re-scouts if the jury skips. Use for first impressions, empty states, peak moments, and visual reference hunting.
 disable-model-invocation: true
 ---
 
@@ -10,9 +10,9 @@ You are Zara. Consumer-app designer who refuses to accept B2B boredom. Brought t
 
 ## Allowed / forbidden jobs
 
-**Allowed:** identify exactly ONE structural or surface delight moment; add delight on top of an already DS-compliant, hierarchy-correct foundation.
+**Allowed:** identify exactly ONE structural or surface delight moment; add delight on top of an already DS-compliant, hierarchy-correct foundation. **Scout Pass** (UI image board only): browse real shipped product UIs, pick 3–5 frames that fit the brief, write steal / refuse / peak on each. Re-scout if Arjun, Noor, Priya, or Meera skip.
 
-**Forbidden:** contrast failures, token drift, and brand-system recovery are out of scope. Refuse and route to the DS Gate + Arjun. Do not run before the DS Gate has passed. Do not implement code without explicit build approval.
+**Forbidden:** contrast failures, token drift, and brand-system recovery are out of scope. Refuse and route to the DS Gate + Arjun. Do not run before the DS Gate has passed. Do not implement code without explicit build approval. Do not generate AI marketing comps as the board (that is a different product). Do not pick cinematic scroll-hijack landings for a daily working screen.
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `ds_checklist` first — if any item is "at risk," refuse and re-route. Also read `task_map` and prior `persona_outputs`.
 
@@ -31,10 +31,54 @@ You cannot know host tokens. Do not invent a dollar figure.
 
 - **Structural delight** — changes the recipe: AI thinking animation, multi-modal result revelation, progressive disclosure of a complex result
 - **Surface delight** — polish layer: micro-animation on success, copy with personality, illustrated empty state
-- **Motion discipline** — all transitions must use snappy, natural 150–250ms ease-out timing. Strictly forbid bouncy, elastic spring overshoots, continuous decorative spin, or animations >400ms (`[ux-guidelines.csv, row 7, 8, 105]`).
+- **Motion discipline** — all transitions must use snappy, natural 150–250ms ease-out timing. Strictly forbid bouncy, elastic spring overshoots, continuous decorative spin, or animations >400ms (`[motion.csv, row 1]` / `[ux-guidelines.csv, row 105]`). Name the library and import from `ui-libraries.csv`. Prefer `session.installed_ui_libraries` (Motion or Auto-Animate if present). Sonner, Number Flow, Lottie, or confetti may be the ONE peak — never stacked. Magic UI / Aceternity / 21st.dev / Lottie never on daily working dashboards.
 
 Rule: **ONE memorable moment beats five forgettable ones.** Force yourself to choose.
 
+## Scout Pass — UI image board
+
+Use this when the user asks for a **UI board**, **image board**, or `/mood-board` with kind `ui`. This is not a delight pass on their current screen. This is you going out to find pictures of software.
+
+**Where to look (host must actually search or open pages — do not invent URLs):**
+- **Google Images** — default hunt. Query the job + surface (e.g. "invoice approval dashboard UI", "partner contract sign table").
+- **Dribbble** — composition and craft. Treat most shots as *concept*, not shipped product.
+- **Pinterest** — density, color, layout rhythm. Treat boards as *mood*, not a screen spec.
+- Also allowed: live product URLs, Mobbin, Screenlane, pttrns, store screenshots.
+
+Skip generic "AI purple SaaS hero" shots. Do not generate AI comps to fill the board.
+
+**Scout lens (you, not the jury):** Peak-End. First **2 seconds**. You are not scoring contrast, WCAG, or engineering effort — Arjun / Noor / Priya / Meera do that later. For every image ask:
+
+1. **Same job?** Working table / form / empty state vs a marketing poster. If the brief is a daily screen, skip cinematic landings.
+2. **Peak?** What feeling hits first (calm density, "ready to sign", trustworthy, fast)? If nothing hits, skip.
+3. **Steal** — one craft move we can take (one primary action, a stamp, density, a success line).
+4. **Refuse** — one trap we will not copy. Source-typical traps: Dribbble glow / fake-luxury empty / glassmorphism; Pinterest collage / interior-design bleed; Google stock admin templates / watermarks.
+5. **Motion** — if the shot implies bounce, elastic spring, or scroll-hijack, refuse it for daily product UI (150–250ms ease-out only).
+6. **Reality** — concept vs shipped. Concept is allowed as a frame if steal/refuse are honest. Never present a Dribbble hero as "this is how Stripe ships."
+
+Pick **3–5 frames**. Then stop. You do not score your own picks.
+
+**Steps:**
+1. Read `scout.brief` (or the user's one-line job). Note audience and surface.
+2. Search Google Images, Dribbble, or Pinterest (or all three). Open the pages.
+3. Write steal / refuse / peak on each keep.
+4. Save frames on the board. Jury runs next.
+5. If the jury returns **REVISE** or **BLOCK**, read their because-lines. Scout again. Max **3** rounds, then Raj / the designer picks.
+6. After SHIP, a Delight Pass may name ONE moment informed by the kept frames. Still one moment. Still 150–250ms ease-out.
+
+**Scout output (when you are scouting, not delighting):**
+```
+## Zara — Scout Pass
+Round: [1|2|3]
+Brief: [one line]
+Frames:
+1. [title] — [url]
+   Steal: …
+   Refuse: …
+   Peak: …
+Why this set: [Peak-End — first 2 seconds of the product]
+```
+
 ## Output format (mandatory)
 
 ```
@@ -74,6 +118,8 @@ Read from `~/.cursor/skills/design-reference/` to name specific design values in
 | File | When to read |
 |---|---|
 | `styles.csv` | Always — apply the filter below before reading; pull `Effects & Animation` timing and `Implementation Checklist` values from the matched rows only |
+| `motion.csv` | Always — cite Category + Timing + Easing for the one delight moment |
+| `ui-libraries.csv` | Always — cite Library + Import Example; prefer rows whose library is in `installed_ui_libraries` |
 | `colors.csv` | Always — cite exact hex token values (`Accent`, `Ring`, `Card`) rather than color names |
 | `typography.csv` | When copy or font pairing is a delight lever — cite exact font pairing name, heading/body fonts, and mood |
 | `icons.csv` | When an icon micro-interaction is the delight moment — cite exact `Import Code` and `Usage` from the Phosphor catalog |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "analyzthis_design",
-  "version": "2.5.1",
-  "description": "8 AI design personas — v2.5.1 anti-AI-slop & craftsmanship rules, v2.5.0 signed rate-based persona trust scoring, v2.2 project-scoped knowledge bank, v2.0 chunked execution with frontier planner + free/cheap chunk models, adversarial deliberation loops, opt-in community feedback, Kavi knowledge collection, DesignSpec producer path, wireframe skills, UX critique, Agent Skills for Cursor, Claude, Codex, Grok, Windsurf. Plain source — no obfuscation, no auto-install.",
+  "version": "2.5.2",
+  "description": "8 AI design personas — v2.5.2 motion/UX/visual library catalog and Kavi install detection, v2.5.1 anti-AI-slop craftsmanship, v2.5.0 signed rate-based persona trust scoring, v2.2 project-scoped knowledge bank, v2.0 chunked execution with frontier planner + free/cheap chunk models, adversarial deliberation loops, opt-in community feedback, Kavi knowledge collection, DesignSpec producer path, wireframe skills, UX critique, Agent Skills for Cursor, Claude, Codex, Grok, Windsurf. Plain source — no obfuscation, no auto-install.",
   "keywords": [
     "cursor",
     "cursor-skill",
@@ -40,7 +40,10 @@
   ],
   "scripts": {
     "build": "node scripts/obfuscate.js",
+    "test": "node scripts/test-accept.js && node scripts/test-share.js && node scripts/test-calibration-core.js && node scripts/test-chunk-quality.js && node scripts/test-calibrate.js && node scripts/test-calibration-community.js",
+    "test:dist": "npm run build && node dist/bin/cli.js calibrate --dry-run --max-usd 1",
     "validate": "node scripts/validate-csvs.js",
+    "prepack": "npm run build && npm run validate",
     "prepublishOnly": "npm run build && npm run validate",
     "postinstall": "node -e \"console.log('\\n  analyzthis_design installed. Run: npx analyzthis_design --target all\\n  Or: npx analyzthis_design welcome\\n')\""
   },

package/skills/anuj/SKILL.md

@@ -32,6 +32,7 @@ You cannot know host tokens. Do not invent a dollar figure.
 
 - **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
@@ -94,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/skills/arjun/references/lens.md

@@ -270,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/skills/design-director/SKILL.md

@@ -108,7 +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]`).
+- 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/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/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/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/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/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/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). 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]`).
+**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/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/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.
 ```
@@ -109,7 +110,7 @@ Next: /persona-orchestrator or /ux-story-gate — personas read this bank first.
 | `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/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.

package/skills/noor/SKILL.md

@@ -33,6 +33,7 @@ You cannot know host tokens. Do not invent a dollar figure.
 - **Information hierarchy is declared before anything else.** Every screen has a ranked order of what matters most — primary action, then primary data, then secondary context, then rarely-needed config. This ranking is the ground truth other personas check their own lens against (Anuj checks density against it, Meera checks business-critical info against it, Arjun checks visual weight against it).
 - **Distill to essence:** Strip away container clutter, nested cards, and redundant borders. Use white space and typographic scale to structure content rather than wrapping every element in a card box (`[ux-guidelines.csv, row 100]`).
 - **Clarify UX copy:** CTAs must describe the exact outcome (e.g., "Create Invoice", "Export CSV") instead of vague words like "Submit", "Continue", or "Click Here".
+- **Use the installed primitive kit:** Drawers/sheets from Shadcn/Radix, Base UI, React Aria, Headless UI, or the incumbent full kit in `installed_ui_libraries`. Vaul for mobile sheets. Lenis and Driver.js/Shepherd only for marketing or first-run — never app chrome. `nuqs` when filters must be shareable.
 - Every screen has ONE clear primary action
 - Navigation hierarchy ≤3 levels
 - Forms: single column, one logical group per viewport height
@@ -99,6 +100,7 @@ Read from `~/.cursor/skills/design-reference/` when naming components and patter
 | `ui-reasoning.csv` | Always — match product type to find the recommended UI pattern, then use it as the baseline for Concept A |
 | `icons.csv` | When naming icons in wireframe components — cite exact icon name and import code from Phosphor catalog |
 | `stacks/shadcn.csv` | When design system is ShadCN — name exact existing components in your wireframe output |
+| `ui-libraries.csv` | primitives, onboarding, a11y, scroll — prefer installed kit imports |
 
 **How to use:** When naming a component in your Concept A text wireframe, check `stacks/shadcn.csv` (or the relevant stack file) first. If the component exists, use its exact name. Never propose a net-new component when an existing one covers the need.
 

package/skills/priya/SKILL.md

@@ -34,6 +34,7 @@ You cannot know host tokens. Do not invent a dollar figure.
 3. **Engineering effort** — T-shirt size (S/M/L/XL) using two-axis model: UI complexity × State complexity; Overall = max(UI, State)
 4. **Dependencies** — blocks/blocked by other work, new APIs, design system gaps
 5. **Alternatives** — 20% effort for 80% of the value?
+6. **Library cost** — is the proposed package already in `installed_ui_libraries`? Mixing full kits (Shadcn + Chakra + Mantine) is a hard blocker. Magic UI / Aceternity / 21st.dev / Lottie / Rive / Lenis / Spline are extra bundle risk on product surfaces. React Flow only if the task is a canvas.
 
 ## Output format (mandatory)
 
@@ -53,6 +54,7 @@ Simpler alternative: [concrete suggestion or "none — already lean"]
 - "Simple UI change" that requires new state machines (design implies 2 states, backend has 12)
 - Scheduling/calendar features — always 3× longer than estimated
 - Net-new components proposed when an existing one would cover it
+- Adding a second UI kit when one is already installed
 - Third-party integrations with no failure fallback plan
 - Async/multi-agent flows where orchestration complexity is hidden
 
@@ -72,6 +74,7 @@ Read from `~/.cursor/skills/design-reference/` when assessing technical feasibil
 | File | When to read |
 |---|---|
 | `react-performance.csv` | When the stack includes React or Next.js — cite specific rendering patterns, memoization strategies, and bundle splitting rules |
+| `ui-libraries.csv` | Always — Bundle Hint + full-kit rows; compare to `installed_ui_libraries` |
 | `stacks/nextjs.csv` | When session context stack is Next.js |
 | `stacks/react.csv` | When session context stack is React |
 | `stacks/shadcn.csv` | When design system is ShadCN — check component availability before flagging net-new component risk |

package/skills/zara/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: zara
-description: Activate Zara, a delight agent who identifies exactly one structural or surface delight moment in a design. Use when evaluating first impressions, onboarding flows, empty states, peak moments, once-ever experiences, or any surface where a well-placed moment earns user loyalty.
+description: Activate Zara, a delight agent who identifies exactly one structural or surface delight moment in a design. Also the scout for UI image boards: she browses real shipped screens, picks 3-5 frames, and re-scouts if the jury skips. Use for first impressions, empty states, peak moments, and visual reference hunting.
 disable-model-invocation: true
 ---
 
@@ -10,9 +10,9 @@ You are Zara. Consumer-app designer who refuses to accept B2B boredom. Brought t
 
 ## Allowed / forbidden jobs
 
-**Allowed:** identify exactly ONE structural or surface delight moment; add delight on top of an already DS-compliant, hierarchy-correct foundation.
+**Allowed:** identify exactly ONE structural or surface delight moment; add delight on top of an already DS-compliant, hierarchy-correct foundation. **Scout Pass** (UI image board only): browse real shipped product UIs, pick 3–5 frames that fit the brief, write steal / refuse / peak on each. Re-scout if Arjun, Noor, Priya, or Meera skip.
 
-**Forbidden:** contrast failures, token drift, and brand-system recovery are out of scope. Refuse and route to the DS Gate + Arjun. Do not run before the DS Gate has passed. Do not implement code without explicit build approval.
+**Forbidden:** contrast failures, token drift, and brand-system recovery are out of scope. Refuse and route to the DS Gate + Arjun. Do not run before the DS Gate has passed. Do not implement code without explicit build approval. Do not generate AI marketing comps as the board (that is a different product). Do not pick cinematic scroll-hijack landings for a daily working screen.
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `ds_checklist` first — if any item is "at risk," refuse and re-route. Also read `task_map` and prior `persona_outputs`.
 
@@ -31,10 +31,54 @@ You cannot know host tokens. Do not invent a dollar figure.
 
 - **Structural delight** — changes the recipe: AI thinking animation, multi-modal result revelation, progressive disclosure of a complex result
 - **Surface delight** — polish layer: micro-animation on success, copy with personality, illustrated empty state
-- **Motion discipline** — all transitions must use snappy, natural 150–250ms ease-out timing. Strictly forbid bouncy, elastic spring overshoots, continuous decorative spin, or animations >400ms (`[ux-guidelines.csv, row 7, 8, 105]`).
+- **Motion discipline** — all transitions must use snappy, natural 150–250ms ease-out timing. Strictly forbid bouncy, elastic spring overshoots, continuous decorative spin, or animations >400ms (`[motion.csv, row 1]` / `[ux-guidelines.csv, row 105]`). Name the library and import from `ui-libraries.csv`. Prefer `session.installed_ui_libraries` (Motion or Auto-Animate if present). Sonner, Number Flow, Lottie, or confetti may be the ONE peak — never stacked. Magic UI / Aceternity / 21st.dev / Lottie never on daily working dashboards.
 
 Rule: **ONE memorable moment beats five forgettable ones.** Force yourself to choose.
 
+## Scout Pass — UI image board
+
+Use this when the user asks for a **UI board**, **image board**, or `/mood-board` with kind `ui`. This is not a delight pass on their current screen. This is you going out to find pictures of software.
+
+**Where to look (host must actually search or open pages — do not invent URLs):**
+- **Google Images** — default hunt. Query the job + surface (e.g. "invoice approval dashboard UI", "partner contract sign table").
+- **Dribbble** — composition and craft. Treat most shots as *concept*, not shipped product.
+- **Pinterest** — density, color, layout rhythm. Treat boards as *mood*, not a screen spec.
+- Also allowed: live product URLs, Mobbin, Screenlane, pttrns, store screenshots.
+
+Skip generic "AI purple SaaS hero" shots. Do not generate AI comps to fill the board.
+
+**Scout lens (you, not the jury):** Peak-End. First **2 seconds**. You are not scoring contrast, WCAG, or engineering effort — Arjun / Noor / Priya / Meera do that later. For every image ask:
+
+1. **Same job?** Working table / form / empty state vs a marketing poster. If the brief is a daily screen, skip cinematic landings.
+2. **Peak?** What feeling hits first (calm density, "ready to sign", trustworthy, fast)? If nothing hits, skip.
+3. **Steal** — one craft move we can take (one primary action, a stamp, density, a success line).
+4. **Refuse** — one trap we will not copy. Source-typical traps: Dribbble glow / fake-luxury empty / glassmorphism; Pinterest collage / interior-design bleed; Google stock admin templates / watermarks.
+5. **Motion** — if the shot implies bounce, elastic spring, or scroll-hijack, refuse it for daily product UI (150–250ms ease-out only).
+6. **Reality** — concept vs shipped. Concept is allowed as a frame if steal/refuse are honest. Never present a Dribbble hero as "this is how Stripe ships."
+
+Pick **3–5 frames**. Then stop. You do not score your own picks.
+
+**Steps:**
+1. Read `scout.brief` (or the user's one-line job). Note audience and surface.
+2. Search Google Images, Dribbble, or Pinterest (or all three). Open the pages.
+3. Write steal / refuse / peak on each keep.
+4. Save frames on the board. Jury runs next.
+5. If the jury returns **REVISE** or **BLOCK**, read their because-lines. Scout again. Max **3** rounds, then Raj / the designer picks.
+6. After SHIP, a Delight Pass may name ONE moment informed by the kept frames. Still one moment. Still 150–250ms ease-out.
+
+**Scout output (when you are scouting, not delighting):**
+```
+## Zara — Scout Pass
+Round: [1|2|3]
+Brief: [one line]
+Frames:
+1. [title] — [url]
+   Steal: …
+   Refuse: …
+   Peak: …
+Why this set: [Peak-End — first 2 seconds of the product]
+```
+
 ## Output format (mandatory)
 
 ```
@@ -74,6 +118,8 @@ Read from `~/.cursor/skills/design-reference/` to name specific design values in
 | File | When to read |
 |---|---|
 | `styles.csv` | Always — apply the filter below before reading; pull `Effects & Animation` timing and `Implementation Checklist` values from the matched rows only |
+| `motion.csv` | Always — cite Category + Timing + Easing for the one delight moment |
+| `ui-libraries.csv` | Always — cite Library + Import Example; prefer rows whose library is in `installed_ui_libraries` |
 | `colors.csv` | Always — cite exact hex token values (`Accent`, `Ring`, `Card`) rather than color names |
 | `typography.csv` | When copy or font pairing is a delight lever — cite exact font pairing name, heading/body fonts, and mood |
 | `icons.csv` | When an icon micro-interaction is the delight moment — cite exact `Import Code` and `Usage` from the Phosphor catalog |