CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

76

1.04x
Quality

65%

Does it follow best practices?

Impact

100%

1.04x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./tests/ext_conformance/artifacts/agents-wshobson/framework-migration/skills/react-modernization/SKILL.md

The canonical home for this skill is react-modernization in wshobson/agents

SKILL.md
Quality
Evals
Security

Quality

Content

46%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is highly actionable with concrete commands and code, but it is a bloated monolith that re-teaches React fundamentals Claude already knows while pointing to seven reference files that do not actually exist. Workflow guidance has a sensible sequence yet lacks the validation checkpoints required for batch codemod operations.

Suggestions

Trim the before/after examples of React fundamentals (basic hooks conversion, useMemo/useCallback, generic TypeScript interfaces) and keep only the migration-specific guidance Claude would not generate on its own.

Create the referenced bundle files (references/, assets/, scripts/) or remove the Resources section — every listed path is currently broken, and the inlined checklist/hooks patterns should live in those files instead of SKILL.md.

Add explicit validation checkpoints to the migration workflow, e.g. run codemods with --dry first, review the diff, run the test suite, and fix-and-retry before proceeding, since batch codemod rewrites are risky operations.

DimensionReasoningScore

Conciseness

At ~527 lines, the body extensively demonstrates concepts Claude already knows: a before/after Counter class-to-hooks conversion, basic useMemo/useCallback usage, and a generic TypeScript interface example. Genuinely skill-specific material (codemod commands, version breaking changes, the checklist) is diluted by padding, though not to the point of being wholly redundant, so it sits above the 1 anchor.

2 / 5

Actionability

Concrete, runnable guidance dominates: exact jscodeshift commands with URLs and flags (--dry, --print, --parser=tsx) and complete before/after code. The custom codemod example is stub pseudocode ("// ... transformation logic"), which is the minor gap that keeps it from 5; it is well above 3 because nearly everything is executable.

4 / 5

Workflow Clarity

The Migration Checklist provides a real sequence (pre-migration → class-to-hooks → React 18 → performance → testing), but validation is vague ("Test thoroughly", "Check for warnings in console") with no explicit checkpoints or fix-and-retry loops. Because codemods batch-rewrite an entire src/ tree and the guideline caps workflow clarity at 3 for batch operations lacking validation steps, it cannot score 4; it is above 2 because the sequence itself is coherent and ordered.

3 / 5

Progressive Disclosure

The Resources section lists seven bundle files (references/breaking-changes.md, references/codemods.md, references/hooks-migration.md, references/concurrent-features.md, assets/codemod-config.json, assets/migration-checklist.md, scripts/apply-codemods.sh), yet none of these files exist in the skill bundle — every reference is broken. Meanwhile long-form content that belongs in those files (full hooks-migration patterns, breaking-changes lists, the entire checklist, inlined in a markdown code block) is monolithically inlined in SKILL.md. Not 1 because the document itself has clear section headers and a dedicated, clearly labeled Resources section rather than being unnavigable.

2 / 5

Total

11

/

20

Passed

Description

83%Weight 40%Scale 1-5

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 well-constructed: it states concrete capabilities in third person and pairs them with an explicit 'Use when...' clause containing natural trigger phrases. Its only weakness is modest trigger-term coverage, missing version-specific and synonym phrasing that would push it to full marks.

Suggestions

Add version-specific trigger terms like 'React 18' or 'React 19' and synonyms such as 'class to function components' to broaden natural keyword coverage.

Mention the codemod automation capability in the description since it is a core, differentiating part of the skill.

DimensionReasoningScore

Specificity

"Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features" names three concrete actions in the domain. It falls short of 5 because capabilities the skill actually covers (codemods, TypeScript migration, performance) are absent, and above 3 because more than 1-2 specific actions are listed.

4 / 5

Completeness

Explicitly answers both what ("Upgrade... migrate... adopt concurrent features") and when ("Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions") with concrete trigger phrases, mirroring the anchor-5 example structure. Not 4 because the when-clause is specific rather than generic.

5 / 5

Trigger Term Quality

"modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions" are phrases a user would naturally say. Not 5 because common variations like specific version mentions ("React 18"), "class to function", or "concurrent mode" are missing; not 3 because coverage goes beyond a single generic keyword.

4 / 5

Distinctiveness Conflict Risk

React modernization with hooks-migration triggers carves a clear niche distinct from general React development. Minor overlap risk with a general React or TypeScript-migration skill keeps it below 5; it is clearly above 3 since the triggers ("migrating to React Hooks") would not plausibly fire a wrong skill.

4 / 5

Total

17

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (527 lines); consider splitting into references/ and linking

Warning

referenced_paths_exist

Referenced path issues: 7 missing

Warning

Total

14

/

16

Passed

Repository
Dicklesworthstone/pi_agent_rust
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.