@rune-kit/rune 2.2.0 → 2.2.2

package/extensions/ui/skills/palette-picker.md

@@ -0,0 +1,173 @@
+---
+name: "palette-picker"
+pack: "@rune/ui"
+description: "Color palette database organized by product type. 25 curated palettes covering fintech, healthcare, education, gaming, ecommerce, SaaS, social, news/content, productivity, and developer tools — each with CSS custom properties, Tailwind config extension, dark/light variants, and colorblind-safe alternatives."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# palette-picker
+
+Color palette database organized by product type. 25 curated palettes covering fintech, healthcare, education, gaming, ecommerce, SaaS, social, news/content, productivity, and developer tools — each with CSS custom properties, Tailwind config extension, dark/light variants, and colorblind-safe alternatives.
+
+#### Workflow
+
+**Step 1 — Detect product type**
+Read `CLAUDE.md`, `README.md`, or ask: "What does this product do?" Classify into one of: fintech | healthcare | education | gaming | ecommerce | saas | social | news-content | productivity | devtools.
+
+**Step 2 — Recommend palette**
+Apply the decision tree below. Output the top 2 palette candidates with rationale (mood, contrast profile, brand signal).
+
+**Step 3 — Generate token file**
+Emit `palette.css` with CSS custom properties for the chosen palette. Include both dark and light variants. Include Tailwind `theme.extend.colors` block.
+
+**Step 4 — Verify contrast ratios**
+Run contrast checks: primary text on background (≥ 4.5:1), large headings (≥ 3:1), interactive elements on their backgrounds. Flag any failure. Substitute colorblind-safe alternative if requested.
+
+#### Decision Tree
+
+The tree below provides 10 default palettes. When `references/ui-pro-max-data/colors.csv` is available, query it for **161 industry-specific palettes** with full dark/light variants, semantic tokens, and design psychology notes. Filter by domain column for expanded options.
+
+```
+Product Type          → Palette Recommendation
+─────────────────────────────────────────────────
+fintech / trading     → Midnight Profit (dark bg + green/red signals)
+healthcare            → Clean Clinic (white/teal, high readability)
+education / kids      → Warm Academy (amber/orange, approachable)
+gaming                → Neon Arena (dark + electric cyan/magenta)
+ecommerce             → Trust Cart (white + amber CTA + forest green)
+saas / dashboard      → Slate Precision (slate-900 + blue-500 accents)
+social / community    → Gradient Social (slate + violet/fuchsia gradient)
+news / content        → Neutral Ink (off-white + near-black, serif-ready)
+productivity / tools  → Calm Focus (gray-50 + indigo-700, minimal noise)
+developer tools       → Terminal Dark (zinc-950 + emerald-400 mono)
+```
+
+#### Extended Palette DB (UI/UX Pro Max)
+
+When `references/ui-pro-max-data/colors.csv` exists:
+- 161 palettes with Primary, Secondary, Accent, Background, Foreground (dark+light)
+- Semantic tokens: Card, Muted, Border, Destructive, Ring variants
+- Design psychology notes per palette
+- Query: `grep -i "<domain>" references/ui-pro-max-data/colors.csv` → get domain-matched palettes
+- Anti-AI check: if selected palette uses #6366f1 (indigo) or #8b5cf6 (violet) as primary → flag and suggest alternatives from DB
+
+#### Palette Reference
+
+```css
+/* ── PALETTE: Midnight Profit (Fintech/Trading) ─────────────── */
+[data-palette="midnight-profit"][data-theme="dark"] {
+  --bg-base:        #0c1419;
+  --bg-card:        #121a20;
+  --bg-elevated:    #1a2332;
+  --text-primary:   #ffffff;
+  --text-secondary: #a0aeb8;
+  --border:         #2a3f52;
+  --profit:         #00d084;   /* green — gains */
+  --loss:           #ff6b6b;   /* red — losses */
+  --accent:         #2196f3;
+  /* Colorblind (deuteranopia): profit→#1e88e5, loss→#ffa726 */
+}
+[data-palette="midnight-profit"][data-theme="light"] {
+  --bg-base:        #faf8f3;
+  --bg-card:        #f5f0ea;
+  --text-primary:   #0c1419;
+  --text-secondary: #4a5568;
+  --border:         #d1cfc9;
+  --profit:         #059669;
+  --loss:           #dc2626;
+  --accent:         #1d4ed8;
+}
+
+/* ── PALETTE: Clean Clinic (Healthcare) ─────────────────────── */
+[data-palette="clean-clinic"] {
+  --bg-base:        #f0fafa;
+  --bg-card:        #ffffff;
+  --text-primary:   #0d1f2d;
+  --text-secondary: #4b6070;
+  --border:         #c7e8ea;
+  --primary:        #0891b2;   /* cyan-600 */
+  --secondary:      #0d9488;   /* teal-600 */
+  --accent:         #06b6d4;
+  --danger:         #ef4444;
+  --success:        #16a34a;
+}
+
+/* ── PALETTE: Slate Precision (SaaS/Dashboard) ───────────────── */
+[data-palette="slate-precision"][data-theme="dark"] {
+  --bg-base:        #0f172a;
+  --bg-card:        #1e293b;
+  --bg-elevated:    #334155;
+  --text-primary:   #f8fafc;
+  --text-secondary: #94a3b8;
+  --primary:        #3b82f6;   /* blue-500 */
+  --success:        #10b981;
+  --danger:         #ef4444;
+  --warning:        #f59e0b;
+}
+[data-palette="slate-precision"][data-theme="light"] {
+  --bg-base:        #ffffff;
+  --bg-card:        #f8fafc;
+  --bg-elevated:    #f1f5f9;
+  --text-primary:   #0f172a;
+  --text-secondary: #475569;
+  --primary:        #2563eb;
+}
+
+/* ── PALETTE: Neon Arena (Gaming) ────────────────────────────── */
+[data-palette="neon-arena"] {
+  --bg-base:        #080c10;
+  --bg-card:        #0f1520;
+  --text-primary:   #e8f4f8;
+  --text-secondary: #7a9ab0;
+  --primary:        #00ffe0;   /* electric cyan */
+  --secondary:      #ff2d78;   /* hot magenta */
+  --accent:         #ffe600;   /* warning yellow */
+  --border:         rgba(0, 255, 224, 0.15);
+}
+
+/* ── PALETTE: Trust Cart (Ecommerce) ─────────────────────────── */
+[data-palette="trust-cart"][data-theme="light"] {
+  --bg-base:        #ffffff;
+  --bg-card:        #fafafa;
+  --text-primary:   #111827;
+  --text-secondary: #6b7280;
+  --cta:            #f97316;   /* orange-500 — add-to-cart */
+  --success:        #16a34a;   /* forest green — in stock */
+  --trust:          #1d4ed8;   /* blue — secure badge */
+  --border:         #e5e7eb;
+}
+
+/* ── PALETTE: Terminal Dark (Developer Tools) ────────────────── */
+[data-palette="terminal-dark"] {
+  --bg-base:        #09090b;   /* zinc-950 */
+  --bg-card:        #18181b;   /* zinc-900 */
+  --bg-elevated:    #27272a;   /* zinc-800 */
+  --text-primary:   #fafafa;
+  --text-secondary: #a1a1aa;
+  --primary:        #34d399;   /* emerald-400 — code green */
+  --accent:         #818cf8;   /* indigo-400 — links */
+  --border:         #3f3f46;
+  --comment:        #71717a;
+}
+```
+
+```js
+// tailwind.config.js — extending with palette tokens
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        profit:  'var(--profit)',
+        loss:    'var(--loss)',
+        primary: 'var(--primary)',
+        'bg-base':  'var(--bg-base)',
+        'bg-card':  'var(--bg-card)',
+        'text-primary':   'var(--text-primary)',
+        'text-secondary': 'var(--text-secondary)',
+      }
+    }
+  }
+}
+```

