القائمة
Investigate React render performance in the Mako app using React Scan, render-debug logs, and existing memoization contracts. Use when profiling render churn, slow chat streaming, Monaco console responsiveness, explorer/result table lag, or when the user mentions React Scan.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Load when building, editing, or debugging Mako React apps — app files, npm dependencies, data bindings, the @mako/app-sdk hooks (useQuery / useDuckDB / useLocation / useSearchParams / navigate), URL state and shareable deep links, materialized Parquet/DuckDB bindings, and the live preview runtime.
Load for dbt branches, commits, pushes, pull requests, merges, repository sync, or branch cleanup.
Load when creating, editing, scheduling, running, or debugging dbt jobs and production deployments.
Load when building, editing, running, or debugging dbt models, dbt projects, schema.yml tests, sources, seeds, snapshots, incremental models, materializations, or dbt jobs in the Transforms section.
Load when creating, editing, configuring, validating, or debugging database sync flows, connector flows, pagination, incremental sync, destination mappings, and flow form fields.
Add a new MCP server preset (connector) to Mako's MCP client system — server URL, auth model (OAuth DCR, pre-registered app, or API key), scopes, icon, tests, and docs. Use when connecting a new external MCP server (like Slack or Close CRM) or changing how MCP connections authenticate.
| name | react-render-profiling |
| description | Investigate React render performance in the Mako app using React Scan, render-debug logs, and existing memoization contracts. Use when profiling render churn, slow chat streaming, Monaco console responsiveness, explorer/result table lag, or when the user mentions React Scan. |
Use this workflow for frontend render-performance investigations in app/:
Start the frontend profiler:
pnpm run app:dev:scan
Open http://localhost:5173 and reproduce the interaction.
Watch React Scan overlays for re-render hotspots.
Check browser console logs prefixed with [render-debug] for why instrumented components changed.
Patch the smallest unstable boundary, then verify with focused tests plus app lint/typecheck.
VITE_REACT_SCAN=true enables the React Scan Vite plugin.VITE_RENDER_DEBUG=true enables Mako's renderDebug helpers.pnpm run app:dev keeps both off. Do not make profiling instrumentation active by default.Prioritize these areas when render churn appears:
app/src/components/Chat.tsx: streaming messages, tool cards, input area.app/src/components/StreamingToolCard.tsx: terminal tool-card memo comparator and expandable previews.app/src/components/ResourceTree.tsx: stable callbacks from explorers and tree props.app/src/components/Editor.tsx and Console.tsx: Monaco tab/panel re-renders.app/src/components/ResultsTable.tsx: stable grid props and result view resets.app/src/store/consoleStore.ts: avoid no-op Zustand writes that still notify subscribers.useChat({ experimental_throttle: 50 }) in Chat.tsx.useShallow.useConsoleStore.getState() at invocation time over object dependencies.use-stick-to-bottom with a useEffect([messages]) scroll implementation.For chat/render-boundary changes, run:
pnpm --filter app exec vitest run src/components/__tests__/Chat.perf.test.ts
pnpm --filter app run typecheck
pnpm --filter app run lint
Add focused tests for any new comparator or truncation behavior that could silently regress.