@rune-kit/rune 2.8.0 → 2.11.0

package/extensions/ui/skills/animation-patterns.md

@@ -1,106 +1,127 @@
----
-name: "animation-patterns"
-pack: "@rune/ui"
-description: "Motion design patterns — micro-interactions, page transitions, scroll animations, loading states. Applies CSS transitions, Framer Motion, or GSAP based on project stack. Always respects prefers-reduced-motion."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# animation-patterns
-
-Motion design patterns — micro-interactions, page transitions, scroll animations, loading states. Applies CSS transitions, Framer Motion, or GSAP based on project stack. Always respects `prefers-reduced-motion`.
-
-#### Workflow
-
-**Step 1 — Detect interaction points**
-Use Grep to find hover handlers (`onMouseEnter`, `:hover`), route changes (Next.js `useRouter`, SvelteKit `goto`), and loading states (`isLoading`, `isPending`). Read component files to understand where motion can add feedback or polish.
-
-**Step 2 — Apply micro-interactions**
-For each interaction point, select the appropriate pattern: hover → scale + shadow lift; button click → press-down (scale 0.97); data load → skeleton pulse then fade-in; route change → slide or fade transition. Emit the updated component with motion classes or Framer Motion variants.
-
-**Step 3 — Audit reduced-motion compliance**
-Use Grep to find every animation/transition declaration. Verify each is wrapped in a `prefers-reduced-motion: no-preference` media query or uses Framer Motion's `useReducedMotion()` hook. Flag any that are not.
-
-**Step 4 — Page transition patterns**
-Apply View Transitions API for same-document navigations (SvelteKit, Astro, vanilla JS). For React/Next.js, use Framer Motion `AnimatePresence` + `layoutId` for shared layout animations. Emit transition wrapper component with both strategies.
-
-#### Example
-
-```tsx
-// Tailwind micro-interaction with reduced-motion respect
-<button
-  className="
-    transform transition-all duration-200 ease-out
-    hover:scale-105 hover:shadow-md
-    active:scale-95
-    motion-reduce:transform-none motion-reduce:transition-none
-  "
->
-  Confirm
-</button>
-
-// Framer Motion with reduced-motion hook
-const prefersReduced = useReducedMotion()
-
-<motion.div
-  initial={{ opacity: 0, y: prefersReduced ? 0 : 16 }}
-  animate={{ opacity: 1, y: 0 }}
-  transition={{ duration: prefersReduced ? 0 : 0.25 }}
-/>
-```
-
-```tsx
-// Shared layout animation — card expands to modal (Framer Motion)
-// Works because both use the same layoutId="card-{id}"
-function CardGrid({ items }: { items: Item[] }) {
-  const [selected, setSelected] = useState<string | null>(null)
-  return (
-    <>
-      {items.map((item) => (
-        <motion.div
-          key={item.id}
-          layoutId={`card-${item.id}`}
-          onClick={() => setSelected(item.id)}
-          className="rounded-xl bg-[var(--bg-card)] border border-[var(--border)] cursor-pointer"
-        >
-          <motion.h3 layoutId={`title-${item.id}`}>{item.title}</motion.h3>
-        </motion.div>
-      ))}
-
-      <AnimatePresence>
-        {selected && (
-          <motion.div
-            layoutId={`card-${selected}`}
-            className="fixed inset-8 z-50 rounded-2xl bg-[var(--bg-card)] p-8"
-          >
-            <motion.h3 layoutId={`title-${selected}`} className="text-h2 font-bold">
-              {items.find(i => i.id === selected)?.title}
-            </motion.h3>
-            <button onClick={() => setSelected(null)} aria-label="Close">
-              <X aria-hidden="true" />
-            </button>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </>
-  )
-}
-```
-
-```css
-/* View Transitions API — SvelteKit / Astro page transitions */
-/* In app.css or global stylesheet */
-@media (prefers-reduced-motion: no-preference) {
-  ::view-transition-old(root) {
-    animation: 200ms ease-out both fade-out;
-  }
-  ::view-transition-new(root) {
-    animation: 250ms ease-in both fade-in;
-  }
-}
-
-@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
-@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
-
-/* SvelteKit: enable in svelte.config.js → experimental: { viewTransitions: true } */
-```
+---
+name: "animation-patterns"
+pack: "@rune/ui"
+description: "Motion design patterns — micro-interactions, page transitions, scroll animations, loading states. Applies CSS transitions, Framer Motion, or GSAP based on project stack. Always respects prefers-reduced-motion."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# animation-patterns
+
+Motion design patterns — micro-interactions, page transitions, scroll animations, loading states. Applies CSS transitions, Framer Motion, or GSAP based on project stack. Always respects `prefers-reduced-motion`.
+
+#### Workflow
+
+**Step 1 — Detect interaction points**
+Use Grep to find hover handlers (`onMouseEnter`, `:hover`), route changes (Next.js `useRouter`, SvelteKit `goto`), and loading states (`isLoading`, `isPending`). Read component files to understand where motion can add feedback or polish.
+
+**Step 2 — Apply micro-interactions**
+For each interaction point, select the appropriate pattern: hover → scale + shadow lift; button click → press-down (scale 0.97); data load → skeleton pulse then fade-in; route change → slide or fade transition. Emit the updated component with motion classes or Framer Motion variants.
+
+**Step 3 — Audit reduced-motion compliance**
+Use Grep to find every animation/transition declaration. Verify each is wrapped in a `prefers-reduced-motion: no-preference` media query or uses Framer Motion's `useReducedMotion()` hook. Flag any that are not.
+
+**Step 4 — Page transition patterns**
+Apply View Transitions API for same-document navigations (SvelteKit, Astro, vanilla JS). For React/Next.js, use Framer Motion `AnimatePresence` + `layoutId` for shared layout animations. Emit transition wrapper component with both strategies.
+
+**Step 5 — Mood-to-Animation Timing**
+
+If `.rune/design-system.md` contains a `## Mood` section, read the selected mood and apply the matching motion profile. This ensures animation feel aligns with the product's emotional intent — not just technical correctness.
+
+| Mood | Duration | Easing | Hover | Enter/Exit | Scroll | Signature |
+|------|----------|--------|-------|------------|--------|-----------|
+| **Impressed** | 0.8-1.2s | `ease-out` | Scale 1.03 + deep shadow | Fade-up 24px | Parallax layers | Staggered reveals with 100ms delay between items |
+| **Excited** | 0.4-0.6s | `spring(1, 80, 10)` | Scale 1.06 + color shift | Slide-in from edge | Snap scroll | Overshoot on entry (1.56 bounce), pulse on data change |
+| **Calm** | 0.6-0.8s | `ease-out-quad` | Subtle opacity 0.8→1 | Slow fade 300ms | Gentle float | Breathing rhythm on idle elements (opacity 0.7↔1, 4s loop) |
+| **Confident** | 0.3-0.5s | `ease` | Precise underline/border | Clean slide 16px | None or minimal | Sharp, decisive — no overshoot, no bounce |
+| **Playful** | 0.4-0.6s | `spring(1, 100, 12)` | Wobble or tilt (rotate ±2°) | Bounce-in from bottom | Elastic snap | Squish on click (scaleX 1.05, scaleY 0.95), emoji-like feedback |
+| **Techy** | 0.15-0.3s | `ease-out` | Glow border or underline | Instant or 100ms fade | Sticky headers | Typewriter text, cursor blink, terminal-feel transitions |
+| **Professional** | 0.2-0.3s | `ease` | Background tint only | Simple fade | Fixed header | Minimal — motion serves function, never decoration |
+| **Inspired** | 0.5-0.8s | `cubic-bezier(0.4, 0, 0.2, 1)` | Reveal hidden detail | Scroll-driven enter | Parallax + reveal | Cinematic — content appears as user discovers, like turning pages |
+
+**Usage rules:**
+1. Read mood from `.rune/design-system.md` → select matching row → apply as default motion tokens
+2. If no mood defined, fall back to **Professional** (safest, least opinionated)
+3. ALL timing values must be wrapped in `prefers-reduced-motion` check — mood doesn't override accessibility
+4. Mood overrides generic Step 2 micro-interactions where they conflict
+
+#### Example
+
+```tsx
+// Tailwind micro-interaction with reduced-motion respect
+<button
+  className="
+    transform transition-all duration-200 ease-out
+    hover:scale-105 hover:shadow-md
+    active:scale-95
+    motion-reduce:transform-none motion-reduce:transition-none
+  "
+>
+  Confirm
+</button>
+
+// Framer Motion with reduced-motion hook
+const prefersReduced = useReducedMotion()
+
+<motion.div
+  initial={{ opacity: 0, y: prefersReduced ? 0 : 16 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: prefersReduced ? 0 : 0.25 }}
+/>
+```
+
+```tsx
+// Shared layout animation — card expands to modal (Framer Motion)
+// Works because both use the same layoutId="card-{id}"
+function CardGrid({ items }: { items: Item[] }) {
+  const [selected, setSelected] = useState<string | null>(null)
+  return (
+    <>
+      {items.map((item) => (
+        <motion.div
+          key={item.id}
+          layoutId={`card-${item.id}`}
+          onClick={() => setSelected(item.id)}
+          className="rounded-xl bg-[var(--bg-card)] border border-[var(--border)] cursor-pointer"
+        >
+          <motion.h3 layoutId={`title-${item.id}`}>{item.title}</motion.h3>
+        </motion.div>
+      ))}
+
+      <AnimatePresence>
+        {selected && (
+          <motion.div
+            layoutId={`card-${selected}`}
+            className="fixed inset-8 z-50 rounded-2xl bg-[var(--bg-card)] p-8"
+          >
+            <motion.h3 layoutId={`title-${selected}`} className="text-h2 font-bold">
+              {items.find(i => i.id === selected)?.title}
+            </motion.h3>
+            <button onClick={() => setSelected(null)} aria-label="Close">
+              <X aria-hidden="true" />
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
+```
+
+```css
+/* View Transitions API — SvelteKit / Astro page transitions */
+/* In app.css or global stylesheet */
+@media (prefers-reduced-motion: no-preference) {
+  ::view-transition-old(root) {
+    animation: 200ms ease-out both fade-out;
+  }
+  ::view-transition-new(root) {
+    animation: 250ms ease-in both fade-in;
+  }
+}
+
+@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
+
+/* SvelteKit: enable in svelte.config.js → experimental: { viewTransitions: true } */
+```

