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-performance89
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/skillValidation for skill structure
Discovery
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 well-crafted skill description that excels across all dimensions. It provides specific concrete actions, uses natural developer terminology, includes an explicit 'Use when' clause with multiple trigger scenarios, and carves out a distinct niche within React development focused specifically on performance optimization.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Analyze and optimize', with specific problem types: 'slow renders, re-render thrash, laggy lists, expensive computations'. Uses third person voice correctly. | 3 / 3 |
Completeness | Clearly answers both what ('Analyze and optimize React component performance issues') AND when ('Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates'). Explicit 'Use when' clause with multiple trigger scenarios. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'React component', 'performance', 'slow renders', 're-renders', 'profile', 'speed up', 'UI updates', 'laggy lists'. These match how developers naturally describe React performance problems. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on React performance optimization. Distinct from general React development, general performance optimization, or other framework skills. The specific problem types (re-render thrash, laggy lists) create clear boundaries. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is well-organized and concise, respecting Claude's intelligence about React fundamentals. The main weakness is the lack of concrete, executable code examples—the patterns section describes what to do but doesn't show how with actual code snippets. The workflow is clear but could benefit from explicit validation checkpoints.
Suggestions
Add 1-2 executable code examples showing before/after for common patterns like isolating ticking state or memoizing list rows
Include a concrete profiling validation step (e.g., 'If render time > X ms after changes, revisit step 3')
Show a minimal code snippet for the 'split rows into memoized components' pattern since it's a core optimization
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, assuming Claude's competence with React. No unnecessary explanations of what React is or how memoization works conceptually—just actionable guidance. | 3 / 3 |
Actionability | Provides good conceptual guidance and patterns but lacks executable code examples. Mentions techniques like `useCallback`, `useMemo`, and `memo` without showing concrete implementation snippets that are copy-paste ready. | 2 / 3 |
Workflow Clarity | The 6-step workflow is clearly sequenced and includes validation (step 6), but lacks explicit checkpoints or feedback loops for error recovery. The checklist is comprehensive but doesn't specify what to do if profiling shows no improvement. | 2 / 3 |
Progressive Disclosure | Well-structured with clear sections (Overview, Workflow, Checklist, Patterns) and appropriately references external examples file for detailed refactor examples. Navigation is clear and one level deep. | 3 / 3 |
Total | 10 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- 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.