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.
79
75%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./tests/ext_conformance/artifacts/agents-wshobson/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 specifies concrete actions, includes natural trigger terms users would use, 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
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is highly actionable with excellent, executable code examples covering the full React modernization journey. However, it is far too verbose — most of the content covers patterns Claude already knows well (class components, hooks, useEffect, React.memo), making it a poor use of context window. The workflow could benefit from explicit validation steps and error recovery, and the content should be restructured with most examples moved to reference files.
Suggestions
Drastically reduce inline code examples — Claude already knows React hooks patterns, lifecycle-to-useEffect conversions, and TypeScript basics. Keep only project-specific conventions or non-obvious patterns.
Move detailed before/after migration examples to reference files (e.g., references/hooks-migration.md) and keep SKILL.md as a concise overview with links.
Add explicit validation checkpoints to the workflow: e.g., 'Run test suite after each component migration', 'After codemod: review diff, run linter, run tests before committing'.
Add error recovery guidance for codemods: what to do when a codemod partially fails, how to revert, how to handle files it can't transform.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ lines, with extensive before/after code examples that Claude already knows how to produce. The class-to-hooks migration patterns, lifecycle-to-useEffect conversions, and basic React 18 features are well-documented knowledge that Claude possesses. Much of this is tutorial-level content that doesn't add novel information. | 1 / 3 |
Actionability | The skill provides fully executable, copy-paste ready code examples throughout — from class-to-hooks conversions, to codemod CLI commands with specific URLs, to TypeScript migration patterns. The codemod section includes concrete bash commands with dry-run options. | 3 / 3 |
Workflow Clarity | The migration checklist provides a reasonable sequence, and the version upgrade path is outlined. However, there are no explicit validation checkpoints or feedback loops — e.g., no 'run tests after each component migration' step integrated into the workflow, no 'if codemod fails, do X' recovery guidance. For a destructive/batch operation like codemod application, this is a gap. | 2 / 3 |
Progressive Disclosure | The Resources section references several external files (breaking-changes.md, codemods.md, etc.) which is good, but the main skill file itself is a monolithic wall of content that should have been split. The inline code examples for class-to-hooks, concurrent features, and TypeScript migration could each be in separate reference files, with the SKILL.md serving as a concise overview. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (527 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- Dicklesworthstone/pi_agent_rust
- Commit
6e3d68c
- 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.