Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
Design & UI
Seth Hobson42k
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
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add wshobson/agents --skill react-modernizationNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use React Modernization
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /react-modernization.
It contains no scripts, only instructions and reference files, so it can't run code on its own.
What the instructions cover
- 1When to Use This Skill
- 2Version Upgrade Path
- 3Class to Hooks Migration
- 4React 18 Concurrent Features
- 5Additional patterns and templates
Section headings from the skill's SKILL.md file.
What's inside · 2 files
- SKILL.md
- references/details.md
More from Seth Hobson
See all →AI Debt Detector
Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when…
AI & AgentsSeth Hobson42k
Airflow Dag Patterns
Build production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. Use when creating data pipelines, orchestrating workflows, or scheduling…
Data & DatabasesSeth Hobson42k
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…
FrontendSeth Hobson42k
More Claude skills for frontend development
See all →Vercel React Best PracticesTop pick
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…
Frontend
Vercel34k
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…
Frontend
Anthropic187k
Vercel Composition Patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…
FrontendVercel34k
Vercel React View Transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…
FrontendVercel34k