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.

Install with Tessl CLI

npx tessl i github:Dicklesworthstone/pi_agent_rust --skill react-modernization

What are skills?

Review — 92%

Does it follow best practices?

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

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%

Without context: $0.7985 · 21m 17s · 29 turns · 161 in / 12,977 out tokens

With context: $0.6594 · 7m 48s · 27 turns · 469 in / 8,791 out tokens

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%

Without context: $0.2482 · 9m 8s · 11 turns · 89 in / 3,458 out tokens

With context: $0.6544 · 12m 44s · 28 turns · 483 in / 7,005 out tokens

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%

Without context: $0.3123 · 10m · 14 turns · 105 in / 4,513 out tokens

With context: $0.4950 · 10m 28s · 22 turns · 153 in / 5,083 out tokens

Evaluated: about 15 hours ago
Agent: Claude Code

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.