Review performance lanes with GitHub-scale tactics not owned by Vercel React rules: cohort segmentation, repeated-unit budgets, interaction-level INP, memory tagging, degradation contracts, browser trace proof, and production dashboards.
64
80%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./.agents/skills/performance/SKILL.mdHandle $ARGUMENTS.
Use this when a Plate plan claims speed, responsiveness, large-document readiness, or production performance. This skill owns the review shape around cohorts, repeated-unit budgets, p95/p99 interactions, memory/DOM tags, degradation contracts, native editor behavior, trace proof, and RUM gaps. It delegates React/Next micro-tactics, effect law, and complexity analysis to the skills that already own them.
| Source | Owns | Use in this pass |
|---|---|---|
vercel-react-best-practices | React/Next waterfalls, bundles, server/client fetching, rerenders, rendering, JS micro-opts, React runtime primitives | Load exact rule files for local micro-tactics. Do not paste the whole Vercel catalog into the plan. |
react-useeffect | Effect law, subscriptions, event/effect alternatives | Use when repeated units attach effects, listeners, observers, or store subscriptions. |
performance-oracle | Big-O, cache shape, memory pressure, 10x/100x/1000x projections | Use when the hot path needs bounded complexity proof. |
| Chrome DevTools, Lighthouse, web.dev docs | Browser traces, Core Web Vitals, network chains, layout shifts, long tasks | Use when load, hydration, layout, or input latency needs browser proof. |
performance | Cohorts, repeated-unit budgets, p95/p99 interactions, memory tags, degradation, native behavior proof, RUM/dashboard gaps | Record the final performance-lane verdict. |
Rule: if the plan only says "use React best practices", "avoid O(n)", or "seems fast locally", it is not done.
Record this in the active plan or review:
### Performance
- applicability: applied | skipped
- Vercel rules used:
- extra rules used:
- repeated unit:
- cohorts:
- budgets:
- React/runtime primitives:
- interaction metrics:
- trace/CWV proof:
- memory tags:
- degradation contract:
- dashboard/RUM gap:
- plan delta:Keep it short. If this pass cannot change the plan, write the no-change defense with evidence.
Done. The review has a workload, a unit budget, an interaction matrix, and a proof path.
Stop the performance claim or mark the plan incomplete when any required answer is missing:
| Missing answer | Why it blocks |
|---|---|
| Cohorts | "Large document" has no testable meaning. |
| Repeated-unit budget | The plan can make one block cheap while making 10,000 blocks impossible. |
| p95/p99 interaction row | Averages hide input stalls. |
| Memory/DOM/component tag | Latency wins can explode heap, subscriptions, or mounted DOM. |
| Degradation contract | Faster modes can silently break browser-native editing behavior. |
| Native behavior proof | Editor perf is not good if find, copy, paste, selection, IME, undo, or collaboration regress. |
| Trace or RUM proof | Production-facing claims need browser evidence or dashboard tags. |
If a blocker does not apply, say why in one line. Silence is not a pass.
Load exact Vercel rule files only when the code or plan needs them:
| Symptom | Rule family |
|---|---|
| Sequential fetches, blocked route work, slow server setup | async-*, server-* |
| Heavy optional UI or package barrels in client bundles | bundle-* |
| Repeated browser listeners, storage reads, duplicate client fetches | client-* |
| Hot editor rows rerender from broad subscriptions or unstable props | rerender-* |
| Long DOM lists, hydration flicker, hidden panels, resource hints | rendering-* |
| Repeated scans, chained array passes, membership checks, cacheable pure work | js-* |
| Stable callbacks, app-wide init, effect event dependency law | advanced-* |
Use the Vercel rule name in Vercel rules used:. Do not copy its explanation unless the plan needs a specific quote-level constraint.
Load only the relevant rule files. These are the unique performance-lane questions.
| Rule | Use when |
|---|---|
| cohort-segmentation | A plan says "large document", "big list", "stress case", or "performance mode" without normal/large/stress/pathological cohorts. |
| repeated-unit-budget | Blocks, lines, rows, leaves, groups, decorations, or islands repeat at scale. |
| rare-state-isolation | Rare UI state is carried by every repeated unit. |
| event-delegation-budget | Thousands of repeated units attach pointer, hover, keyboard, drag, resize, selection, or scroll handlers. |
| effect-subscription-budget | Repeated units run effects, subscribe to runtime stores, or resubscribe from unstable callbacks. |
| css-layout-hotpath | Selectors, layout reads/writes, drag/resize, overlays, or geometry may cause interaction latency. |
| interaction-inp-matrix | A plan claims responsiveness from averages, startup time, or one smoke benchmark. |
| memory-dom-tagging | A mode may improve latency by increasing heap, DOM nodes, components, listeners, subscriptions, caches, or mounted groups. |
| degradation-contract | Performance requires virtualization, shell islands, model-backed selection, staged mounting, or any less-native mode. |
| staged-readiness | Startup, hydration, full-doc replace, insert-fragment, or staged DOM-present mounting is part of the plan. |
| react-19-runtime-proof | React 19.2 primitives are proposed for editor/app performance. |
| browser-trace-cwv-proof | Claims involve load, hydration, network chains, layout shifts, long tasks, LCP/FCP/TBT/CLS, or trace evidence. |
| production-rum-dashboard | The claim matters beyond local benchmarks and needs release/browser/mobile/IME/document-size tags. |
| editor-native-behavior-proof | Editor performance changes DOM presence, selection mapping, materialization, shells, hidden content, or model-backed behavior. |
Use this shape for a large-document Plate review:
### Performance
- applicability: applied
- Vercel rules used: rerender-derived-state, rerender-defer-reads, js-set-map-lookups
- extra rules used: cohort-segmentation, repeated-unit-budget, interaction-inp-matrix, memory-dom-tagging, editor-native-behavior-proof
- repeated unit: block
- cohorts: normal 100 blocks; large 1,000 blocks; stress 10,000 blocks; pathological 50,000 nested/mixed blocks
- budgets: per block <= 1 element component, 0 per-block global listeners, 0 per-block effects unless scoped by id/range, O(1) id/path lookup for hot interactions
- React/runtime primitives: fast render path and derived subscriptions; transitions only for non-urgent side panels, not editor typing
- interaction metrics: startup, first type, middle type, range select, paste, undo, table range select by p50/p75/p95/p99
- trace/CWV proof: Browser trace for load/hydration if route claim is included; editor interaction trace for typing/select/paste latency
- memory tags: heap, DOM nodes, mounted block count, listener count, subscription count, node-id/cache size
- degradation contract: native DOM-present editing for normal/large; any staged or virtualized mode must list browser find/copy/paste/select-all/IME/undo/collab behavior
- dashboard/RUM gap: tag interaction name, cohort, document size, mode, browser, mobile, IME, release, heap/DOM sample when available
- plan delta: add missing rows before claiming the 10k path is readyThat is enough to review a huge-document claim without rereading the entire performance rule set.
When used inside slate-plan, record this lens in the implementation review matrix.
Must answer:
If the performance pass changes nothing, write:
### Performance
- applicability: skipped
- reason:
- evidence:
- residual risk:The reason must cite current plan evidence. "No obvious perf issue" is not evidence.
45116fd
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.