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.

Quality

88%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

77%

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

This is a well-structured, highly actionable skill with clear before/after code examples and explicit validation steps using React DevTools Profiler. Its main weakness is moderate verbosity—some checklist items cover knowledge Claude already has, and the extensive inline examples could be split into a reference file. The workflow and profiling validation sections are strong, providing clear sequencing and feedback loops.

Suggestions

Trim checklist items that cover basic React knowledge Claude already knows (e.g., stable keys, dependency arrays) to improve conciseness.

Consider moving the detailed before/after code examples to a referenced file (e.g., patterns.md) and keeping only the 'isolate ticking state' example inline as the primary illustration.

Dimension	Reasoning	Score
Conciseness	Generally efficient but has some redundancy—the checklist and workflow overlap in places, and the before/after code examples, while valuable, add length. Some items like 'Keys: ensure stable keys; avoid index when order can change' explain things Claude already knows well.	2 / 3
Actionability	Provides fully executable TSX code examples with clear before/after patterns, specific tool instructions (React DevTools Profiler), concrete thresholds (~16ms), and copy-paste ready optimization patterns. The guidance is specific and directly implementable.	3 / 3
Workflow Clarity	The workflow is clearly sequenced (reproduce → identify → isolate → stabilize → reduce → validate), includes an explicit validation step with React DevTools Profiler, and the Profiling Validation Steps section provides a detailed feedback loop (apply one optimization, re-record, compare against baseline).	3 / 3
Progressive Disclosure	The skill has reasonable structure with sections for overview, workflow, checklist, patterns, and profiling. However, the inline code examples are substantial and could be referenced externally. The reference to 'references/examples.md' is good but is the only external reference, and the main file is fairly long.	2 / 3
	Total	10 / 12 Passed

Description

100%

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

This is a strong skill description that clearly defines its scope (React performance optimization), lists specific problem types it addresses, and includes an explicit 'Use when' clause with natural trigger terms. It follows third-person voice conventions and is concise without being vague.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions and issues: 'slow renders, re-render thrash, laggy lists, expensive computations', 'profile or improve a React component, reduce re-renders, speed up UI updates'.	3 / 3
Completeness	Clearly answers both 'what' (analyze and optimize React component performance issues with specific examples) and 'when' (explicit 'Use when...' clause with trigger scenarios like profiling, reducing re-renders, speeding up UI updates).	3 / 3
Trigger Term Quality	Includes strong natural keywords users would say: 'React component', 'slow renders', 're-renders', 'laggy lists', 'profile', 'speed up UI updates', 'performance'. These cover common ways users describe React performance problems.	3 / 3
Distinctiveness Conflict Risk	Narrowly scoped to React performance optimization specifically, which is a clear niche. The combination of 'React' + 'performance' + specific issues like 're-render thrash' and 'laggy lists' makes it highly distinguishable from general React skills or general performance skills.	3 / 3
	Total	12 / 12 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: Dimillian/Skills
Commit: 05ba982

Reviewed: 3 months 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.