npm - @rune-kit/rune - Versions diffs - 2.2.0 → 2.2.1 - Mend

@rune-kit/rune 2.2.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/README.md +40 -34
package/compiler/__tests__/pack-split.test.js +145 -0
package/compiler/bin/rune.js +0 -5
package/compiler/doctor.js +42 -0
package/compiler/emitter.js +27 -4
package/compiler/parser.js +41 -3
package/compiler/transformer.js +10 -6
package/compiler/transforms/compliance.js +40 -0
package/extensions/ai-ml/PACK.md +38 -474
package/extensions/ai-ml/skills/ai-agents.md +172 -0
package/extensions/ai-ml/skills/code-sandbox.md +187 -0
package/extensions/ai-ml/skills/deep-research.md +146 -0
package/extensions/ai-ml/skills/embedding-search.md +66 -0
package/extensions/ai-ml/skills/fine-tuning-guide.md +74 -0
package/extensions/ai-ml/skills/llm-architect.md +125 -0
package/extensions/ai-ml/skills/llm-integration.md +64 -0
package/extensions/ai-ml/skills/prompt-patterns.md +72 -0
package/extensions/ai-ml/skills/rag-patterns.md +66 -0
package/extensions/ai-ml/skills/web-extraction.md +114 -0
package/extensions/analytics/PACK.md +19 -484
package/extensions/analytics/skills/ab-testing.md +72 -0
package/extensions/analytics/skills/dashboard-patterns.md +83 -0
package/extensions/analytics/skills/data-validation.md +68 -0
package/extensions/analytics/skills/funnel-analysis.md +81 -0
package/extensions/analytics/skills/sql-patterns.md +57 -0
package/extensions/analytics/skills/statistical-analysis.md +79 -0
package/extensions/analytics/skills/tracking-setup.md +71 -0
package/extensions/backend/PACK.md +44 -618
package/extensions/backend/skills/api-patterns.md +84 -0
package/extensions/backend/skills/async-pipeline.md +193 -0
package/extensions/backend/skills/auth-patterns.md +97 -0
package/extensions/backend/skills/background-jobs.md +133 -0
package/extensions/backend/skills/caching-patterns.md +108 -0
package/extensions/backend/skills/cli-generation.md +133 -0
package/extensions/backend/skills/database-patterns.md +87 -0
package/extensions/backend/skills/middleware-patterns.md +104 -0
package/extensions/chrome-ext/PACK.md +19 -921
package/extensions/chrome-ext/skills/cws-preflight.md +143 -0
package/extensions/chrome-ext/skills/cws-publish.md +104 -0
package/extensions/chrome-ext/skills/ext-ai-integration.md +251 -0
package/extensions/chrome-ext/skills/ext-messaging.md +139 -0
package/extensions/chrome-ext/skills/ext-storage.md +133 -0
package/extensions/chrome-ext/skills/mv3-scaffold.md +164 -0
package/extensions/content/PACK.md +43 -335
package/extensions/content/skills/blog-patterns.md +88 -0
package/extensions/content/skills/cms-integration.md +131 -0
package/extensions/content/skills/content-scoring.md +107 -0
package/extensions/content/skills/i18n.md +83 -0
package/extensions/content/skills/mdx-authoring.md +137 -0
package/extensions/content/skills/reference.md +1014 -0
package/extensions/content/skills/seo-patterns.md +67 -0
package/extensions/content/skills/video-repurpose.md +153 -0
package/extensions/devops/PACK.md +38 -457
package/extensions/devops/skills/chaos-testing.md +67 -0
package/extensions/devops/skills/ci-cd.md +75 -0
package/extensions/devops/skills/docker.md +58 -0
package/extensions/devops/skills/edge-serverless.md +163 -0
package/extensions/devops/skills/infra-as-code.md +158 -0
package/extensions/devops/skills/kubernetes.md +110 -0
package/extensions/devops/skills/monitoring.md +57 -0
package/extensions/devops/skills/server-setup.md +64 -0
package/extensions/devops/skills/ssl-domain.md +42 -0
package/extensions/ecommerce/PACK.md +62 -226
package/extensions/ecommerce/skills/cart-system.md +79 -0
package/extensions/ecommerce/skills/inventory-mgmt.md +102 -0
package/extensions/ecommerce/skills/order-management.md +126 -0
package/extensions/ecommerce/skills/payment-integration.md +472 -0
package/extensions/ecommerce/skills/shopify-dev.md +69 -0
package/extensions/ecommerce/skills/subscription-billing.md +93 -0
package/extensions/ecommerce/skills/tax-compliance.md +117 -0
package/extensions/gamedev/PACK.md +66 -317
package/extensions/gamedev/skills/asset-pipeline.md +74 -0
package/extensions/gamedev/skills/audio-system.md +129 -0
package/extensions/gamedev/skills/camera-system.md +87 -0
package/extensions/gamedev/skills/ecs.md +98 -0
package/extensions/gamedev/skills/game-loops.md +72 -0
package/extensions/gamedev/skills/input-system.md +199 -0
package/extensions/gamedev/skills/multiplayer.md +180 -0
package/extensions/gamedev/skills/particles.md +105 -0
package/extensions/gamedev/skills/physics-engine.md +89 -0
package/extensions/gamedev/skills/scene-management.md +146 -0
package/extensions/gamedev/skills/threejs-patterns.md +90 -0
package/extensions/gamedev/skills/webgl.md +71 -0
package/extensions/mobile/PACK.md +56 -223
package/extensions/mobile/skills/app-store-connect.md +152 -0
package/extensions/mobile/skills/app-store-prep.md +66 -0
package/extensions/mobile/skills/deep-linking.md +109 -0
package/extensions/mobile/skills/flutter.md +60 -0
package/extensions/mobile/skills/ios-build-pipeline.md +142 -0
package/extensions/mobile/skills/native-bridge.md +66 -0
package/extensions/mobile/skills/ota-updates.md +97 -0
package/extensions/mobile/skills/push-notifications.md +111 -0
package/extensions/mobile/skills/react-native.md +82 -0
package/extensions/saas/PACK.md +26 -720
package/extensions/saas/skills/billing-integration.md +121 -0
package/extensions/saas/skills/feature-flags.md +130 -0
package/extensions/saas/skills/multi-tenant.md +103 -0
package/extensions/saas/skills/onboarding-flow.md +139 -0
package/extensions/saas/skills/subscription-flow.md +95 -0
package/extensions/saas/skills/team-management.md +144 -0
package/extensions/security/PACK.md +10 -448
package/extensions/security/skills/api-security.md +140 -0
package/extensions/security/skills/compliance.md +68 -0
package/extensions/security/skills/owasp-audit.md +64 -0
package/extensions/security/skills/pentest-patterns.md +77 -0
package/extensions/security/skills/secret-mgmt.md +65 -0
package/extensions/security/skills/supply-chain.md +65 -0
package/extensions/trading/PACK.md +18 -535
package/extensions/trading/skills/chart-components.md +55 -0
package/extensions/trading/skills/experiment-loop.md +125 -0
package/extensions/trading/skills/fintech-patterns.md +47 -0
package/extensions/trading/skills/indicator-library.md +58 -0
package/extensions/trading/skills/quant-analysis.md +111 -0
package/extensions/trading/skills/realtime-data.md +58 -0
package/extensions/trading/skills/trade-logic.md +104 -0
package/extensions/ui/PACK.md +34 -853
package/extensions/ui/skills/a11y-audit.md +91 -0
package/extensions/ui/skills/animation-patterns.md +106 -0
package/extensions/ui/skills/component-patterns.md +75 -0
package/extensions/ui/skills/design-decision.md +98 -0
package/extensions/ui/skills/design-system.md +68 -0
package/extensions/ui/skills/landing-patterns.md +155 -0
package/extensions/ui/skills/palette-picker.md +162 -0
package/extensions/ui/skills/react-health.md +90 -0
package/extensions/ui/skills/type-system.md +125 -0
package/extensions/ui/skills/web-vitals.md +153 -0
package/extensions/zalo/PACK.md +117 -0
package/extensions/zalo/skills/zalo-oa-mcp.md +317 -0
package/extensions/zalo/skills/zalo-oa-messaging.md +429 -0
package/extensions/zalo/skills/zalo-oa-setup.md +236 -0
package/extensions/zalo/skills/zalo-oa-webhook.md +189 -0
package/extensions/zalo/skills/zalo-personal-messaging.md +194 -0
package/extensions/zalo/skills/zalo-personal-setup.md +153 -0
package/extensions/zalo/skills/zalo-rate-guard.md +219 -0
package/package.json +1 -1
package/skills/brainstorm/SKILL.md +63 -1
package/skills/cook/SKILL.md +84 -5
package/skills/mcp-builder/SKILL.md +48 -1
package/skills/review/SKILL.md +42 -5
package/skills/review-intake/SKILL.md +17 -1
package/skills/skill-router/SKILL.md +89 -7
package/skills/team/SKILL.md +24 -1
package/skills/test/SKILL.md +18 -0
package/skills/verification/SKILL.md +40 -1

