react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
81
71%
Does it follow best practices?
Impact
97%
1.03xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/framework-migration/skills/react-modernization/SKILL.mdQuality
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 clearly defines its scope around React modernization and migration tasks. It uses concrete actions, includes natural trigger terms users would employ, and has an explicit 'Use when' clause. The description is concise yet comprehensive, with a distinct niche that minimizes conflict risk with other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Upgrade React applications to latest versions', 'migrate from class components to hooks', and 'adopt concurrent features'. These are clear, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both 'what' (upgrade React apps, migrate class components to hooks, adopt concurrent features) and 'when' with an explicit 'Use when...' clause covering modernizing codebases, migrating to hooks, or upgrading versions. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'React', 'upgrade', 'class components', 'hooks', 'concurrent features', 'modernizing', 'React Hooks', 'latest React versions'. These cover common variations of how users would phrase such requests. | 3 / 3 |
Distinctiveness Conflict Risk | Highly specific to React migration and upgrading scenarios. The focus on class-to-hooks migration, concurrent features, and version upgrades creates a clear niche that is unlikely to conflict with general React development or other framework skills. | 3 / 3 |
Total | 12 / 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 provides highly actionable, executable code examples covering a broad range of React modernization tasks, which is its primary strength. However, it is excessively verbose, explaining many concepts Claude already knows through lengthy before/after examples that could be condensed to transformation patterns. The lack of progressive disclosure (everything inline, no supporting files) and missing validation checkpoints in the migration workflow significantly weaken its effectiveness as a skill document.
Suggestions
Reduce verbosity by 60-70%: replace full before/after component listings with concise transformation patterns (e.g., 'componentDidMount → useEffect(() => {...}, [])') and only show one complete example per category.
Split content into separate files: move detailed examples to files like HOOKS_MIGRATION.md, CONCURRENT_FEATURES.md, CODEMODS.md, and TYPESCRIPT.md, keeping SKILL.md as a concise overview with links.
Add explicit validation checkpoints to the migration workflow: e.g., 'Run test suite after each component migration', 'Verify no console warnings before proceeding', 'Run codemods with --dry first, review changes, then apply'.
Remove explanations of basic React concepts (what class components are, how setState works) and focus only on transformation rules and gotchas that Claude wouldn't already know.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~350+ lines. Explains basic React concepts Claude already knows (what class components look like, how setState works, what Context is). The before/after examples are exhaustive and could be condensed to patterns/diffs rather than full component listings. Much of this is standard React documentation that doesn't add novel knowledge. | 1 / 3 |
Actionability | The code examples are fully executable and copy-paste ready. Codemod commands are specific with real URLs, the migration patterns show complete before/after transformations, and the TypeScript examples include proper type definitions. Very concrete guidance throughout. | 3 / 3 |
Workflow Clarity | The migration checklist at the end provides a reasonable sequence, and the version upgrade path gives a logical order. However, there are no explicit validation checkpoints or feedback loops — e.g., no 'run tests after each component migration' steps, no 'verify no regressions' gates between phases. For a destructive/batch operation like codebase migration, this is a gap. | 2 / 3 |
Progressive Disclosure | Monolithic wall of content with no references to external files. Everything is inline — the codemod reference, TypeScript migration, performance optimization, and detailed before/after examples could all be split into separate files. No bundle files exist to support progressive disclosure, and the skill doesn't attempt any layering. | 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
- wshobson/agents
- Commit
34632bc
- 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.