package/extensions/ui/skills/component-patterns.md

@@ -1,75 +1,100 @@
----
-name: "component-patterns"
-pack: "@rune/ui"
-description: "Component architecture patterns — compound components, render props, composition, slots. Detects prop-heavy components and guides refactoring toward composable, maintainable architectures."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# component-patterns
-
-Component architecture patterns — compound components, render props, composition, slots. Detects prop-heavy components and guides refactoring toward composable, maintainable architectures.
-
-#### Workflow
-
-**Step 1 — Detect prop-heavy components**
-Use Grep to find component signatures with more than 8 props (`interface \w+Props \{` then count fields, or scan function parameter lists). Read each flagged file to understand the component's responsibilities.
-
-**Step 2 — Classify and suggest pattern**
-For each flagged component, classify by smell: boolean-flag hell → compound component; render logic branching → render props or slots; deeply nested data → context + provider. Output a refactor plan with the specific pattern to apply.
-
-**Step 3 — Emit refactored scaffold**
-Write the refactored component skeleton following the compound component pattern. Do not overwrite the original — emit to a `*.refactored.tsx` file for review.
-
-**Step 4 — Composition vs inheritance + slot patterns**
-After structural refactor, audit for slot opportunities (Svelte `<slot>`, Vue `v-slot`, React `children` with typed slots). Enforce: prefer composition (pass components as props) over inheritance (extend base class). Flag any `extends React.Component` or class-based patterns for migration.
-
-#### Example
-
-```tsx
-// BEFORE: prop-heavy (9 props, hard to extend)
-<Modal title="..." open footer actions size variant onClose onConfirm loading />
-
-// AFTER: compound component pattern
-<Modal open onClose={handleClose}>
-  <Modal.Header>Confirm Action</Modal.Header>
-  <Modal.Body>Are you sure?</Modal.Body>
-  <Modal.Footer>
-    <Button variant="ghost" onClick={handleClose}>Cancel</Button>
-    <Button variant="primary" loading={isLoading} onClick={handleConfirm}>
-      Confirm
-    </Button>
-  </Modal.Footer>
-</Modal>
-```
-
-```tsx
-// Svelte slot pattern — composition over prop drilling
-// Caller decides what goes in header/footer, component owns layout
-<Card>
-  <svelte:fragment slot="header">
-    <h3 class="text-h3 font-semibold">Usage this month</h3>
-  </svelte:fragment>
-
-  <MetricChart data={usage} />
-
-  <svelte:fragment slot="footer">
-    <a href="/billing" class="text-sm text-[var(--primary)]">View invoice</a>
-  </svelte:fragment>
-</Card>
-```
-
-```tsx
-// React typed children slots via discriminated union
-type ModalSlot = { as: 'header' | 'body' | 'footer'; children: React.ReactNode }
-
-function resolveSlots(children: React.ReactNode) {
-  const slots: Record<string, React.ReactNode> = {}
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement<ModalSlot>(child) && child.props.as) {
-      slots[child.props.as] = child.props.children
-    }
-  })
-  return slots
-}
-```
+---
+name: "component-patterns"
+pack: "@rune/ui"
+description: "Component architecture patterns — compound components, render props, composition, slots. Detects prop-heavy components and guides refactoring toward composable, maintainable architectures."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# component-patterns
+
+Component architecture patterns — compound components, render props, composition, slots. Detects prop-heavy components and guides refactoring toward composable, maintainable architectures.
+
+#### Workflow
+
+**Step 1 — Detect prop-heavy components**
+Use Grep to find component signatures with more than 8 props (`interface \w+Props \{` then count fields, or scan function parameter lists). Read each flagged file to understand the component's responsibilities.
+
+**Step 2 — Classify and suggest pattern**
+For each flagged component, classify by smell: boolean-flag hell → compound component; render logic branching → render props or slots; deeply nested data → context + provider. Output a refactor plan with the specific pattern to apply.
+
+**Step 3 — Emit refactored scaffold**
+Write the refactored component skeleton following the compound component pattern. Do not overwrite the original — emit to a `*.refactored.tsx` file for review.
+
+**Step 4 — Composition vs inheritance + slot patterns**
+After structural refactor, audit for slot opportunities (Svelte `<slot>`, Vue `v-slot`, React `children` with typed slots). Enforce: prefer composition (pass components as props) over inheritance (extend base class). Flag any `extends React.Component` or class-based patterns for migration.
+
+**Step 5 — Bento Card Archetypes**
+
+When designing card-based layouts, apply named archetypes instead of uniform grids. Each archetype has a specific interaction model and animation signature. Mix archetypes within a page to create visual hierarchy.
+
+| Archetype | Content Type | Layout | Interaction | Animation |
+|-----------|-------------|--------|-------------|-----------|
+| **Intelligent List** | Ranked/sortable items (leaderboard, top assets, recent activity) | Vertical stack, auto-reorders | Drag to reorder, click to expand | `layoutId` shared animation on reorder — items slide to new position (Framer Motion `layout` prop) |
+| **Command Input** | Search, AI prompt, quick actions | Single input + dropdown results | Type to filter, keyboard nav, Enter to execute | Typewriter placeholder text + shimmer gradient on focus + results fade-in with 50ms stagger |
+| **Live Status** | Real-time metrics (uptime, price, active users) | Compact card, number-dominant | Hover for sparkline/history | Breathing pulse on idle (opacity 0.85↔1, 3s), overshoot scale on value change (spring) |
+| **Wide Data Stream** | Horizontal feed (news, transactions, timeline) | Full-width horizontal scroll or infinite carousel | Swipe/drag, auto-advance optional | Infinite scroll with momentum, snap to item, fade edges to signal overflow |
+| **Contextual Panel** | Detail view, settings, metadata | Expandable from parent card or sidebar | Click parent → panel slides in | Stagger children (50ms each), float-in from right (translateX 24px → 0) |
+
+**Anti-patterns for card layouts:**
+- ❌ **Uniform grid** — all cards same size, same padding, same content structure = AI signature
+- ❌ **Card soup** — cards with no clear grouping or hierarchy
+- ❌ **Static bento** — bento layout without interaction model = decorative, not functional
+
+**Composition rules:**
+1. A page should use 2-4 archetypes max — more = visual noise
+2. **Live Status** cards cluster together (dashboard KPI row)
+3. **Intelligent List** is the primary content area — usually takes 60%+ of viewport
+4. **Command Input** is a singleton — ONE per page, always accessible (often pinned top or Cmd+K)
+5. **Wide Data Stream** breaks vertical rhythm — use as section separator between dense blocks
+6. **Contextual Panel** is secondary — triggered by interaction, never shown by default on load
+
+#### Example
+
+```tsx
+// BEFORE: prop-heavy (9 props, hard to extend)
+<Modal title="..." open footer actions size variant onClose onConfirm loading />
+
+// AFTER: compound component pattern
+<Modal open onClose={handleClose}>
+  <Modal.Header>Confirm Action</Modal.Header>
+  <Modal.Body>Are you sure?</Modal.Body>
+  <Modal.Footer>
+    <Button variant="ghost" onClick={handleClose}>Cancel</Button>
+    <Button variant="primary" loading={isLoading} onClick={handleConfirm}>
+      Confirm
+    </Button>
+  </Modal.Footer>
+</Modal>
+```
+
+```tsx
+// Svelte slot pattern — composition over prop drilling
+// Caller decides what goes in header/footer, component owns layout
+<Card>
+  <svelte:fragment slot="header">
+    <h3 class="text-h3 font-semibold">Usage this month</h3>
+  </svelte:fragment>
+
+  <MetricChart data={usage} />
+
+  <svelte:fragment slot="footer">
+    <a href="/billing" class="text-sm text-[var(--primary)]">View invoice</a>
+  </svelte:fragment>
+</Card>
+```
+
+```tsx
+// React typed children slots via discriminated union
+type ModalSlot = { as: 'header' | 'body' | 'footer'; children: React.ReactNode }
+
+function resolveSlots(children: React.ReactNode) {
+  const slots: Record<string, React.ReactNode> = {}
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement<ModalSlot>(child) && child.props.as) {
+      slots[child.props.as] = child.props.children
+    }
+  })
+  return slots
+}
+```

