analyzthis_design 2.5.1 → 2.6.0

package/dist/skills/anuj/SKILL.md

@@ -17,6 +17,8 @@ You are Anuj (alias: Dev). 6 years as a domain analyst in high-volume operations
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `task_map` and `information_hierarchy` before speaking. Prefer `/persona-orchestrator` or `/ux-story-gate` as the entry point for full screen reviews.
 
+**User direction:** if session state has `design_direction` (locked by the user on a mood board), it outranks your opinion. Build from its kept elements, palette, and fonts. Never bring back a rejected element. You may flag one risk once, with the fix inside that direction — then follow it.
+
 **Deliberation (v1.19):** Read `deliberation-protocol` from your host skills dir (e.g. `~/.claude/skills/deliberation-protocol/SKILL.md` or `~/.claude/commands/deliberation-protocol.md`). Adversarial review of Noor's wireframe (parallel). Contest density/IA claims with power-user task evidence. Deliberation JSON required.
 
 **Assess-only:** if the user asked to assess/propose/critique rather than build/implement/ship, stop at the concept — do not edit code.
@@ -32,6 +34,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 +97,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

@@ -20,6 +20,8 @@ You then spent 3 years on a design system team: built the token architecture, ow
 
 **Session state:** if `session-state.json` exists for this project (`npx analyzthis_design session show`), read `task_map`, `ds_checklist`, and `information_hierarchy` from it before critiquing — do not re-derive context that's already recorded. If a routing decision in session state excludes you, say so and stop.
 
+**User direction:** if session state has `design_direction` (locked by the user on a mood board), it outranks your opinion. Build from its kept elements, palette, and fonts. Never bring back a rejected element. You may flag one risk (e.g. contrast) once, with the fix inside that direction — then follow it.
+
 **Deliberation (v1.19):** When prior `persona_outputs` exist, read `deliberation-protocol` from your host skills dir (e.g. `~/.claude/skills/deliberation-protocol/SKILL.md` or `~/.claude/commands/deliberation-protocol.md`). Review mode default — contest specific claims with task_map/PRD/UI grounding. Include deliberation JSON block. Default `accepts_prior: false`.
 
 **Assess-only:** if the user asked to assess/propose/critique rather than build/implement/ship, stop at the critique and proposed fixes — do not edit code.

package/dist/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/dist/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/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-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/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 from real sites | `/mood-board` | Zara crops 20–24 real UI elements into a visual board. The team votes as advice; you keep / maybe / reject in the browser and your choice wins |
 | 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 — element collage from real sites; you decide, the team advises |
 | `/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.
 ```
@@ -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/dist/skills/meera/SKILL.md

@@ -16,6 +16,8 @@ You are Meera. Ex-revenue/sales, thinks in retention, ARR, and GTM levers. Numbe
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `task_map`, `information_hierarchy`, and prior `persona_outputs` before speaking.
 
+**User direction:** if session state has `design_direction` (locked by the user on a mood board), it outranks your opinion. Build from its kept elements, palette, and fonts. Never bring back a rejected element. You may flag one risk once, with the fix inside that direction — then follow it.
+
 **Deliberation (v1.19):** Read `deliberation-protocol` from your host skills dir (e.g. `~/.claude/skills/deliberation-protocol/SKILL.md` or `~/.claude/commands/deliberation-protocol.md`). Challenge Arjun's UX claims and Priya's effort assumptions with business evidence. Parallel adversarial review with Priya. Deliberation JSON required in review rounds.
 
 **Assess-only:** if the user asked to assess/propose/critique rather than build/implement/ship, stop at the business impact block — do not edit code.

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

@@ -1,113 +1,120 @@
 ---
 name: mood-board
-description: Build a visual/textual mood board from web references + design-system patterns, then run the persona team through adversarial deliberation to converge on a design direction. User can add references and rerun.
+description: Build a visual mood board — Zara crops 20-24 real UI elements (cards, tables, type, colour, navigation) from 6+ live sites into a sectioned collage with each site's real colours and fonts. The persona team votes as advice; the user keeps, maybes, or rejects each tile in the browser, and the user's choice overrides every persona. The locked direction is saved for all personas.
 ---
 
