react-component-performance

Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.

Install with Tessl CLI

npx tessl i github:Dimillian/Skills --skill react-component-performance

What are skills?

Review — 86%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

100%

10%

Optimize Chat Message List Performance

Isolate ticking state from list

Criteria

Without context

With context

Timer extracted to child

100%

Child component memoized

100%

MessageRow memoized

100%

useCallback for onDelete handler

100%

Stable key used

100%

Effect deps correct

100%

UI behavior preserved

100%

CHANGES.md documents problem

100%

CHANGES.md documents fix

100%

Without context: $0.1804 · 49s · 8 turns · 9 in / 2,612 out tokens

With context: $0.2220 · 58s · 11 turns · 59 in / 2,944 out tokens

100%

Optimize Product Catalog Filter Performance

Memoized derived data and stable keys

Criteria

Without context

With context

useMemo for filtered list

100%

useMemo for category stats

100%

useMemo for totalValue

100%

useMemo for categories list

100%

useCallback for handler

100%

ProductRow memoized

100%

Stable keys in product list

100%

Stable keys in stats/options

100%

CHANGES.md mentions inline computation

100%

UI behavior preserved

100%

Without context: $0.2078 · 45s · 9 turns · 10 in / 2,919 out tokens

With context: $0.5137 · 1m 47s · 23 turns · 270 in / 5,874 out tokens

100%

20%

Optimize Article Feed Initial Load

Defer heavy rendering and effect hygiene

Criteria

Without context

With context

ArticleBody deferred

100%

Effect has dependency array

100%

ArticleCard memoized

100%

onBookmark stabilized

100%

Stable keys in list

100%

Expanded state preserved

100%

CHANGES.md: deferred rendering explained

100%

CHANGES.md: effect issue explained

100%

Without context: $0.2247 · 53s · 9 turns · 10 in / 3,469 out tokens

With context: $0.5103 · 1m 48s · 25 turns · 104 in / 6,299 out tokens

Evaluated: 3 days ago
Agent: Claude Code

Table of Contents

Optimize Chat Message List Performance Optimize Product Catalog Filter Performance Optimize Article Feed Initial Load

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.