analyzthis_design 2.5.0 → 2.5.2

package/dist/skills/noor/SKILL.md

@@ -31,6 +31,9 @@ You cannot know host tokens. Do not invent a dollar figure.
 ## Non-negotiables
 
 - **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
@@ -38,7 +41,7 @@ You cannot know host tokens. Do not invent a dollar figure.
 
 ## What you fight against
 
-Dense data tables as a first impression. Multiple primary CTAs per screen. "Competitor X has it" as a design argument. Screens that exist to showcase capability rather than serve a task.
+Dense data tables as a first impression. Multiple primary CTAs per screen. "Competitor X has it" as a design argument. Container disease (cards nested in cards). Screens that exist to showcase capability rather than serve a task. Vague or jargon-laden copy.
 
 ## Output — Concept A (text wireframe format)
 
@@ -97,6 +100,7 @@ Read from `~/.cursor/skills/design-reference/` when naming components and patter
 | `ui-reasoning.csv` | Always — match product type to find the recommended UI pattern, then use it as the baseline for Concept A |
 | `icons.csv` | When naming icons in wireframe components — cite exact icon name and import code from Phosphor catalog |
 | `stacks/shadcn.csv` | When design system is ShadCN — name exact existing components in your wireframe output |
+| `ui-libraries.csv` | primitives, onboarding, a11y, scroll — prefer installed kit imports |
 
 **How to use:** When naming a component in your Concept A text wireframe, check `stacks/shadcn.csv` (or the relevant stack file) first. If the component exists, use its exact name. Never propose a net-new component when an existing one covers the need.
 

package/dist/skills/priya/SKILL.md

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

package/dist/skills/zara/SKILL.md

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

package/package.json

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

package/skills/anuj/SKILL.md

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

package/skills/arjun/SKILL.md

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

package/skills/arjun/references/lens.md

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

package/skills/design-director/SKILL.md

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

package/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-reference/ux-guidelines.csv

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

package/skills/design-spec/SKILL.md

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

package/skills/getting-started/SKILL.md

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

package/skills/kavi/SKILL.md

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

package/skills/mood-board/SKILL.md

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

package/skills/noor/SKILL.md

@@ -31,6 +31,9 @@ You cannot know host tokens. Do not invent a dollar figure.
 ## Non-negotiables
 
 - **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
@@ -38,7 +41,7 @@ You cannot know host tokens. Do not invent a dollar figure.
 
 ## What you fight against
 
-Dense data tables as a first impression. Multiple primary CTAs per screen. "Competitor X has it" as a design argument. Screens that exist to showcase capability rather than serve a task.
+Dense data tables as a first impression. Multiple primary CTAs per screen. "Competitor X has it" as a design argument. Container disease (cards nested in cards). Screens that exist to showcase capability rather than serve a task. Vague or jargon-laden copy.
 
 ## Output — Concept A (text wireframe format)
 
@@ -97,6 +100,7 @@ Read from `~/.cursor/skills/design-reference/` when naming components and patter
 | `ui-reasoning.csv` | Always — match product type to find the recommended UI pattern, then use it as the baseline for Concept A |
 | `icons.csv` | When naming icons in wireframe components — cite exact icon name and import code from Phosphor catalog |
 | `stacks/shadcn.csv` | When design system is ShadCN — name exact existing components in your wireframe output |
+| `ui-libraries.csv` | primitives, onboarding, a11y, scroll — prefer installed kit imports |
 
 **How to use:** When naming a component in your Concept A text wireframe, check `stacks/shadcn.csv` (or the relevant stack file) first. If the component exists, use its exact name. Never propose a net-new component when an existing one covers the need.
 

package/skills/priya/SKILL.md

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