package/extensions/ui/skills/design-decision.md

@@ -1,108 +1,108 @@
----
-name: "design-decision"
-pack: "@rune/ui"
-description: "Product domain → style mapping. Given a product category, outputs a complete design recommendation: visual style, palette, typography pairing, component aesthetic, and a design-system.md scaffold."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# design-decision
-
-Product domain → style mapping. Given a product category, outputs a complete design recommendation: visual style, palette, typography pairing, component aesthetic, and a `design-system.md` scaffold. Bridges the gap between "I need to build a UI" and "I know exactly what it should look like."
-
-#### Workflow
-
-**Step 1 — Classify product domain**
-Read `CLAUDE.md`, `README.md`, or ask: "What problem does this product solve? Who uses it?" Map to one of the 9 domains below.
-
-**Step 2 — Recommend style stack**
-Apply the domain → style matrix. Output: visual style name, palette slug, typography pairing, component aesthetic, and 3 reference patterns to avoid ("do NOT do X").
-
-**Step 3 — Generate design-system.md**
-Emit a `design-system.md` file in the project root (or `.rune/`) with: color tokens (CSS custom properties), font pairing (Google Fonts link), spacing scale, component aesthetic rules, and anti-patterns for this domain.
-
-#### Domain → Style Matrix
-
-The matrix below provides default mappings. When `references/ui-pro-max-data/styles.csv` is available, query it for **84 additional styles** with industry-specific parameters — filter by domain column for expanded recommendations beyond these 10 defaults.
-
-```
-Domain            Style              Palette              Typography         Component Aesthetic
-─────────────────────────────────────────────────────────────────────────────────────────────
-Fintech/Trading   Dark + Precision   midnight-profit      Space Grotesk+Mono  Dense tables, data overlays
-Healthcare        Clean + Calm       clean-clinic         DM Sans+DM Serif    Rounded, soft, spacious
-Education         Warm + Friendly    warm-academy*        Fredoka+Nunito       Illustrated, playful cards
-Gaming            Dark + Neon        neon-arena           Rajdhani+Exo 2      Hard edges, glow effects
-Ecommerce         Trust + Focused    trust-cart           Inter+Inter          Product-first, clean CTA
-SaaS/Dashboard    Precision + Flex   slate-precision      Space Grotesk+Inter  Data-dense, sidebar nav
-Social/Community  Vibrant + Engaged  gradient-social*     Inter+Inter          Avatar-heavy, reaction UX
-News/Content      Readable + Neutral neutral-ink*         Playfair+Source Serif Wide columns, drop caps
-Productivity      Minimal + Calm     calm-focus*          Inter+Inter (weight) Almost no decoration
-DevTools          Terminal + Crisp   terminal-dark        JetBrains Mono+Inter Code blocks, mono emphasis
-
-* Palette not shown in palette-picker example block — generate with same CSS custom props pattern.
-```
-
-#### Extended Data (UI/UX Pro Max)
-
-When `references/ui-pro-max-data/` exists:
-- `styles.csv` — 84 styles with color params, animation, WCAG levels, mobile flags
-- `typography.csv` — 73 font pairings with Google Fonts URLs, Tailwind config, mood keywords
-- `ui-reasoning.csv` — 161 industry-specific reasoning rules (filter by domain)
-- Query: filter CSV by domain/category column → get expanded recommendations
-
-#### Style Characteristic Reference
-
-```
-glassmorphism    When: premium SaaS landing, dark bg hero. Avoid: dense data tables (illegible).
-                 CSS: background: rgba(255,255,255,0.05); backdrop-filter: blur(12px);
-                      border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
-
-neubrutalism     When: bold brand statement, startup, creative tool. Avoid: healthcare, finance.
-                 CSS: border: 2px solid #000; box-shadow: 4px 4px 0 #000;
-                      background: #ffe600; (or other saturated fill)
-
-claymorphism     When: education, kids, consumer apps. Avoid: enterprise, B2B data tools.
-                 CSS: border-radius: 20px; box-shadow: 0 8px 0 rgba(0,0,0,0.15),
-                      inset 0 -4px 0 rgba(0,0,0,0.1); (inflated, soft look)
-
-aurora/gradient  When: landing page hero ONLY, used sparingly. AVOID as overall theme.
-                 CSS: background: conic-gradient(from 180deg at 50% 50%, ...); opacity: 0.15;
-                      (subtle, behind content — never the main visual)
-
-flat/minimal     When: productivity, devtools, content. Best default for B2B SaaS.
-                 CSS: No shadows except --shadow-sm. Single accent color. Whitespace-heavy.
-
-dark-precision   When: fintech, devtools, monitoring. Default dark bg with high-contrast accents.
-                 CSS: bg #0f172a or darker; mono fonts for data; green/red semantic signals.
-```
-
-#### Example — Generated design-system.md
-
-```markdown
-# Design System: [Product Name]
-
-## Domain
-SaaS Dashboard — B2B productivity tool for engineering teams
-
-## Visual Style
-Flat/Minimal with Slate Precision palette. Dark mode default.
-Do NOT use gradient blobs, glassmorphism panels, or Lucide icons.
-
-## Color Tokens
-[→ See palette.css — generated by palette-picker, slate-precision]
-
-## Typography
-Pairing: Space Grotesk (headings, 600–700) + Inter (body, 400–500)
-[→ See Google Fonts link in type-system output]
-
-## Component Rules
-- Cards: bg-card + border border-[var(--border)] + rounded-lg. NO drop shadows on cards.
-- Buttons: primary = bg-primary text-white. ghost = border + transparent bg.
-- Icons: Phosphor Icons only. Weight: regular for UI, fill for status indicators.
-- Data tables: zebra stripe with bg-elevated on odd rows. Mono font for numbers.
-
-## Anti-Patterns for This Domain
-- No centered hero with 2-button CTA
-- No gradient backgrounds
-- No uniform card grid (vary card sizes by content importance)
-```
+---
+name: "design-decision"
+pack: "@rune/ui"
+description: "Product domain → style mapping. Given a product category, outputs a complete design recommendation: visual style, palette, typography pairing, component aesthetic, and a design-system.md scaffold."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# design-decision
+
+Product domain → style mapping. Given a product category, outputs a complete design recommendation: visual style, palette, typography pairing, component aesthetic, and a `design-system.md` scaffold. Bridges the gap between "I need to build a UI" and "I know exactly what it should look like."
+
+#### Workflow
+
+**Step 1 — Classify product domain**
+Read `CLAUDE.md`, `README.md`, or ask: "What problem does this product solve? Who uses it?" Map to one of the 9 domains below.
+
+**Step 2 — Recommend style stack**
+Apply the domain → style matrix. Output: visual style name, palette slug, typography pairing, component aesthetic, and 3 reference patterns to avoid ("do NOT do X").
+
+**Step 3 — Generate design-system.md**
+Emit a `design-system.md` file in the project root (or `.rune/`) with: color tokens (CSS custom properties), font pairing (Google Fonts link), spacing scale, component aesthetic rules, and anti-patterns for this domain.
+
+#### Domain → Style Matrix
+
+The matrix below provides default mappings. When `references/ui-pro-max-data/styles.csv` is available, query it for **84 additional styles** with industry-specific parameters — filter by domain column for expanded recommendations beyond these 10 defaults.
+
+```
+Domain            Style              Palette              Typography         Component Aesthetic
+─────────────────────────────────────────────────────────────────────────────────────────────
+Fintech/Trading   Dark + Precision   midnight-profit      Space Grotesk+Mono  Dense tables, data overlays
+Healthcare        Clean + Calm       clean-clinic         DM Sans+DM Serif    Rounded, soft, spacious
+Education         Warm + Friendly    warm-academy*        Fredoka+Nunito       Illustrated, playful cards
+Gaming            Dark + Neon        neon-arena           Rajdhani+Exo 2      Hard edges, glow effects
+Ecommerce         Trust + Focused    trust-cart           Inter+Inter          Product-first, clean CTA
+SaaS/Dashboard    Precision + Flex   slate-precision      Space Grotesk+Inter  Data-dense, sidebar nav
+Social/Community  Vibrant + Engaged  gradient-social*     Inter+Inter          Avatar-heavy, reaction UX
+News/Content      Readable + Neutral neutral-ink*         Playfair+Source Serif Wide columns, drop caps
+Productivity      Minimal + Calm     calm-focus*          Inter+Inter (weight) Almost no decoration
+DevTools          Terminal + Crisp   terminal-dark        JetBrains Mono+Inter Code blocks, mono emphasis
+
+* Palette not shown in palette-picker example block — generate with same CSS custom props pattern.
+```
+
+#### Extended Data (UI/UX Pro Max)
+
+When `references/ui-pro-max-data/` exists:
+- `styles.csv` — 84 styles with color params, animation, WCAG levels, mobile flags
+- `typography.csv` — 73 font pairings with Google Fonts URLs, Tailwind config, mood keywords
+- `ui-reasoning.csv` — 161 industry-specific reasoning rules (filter by domain)
+- Query: filter CSV by domain/category column → get expanded recommendations
+
+#### Style Characteristic Reference
+
+```
+glassmorphism    When: premium SaaS landing, dark bg hero. Avoid: dense data tables (illegible).
+                 CSS: background: rgba(255,255,255,0.05); backdrop-filter: blur(12px);
+                      border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
+
+neubrutalism     When: bold brand statement, startup, creative tool. Avoid: healthcare, finance.
+                 CSS: border: 2px solid #000; box-shadow: 4px 4px 0 #000;
+                      background: #ffe600; (or other saturated fill)
+
+claymorphism     When: education, kids, consumer apps. Avoid: enterprise, B2B data tools.
+                 CSS: border-radius: 20px; box-shadow: 0 8px 0 rgba(0,0,0,0.15),
+                      inset 0 -4px 0 rgba(0,0,0,0.1); (inflated, soft look)
+
+aurora/gradient  When: landing page hero ONLY, used sparingly. AVOID as overall theme.
+                 CSS: background: conic-gradient(from 180deg at 50% 50%, ...); opacity: 0.15;
+                      (subtle, behind content — never the main visual)
+
+flat/minimal     When: productivity, devtools, content. Best default for B2B SaaS.
+                 CSS: No shadows except --shadow-sm. Single accent color. Whitespace-heavy.
+
+dark-precision   When: fintech, devtools, monitoring. Default dark bg with high-contrast accents.
+                 CSS: bg #0f172a or darker; mono fonts for data; green/red semantic signals.
+```
+
+#### Example — Generated design-system.md
+
+```markdown
+# Design System: [Product Name]
+
+## Domain
+SaaS Dashboard — B2B productivity tool for engineering teams
+
+## Visual Style
+Flat/Minimal with Slate Precision palette. Dark mode default.
+Do NOT use gradient blobs, glassmorphism panels, or Lucide icons.
+
+## Color Tokens
+[→ See palette.css — generated by palette-picker, slate-precision]
+
+## Typography
+Pairing: Space Grotesk (headings, 600–700) + Inter (body, 400–500)
+[→ See Google Fonts link in type-system output]
+
+## Component Rules
+- Cards: bg-card + border border-[var(--border)] + rounded-lg. NO drop shadows on cards.
+- Buttons: primary = bg-primary text-white. ghost = border + transparent bg.
+- Icons: Phosphor Icons only. Weight: regular for UI, fill for status indicators.
+- Data tables: zebra stripe with bg-elevated on odd rows. Mono font for numbers.
+
+## Anti-Patterns for This Domain
+- No centered hero with 2-button CTA
+- No gradient backgrounds
+- No uniform card grid (vary card sizes by content importance)
+```