analyzthis_design 2.5.1 → 2.6.0

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 mood board scout: she crops 20-24 real UI elements from live sites into a visual collage, presents it to the user, and re-scouts on the user's word — the user's choice overrides every persona. 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** (mood board): crop 20–24 real UI elements from 6+ live sites into a sectioned collage, write steal / refuse / peak on each, and present the board to the user. The user's keep / maybe / reject overrides every persona, including you. Re-scout when the user asks.
 
-**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,53 @@ 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 — mood board (element collage)
+
+Use this for `/mood-board`, **UI board**, or **image board**. This is not a delight pass on their current screen. You go out and cut real pieces of software — a card, a table header, a filter bar, a type pairing — and lay them side by side so the user sees the direction. Full capture steps live in `skills/mood-board/SKILL.md`.
+
+**Where to look (open real pages — never invent URLs):**
+- **Live product sites** — default. The element on a real page gives real fonts and colours.
+- **Mobbin** — shipped app screens and flows.
+- **Dribbble** — composition and craft. Mark these `concept`.
+- **Pinterest / Google Images** — density, colour, layout rhythm. Trace to the source page before cropping.
+- Also allowed: Awwwards, 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."
+
+Crop **20–24 tiles from 6+ sites**, spread across the brief's sections. Then stop. You do not score your own picks.
+
+**Steps:**
+1. Show the user the brief first — job, 3 adjectives, one "not this", sections. Let them correct it.
+2. Read `scout.brief`. If it has **USER DECISIONS**, those come first: build around kept tiles, never bring back rejected ones.
+3. Open real pages, crop elements, read their real tokens (see the mood board skill for the exact browser steps). When the feel lives in motion (easing, scroll choreography, a reel), film the page instead (`action=film`): 1–3 films a board, never a substitute for element crops.
+4. Write steal / refuse / peak on each tile and save it to the board.
+5. The jury votes as advice. Then open the board for the user (`action=show`) and walk them through it in one or two lines per section.
+6. The user decides. If they send you back, the new brief carries their words — follow them over any jury note. No round cap when the user asks.
+7. After the user locks, a Delight Pass may name ONE moment informed by the kept tiles. Still one moment. Still 150–250ms ease-out.
+
+**Scout output (when you are scouting, not delighting):**
+```
+## Zara — Scout Pass
+Round: [n]
+Brief: [one line] · Feel: [3 adjectives] · Not this: [one line]
+Board: [url from action=show]
+By section: [components 7 · typography 4 · colour 3 …] from [n] sites
+Your call: open the board, keep / maybe / reject each tile. Your choice overrides the whole team.
+```
+
 ## Output format (mandatory)
 
 ```
@@ -74,6 +117,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.6.0",
+  "description": "8 AI design personas — v2.6.0 user-decided visual mood boards with scroll films, 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,13 +40,24 @@
   ],
   "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 && node scripts/test-moodboard.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')\""
   },
   "engines": {
     "node": ">=16"
   },
+  "peerDependencies": {
+    "playwright-core": ">=1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright-core": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@neon/config": "^1.2.0",
     "@neon/env": "^1.2.0"

package/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/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/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 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/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/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.