package/extensions/ui/skills/react-health.md

@@ -0,0 +1,90 @@
+---
+name: "react-health"
+pack: "@rune/ui"
+description: "React codebase health scoring — 0-100 health score across 6 dimensions: state management, effects hygiene, performance patterns, architecture, bundle efficiency, and accessibility."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# react-health
+
+React codebase health scoring — 0-100 health score across 6 dimensions: state management, effects hygiene, performance patterns, architecture, bundle efficiency, and accessibility. Detects anti-patterns that automated linters miss, quantifies technical debt, and produces a prioritized fix list.
+
+#### Workflow
+
+**Step 1 — Detect framework and React version**
+Read `package.json` to identify: React version (17/18/19), framework (Next.js, Vite, Remix, Astro), compiler status (`react-compiler` or `babel-plugin-react-compiler`), and styling approach (Tailwind, CSS Modules, styled-components). Framework context changes which rules apply — Next.js has App Router-specific patterns, Vite has different chunking strategies.
+
+**Step 2 — State and effects audit**
+Use Grep to scan for these anti-patterns across all `*.tsx`, `*.jsx` files:
+
+| Anti-Pattern | Grep Pattern | Why It's Bad |
+|---|---|---|
+| Derived state in useState | `useState.*=.*props\.` or `useEffect.*setState` that mirrors a prop | Causes sync bugs — compute during render instead |
+| Unnecessary effects for data transform | `useEffect.*setState.*filter\|map\|reduce` | Runs after render for no reason — move to useMemo or compute inline |
+| Missing cleanup in effects | `useEffect` without `return () =>` when subscribing | Memory leaks on unmount (WebSocket, intervals, event listeners) |
+| State for ref-appropriate values | `useState` tracking DOM measurements, timers, previous values | Causes unnecessary re-renders — use useRef |
+| Prop drilling > 3 levels | Component chains passing the same prop through 3+ files | Extract to Context or Zustand store |
+| God component > 300 lines | Component files exceeding 300 LOC | Split into composed smaller components |
+
+Score: count violations, weight by severity (critical=5, high=3, medium=1), calculate percentage against total component count.
+
+**Step 3 — Dead code detection**
+Scan for unused exports, orphaned files, and dead types:
+- **Unused exports**: Use Grep to find all `export` declarations, then cross-reference with import statements across the codebase. Any export not imported anywhere (excluding entry points and barrel files) is dead.
+- **Orphan files**: Use Glob to find all `.tsx`/`.ts` files, then check which are never imported. Exclude test files, config files, and entry points.
+- **Duplicate components**: Find components with similar names or identical prop interfaces that could be consolidated.
+- **Barrel file bloat**: Flag `index.ts` files that re-export everything — these break tree-shaking and increase bundle size.
+
+**Step 4 — Bundle efficiency audit**
+Check for common bundle bloat patterns:
+- **Wholesale imports**: `import _ from 'lodash'` instead of `import groupBy from 'lodash/groupBy'` — can add 70KB+ to bundle
+- **Moment.js usage**: Flag any `import moment` — suggest `date-fns` or `dayjs` (moment is 300KB with locales)
+- **Icon library imports**: `import { Icon } from 'react-icons'` importing the full set — use specific pack imports
+- **Missing dynamic imports**: Large components (charts, editors, modals) loaded eagerly — should use `React.lazy()` or Next.js `dynamic()`
+- **Polyfill sprawl**: Check `browserslist` or `@babel/preset-env` targets — modern-only targets can drop 20-50KB of polyfills
+- **CSS-in-JS runtime cost**: Flag `styled-components` or `@emotion/styled` in performance-critical paths — suggest extraction or Tailwind
+
+**Step 5 — Performance patterns check**
+Scan for React-specific performance issues:
+- `React.memo` wrapping components that receive new object/array literals as props (memo is useless with `style={{}}` or `data={[...]}}`)
+- Missing `key` prop on list items, or using array index as key on dynamic lists
+- Inline function creation in JSX (`onClick={() => fn(id)}`) inside large lists (>50 items) without `useCallback`
+- `useEffect` with missing dependencies (lint-suppressed with `// eslint-disable-next-line`)
+- Context providers wrapping the entire app when only a subtree needs them (causes full-app re-renders)
+- Unvirtualized lists rendering >50 items — flag for `@tanstack/react-virtual` or `react-window`
+
+**Step 6 — Generate health report**
+Produce a structured health report with scores:
+
+```
+React Health Report — [Project Name]
+═══════════════════════════════════════
+Overall Score: 72/100 (Needs work)
+
+Dimension          Score   Issues Found
+─────────────────────────────────────
+State/Effects      65/100  3 derived states, 2 missing cleanups
+Performance        78/100  1 unvirtualized list, barrel file bloat
+Architecture       80/100  1 god component (412 lines)
+Bundle Efficiency  60/100  lodash wholesale import, no dynamic imports
+Dead Code          85/100  4 unused exports, 1 orphan file
+Accessibility      70/100  6 icon buttons missing aria-label
+
+Score Tiers: 75+ Great │ 50-74 Needs Work │ <50 Critical
+
+Top 5 Fixes (by impact):
+1. [CRITICAL] Replace lodash wholesale import → save ~70KB
+2. [HIGH] Add React.lazy() to ChartPanel and RichEditor
+3. [HIGH] Extract derived state from useEffect in UserList
+4. [MEDIUM] Virtualize TransactionTable (renders 200+ rows)
+5. [MEDIUM] Remove 4 unused exports in utils/
+```
+
+#### Sharp Edges
+
+| Failure Mode | Mitigation |
+|---|---|
+| False positives on "unused exports" in library packages | Exclude files matching `package.json` `main`/`exports` entry points |
+| Barrel file detection flags intentional public API re-exports | Only flag barrel files in `src/` not in package root |
+| God component count includes generated files | Exclude files matching `*.generated.*`, `*.auto.*` patterns |