package/extensions/ui/skills/a11y-audit.md ADDED Viewed

@@ -0,0 +1,91 @@
+---
+name: "a11y-audit"
+pack: "@rune/ui"
+description: "Accessibility audit beyond automated tools. Checks WCAG 2.1 AA compliance — focus management, screen reader compatibility, color contrast, ARIA patterns, keyboard navigation, focus traps, and skip navigation."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+# a11y-audit
+Accessibility audit beyond automated tools. Checks WCAG 2.1 AA compliance — focus management, screen reader compatibility, color contrast, ARIA patterns, keyboard navigation, focus traps, and skip navigation.
+#### Workflow
+**Step 1 — Automated scan**
+Run `Bash: npx axe-core-cli <url> --reporter json` to capture all automated violations. Parse the JSON output and group by impact: critical → serious → moderate → minor.
+**Step 2 — Manual WCAG 2.1 AA review**
+Use Grep to find `onClick` on non-button elements (missing keyboard support), `<img` without `alt`, `aria-label` absence on icon-only buttons, and `outline: none` without a focus-visible replacement. Read flagged files and annotate each violation with the WCAG criterion it breaks.
+**Step 3 — Emit audit report**
+Produce a structured report: automated violations (count by impact), manual violations (file + line + fix), contrast ratios for brand colors (pass/fail at AA). Include a prioritized fix list.
+**Step 4 — Focus trap audit + skip nav**
+Scan for `Dialog`, `Modal`, `Drawer`, `Popover` components. Verify each has: a focus trap on open (`focus-trap-react` or `aria-modal`), returns focus to trigger on close, has an `aria-labelledby` referencing its title. Also check: first `<a>` in `<body>` is a "Skip to main content" link visible on focus (WCAG 2.4.1).
+#### Example
+```tsx
+// VIOLATION: icon button with no accessible name
+<button onClick={handleClose}>
+  <XIcon />
+</button>
+// FIX: add aria-label; icon is decorative
+<button onClick={handleClose} aria-label="Close dialog">
+  <XIcon aria-hidden="true" />
+</button>
+// VIOLATION: div acting as button (no keyboard, no role)
+<div onClick={handleSubmit}>Submit</div>
+// FIX: use semantic element
+<button type="button" onClick={handleSubmit}>Submit</button>
+```
+```tsx
+// Focus trap pattern for modals (using focus-trap-react)
+import FocusTrap from 'focus-trap-react'
+export function Dialog({ open, onClose, title, children }: DialogProps) {
+  return open ? (
+    <FocusTrap focusTrapOptions={{ onDeactivate: onClose }}>
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title"
+        className="fixed inset-0 z-50 flex items-center justify-center"
+      >
+        <div className="bg-[var(--bg-card)] rounded-xl p-6 max-w-md w-full shadow-lg">
+          <h2 id="dialog-title" className="text-h3 font-semibold mb-4">{title}</h2>
+          {children}
+          <button
+            onClick={onClose}
+            aria-label="Close dialog"
+            className="absolute top-4 right-4 focus-visible:ring-2 focus-visible:ring-[var(--primary)]"
+          >
+            <X aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </FocusTrap>
+  ) : null
+}
+```
+```html
+<!-- Skip navigation link — must be FIRST focusable element in <body> -->
+<a
+  href="#main-content"
+  class="
+    sr-only focus:not-sr-only
+    fixed top-4 left-4 z-[9999]
+    px-4 py-2 rounded-md
+    bg-[var(--primary)] text-white font-semibold text-sm
+    focus-visible:ring-2 focus-visible:ring-offset-2
+  "
+>
+  Skip to main content
+</a>
+```

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

