Profile TypeScript reducer, Immer, and React hooks in the Grida Canvas editor.
npx skills add https://github.com/gridaco/grida --skill editor-perf
Please help me install this Agent Skill. Skill: editor-perf Source: https://github.com/gridaco/grida/tree/main/.agents/skills/editor-perf Command: npx skills add https://github.com/gridaco/grida --skill editor-perf
The skill provides a structured framework to identify, measure, and optimize performance bottlenecks in the Grida Canvas web editor's TypeScript reducer, Immer usage, and React hooks, enabling faster interactions and smoother user experiences.
Run the editor performance bench for the TS editor pipeline and enable PerfObserver to begin collecting profiling data.
High-intent search queries and answers about installing and using this skill.
Profile TypeScript reducer dispatch costs by instrumenting the editor codebase with PerfObserver spans to measure execution time and identify bottlenecks. This skill guides analyzing the grida-canvas pipeline to trace slow dispatch cycles and optimize performance.
Drag and resize lag often stems from inefficient Immer usage or expensive React hooks re-rendering during interactions. Use this skill to diagnose slow interactions by profiling the editor pipeline and applying targeted instrumentation to isolate the cause.
Yes, you can build repeatable benchmarks for JavaScript editor interactions using headless benchmark environments. This skill provides workflow guides to validate performance consistently across environments, ensuring reliable optimization measurements for interactions like drags and color changes.
This skill profiles only the JavaScript and TypeScript editor pipeline, specifically targeting the grida-canvas codebase. Rust rendering engine profiling is handled separately by the render-perf skill using different tooling and scope boundaries.
The best way to optimize Immer usage for slow color changes is to instrument the editor with PerfObserver spans to measure the exact cost of state updates. This skill helps identify performance bottlenecks in the TypeScript reducer to guide targeted optimizations.
gridacoParse and load Grida documents from Raw FlatBuffers or ZIP archives into the canvas runtime.
ZateGuide React 18+ TypeScript projects through component design, hooks, state, and performance patterns.
OysteinAmundsenProfile and diagnose performance bottlenecks in the @toolbox-web/grid component.
TrainLCDProfile and optimize React Native app rendering, lists, and animations.