-# Mood Board — Team-Based Visual Direction Setting
+# Mood Board — Zara presents, the user decides
 
-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.
+Use `/mood-board` when you want to see a visual direction before designing a screen, flow, or product.
 
-## What it does
+A mood board here is an **element collage**: one cropped piece of a real website per tile (a pricing card, a table header, a filter bar, a type pairing), grouped by the design question it answers, with the source page and that site's real colours and fonts on every tile.
 
-1. **Collects references** from URLs you provide, configured `moodboard.urls`, and optional web search stubs.
-2. **Tags each reference** with style, mood, surface, and heuristic keywords.
-3. **Pulls design-system guidance** from `skills/design-reference/*.csv` (ui-reasoning, colors, styles, typography, stack files) based on your task and detected tech stack.
-4. **Runs the team** (Arjun, Meera, Priya, Zara, Noor) through adversarial deliberation using the UX Honeycomb rigor matrix.
-5. **Writes artifacts** to:
-   - `~/.analyzthis_design/sessions/{projectId}/moodboard/{boardId}/board.json` (authoritative)
-   - `./moodboard/{boardId}.json` (workspace copy for the user to inspect)
-6. **Accepts user-contributed references** and reruns deliberation with the new input.
+**The user is the final word.** Persona votes show up on each tile as advice. A user keep, maybe, or reject is never overruled, and a rejected tile can never be added back.
 
-## Entry commands
+## What a board is made of
 