@@ -0,0 +1,106 @@
+---
+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 } */
+```

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

@@ -0,0 +1,75 @@
+---
+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
+}
+```

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

@@ -0,0 +1,98 @@
+---
+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
+```
+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.
+```
+#### 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)
+```

package/extensions/ui/skills/design-system.md ADDED Viewed

@@ -0,0 +1,68 @@
+---
+name: "design-system"
+pack: "@rune/ui"
+description: "Generate and enforce design system tokens — colors, typography, spacing, shadows, border radius. Detects existing ad-hoc values and consolidates them into a structured token file with full dark/light theme support."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+# design-system
+Generate and enforce design system tokens — colors, typography, spacing, shadows, border radius. Detects existing ad-hoc values and consolidates them into a structured token file with full dark/light theme support.
+#### Workflow
+**Step 1 — Detect existing tokens**
+Use Grep to scan for hardcoded color values (`#[0-9a-fA-F]{3,6}`, `rgb(`, `hsl(`), spacing (`px`, `rem`), and font sizes across all CSS, Tailwind config, and component files. Build an inventory of values in use.
+**Step 2 — Generate token file**
+From the inventory, produce a CSS custom properties file (or `tailwind.config` theme extension). Group tokens into semantic layers: primitive → semantic → component. Flag duplicates and near-duplicates (e.g., `#1a1a2e` vs `#1a1a2f`).
+**Step 3 — Enforce consistency**
+Re-run Grep after token file is written. Any hardcoded value that has a matching token is flagged as a violation. Output a replacement diff for each violation.
+**Step 4 — Dark/light theme toggle**
+Emit a `[data-theme]`-based theme switcher. Semantic tokens point to different primitives per theme. No JavaScript duplication — CSS handles the switch; JS only toggles the attribute.
+#### Example
+```css
+/* tokens.css — generated by design-system skill */
+:root,
+[data-theme="light"] {
+  /* Primitive */
+  --color-slate-950: #020617;
+  --color-slate-900: #0f172a;
+  --color-slate-100: #f1f5f9;
+  --color-emerald-500: #10b981;
+  --space-4: 1rem;
+  --radius-md: 0.5rem;
+  /* Semantic */
+  --bg-base:      var(--color-slate-100);
+  --bg-card:      #ffffff;
+  --text-primary: var(--color-slate-950);
+  --color-primary: var(--color-emerald-500);
+  --border-color: rgba(0, 0, 0, 0.1);
+}
+[data-theme="dark"] {
+  --bg-base:      var(--color-slate-950);
+  --bg-card:      var(--color-slate-900);
+  --text-primary: #f8fafc;
+  --color-primary: var(--color-emerald-500);
+  --border-color: rgba(255, 255, 255, 0.08);
+}
+```
+```ts
+// theme-toggle.ts — minimal toggle, no flash on reload
+const stored = localStorage.getItem('theme') ?? 'dark'
+document.documentElement.setAttribute('data-theme', stored)
+export function toggleTheme() {
+  const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+  document.documentElement.setAttribute('data-theme', next)
+  localStorage.setItem('theme', next)
+}
+```

