react-best-practices
Client-side React performance optimization patterns.
36
32%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./frontend/.claude/skills/react-best-practices/SKILL.mdQuality
Discovery
22%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description is too terse and vague to effectively guide skill selection. It names the domain (React performance) but fails to list specific actions or techniques, and entirely lacks a 'Use when...' clause to help Claude know when to select this skill. It needs significantly more detail on both capabilities and trigger conditions.
Suggestions
Add specific concrete actions, e.g., 'Applies memoization with React.memo/useMemo/useCallback, implements code splitting with React.lazy, optimizes re-renders, virtualizes long lists.'
Add an explicit 'Use when...' clause, e.g., 'Use when the user mentions slow React rendering, unnecessary re-renders, React performance issues, or asks about memoization, virtualization, or bundle optimization.'
Include natural trigger terms users would say, such as 'slow rendering', 're-renders', 'useMemo', 'React.memo', 'lazy loading', 'bundle size', 'profiling'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names a domain ('React performance optimization') but lists no concrete actions. It doesn't specify what patterns are covered—e.g., memoization, lazy loading, virtualization, code splitting. 'Patterns' is vague. | 1 / 3 |
Completeness | The description weakly addresses 'what' (performance optimization patterns) and completely omits 'when' — there is no 'Use when...' clause or equivalent trigger guidance. Per the rubric, a missing 'Use when' clause caps completeness at 2, and the 'what' is also weak, so this scores a 1. | 1 / 3 |
Trigger Term Quality | It includes some relevant keywords like 'React', 'performance', and 'optimization' that users might naturally say, but misses common variations like 'slow rendering', 're-renders', 'memoization', 'useMemo', 'React.memo', 'lazy loading', or 'bundle size'. | 2 / 3 |
Distinctiveness Conflict Risk | Specifying 'client-side React' narrows the scope somewhat, distinguishing it from general performance or server-side optimization skills. However, it could still overlap with general React skills or broader frontend performance skills. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill is impressively concise and well-organized as a reference index, but it fails as a standalone skill because it provides no actionable implementation details—no code examples, no concrete commands, and no executable guidance. The rule names suggest a bundle of detailed rule files should exist but none are provided or referenced with paths, making the skill a table of contents without a book.
Suggestions
Add concrete, executable code examples for at least the CRITICAL and HIGH priority rules (e.g., show the correct barrel import pattern vs. the anti-pattern)
Provide explicit file paths or links to detailed rule files (e.g., 'See [rules/bundle-barrel-imports.md](rules/bundle-barrel-imports.md) for details') and include those files in the bundle
Add a brief diagnostic workflow: how to identify performance issues (e.g., React DevTools Profiler commands), apply fixes, and verify improvements
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient. Uses tables to compress 29 rules into scannable format. No unnecessary explanations of React concepts Claude already knows. Every token serves a purpose. | 3 / 3 |
Actionability | The skill provides rule names and brief key points but no executable code, no concrete examples, and no specific implementation patterns. It describes what to do at a high level ('Memoize expensive computations', 'Import from source files') without showing how. These are labels, not instructions. | 1 / 3 |
Workflow Clarity | Rules are well-organized by category and prioritized by impact level (CRITICAL/HIGH/MEDIUM/LOW), which provides implicit sequencing. However, there are no multi-step workflows, no validation checkpoints, and no guidance on how to diagnose or verify performance improvements after applying these patterns. | 2 / 3 |
Progressive Disclosure | The rule names (e.g., 'bundle-barrel-imports') appear to reference detailed rule files, but no bundle files are provided and no links or file paths are given. There's no way to navigate to the actual detailed content for any rule, making this a dead-end reference table. | 1 / 3 |
Total | 7 / 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.
- Repository
- redpanda-data/console
- Commit
02210fa
- 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.