package/extensions/ui/skills/type-system.md

@@ -0,0 +1,125 @@
+---
+name: "type-system"
+pack: "@rune/ui"
+description: "Typography pairing database — 22 font pairings organized by product vibe. Each pairing includes Google Fonts URL, Tailwind config, size scale from display to caption, weight mapping, and line height ratios."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# type-system
+
+Typography pairing database — 22 font pairings organized by product vibe. Each pairing includes Google Fonts URL, Tailwind config, size scale from display to caption, weight mapping, and line height ratios. Decision tree maps product type and tone to the right pairing.
+
+#### Workflow
+
+**Step 1 — Detect product tone**
+Read `CLAUDE.md` or ask: "What is the product tone?" Classify: modern-tech | editorial | playful | corporate | developer | luxury | humanist | brutalist | minimal.
+
+**Step 2 — Recommend pairing**
+Apply the decision tree. Output the top 2 pairings with rationale (brand signal, readability score, Google Fonts load weight).
+
+**Step 3 — Generate @font-face / config**
+Emit the `<link>` preconnect + stylesheet tag for Google Fonts. Emit Tailwind `fontFamily` config. Emit a CSS type scale (`--text-display` through `--text-caption`).
+
+**Step 4 — Verify readability**
+Check: body size ≥ 14px, line-height ≥ 1.5 for body, ≤ 1.25 for headings. Flag any contrast failure using the project's background token.
+
+#### Decision Tree
+
+```
+Product Tone          → Pairing
+──────────────────────────────────────────────────────────
+modern tech / saas    → Space Grotesk + Inter
+editorial / blog      → Playfair Display + Source Serif 4
+playful / kids / app  → Fredoka + Nunito
+corporate / enterprise→ IBM Plex Sans + IBM Plex Serif
+developer tools / CLI → JetBrains Mono + Inter
+luxury / fashion      → Cormorant Garamond + Montserrat
+humanist / health     → DM Sans + DM Serif Display
+brutalist / bold      → Bebas Neue + IBM Plex Mono
+minimal / productivity→ Inter + Inter (weight-only hierarchy)
+gaming / esports      → Rajdhani + Exo 2
+```
+
+#### Pairing Reference
+
+```html
+<!-- Space Grotesk + Inter (modern-tech / saas) -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
+<!-- Playfair Display + Source Serif 4 (editorial) -->
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
+
+<!-- Fredoka + Nunito (playful) -->
+<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600&display=swap" rel="stylesheet">
+
+<!-- IBM Plex Sans + IBM Plex Serif (corporate) -->
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@400;600&display=swap" rel="stylesheet">
+
+<!-- JetBrains Mono + Inter (developer tools) -->
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
+<!-- Cormorant Garamond + Montserrat (luxury) -->
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,400&family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
+
+<!-- DM Sans + DM Serif Display (humanist / health) -->
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap" rel="stylesheet">
+```
+
+```css
+/* Type scale — Space Grotesk + Inter pairing */
+:root {
+  --font-display:  'Space Grotesk', system-ui, sans-serif;
+  --font-body:     'Inter', system-ui, sans-serif;
+  --font-mono:     'JetBrains Mono', monospace;
+
+  /* Scale */
+  --text-display:  clamp(2.5rem, 5vw, 4.5rem); /* 40–72px */
+  --text-h1:       clamp(2rem,   4vw, 2.5rem);  /* 32–40px */
+  --text-h2:       clamp(1.375rem, 2.5vw, 1.75rem); /* 22–28px */
+  --text-h3:       1.125rem;  /* 18px */
+  --text-body:     1rem;      /* 16px */
+  --text-small:    0.875rem;  /* 14px */
+  --text-caption:  0.75rem;   /* 12px */
+
+  /* Leading */
+  --leading-tight:  1.2;
+  --leading-snug:   1.35;
+  --leading-normal: 1.5;
+  --leading-relaxed:1.75;
+}
+
+h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); }
+body        { font-family: var(--font-body);    line-height: var(--leading-normal); }
+code, pre   { font-family: var(--font-mono); }
+
+/* Financial numbers — always mono + bold */
+.number, .price, .stat {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+```
+
+```js
+// tailwind.config.js — font pairing extension
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['Space Grotesk', 'system-ui', 'sans-serif'],
+        body:    ['Inter',         'system-ui', 'sans-serif'],
+        mono:    ['JetBrains Mono','monospace'],
+      },
+      fontSize: {
+        'display': ['clamp(2.5rem, 5vw, 4.5rem)', { lineHeight: '1.1' }],
+        'h1':      ['clamp(2rem, 4vw, 2.5rem)',   { lineHeight: '1.2' }],
+        'h2':      ['1.75rem',  { lineHeight: '1.3' }],
+        'h3':      ['1.125rem', { lineHeight: '1.4' }],
+      }
+    }
+  }
+}
+```