package/extensions/ui/skills/landing-patterns.md ADDED Viewed

@@ -0,0 +1,155 @@
+---
+name: "landing-patterns"
+pack: "@rune/ui"
+description: "Landing page section patterns — 12 section archetypes with HTML structure hints, Tailwind classes, responsive rules, and conversion-focused copy guidance. Anti-AI design rules enforced throughout."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+# landing-patterns
+Landing page section patterns — 12 section archetypes with HTML structure hints, Tailwind classes, responsive rules, and conversion-focused copy guidance. Anti-AI design rules enforced throughout.
+#### Workflow
+**Step 1 — Identify page goal**
+Classify: acquisition (email capture / waitlist) | conversion (paid plan) | brand (awareness) | product (feature showcase). Goal determines section priority and CTA placement.
+**Step 2 — Select section sequence**
+From the section library below, compose a sequence. Recommended base: Hero → Social Proof → Features → How It Works → Testimonials → Pricing → FAQ → CTA Footer. Adjust by goal.
+**Step 3 — Apply style**
+Pull palette from `palette-picker` and fonts from `type-system`. Apply Anti-AI design rules (see below). Each section gets a distinct visual treatment — do NOT apply the same background/card style to every section.
+**Step 4 — Responsive audit**
+Every section must work at 375px (mobile), 768px (tablet), 1280px (desktop). Check text wrapping, CTA tap targets (≥ 44px), and image aspect ratios.
+**Step 5 — Conversion check**
+Verify: primary CTA visible above the fold; social proof within first 2 sections; pricing section has a clear default/recommended plan; FAQ addresses the top 3 objections.
+#### Section Library
+```
+Hero Variants:
+  split-hero         Left text + right image/video. NOT centered formula.
+  asymmetric-hero    60/40 split. Offset grid. Works for SaaS.
+  cinematic-hero     Full-bleed video/image background. Text overlay. Gaming / brand.
+Social Proof:
+  logo-strip         Horizontal scrolling logos. Grayscale → color on hover.
+  stats-bar          3–4 large numbers (e.g., "12,000+ teams"). Mono font.
+  testimonial-grid   Asymmetric card sizes. NOT uniform grid.
+  quote-hero         Single large pull-quote with avatar. Editorial feel.
+Features:
+  bento-grid         Mixed-size cards. Large hero card + smaller supporting.
+  alternating-rows   Icon + text, alternating left/right. Classic but effective.
+  feature-tabs       Tab navigation for feature groups. Reduces scroll length.
+Conversion:
+  pricing-toggle     Monthly / annual toggle. Recommended tier visually elevated.
+  pricing-comparison Feature matrix table. Clear checkmarks, no feature bloat.
+  cta-split          Left: value reminder. Right: form or button. High conversion.
+  floating-cta       Sticky bar at bottom on mobile. Dismissable.
+Discovery:
+  faq-accordion      Expandable Q&A. Addresses objections in copy, not just features.
+  how-it-works       3-step numbered sequence. Icon per step. Progress line optional.
+  waitlist-capture   Email input + social proof count. ("Join 3,200 on waitlist")
+```
+#### Example — Split Hero (Anti-AI compliant)
+```tsx
+// ANTI-AI RULES APPLIED:
+// ✅ Split layout — NOT centered hero formula
+// ✅ Custom brand color — NOT default indigo/violet
+// ✅ Phosphor Icons — NOT Lucide
+// ✅ Asymmetric layout — NOT uniform sections
+// ✅ No gradient blob
+import { ArrowRight, CheckCircle } from '@phosphor-icons/react'
+export function SplitHero() {
+  return (
+    <section className="min-h-screen grid lg:grid-cols-[1fr_1.2fr] items-center gap-0">
+      {/* Left — copy */}
+      <div className="px-8 py-20 lg:px-16 lg:py-0 max-w-xl">
+        <span className="inline-flex items-center gap-2 text-sm font-medium text-[var(--primary)] mb-6">
+          <CheckCircle weight="fill" size={16} aria-hidden="true" />
+          Now in public beta
+        </span>
+        <h1 className="font-display text-h1 font-bold text-[var(--text-primary)] mb-6 leading-tight">
+          Shipping fast starts<br />
+          <em className="not-italic text-[var(--primary)]">before the sprint</em>
+        </h1>
+        <p className="text-[var(--text-secondary)] text-body leading-relaxed mb-8 max-w-md">
+          Rune wires your AI coding assistant to a mesh of 55 skills so you spend time building, not prompting.
+        </p>
+        <div className="flex flex-wrap gap-3">
+          <a
+            href="/signup"
+            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[var(--primary)] text-white font-semibold text-sm hover:opacity-90 transition-opacity focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2"
+          >
+            Get started free
+            <ArrowRight size={16} aria-hidden="true" />
+          </a>
+          <a
+            href="/docs"
+            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-[var(--border)] text-[var(--text-primary)] font-semibold text-sm hover:bg-[var(--bg-card)] transition-colors"
+          >
+            Read the docs
+          </a>
+        </div>
+      </div>
+      {/* Right — visual (product screenshot or illustration) */}
+      <div className="relative h-full min-h-[60vh] bg-[var(--bg-card)] overflow-hidden">
+        {/* Replace with actual product screenshot */}
+        <div className="absolute inset-0 flex items-center justify-center text-[var(--text-secondary)]">
+          Product visual
+        </div>
+      </div>
+    </section>
+  )
+}
+```
+#### Example — Bento Grid Features
+```tsx
+// Bento: asymmetric sizing breaks the uniform grid anti-pattern
+export function BentoFeatures() {
+  return (
+    <section className="py-24 px-6">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="font-display text-h2 font-semibold text-[var(--text-primary)] mb-12 text-center">
+          One mesh. Every workflow.
+        </h2>
+        {/* Intentionally unequal grid — NOT uniform cards */}
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-[200px]">
+          {/* Hero card — spans 2 cols × 2 rows */}
+          <div className="col-span-2 row-span-2 rounded-xl bg-[var(--bg-card)] border border-[var(--border)] p-8 flex flex-col justify-end">
+            <p className="text-xs font-medium text-[var(--primary)] mb-2 uppercase tracking-wide">Orchestration</p>
+            <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">cook — your AI project manager</h3>
+            <p className="text-sm text-[var(--text-secondary)]">Phases your work, delegates to the right skill, and escalates when stuck.</p>
+          </div>
+          {/* Small cards fill remaining cells */}
+          <div className="rounded-xl bg-[var(--bg-card)] border border-[var(--border)] p-6 flex flex-col justify-between">
+            <p className="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wide">55 Skills</p>
+            <p className="text-2xl font-bold font-mono text-[var(--text-primary)]">5 layers</p>
+          </div>
+          <div className="rounded-xl bg-[var(--bg-card)] border border-[var(--border)] p-6">
+            <p className="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wide mb-2">Platforms</p>
+            <p className="text-sm text-[var(--text-primary)]">Claude Code · Cursor · Windsurf · Antigravity</p>
+          </div>
+          <div className="col-span-2 rounded-xl bg-[var(--bg-card)] border border-[var(--border)] p-6">
+            <p className="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wide mb-2">Open source</p>
+            <p className="text-sm text-[var(--text-primary)]">MIT license. Self-host or install in 30 seconds.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+```