CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

72

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

85%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.

Excellent operational content — executable commands, concrete discovery queries, a rigorous baseline/verify/regress workflow, and high-value pitfalls — held back only by monolithic packaging: the ~490-line file inlines topics that belong in one-level-deep reference files, with a small amount of repeated commands and warnings.

Suggestions

Move the browser-trace parsing guide (signal table plus Python reader) into references/browser-trace.md and the PerfObserver API section into references/perfobserver.md, leaving one-line pointers in SKILL.md so the overview stays lean.

Deduplicate the repeated bench invocation: state the canonical command once (e.g. in a 'Running the bench' section) and reference it from Step 1: Baseline and the Node CPU profiles section.

Merge the two statements of the 10K OOM warning ('WASM geometry adds memory pressure' and the comment on the large-fixture command block) into one place.

DimensionReasoningScore

Conciseness

Nearly all content is non-obvious project knowledge (bench harness internals, trace-parsing recipes, the Immer scaling wall, `recording: "silent"` semantics) with no padding about concepts Claude already knows. Minor trimming opportunities exist: the bench run command appears three times ("The Benchmark System", "Step 1: Baseline", "Node CPU profiles") and the OOM-heap and "bench omits React" warnings are each stated twice. Anchor 4 rather than 5 because of that repeated material; not 3 because nothing is generic or over-explained.

4 / 5

Actionability

Copy-paste-ready throughout: exact commands ("GRIDA_PERF=1 GRIDA_PERF_CPUPROFILE=1 pnpm vitest run editor/grida-canvas/__tests__/bench/perf-editor.test.ts", "NODE_OPTIONS=\"--max-old-space-size=8192\"", "--cpu-prof --cpu-prof-interval=100"), executable code for instrumentation (perf.start with try/finally, perf.measure) and a runnable Python trace parser, plus concrete grep discovery queries. A single hedge ("runAndTime() (or similar)") aside, the common cases are fully covered — anchor 5 rather than 4.

5 / 5

Workflow Clarity

"The Verification Workflow" sequences Baseline → Implement → Measure → Regression check → Accept/iterate with explicit validation checkpoints (headless tests, "pnpm turbo typecheck --filter=editor", "Non-target operations within 10% of baseline") and an accept-criteria table. The tool-selection decision rules add an upfront decision workflow, and the regression step is a genuine feedback loop. Anchor 5: explicit validation steps, error-recovery guidance, and a checklist.

5 / 5

Progressive Disclosure

In-file structure is good (clear headers, cross-references like "see 'Pick your measurement tool' above") and it correctly delegates volatile detail to repo files ("The bench README has the authoritative catalog — read it there") and to the sibling render-perf skill. However, no references/, scripts/, or assets/ bundle exists and the ~490-line body inlines whole topics that belong in separate files — the browser-trace parsing guide, the PerfObserver API reference, and the Node CPU profile section could each be a one-level-deep reference. That matches anchor 3 (content that should be separate is inline), not 4 (no bundle references exist at all), and not 2 (section structure and navigation are clear, not minimal).

3 / 5

Total

17

/

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 strong description: third-person, concrete, with both 'what' and 'when' explicitly stated and product-specific trigger phrases. The only minor gap is a few colloquial performance synonyms (laggy, frame drops) a user might phrase differently.

DimensionReasoningScore

Specificity

"Guides performance investigation, benchmarking, and optimization of the Grida Canvas web editor (TypeScript reducer, Immer, React hooks)" names the domain plus multiple concrete actions — profiling dispatch cost, diagnosing slow interactions, writing/running benchmarks, instrumenting with PerfObserver, optimizing the state pipeline. Coverage is comprehensive with no vague filler; not a 4 because there are no meaningful gaps in the action list.

5 / 5

Completeness

Explicitly answers both what ("Guides performance investigation, benchmarking, and optimization...") and when ("Use when profiling reducer dispatch cost, diagnosing slow interactions..., instrumenting with PerfObserver, or optimizing the JS-side state management pipeline"). The 'when' clause lists five concrete trigger phrases; not a 4 because the 'when' could not be more explicit or specific.

5 / 5

Trigger Term Quality

Natural user phrases are present: "diagnosing slow interactions (drag, resize, color change)", "profiling reducer dispatch cost", "writing or running editor benchmarks", "optimizing". A few natural terms a user would say are missing — "laggy", "slow editor", "frame drops", "fps" — and no synonyms or file extensions beyond PerfObserver, so it fits anchor 4 (good coverage, a few natural terms missing) rather than 5 (comprehensive synonyms and extensions).

4 / 5

Distinctiveness Conflict Risk

Anchored to a clear niche (Grida Canvas editor, TypeScript reducer, Immer, PerfObserver) and bounds itself to the "JS-side state management pipeline", so it would not trigger for generic perf work or the companion Rust render-perf skill. Minimal conflict risk; not a 4 because the triggers are product-specific and unambiguous.

5 / 5

Total

19

/

20

Passed

Validation

100%

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
Reviewed

Table of Contents

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.