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 specific capabilities (upgrading, migrating class components, adopting concurrent features), includes natural trigger terms users would use, and provides explicit 'Use when' guidance. It is concise, uses third-person voice correctly, and carves out a distinct niche focused on React modernization and migration rather than general React development.
| 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.
This skill is essentially a React migration reference guide that covers many topics comprehensively but inefficiently. While the code examples are high quality and executable, the content is far too verbose for a skill file — it explains concepts Claude already knows and packs multiple distinct topics into one monolithic document. The workflow lacks validation checkpoints critical for migration operations.
Suggestions
Reduce content by 60-70%: remove full before/after class component examples (Claude knows these patterns) and replace with concise transformation rules like 'componentDidMount + componentDidUpdate(prevProps.x) + componentWillUnmount → useEffect with cleanup and [x] dependency'
Split into separate files: create HOOKS_MIGRATION.md, REACT_18_UPGRADE.md, CODEMODS.md, and TYPESCRIPT_MIGRATION.md, with SKILL.md serving as a concise overview with links
Add explicit validation checkpoints to the migration workflow: 'After each component migration, run tests and verify no console warnings before proceeding to the next component'
Add error recovery guidance for codemods: 'Always run with --dry --print first, review output, then apply; if codemod produces errors, revert with git checkout and migrate manually'
| 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 implementations. Much of this is standard React documentation. | 1 / 3 |
Actionability | Code examples are fully executable and copy-paste ready. Codemod commands are specific with actual URLs. The class-to-hooks migration examples show complete before/after transformations with real, runnable code. | 3 / 3 |
Workflow Clarity | The migration checklist provides a reasonable sequence, and the version upgrade path is listed. However, there are no explicit validation checkpoints or feedback loops — e.g., no 'run tests after each component migration' steps, no 'verify the build compiles' between steps, no error recovery guidance for when codemods produce broken output. | 2 / 3 |
Progressive Disclosure | Monolithic wall of content with no references to external files. Everything is inline — the TypeScript migration, performance optimization, codemods, and concurrent features could each be separate referenced documents. The skill tries to cover too many topics in a single file with no navigation structure. | 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
91fe43e
- 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.