Agent Skill
React Modernization skill
react-modernizationwshobson/agentsplugins/framework-migration/skills/react-modernization/SKILL.md
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.
always on
43 tokname + description
once used
1,604 tokSKILL.md body
bundled files
14 KB
repo stars
42kGitHub
Install the React Modernization skill
Skills CLI (Claude Code, Codex, Cursor and others)
npx skills add https://github.com/wshobson/agents --skill react-modernization
Claude Code, by hand (all projects)
git clone --depth 1 https://github.com/wshobson/agents.git /tmp/agents mkdir -p ~/.claude/skills cp -R /tmp/agents/plugins/framework-migration/skills/react-modernization ~/.claude/skills/react-modernization
For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.
What it costs your context
Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.
| When | What loads | Cost |
|---|---|---|
| Every session | Name and description | 43 tok |
| When the agent uses it | The SKILL.md instructions | 1,604 tok |
| Only if opened | 1 bundled files (4 KB) | varies |
Until it is used, react-modernization costs about 32× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 150 skills from wshobson/agents would load 7,688 tokens of descriptions. Skills vs MCP study
Checks
Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.
Checked 2026-10-22 · method
What's inside
The headings of its SKILL.md. Read the full file on GitHub.
- React Modernization
- When to Use This Skill
- Version Upgrade Path
- React 16 → 17 → 18
- Class to Hooks Migration
- State Management
- Lifecycle Methods to Hooks
- Context and HOCs to Hooks
- React 18 Concurrent Features
- New Root API
- Automatic Batching
- Transitions
- Suspense for Data Fetching
- Additional patterns and templates
More skills from wshobson/agents
- typescript-advanced-typeswshobson/agents
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
91k57 tok idle · 1,998 in use - tailwind-design-systemwshobson/agents
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
70k42 tok idle · 1,508 in use - airflow-dag-patternswshobson/agents
Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling batch jobs.
42k42 tok idle · 713 in use - angular-migrationwshobson/agents
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
42k42 tok idle · 1,622 in use - anti-reversing-techniqueswshobson/agents
Understand anti-reversing, obfuscation, and protection techniques encountered during software analysis. Use this skill when analyzing malware evasion techniques, when implementing anti-debugging protections for CTF challenges, when reverse engineering packed binaries, or when building security research tools that need to detect virtualized environments.
42k66 tok idle · 753 in use - api-design-principleswshobson/agents
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.
42k144 tok idle · 762 in use - architecture-decision-recordswshobson/agents
Write and maintain Architecture Decision Records (ADRs) following best practices for technical decision documentation. Use when documenting significant technical decisions, reviewing past architectural choices, or establishing decision processes.
42k41 tok idle · 1,101 in use - architecture-patternswshobson/agents
Implement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use this skill when designing clean architecture for a new microservice, when refactoring a monolith to use bounded contexts, when implementing hexagonal or onion architecture patterns, or when debugging dependency cycles between application layers.
42k65 tok idle · 1,558 in use