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 strong skill description that clearly articulates specific capabilities, includes natural trigger terms, and explicitly states both what the skill does and when to use it. The React-specific terminology and migration focus make it highly distinctive and unlikely to conflict 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 | Clearly scoped to React migration and upgrading specifically, with distinct triggers like 'class components to hooks', 'concurrent features', and 'React versions' that are unlikely to conflict with general JavaScript 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 documentation page transplanted into a SKILL.md. 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 extensively and packs multiple distinct topics (hooks migration, React 18 features, TypeScript, performance, codemods) into one monolithic file. The workflow lacks validation checkpoints critical for a migration process that can break applications.
Suggestions
Reduce content by 60-70%: remove full before/after class component examples (Claude knows React) and replace with concise transformation patterns or diffs showing only the key changes.
Split into separate files: create HOOKS_MIGRATION.md, REACT18_UPGRADE.md, TYPESCRIPT.md, and CODEMODS.md, with SKILL.md serving as a concise overview with links.
Add explicit validation steps to the workflow: e.g., 'Run tests after each component migration', 'Verify build compiles after codemod', 'Check for runtime warnings in StrictMode' — especially after codemod runs which can produce broken output.
Remove explanatory content about what React features do (automatic batching explanation, what Suspense is) and focus only on the specific migration steps and gotchas 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 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 at the end 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 beyond headers. | 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
27a7ed9
- 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.