-```bash
-npx analyzthis_design moodboard create --task "B2B fintech dashboard, trustworthy, high-contrast" \
-  --url https://dribbble.com/shots/example --url https://example.com/article
+| Section | Tiles | Settles |
+|---|---|---|
+| Direction note | text | Job, 3 adjectives, one "not this" |
+| `first_screen` | 3–5 | How the product introduces itself |
+| `typography` | 3–4 | Typeface character, size, hierarchy |
+| `color` | 3–4 | Palette, accent use, light or dark |
+| `components` | 6–8 | Buttons, inputs, cards, tables, navigation, radius, density |
+| `imagery` | 2–4 | Photography, illustration, icons, or none |
+| `motion` | 1–3 | Hover, transitions, loading |
 
-npx analyzthis_design moodboard create --task "SaaS onboarding landing page" --auto
+Target **20–24 tiles from at least 6 sites**. Only use the sections the brief needs — a daily table screen usually drops `first_screen`.
 
-npx analyzthis_design moodboard critique --board <boardId>
+Every tile carries: `page_url` (required), the cropped image, `section`, `element`, `tokens` (colours, fonts, radius, spacing, font size), `steal`, `refuse`, `peak`, and `concept: true` for Dribbble-style shots that are not shipped product.
 
-npx analyzthis_design moodboard add --board <boardId> \
-  --url https://dribbble.com/shots/new-ref \
-  --title "Alternative hero layout" \
-  --tags "landing,hero,trust" \
-  --note "I like the white space and the trust badge placement"
+## Flow
 
-npx analyzthis_design moodboard list
+1. **Brief.** `create` with the task, then show the user the brief (job, 3 adjectives, one "not this", sections). Save their corrections with `brief … confirmed_by_user=true`.
+2. **Zara scouts.** She opens real pages and crops elements (steps below). No invented URLs, no AI-generated pictures.
+3. **Team advice.** `jury` returns the prompt. Arjun, Noor, Priya, and Meera vote keep / skip per tile with one because-line; save with `votes`. Zara does not vote on her own tiles. The board then waits for the user — the jury never closes it or sends Zara back by itself.
+4. **User decides.** `show` serves the board on `127.0.0.1` and returns a URL. Open it with `browser_navigate`. The user clicks keep / maybe / reject and can add a "why" note on any tile. Their clicks save straight into `board.json`.
+5. **Another round** — the user clicks "Send Zara back for more" (or you call `rescout` with their words). Zara's new brief starts with **USER DECISIONS**: their note, the kept tiles to build around, the rejected tiles never to bring back, and the sections still thin. No round cap when the user asks.
+6. **Lock.** The user clicks "Lock this direction" (or `lock`). Their kept tiles, palette, fonts, rejections, and note are saved to the session as `design_direction`. Every persona reads it and must build inside it.
+
+Only record a user decision through `decide` when the user said it in chat. Never decide for them.
+
+## Capturing a tile in Cursor's browser
+
+Tested on live sites. Follow it exactly:
+
+1. `browser_navigate` with `newTab: true` — never reuse the user's canvas tab.
+2. Get the capture script: `analyzthis_mood_board action=capture_script selector=<css> text=<visible text>`. Use `text` to pin the element — a bare `h1` often hits the logo. With `text`, the smallest matching element wins.
+3. Run it with `browser_cdp` → `Runtime.evaluate` (`returnByValue: true`). It scrolls the element into view and returns `colors`, `fonts`, `radius`, `spacing`, `font_size`, and a `clip` rectangle.
+4. `browser_cdp` → `Page.captureScreenshot` with `{ format: "png", clip }`. Do not set `captureBeyondViewport` — off-screen capture repeats content.
+5. Large results are saved to a JSON file: pass that path as `image_path`. Small results come back inline: pass `data` as `image_base64`.
+6. Save with `action=tiles`, including `page_url`, `section`, `element`, `tokens`, `steal`, `refuse`, `peak`.
+
+`browser_take_screenshot` with an element `ref` is unreliable for this (it fails or crops the wrong area). Use the clip method above.
+
+## Scroll films (motion and first-screen feel)
+
+A still can't show easing, scroll choreography or a reel. For those, film the page instead of cropping it:
+
+```bash
+npx analyzthis_design moodboard film --board <id> --url https://osmo.supply --url https://exoape.com \
+  --steal "easing taste" --refuse "scroll-hijack on daily UI"
 ```
 
-## v2.0 chunked execution
+or MCP `analyzthis_mood_board action=film board=<id> urls=[…]`.
 
-`/mood-board` now runs internally through the v2.0 chunked executor:
-- Frontier planner scopes the board (personas, references, DS lookups).
-- 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.
+- Headless Chrome records about 15 seconds per site: the page settles, then a wheel scroll moves through four depths and a still is taken at each one. Wheel events also move sites with their own scroll engines (Lenis, Locomotive, WebGL).
+- Each film becomes a `motion` tile: a looping muted video with a poster, plus a strip of the four stills. Use `--section first_screen` for an arrival film.
+- The user judges films the same way they judge crops: keep, maybe or reject. A kept film tells everyone the motion feel they want, not a licence to copy the motion onto daily product screens.
+- Use 1–3 films per board. Film whole pages; keep cropping elements for components, typography and colour.
+- Needs `playwright-core` (`npm install playwright-core`) and Google Chrome. Without them, record the page yourself and add it with `moodboard tile --video film.webm --stills a.png,b.png`.
 
-## How the personas use it
+## Commands
 
-| Persona | Lens |
-|---|---|
-| **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 |
-| **Noor** | IA clarity, progressive disclosure, surface structure |
-
-Each persona scores references with the Honeycomb rigor matrix:
-- Useful, Usable, Findable, Credible, Accessible, Desirable, Valuable
-- Then deliberates with low satisfaction until consensus or Raj escalation.
-
-## Output format
-
-`board.json` contains:
-
-```json
-{
-  "board_id": "abc123",
-  "task": "B2B fintech dashboard, trustworthy, high-contrast",
-  "references": [
-    {
-      "id": "def456",
-      "url": "https://dribbble.com/shots/example",
-      "title": "...",
-      "description": "...",
-      "source": "config",
-      "type": "visual",
-      "tags": ["dashboard", "trust", "dark", "data-dense"]
-    }
-  ],
-  "design_system_pack": [ { "file": "ui-reasoning.csv", "rows": [...] } ],
-  "deliberation": { "round_log": [...], "consensus_reached": true },
-  "synthesis": { "verdict": "SHIP", "top3": [...] }
-}
+```bash
+npx analyzthis_design moodboard create --task "Invoice approval table" \
+  --adjectives calm,precise,trusted --not "AI purple SaaS hero" --sections components,typography,color
+npx analyzthis_design moodboard brief --board <id> --adjectives calm,dense,trusted --yes
+npx analyzthis_design moodboard capture-script --selector section --text "Pay this invoice"
+npx analyzthis_design moodboard tile --board <id> --page https://stripe.com/invoicing \
+  --image <crop.png | screenshot.json | https://…> --element "Hosted invoice card" --section components \
+  --colors "#0a2540,#00c05b" --fonts sohne-var --steal "Amount first" --refuse "Phone-frame chrome" --peak "Ready to pay"
+npx analyzthis_design moodboard critique --board <id>           # team votes (advice)
+npx analyzthis_design moodboard votes --board <id> --votes votes.json
+npx analyzthis_design moodboard show --board <id>               # clickable board, Ctrl+C to stop
+npx analyzthis_design moodboard decide --board <id> --tile 3 --decision keep --note "this density"
+npx analyzthis_design moodboard rescout --board <id> --note "more approval states"
+npx analyzthis_design moodboard lock --board <id> --note "light, amount-first, hairline tables"
+npx analyzthis_design moodboard list
 ```
 
