react-modernizationUpgrade React apps by migrating class components to hooks, adopting React 18/19 concurrent features, running codemods, and adding TypeScript types.
Install via ClawdBot CLI:
clawdbot install wpank/react-modernizationGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/frontend/react-modernizationAudited Apr 17, 2026 · audit v1.0
Generated Mar 1, 2026
A large financial services company needs to modernize its React 16-based internal dashboard to React 19 to leverage concurrent features for better performance. The app has hundreds of class components that must be migrated to hooks while maintaining business logic and integrating TypeScript for type safety.
An e-commerce site built with React 17 experiences slow page loads during high traffic. The team aims to upgrade to React 18, implement Suspense for code-splitting and data fetching, and refactor HOCs to custom hooks to improve user experience and reduce bounce rates.
A SaaS provider wants to enhance its React 17 application by adopting React 18's useTransition for smoother UI updates during data filtering and search operations. They plan to migrate class components to functional components and use automated codemods for bulk refactoring to minimize downtime.
A healthcare portal built with React 16 and class components requires an upgrade to React 19 to support new features like the use() hook for asynchronous data handling. The migration includes adding TypeScript for better code maintainability and converting lifecycle methods to hooks for improved performance.
A media streaming app uses React 17 with render props and HOCs, leading to complex component hierarchies. The goal is to migrate to React 18, replace render props with custom hooks for state management, and implement Suspense for lazy-loading video components to enhance streaming efficiency.
Offer specialized consulting to enterprises for React modernization projects, including code audits, migration planning, and hands-on refactoring. This model generates revenue through hourly or project-based fees, targeting companies with legacy codebases seeking expert guidance.
Provide training sessions and workshops to development teams on migrating from class components to hooks, adopting concurrent features, and using TypeScript with React. Revenue comes from per-attendee fees or corporate packages, helping teams upskill efficiently.
Develop and sell automated codemods or tools that assist in bulk refactoring of React codebases, such as converting class components to hooks or upgrading between major versions. Revenue is generated through one-time purchases or subscription licenses for continuous updates.
💬 Integration Tip
Start by running automated codemods for simple class-to-hook conversions, then manually refactor complex logic. Integrate TypeScript gradually to avoid breaking changes.
Scored Apr 19, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.