// Profile and optimize Rezi app performance. Use when app feels slow, frames drop, or render phases take too long.
Create a new screen/page for a Rezi TUI application. Use when adding views, pages, or screens to an app.
Add routing with guards and nested outlets to a Rezi app. Use when building multi-page/screen TUI applications.
Set up form input handling with validation and submission. Use when building forms with inputs, selects, checkboxes, etc.
Add modal dialogs and overlay UI with focus trapping. Use when implementing confirmations, alerts, or layered interfaces.
Debug rendering and layout issues in Rezi apps. Use when UI looks wrong, has layout problems, or renders unexpectedly.
Add a new widget type to the Rezi framework. Use when creating new ui.* factory functions with layout, rendering, and tests.
| name | rezi-perf-profiling |
| description | Profile and optimize Rezi app performance. Use when app feels slow, frames drop, or render phases take too long. |
| user-invocable | true |
| allowed-tools | Read, Glob, Grep, Bash(REZI_PERF=1 REZI_PERF_DETAIL=1 *), Bash(npx tsx packages/bench/*) |
| argument-hint | [performance-concern] |
| metadata | {"short-description":"Performance profiling"} |
Use this skill when:
packages/core/src/app/widgetRenderer.ts — render pipeline with phase timingpackages/core/src/runtime/commit.ts — reconciliation (leaf/container reuse)packages/core/src/layout/ — layout engine (FNV-1a stability signatures)packages/core/src/widgets/composition.ts — animation utility hookspackages/bench/src/ — profiling scriptsEnable profiling and run:
REZI_PERF=1 REZI_PERF_DETAIL=1 node your-app.js
Observe phase timings: view → commit → layout → render → build
Run systematic profiling:
npx tsx packages/bench/src/profile-phases.ts
npx tsx packages/bench/src/profile-construction.ts
Apply common fixes:
| Bottleneck | Fix |
|---|---|
| View phase slow | ctx.useMemo(() => expensiveComputation, [deps]) for expensive computations |
| Commit phase slow | Add key props on list items for stable reconciliation |
| Layout phase slow | Reduce nesting depth; layout stability signatures skip relayout when tree is stable |
| Render phase slow | Use ui.virtualList() for large datasets |
| Animation-heavy screen slow | Limit transition scope (properties), animate only visible rows, avoid per-frame object churn |
| Overall slow | Flatten unnecessary wrapper nodes |
Depth guardrails:
ctx.useMemo(() => expensiveComputation, [deps]) — skip recomputationkey on every list item — enables O(1) reconciliationui.virtualList() — only renders visible rowsuseStagger(...) + ui.virtualList(...) — stagger only the visible windowui.box({ transition: { properties: [...] } }) — animate only required dimensionsctx.useCallback(fn, [deps])