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.

81

1.03x
Quality

71%

Does it follow best practices?

Impact

97%

1.03x

Average score across 3 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./plugins/framework-migration/skills/react-modernization/SKILL.md
SKILL.md
Quality
Evals
Security

Evaluation results

92%

8%

Dashboard Component Modernization

Class to hooks migration with lifecycle cleanup and custom hooks

Criteria
Without context
With context

useState for state

100%

100%

useEffect for lifecycle

100%

100%

useEffect cleanup function

100%

100%

useEffect dependency array

100%

100%

useContext replaces HOC

100%

100%

Custom hook replaces HOC

100%

100%

useMemo for expensive calc

100%

100%

useCallback for handler

0%

100%

React.memo on list component

0%

0%

No class components

100%

100%

ActivityFeed cleanup

100%

100%

100%

React 18 Feature Adoption for E-Commerce Search

React 18 upgrade with createRoot, useTransition, and lazy Suspense

Criteria
Without context
With context

createRoot import

100%

100%

createRoot usage

100%

100%

No ReactDOM.render

100%

100%

useTransition import

100%

100%

startTransition for results

100%

100%

isPending indicator

100%

100%

lazy() for route components

100%

100%

Suspense wrapper

100%

100%

No eager admin imports

100%

100%

Migration notes accuracy

100%

100%

StrictMode preserved

100%

100%

100%

Automating React Legacy Code Cleanup

Codemod automation with jscodeshift for React migration

Criteria
Without context
With context

jscodeshift used

100%

100%

rename-unsafe-lifecycles transform

100%

100%

update-react-imports transform

100%

100%

TypeScript parser flag

100%

100%

Dry run step

100%

100%

Dry run before apply

100%

100%

src/ directory targeted

100%

100%

Script comments

100%

100%

No manual edits

100%

100%

Repository
wshobson/agents
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

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.