conductor-rewrite-performance

Profile React desktop app re-renders with Tauri bridge shims and TanStack Router.

248|32|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/boraoztunc/skills --skill conductor-rewrite-performance
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: conductor-rewrite-performance
Source: https://github.com/boraoztunc/skills/tree/main/conductor-rewrite-performance
Command: npx skills add https://github.com/boraoztunc/skills --skill conductor-rewrite-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks in local-first React desktop apps caused by excessive re-renders, unstable references, and heavy component trees, especially when profiling in environments without Chrome DevTools access.

Core Features & Use Cases

  • Shim the Tauri bridge to profile in Chrome when DevTools are unavailable.
  • Replace react-router with TanStack Router for stable references to prevent cascading re-renders.
  • Virtualize and memoize streaming lists to handle long-running data streams efficiently.
  • Move expensive synchronous work off the critical path to improve perceived responsiveness.
  • Manage memory for multiple heavyweight child processes by idle shutdown and resume-on-demand.

Quick Start

Identify your app's major rendering bottlenecks and apply profiling shims, routing stability changes, virtualization, and background work to regain responsiveness.

Frequently Asked Questions about conductor-rewrite-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I profile React performance in a Tauri app without Chrome DevTools?

You can profile React performance in a Tauri app without Chrome DevTools by shimming the Tauri bridge to run the app in a standard Chrome environment. This allows you to identify rendering bottlenecks and excessive re-renders during local-first desktop development.

Why does switching from react-router to TanStack Router improve React performance?

Switching from react-router to TanStack Router improves React performance by providing stable references that prevent cascading re-renders during navigation changes. This routing stability is essential for maintaining smooth UI updates in heavy component trees.

What is the best way to handle streaming content in React lists without lagging?

The best way to handle streaming content in React lists without lagging is to virtualize and memoize the list components. This approach efficiently manages long-running data streams by rendering only visible items and preventing unnecessary UI updates.

How do I move expensive synchronous work off the critical path in React?

To move expensive synchronous work off the critical path in React, you shift heavy computations to background processes. This improves perceived responsiveness by allowing the UI to remain interactive while heavyweight tasks execute asynchronously.

Can I manage memory for multiple heavyweight child processes in a local-first React desktop app?

Yes, you can manage memory for multiple heavyweight child processes in a local-first React desktop app by implementing idle shutdown and resume-on-demand strategies. This prevents memory exhaustion while keeping processes available when needed.

When should I use virtualization and memoization for React chat applications?

You should use virtualization and memoization for React chat applications when dealing with streaming content and long-running data streams. These techniques prevent unnecessary re-renders and stabilize UI references to maintain smooth scrolling performance.