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.

Quality

75%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

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.md

Evaluation results

100%

Legacy Dashboard Component Modernization

Class to hooks migration

Criteria

Without context

With context

useState for state

100%

useEffect for lifecycle

100%

useEffect dep array

100%

useEffect cleanup

100%

useContext adoption

100%

No static contextType

100%

Custom hook extracted

100%

No HOC pattern

100%

No class components

100%

Functional component exports

100%

E-Commerce Platform Upgrade to React 18

React 18 concurrent features upgrade

Criteria

Without context

With context

createRoot API

100%

No ReactDOM.render

100%

react-dom/client import

100%

useTransition hook

100%

startTransition for results

100%

Urgent update outside transition

100%

isPending indicator

100%

lazy() imports

100%

Suspense with fallback

100%

StrictMode preserved

100%

10%

Analytics Dashboard: Codemod Migration and Rendering Performance

Codemods and performance optimization

Criteria

Without context

With context

Dry run in migrate.sh

100%

Preview output saved

100%

Codemod applied

100%

TypeScript parser flag

100%

Official transform URL

100%

useMemo in DataGrid

100%

useMemo deps correct

100%

useCallback for formatter

100%

useCallback deps correct

100%

React.memo on DataGrid

100%

Repository: Dicklesworthstone/pi_agent_rust
Commit: 47823e3

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Legacy Dashboard Component Modernization E-Commerce Platform Upgrade to React 18 Analytics Dashboard: Codemod Migration and Rendering Performance

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.