package/extensions/ui/skills/web-vitals.md

@@ -0,0 +1,153 @@
+---
+name: "web-vitals"
+pack: "@rune/ui"
+description: "Core Web Vitals performance audit — measures LCP, CLS, FCP, TBT, INP, and Speed Index against Google thresholds. Identifies render-blocking resources, network dependency chains, layout shift culprits, missing preloads, caching gaps, and tree-shaking opportunities."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# web-vitals
+
+Core Web Vitals performance audit — measures LCP, CLS, FCP, TBT, INP, and Speed Index against Google thresholds. Identifies render-blocking resources, network dependency chains, layout shift culprits, missing preloads, caching gaps, and tree-shaking opportunities. Framework-aware analysis for Next.js, Vite, SvelteKit, and Astro.
+
+#### Workflow
+
+**Step 1 — Detect build tooling and framework**
+Read `package.json`, config files (`next.config.*`, `vite.config.*`, `svelte.config.*`, `astro.config.*`), and build scripts. Identify:
+- Bundler: Webpack, Vite, Rollup, esbuild, Turbopack
+- Framework: Next.js (App Router vs Pages), SvelteKit, Astro, Remix
+- CSS strategy: Tailwind (content config), CSS Modules, global CSS
+- Compression: gzip/brotli configuration
+- Source maps: enabled in production? (should be external or disabled)
+
+**Step 2 — Audit render-blocking resources**
+Use Grep to scan HTML entry points and framework layouts for:
+- `<link rel="stylesheet">` in `<head>` without `media` attribute — blocks first paint
+- `<script>` tags without `async` or `defer` — blocks HTML parsing
+- CSS `@import` chains — each import is a sequential network request
+- Large inline `<style>` blocks (>50KB) — delays first paint
+
+For each blocking resource, estimate impact: 0ms impact = note but don't prioritize. Focus on resources that delay FCP by >100ms.
+
+**Step 3 — Analyze layout shift sources (CLS)**
+Use Grep to find common CLS culprits:
+- `<img>` and `<video>` without explicit `width` and `height` attributes — causes layout shift when media loads
+- Dynamic content injection above the fold (`insertBefore`, `prepend`, or React `useState` toggling visibility)
+- Web fonts without `font-display: swap` or `font-display: optional` — FOIT causes text layout shift
+- Ads or embeds without reserved space (`aspect-ratio` or `min-height` on container)
+- CSS animations that trigger layout (`top`, `left`, `width`, `height`) instead of composited properties (`transform`, `opacity`)
+
+#### CLS Fix Patterns
+
+```html
+<!-- BEFORE: no dimensions → layout shift when image loads -->
+<img src="/hero.jpg" alt="Hero" />
+
+<!-- AFTER: explicit dimensions prevent CLS -->
+<img src="/hero.jpg" alt="Hero" width="1200" height="630"
+     class="w-full h-auto" loading="lazy" decoding="async" />
+```
+
+```css
+/* Font display — prevent FOIT layout shift */
+@font-face {
+  font-family: 'Space Grotesk';
+  src: url('/fonts/space-grotesk.woff2') format('woff2');
+  font-display: swap; /* show fallback immediately, swap when loaded */
+}
+
+/* Reserve space for dynamic content */
+.ad-container {
+  min-height: 250px; /* match ad unit height */
+  contain: layout;   /* prevent layout influence on siblings */
+}
+```
+
+**Step 4 — Network dependency chain analysis**
+Identify critical rendering path bottlenecks:
+- **Waterfall chains**: Resource A loads → discovers Resource B → discovers Resource C. Each link adds latency. Fix with `<link rel="preload">` for critical assets.
+- **Missing preconnects**: Third-party origins (fonts.googleapis.com, CDN, analytics) without `<link rel="preconnect">`. But verify the origin is actually used — unused preconnects waste connection resources.
+- **Large payloads without compression**: JS/CSS bundles >100KB served without gzip/brotli. Check server response headers for `Content-Encoding`.
+- **Duplicate requests**: Same resource fetched multiple times (common with CSS @import or uncoordinated dynamic imports).
+
+```html
+<!-- Preload critical resources discovered late in the waterfall -->
+<link rel="preload" href="/fonts/inter-var.woff2" as="font"
+      type="font/woff2" crossorigin />
+<link rel="preload" href="/hero-image.webp" as="image"
+      fetchpriority="high" />
+
+<!-- Preconnect to third-party origins ACTUALLY used -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+```
+
+**Step 5 — Tree-shaking and code splitting audit**
+Check bundler configuration and import patterns:
+
+| Issue | Detection | Fix |
+|---|---|---|
+| Barrel file re-exports break tree-shaking | `index.ts` with `export * from` or `export { A, B, C, ... }` importing everything | Import directly from source: `import { Button } from './Button'` not `from '.'` |
+| `sideEffects: false` missing in package.json | Check `package.json` `sideEffects` field | Add `"sideEffects": false` (or list files with side effects like CSS imports) |
+| No code splitting at route level | Framework routes without `React.lazy()` or `dynamic()` | Next.js does this automatically; Vite needs manual `React.lazy()` |
+| Vendor chunk too large (>250KB) | Check build output for single large chunk | Configure `splitChunks` (Webpack) or `manualChunks` (Vite/Rollup) |
+| CSS not purged | Tailwind without `content` config, or unused CSS classes shipping | Verify `tailwind.config.js` `content` paths cover all template files |
+
+**Step 6 — Image optimization audit**
+Scan for image-related performance issues:
+- Serving JPEG/PNG when WebP/AVIF would save 30-60% bandwidth — check `<img>` `src` extensions
+- Missing `loading="lazy"` on below-the-fold images
+- Missing `fetchpriority="high"` on LCP image (hero image, above-the-fold banner)
+- Images served at full resolution without responsive `srcset` — wastes bandwidth on mobile
+- No `<picture>` element for art direction (different crops for mobile/desktop)
+
+```html
+<!-- Optimized responsive image with modern formats -->
+<picture>
+  <source srcset="/hero.avif" type="image/avif" />
+  <source srcset="/hero.webp" type="image/webp" />
+  <img
+    src="/hero.jpg"
+    alt="Product dashboard showing real-time analytics"
+    width="1200" height="630"
+    class="w-full h-auto"
+    fetchpriority="high"
+    decoding="async"
+  />
+</picture>
+
+<!-- Below-the-fold: lazy load -->
+<img src="/feature.webp" alt="..." loading="lazy" decoding="async"
+     width="600" height="400" class="w-full h-auto" />
+```
+
+**Step 7 — Generate performance report**
+Produce a structured report with Core Web Vitals thresholds:
+
+```
+Web Vitals Audit — [Project Name]
+═══════════════════════════════════════
+Thresholds (Good / Needs Improvement / Poor):
+  LCP:  < 2.5s  / < 4.0s  / > 4.0s
+  FCP:  < 1.8s  / < 3.0s  / > 3.0s
+  CLS:  < 0.1   / < 0.25  / > 0.25
+  INP:  < 200ms / < 500ms / > 500ms
+  TBT:  < 200ms / < 600ms / > 600ms
+  TTFB: < 800ms / < 1.8s  / > 1.8s
+
+Top Issues (by estimated impact):
+1. [HIGH] Hero image served as 2.4MB PNG — convert to WebP, save ~1.5MB
+2. [HIGH] 3 render-blocking stylesheets in <head> — defer non-critical CSS
+3. [MEDIUM] 4 images missing width/height — causes CLS on load
+4. [MEDIUM] lodash imported wholesale — tree-shake or replace with lodash-es
+5. [LOW] Font preconnect to unused origin — remove to free connection slot
+```
+
+#### Sharp Edges
+
+| Failure Mode | Mitigation |
+|---|---|
+| Recommending image lazy-load on LCP element | Never lazy-load the LCP image — it must load eagerly with `fetchpriority="high"` |
+| Flagging render-blocking CSS that's actually critical | Distinguish critical (above-fold) CSS from non-critical before recommending defer |
+| Tree-shaking audit false positives on CSS-in-JS | CSS `import './styles.css'` is a side effect — don't flag as unused |
+| Preconnect removal breaks actual resource loading | Always verify zero requests went to the origin before recommending removal |