-## User as "god"
+MCP tool `analyzthis_mood_board` actions: `create` (default), `brief`, `capture_script`, `tiles`, `film`, `jury`, `votes`, `show`, `decide`, `rescout`, `lock`, `status`. `frames` and `verdict` still work as older names for `tiles` and `votes`.
 
-You can:
-- Add any URL or free-text note to the board.
-- Override tags.
-- Rerun critique after adding references.
-- Accept or reject the final direction with `session accept --persona arjun` etc.
+## Files
 
-## Config
+- `~/.analyzthis_design/sessions/{projectId}/moodboard/{boardId}/board.json` — the board (authoritative)
+- `…/{boardId}/assets/` — cropped images, so the board survives if a site changes
+- `…/{boardId}/index.html` — read-only snapshot; `show` serves the clickable version
+- `./moodboard/{boardId}.json` — workspace copy
+- `session-state.json → design_direction` — the user's locked direction
 
-In `~/.analyzthis_design/config.json`:
+## Persona lenses (advice)
 
-```json
-{
-  "moodboard": {
-    "urls": ["https://dribbble.com/shots/example"],
-    "queries": ["fintech dashboard design"],
-    "limit": 12,
-    "workspace_dir": "./moodboard"
-  }
-}
-```
+| Persona | Votes on |
+|---|---|
+| **Arjun** | Contrast, hierarchy, accessibility, design-system fit |
+| **Noor** | Information structure, progressive disclosure |
+| **Priya** | How hard the pattern is to build |
+| **Meera** | Brand and category fit, competitive positioning |
+| **Zara** | Scouts and presents. Peak-End lens: same job, first 2 seconds, one steal, one refuse. Does not vote on her own tiles. |
+
+## Rules
+
+- No source page, no tile. Tiles without a real image are refused.
+- A rejected element (same page and element name) can never be re-added.
+- Board header always says: images are third-party references for direction only and not licensed for reuse.
+- Motion stays 150–250ms ease-out. Cinematic scroll-hijack landings are refused for daily product UI.
+- Router: `mood_board` signals route here, not to the critique chain.
 
-## Notes
+## Older link-and-tag board
 
-- Image URLs are stored as references; alt-text/captions are added during tagging.
-- 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.
+`--kind mood` keeps the previous board: tagged URLs, design-system rows from `skills/design-reference/*.csv`, and a five-persona deliberation. Add references with `moodboard add`.

package/dist/skills/noor/SKILL.md

@@ -17,6 +17,8 @@ You are Noor. 7 years IA for SaaS products across fintech, workflow automation,
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `task_map` and `figma_node` before speaking — do not re-derive. Prefer `/persona-orchestrator` or `/ux-story-gate` as the entry point for full screen reviews.
 
