editor-perf

Guides performance investigation, benchmarking, and optimization of the Grida Canvas web editor (TypeScript reducer, Immer, React hooks). Use when profiling reducer dispatch cost, diagnosing slow interactions (drag, resize, color change), writing or running editor benchmarks, instrumenting with PerfObserver, or optimizing the JS-side state management pipeline.

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

88%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-sequenced performance workflow with concrete commands, code, and validation checkpoints tailored to a specific editor pipeline. Its main weakness is progressive disclosure: the long single-file body inlines detail that bundle files could offload.

Suggestions

Move the Python trace-reader script and the detailed bench-system usage into files under ./scripts/ or ./references/, keeping SKILL.md as an overview that links to them one level deep.

Trim minor over-explanations (e.g. 'They are plain JSON after decompression') that assume Claude lacks basic knowledge.

Consider extracting the Bottleneck Categories and span-reading tables into a reference file referenced from the main workflow, reducing the inline wall of text.

Dimension	Reasoning	Score
Conciseness	Dense with domain-specific, non-obvious detail (dispatch pipeline, Immer proxy-finalization scaling wall, PerfObserver span hierarchy) that Claude would not already know; only minor passages over-explain (e.g. noting .json.gz traces are plain JSON after decompression), keeping it efficient rather than fully lean.	4 / 5
Actionability	Provides copy-paste-ready commands ("GRIDA_PERF=1 pnpm vitest run ...", grep queries, NODE_OPTIONS heap flags), executable instrumentation snippets (perf.start/measure/try-finally), and a working Python trace-reader script covering the common profiling cases.	5 / 5
Workflow Clarity	The Verification Workflow is a clearly sequenced Baseline → Implement → Measure → Regression check → Accept/iterate flow with explicit validation commands (headless tests, typecheck), a required-criteria checklist table, and a feedback loop for iteration.	5 / 5
Progressive Disclosure	Well-structured with clear section headers and explicit signposting to authoritative external sources (bench README for the span catalog, the render-perf skill URL for the Rust engine); stops short of 5 because the single ~500-line file inlines material (the full trace-reader script, bench-system detail) that could live in bundle files, and no ./references, ./scripts, or ./assets bundles are present.	4 / 5
	Total	18 / 20 Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A specific, well-scoped description that clearly answers both what the skill does and when to use it, with concrete action verbs and a distinct niche. The only minor gap is a slight reliance on technical jargon over everyday user phrasing in the trigger terms.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — "profiling reducer dispatch cost", "diagnosing slow interactions (drag, resize, color change)", "writing or running editor benchmarks", "instrumenting with PerfObserver", "optimizing the JS-side state management pipeline" — giving comprehensive, capability-specific coverage rather than vague claims.	5 / 5
Completeness	Explicitly states what ("Guides performance investigation, benchmarking, and optimization of the Grida Canvas web editor...") and pairs it with a concrete "Use when..." clause enumerating trigger scenarios, satisfying both halves with concrete trigger phrases.	5 / 5
Trigger Term Quality	Strong natural phrases a user would say ("slow interactions", "drag, resize, color change", "editor benchmarks", "profiling"), with good synonym coverage; falls just short of 5 because it leans on some technical jargon (PerfObserver, reducer dispatch) and omits looser lay phrasing like "the editor feels laggy".	4 / 5
Distinctiveness Conflict Risk	Scoped to a named product (Grida Canvas web editor) and a specific stack (TypeScript reducer, Immer, React hooks, JS-side state management), carving a clear niche distinct from sibling skills like the Rust render-perf skill referenced in the body.	5 / 5
	Total	19 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: gridaco/grida
Path: .agents/skills/editor-perf/SKILL.md
Commit: 8ef5e53

Reviewed: about 11 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.