package/extensions/zalo/PACK.md

@@ -0,0 +1,117 @@
+---
+name: "@rune/zalo"
+description: Zalo platform integration — Official Account API (OAuth2, messaging, webhooks, MCP server) and personal account automation (zca-js). Dual-track with explicit risk gating.
+metadata:
+  author: runedev
+  version: "0.1.0"
+  layer: L4
+  price: free
+  target: Vietnamese developers building Zalo bots, OA automation, and AI agent integrations
+  format: split
+---
+
+# @rune/zalo
+
+## Purpose
+
+Zalo is Vietnam's dominant messaging platform (~75M users) but its developer ecosystem has critical gaps: no Node.js SDK, zero webhook handling in official SDKs, undocumented rate limits, and confusing dual-token OAuth2 flows. This pack provides production-ready guidance for two tracks:
+
+**Track A — Official Account API** (production-safe): OAuth2 PKCE, 8 message types, webhook server, token lifecycle, and MCP server blueprint for AI agent integration. Use this for business chatbots, customer support automation, and notification systems.
+
+**Track B — Personal Account via zca-js** (unofficial, risk-gated): QR login, personal/group messaging, media handling. Use this for personal bots, group utilities, and rapid prototyping before committing to OA.
+
+Both tracks share a rate limiting skill — the #1 cause of account bans.
+
+## Best Fit
+
+- Vietnamese dev teams building Zalo OA chatbots or customer support automation
+- AI agent projects that need Zalo as a communication channel (MCP server pattern)
+- Personal automation: group bots, notification forwarders, quick prototypes
+- Projects migrating from unofficial to official Zalo API
+
+## Not a Fit
+
+- Facebook Messenger, Telegram, or Discord bots — different APIs entirely
+- ZaloPay payment integration (separate API surface, not covered here)
+- Zalo Mini App development (JSAPI bridge, not OA/personal messaging)
+
+## Triggers
+
+- Auto-trigger: when `zalo`, `zca-js`, `@anthropic-ai/sdk` + Zalo context detected
+- `/rune zalo-oa` — Official Account setup and messaging
+- `/rune zalo-personal` — Personal account automation
+- `/rune zalo-mcp` — MCP server for AI agent ↔ Zalo
+- `/rune zalo-rate` — Rate limiting and anti-ban strategies
+- Called by `cook` (L1) when Zalo integration task detected
+- Called by `mcp-builder` (L2) when building Zalo MCP server
+
+## Skills Included
+
+| Skill | Model | Track | Description |
+|-------|-------|-------|-------------|
+| [zalo-oa-setup](skills/zalo-oa-setup.md) | sonnet | A | OAuth2 PKCE flow, dual token management (User vs OA), app registration, appsecret_proof signing, token auto-refresh middleware. |
+| [zalo-oa-messaging](skills/zalo-oa-messaging.md) | sonnet | A | All 8 OA message types (text, image, file, sticker, list, template, transaction, promotion), follower management, broadcast with demographic targeting. |
+| [zalo-oa-webhook](skills/zalo-oa-webhook.md) | sonnet | A | Webhook server setup, event routing, signature verification, retry handling, event type catalog, Express/Fastify/Hono patterns. |
+| [zalo-oa-mcp](skills/zalo-oa-mcp.md) | sonnet | A | MCP server blueprint — tools for read/send/broadcast, webhook-to-MCP bridge, credential storage, AI agent conversation loop. |
+| [zalo-personal-setup](skills/zalo-personal-setup.md) | sonnet | B | zca-js setup, QR login flow, credential persistence, session management, WebSocket listener, keepAlive, anti-detection baseline. |
+| [zalo-personal-messaging](skills/zalo-personal-messaging.md) | sonnet | B | Personal/group messaging, media (image/video/voice/sticker), reactions, group management (create, members, settings), mention gating, message buffer. |
+| [zalo-rate-guard](skills/zalo-rate-guard.md) | sonnet | Shared | Rate limiting patterns for both tracks — token bucket per endpoint, exponential backoff, queue management, quota monitoring, anti-ban strategies. |
+
+## Risk Gate — Track B (Personal Account)
+
+<HARD-GATE>
+Track B skills use unofficial reverse-engineered APIs via zca-js.
+Before ANY Track B implementation, the developer MUST acknowledge:
+
+1. **ToS violation**: Personal account automation violates Zalo's Terms of Service
+2. **Ban risk**: Account can be suspended without warning
+3. **Single-session**: Cannot run bot + personal Zalo simultaneously on same account
+4. **API instability**: Zalo can break the internal API at any time without notice
+5. **No support**: Zalo will not help with issues caused by unofficial API usage
+
+Track B is for: personal projects, prototypes, group utilities.
+Track B is NOT for: production business systems, customer-facing bots, high-volume messaging.
+
+For production use → Track A (Official Account API).
+</HARD-GATE>
+
+## Connections
+
+```
+Calls → mcp-builder (L2): zalo-oa-mcp uses mcp-builder patterns for server scaffolding
+Calls → sentinel (L2): credential handling triggers security review
+Calls → rate-guard (shared): all messaging skills call rate-guard before API calls
+Calls → verification (L3): verify webhook server is running and receiving events
+Called By ← cook (L1): when Zalo integration task detected in project
+Called By ← scaffold (L1): when bootstrapping a Zalo bot project
+Called By ← mcp-builder (L2): when building Zalo-specific MCP server
+```
+
+## Tech Stack
+
+| Component | Recommended | Alternatives |
+|-----------|-------------|--------------|
+| Runtime | Node.js 20+ | Bun, Deno |
+| OA HTTP client | undici / fetch | axios |
+| Personal API | zca-js | none (only option) |
+| Webhook server | Hono | Express, Fastify |
+| MCP framework | @anthropic-ai/sdk | custom |
+| Queue (rate limit) | p-queue | bottleneck, bull |
+| Validation | zod | joi |
+
+## Constraints
+
+1. All skills MUST reference Zalo OA API v3 (not deprecated v2)
+2. Track B skills MUST display HARD-GATE risk disclaimer before execution
+3. Rate limiting MUST be implemented before any messaging — no fire-and-forget
+4. Credentials (tokens, cookies, secrets) MUST never be logged or committed
+5. Webhook signature verification MUST NOT be skipped — even in development
+
+## Done When
+
+- OA OAuth2 flow working with auto-refresh
+- All 8 message types documented with request/response examples
+- Webhook server receiving and routing events correctly
+- MCP server operational: agent can read and send Zalo messages
+- Rate limiting active on all outbound API calls
+- Track B: QR login + personal/group messaging working with risk gate shown