@rune-kit/rune 2.8.0 → 2.11.0

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

@@ -1,173 +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)',
-      }
-    }
-  }
-}
-```
+---
+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

@@ -1,90 +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 |
+---
+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 |