@godxjp/ui-mcp 0.21.5 → 0.22.0

package/dist/index.js

@@ -9535,6 +9535,84 @@ minimal repro, expected vs actual, the installed version, and env \u2014 enough
 reproduce in one paste.`
       }
     ]
+  },
+  // ── app-performance (consumer) ─────────────────────────────────
+  {
+    id: "app-performance",
+    audience: "consumer",
+    name: "App performance \u2014 measure-first React perf with @godxjp/ui",
+    whenToUse: "A screen built on @godxjp/ui feels slow, Chrome logs [Violation] handler warnings, typing lags in a filter pane, a panel toggle blocks, or the bundle is questioned. Distilled from a real audit (orders screen: keystroke 165ms \u2192 5ms, panel open 270ms \u2192 18ms, app bundle \u221227%). Measure FIRST \u2014 the library's per-control cost is small (~3ms/field dev); page architecture is almost always the culprit.",
+    source: "@godxjp/ui MCP (consumer surface) \u2014 2026-06 exseli audit, verified numbers",
+    sections: [
+      {
+        id: "measure-first",
+        title: "Measure before touching anything",
+        tagline: "Long tasks + a temporary React Profiler tell you WHO is slow \u2014 never guess.",
+        body: `Three probes, run in the page (devtools console / playwright evaluate):
+1) Long tasks \u2014 anything >50ms in a handler triggers Chrome's [Violation]:
+   const t=[]; new PerformanceObserver(l=>l.getEntries().forEach(e=>t.push(Math.round(e.duration))))
+     .observe({type:"longtask",buffered:true});
+2) Attribution \u2014 wrap suspect sections temporarily:
+   <Profiler id="sec" onRender={(id,phase,d)=>(window.__perf??=[]).push([id,phase,Math.round(d)])}>
+   Compare each section's actualDuration against the total long task. In the reference audit
+   25 @godxjp/ui composite fields mounted in 79ms \u2014 the other ~150ms was the PAGE re-rendering
+   everything else. Indict with numbers, then fix only what they indict.
+3) Dev-mode caveat: development React is 3\u20135\xD7 slower; a one-off 60ms task at popup-open is
+   normal. Re-measure AFTER the fix with the same probes and paste before/after numbers.`
+      },
+      {
+        id: "filter-pane-memo",
+        title: "Filter panes: per-field memo + stable setters",
+        tagline: "Page-root state with no memo boundaries = the whole pane re-renders per keystroke.",
+        body: `The classic failure: all search state lives at the page root, every field reads it
+inline \u2192 one keystroke re-renders ~30 fields + the results table (165ms/key measured).
+The proven fix shape:
+- module-level memo field units: const FText = memo(function FText({ id, label, k, value, onSet }) {
+    return <FormField id={id} label={label}><Input id={id} value={value}
+      onChange={(e) => onSet(k, e.target.value)} /></FormField>; });
+- ONE stable setter per state map: const setField = useCallback((key, value) =>
+    setCond(c => ({ ...c, [key]: value })), []);
+- the results table in its OWN memo component; pagination pages WITHIN the submitted query
+  (setSubmitted(prev => ({ ...prev, page }))) so its handler stays identity-stable.
+After: a keystroke re-renders exactly one field (5ms). Don't memo cheap leaves that re-render
+rarely \u2014 over-memoization is real overhead. react-compiler lint traps: no ref writes during
+render, no sync setState in effect bodies; the sanctioned latch is the guarded render-time set
+(if (cond && !state) setState(true)).`
+      },
+      {
+        id: "heavy-panels",
+        title: "Heavy hidden panels: defer, keep mounted, pre-mount at idle",
+        tagline: "Never mount a 25-field subtree synchronously inside a click handler.",
+        body: `A \u8A73\u7D30\u6761\u4EF6-style toggle that conditionally renders a large subtree blocks the click
+(~230ms measured). Three-layer fix, in order:
+1) urgent state drives only the button chrome (chevron/aria-expanded);
+2) const deferredOpen = useDeferredValue(open) gates the FIRST mount into a deferred lane;
+3) keep it mounted afterwards and toggle visibility: <div className={open ? "contents" : "hidden"}>
+   ("contents" keeps children in the parent flex/grid rhythm; field state lives in the page so
+   hiding loses nothing);
+4) optionally pre-mount during idle after first paint so even the FIRST open is instant:
+   useEffect(() => { const idle = window.requestIdleCallback ?? (cb => setTimeout(cb, 300));
+     const h = idle(() => setMounted(true)); return () => (window.cancelIdleCallback ?? clearTimeout)(h); }, []);
+Measured after: open 270ms \u2192 18ms, zero post-load long tasks.`
+      },
+      {
+        id: "bundle-budget",
+        title: "Code splitting + what an import costs",
+        tagline: "lazy() every page; know the per-import budget before blaming the library.",
+        body: `Route-level splitting is the default app shape: const Page = lazy(() => import("@/pages/Page"))
+behind ONE <Suspense fallback={<PageContainer title={<Skeleton \u2026/>}><Skeleton \u2026/></PageContainer>}>.
+Reference app: initial 929KB \u2192 675KB; the orders screen (day-picker + table stack, 122KB) and
+login (react-hook-form + zod, 93KB) load only when visited.
+Per-import minified budget of @godxjp/ui \u226513.10.0 (preserved-module dist \u2014 imports tree-shake
+for real): StatCard 30KB \xB7 Input 52 \xB7 Button 56 \xB7 DataTable 79 \xB7 Select 165 \xB7 DateRangePicker 207
+(genuinely needs react-day-picker + date-fns). A shared ~50KB floor is intrinsic (tailwind-merge
++ bundled 3-locale i18n) and amortizes across one vendor chunk. Virtualize lists only >100 rows \u2014
+DataTable at 50/page does not need it. The dist is bundler-oriented ESM (extensionless + JSON
+imports): fine for vite/webpack consumers; when testing against a local checkout run tests on an
+npm-pack TARBALL install, not a file: symlink (the symlink's nested node_modules creates a
+dual-React artifact under vitest).`
+      }
+    ]
   }
 ];
 function findSkill(id) {
@@ -9686,6 +9764,29 @@ function routeTask(task, opts) {
     "If @godxjp/ui itself is at fault, don't fake a workaround \u2014 file a detailed gh issue (use draft_bug_report).",
     ["design-to-page/report-bug"]
   );
+  route(
+    [
+      "slow",
+      "performance",
+      "perf",
+      "violation",
+      "long task",
+      "lag",
+      "janky",
+      "re-render",
+      "rerender",
+      "bundle size",
+      "code splitting",
+      "tree-shak",
+      "ch\u1EADm",
+      "l\u1ED7i hi\u1EC7u n\u0103ng",
+      "\u91CD\u3044"
+    ],
+    "app-performance",
+    "measure-first",
+    "Measure FIRST (longtask + temporary Profiler), then apply the matching proven fix \u2014 page architecture, not the library, is almost always the culprit.",
+    ["app-performance/filter-pane-memo", "app-performance/heavy-panels", "app-performance/bundle-budget"]
+  );
   const filtered = opts?.consumerOnly ? matches.filter((m) => {
     const sk = findSkill(m.skill);
     return !sk || sk.audience !== "core";
@@ -11467,7 +11568,7 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "0.21.5",
+  version: "0.22.0",
   description: "Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 45 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",
   type: "module",
   main: "./dist/index.js",