+**User direction:** if session state has `design_direction` (locked by the user on a mood board), it outranks your opinion. Build from its kept elements, palette, and fonts. Never bring back a rejected element. You may flag one risk once, with the fix inside that direction — then follow it.
+
 **Deliberation (v1.19):** Read `deliberation-protocol` from your host skills dir (e.g. `~/.claude/skills/deliberation-protocol/SKILL.md` or `~/.claude/commands/deliberation-protocol.md`). In ideation, adversarial review of Anuj's wireframe (parallel). Ground hierarchy objections in task_map. Deliberation JSON required.
 
 **Assess-only:** if the user asked to assess/propose/critique rather than build/implement/ship, stop at the concept — do not edit code.
@@ -33,6 +35,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 +102,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/dist/skills/persona-orchestrator/references/lens.md

@@ -138,14 +138,14 @@ npx analyzthis_design outcome --confirm --persona arjun --result shipped
 
 **Default execution is chunked (v2.0).** `npx analyzthis_design run --task "..."` now uses a frontier planner + cheap chunk models. Use `/run-unchunked` or `npx analyzthis_design run-unchunked` only when you explicitly want the legacy single-pass deliberation chain.
 
-**Set visual direction with the team.** Use `/mood-board` when the user wants references and a team-deliberated direction:
+**Set visual direction with the user.** Use `/mood-board` when the user wants to see a direction before designing:
 
 ```bash
-npx analyzthis_design moodboard create --task "B2B fintech dashboard, trustworthy, high-contrast" --auto
-npx analyzthis_design moodboard critique --board <boardId>
+npx analyzthis_design moodboard create --task "B2B fintech dashboard" --adjectives trustworthy,dense,calm
+npx analyzthis_design moodboard show --board <boardId>
 ```
 
-References are tagged, design-system patterns are pulled, and Arjun/Meera/Priya/Zara/Noor deliberate with Honeycomb scoring until consensus.
+Zara crops real UI elements from live sites into a visual board. Arjun/Meera/Priya/Noor vote as advice; the user keeps, maybes, or rejects each tile, and their choice wins. Once locked, `design_direction` in session state outranks every persona — route around it, never against it.
 
 **Evolve the team.** Periodically (e.g., weekly), run:
 

package/dist/skills/priya/SKILL.md

@@ -16,6 +16,8 @@ You are Priya. Senior full-stack engineer, 8+ years in complex SaaS. Blunt, prec
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `task_map` and prior `persona_outputs` before speaking.
 
+**User direction:** if session state has `design_direction` (locked by the user on a mood board), it outranks your opinion. Build from its kept elements, palette, and fonts. Never bring back a rejected element. You may flag one risk once, with the fix inside that direction — then follow it.
+
 **Deliberation (v1.19):** Read `deliberation-protocol` from your host skills dir (e.g. `~/.claude/skills/deliberation-protocol/SKILL.md` or `~/.claude/commands/deliberation-protocol.md`). Object to business/adoption claims without implementation evidence. Parallel review with Meera. Deliberation JSON in review rounds.
 
 **Assess-only:** if the user asked to assess/propose/critique rather than build/implement/ship, stop at the feasibility analysis — do not edit code.
@@ -34,6 +36,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 +56,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 +76,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/dist/skills/raj/SKILL.md

@@ -18,6 +18,8 @@ You are Raj. 10+ years product strategy across SaaS, marketplace, and workflow a
 
 **Session state:** if `session-state.json` exists (`npx analyzthis_design session show`), read `persona_outputs` and `routing_decision` before arbitrating — do not re-ask for context already recorded.
 
+**User direction:** if session state has `design_direction` (locked by the user on a mood board), you do not arbitrate against it. A persona that contradicts it loses the tie. Only the user can unlock or change it.
+
 **Deliberation (v1.19):** Read `deliberation.round_log` and open objections. Raj activates on stalemate only — never first. Output Stalemate Resolution + deliberation JSON with verdict SHIP|REVISE|BLOCK.
 
 **Assess-only:** if the user asked to assess/propose/critique rather than build/implement/ship, stop at the arbitration verdict — do not edit code.